/* ============================================================ VARIABLES */
:root {
    --color-primary:    #6C63FF;
    --color-secondary:  #FF6584;
    --color-bg:         #F5F5F5;
    --color-white:      #ffffff;
    --color-dark:       #2D2D3A;
    --color-gray:       #8D8D9A;
    --color-light-gray: #E8E8F0;
    --sidebar-width:    260px;
    --topbar-h:         54px;
    --bottom-nav-h:     62px;
    --shadow:           0 2px 12px rgba(108,99,255,.10);
    --shadow-hover:     0 6px 24px rgba(108,99,255,.18);
    --radius:           12px;
    --radius-sm:        8px;
    --tr:               all .25s ease;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--color-bg);color:var(--color-dark);min-height:100vh;overflow-x:hidden}
a{text-decoration:none;color:inherit}

/* ============================================================ LAYOUT */
.app-wrapper{display:flex;min-height:100vh}

/* ============================================================ SIDEBAR */
.sidebar{width:var(--sidebar-width);background:var(--color-dark);display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:200;transition:var(--tr);overflow:hidden}
.sidebar.collapsed{width:70px}
.sidebar.collapsed .sidebar-header h2,.sidebar.collapsed .nav-item span,.sidebar.collapsed .user-info span{display:none}
.sidebar-header{padding:18px 14px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,.1);min-height:74px;flex-shrink:0}
.sidebar-logo{width:40px;height:40px;border-radius:9px;object-fit:cover;flex-shrink:0}
.sidebar-logo-placeholder{width:40px;height:40px;border-radius:9px;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));display:flex;align-items:center;justify-content:center;color:white;font-size:18px;flex-shrink:0}
.sidebar-header h2{color:white;font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-nav{flex:1;padding:8px 0;overflow-y:auto}
.nav-item{display:flex;align-items:center;gap:14px;padding:13px 18px;color:rgba(255,255,255,.65);transition:var(--tr);font-size:14px;white-space:nowrap;border-left:3px solid transparent}
.nav-item:hover,.nav-item.active{color:white;background:rgba(255,255,255,.08);border-left-color:var(--color-primary)}
.nav-item i{width:20px;text-align:center;font-size:16px;flex-shrink:0}
.sidebar-footer{padding:12px 14px;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0}
.user-info{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.8);font-size:13px;overflow:hidden;min-width:0}
.user-info i{font-size:22px;color:var(--color-primary);flex-shrink:0}
.user-info span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn-logout{color:rgba(255,255,255,.5);font-size:18px;padding:7px;border-radius:6px;transition:var(--tr);flex-shrink:0;background:none;border:none;cursor:pointer;display:flex;align-items:center}
.btn-logout:hover{color:var(--color-secondary);background:rgba(255,255,255,.08)}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:190;backdrop-filter:blur(2px)}
.sidebar-overlay.active{display:block}

/* ============================================================ MAIN */
.main-content{margin-left:var(--sidebar-width);flex:1;transition:var(--tr);min-height:100vh;display:flex;flex-direction:column}
.main-content.expanded{margin-left:70px}

/* ============================================================ TOPBAR */
.topbar{background:white;padding:0 18px;height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 8px rgba(0,0,0,.06);position:sticky;top:0;z-index:100;flex-shrink:0}
.btn-toggle-sidebar{background:none;border:none;font-size:20px;cursor:pointer;color:var(--color-gray);padding:7px;border-radius:7px;display:flex;align-items:center;transition:var(--tr)}
.btn-toggle-sidebar:hover{color:var(--color-primary);background:var(--color-bg)}
.topbar-date{font-size:13px;color:var(--color-gray)}
.page-content{padding:18px;flex:1}

/* ============================================================ CARDS */
.card{background:white;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;transition:var(--tr)}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px}
.card-title{font-size:15px;font-weight:600}

/* ============================================================ STATS */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:18px}
.stat-card{background:white;border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);display:flex;align-items:center;gap:14px;transition:var(--tr)}
.stat-icon{width:48px;height:48px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;color:white;flex-shrink:0}
.stat-icon.primary{background:linear-gradient(135deg,var(--color-primary),#9c95ff)}
.stat-icon.secondary{background:linear-gradient(135deg,var(--color-secondary),#ff8fa3)}
.stat-icon.success{background:linear-gradient(135deg,#43d9a4,#25c0a0)}
.stat-icon.warning{background:linear-gradient(135deg,#FFB347,#ff9500)}
.stat-info .stat-value{font-size:22px;font-weight:700;line-height:1}
.stat-info .stat-label{font-size:11px;color:var(--color-gray);margin-top:3px}

/* ============================================================ GRIDS */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* ============================================================ FORMS */
.form-group{margin-bottom:13px}
.form-label{display:block;font-size:13px;font-weight:600;color:var(--color-dark);margin-bottom:5px}
.form-control{width:100%;padding:10px 13px;border:2px solid var(--color-light-gray);border-radius:var(--radius-sm);font-size:15px;color:var(--color-dark);transition:var(--tr);outline:none;background:white;-webkit-appearance:none;appearance:none}
.form-control:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(108,99,255,.12)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}

/* ============================================================ BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 16px;border:none;border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer;transition:var(--tr);touch-action:manipulation;-webkit-tap-highlight-color:transparent;white-space:nowrap;font-family:inherit}
.btn-primary{background:var(--color-primary);color:white}
.btn-primary:hover{background:#5a54d4}
.btn-secondary{background:var(--color-secondary);color:white}
.btn-secondary:hover{background:#e0557a}
.btn-success{background:#43d9a4;color:white}
.btn-success:hover{background:#30c090}
.btn-danger{background:#ef4444;color:white}
.btn-danger:hover{background:#dc2626}
.btn-outline{background:transparent;border:2px solid var(--color-primary);color:var(--color-primary)}
.btn-outline:hover{background:var(--color-primary);color:white}
.btn-sm{padding:6px 11px;font-size:12px}
.btn-icon{padding:0;width:34px;height:34px;border-radius:var(--radius-sm)}

/* ============================================================ BADGES */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
.badge-activo{background:#d1fae5;color:#065f46}
.badge-completado{background:#e0e7ff;color:#3730a3}
.badge-cancelado{background:#fee2e2;color:#991b1b}
.badge-vencido{background:#fee2e2;color:#991b1b;animation:pulse-red 1s infinite}
.badge-por-vencer{background:#fef3c7;color:#92400e;animation:pulse-yellow 1.5s infinite}
@keyframes pulse-red{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes pulse-yellow{0%,100%{opacity:1}50%{opacity:.65}}

/* ============================================================ MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:1000;align-items:flex-end;justify-content:center}
.modal-overlay.active{display:flex}
.modal{background:white;border-radius:var(--radius) var(--radius) 0 0;padding:20px 18px 30px;width:100%;max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch;animation:slideUp .3s ease}
.modal::before{content:'';display:block;width:38px;height:4px;background:var(--color-light-gray);border-radius:2px;margin:0 auto 18px}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.modal-title{font-size:17px;font-weight:700}
.modal-close{background:var(--color-bg);border:none;font-size:15px;cursor:pointer;color:var(--color-gray);width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.modal-footer{display:flex;gap:9px;justify-content:flex-end;margin-top:18px}
@media(min-width:600px){
    .modal-overlay{align-items:center;padding:16px}
    .modal{border-radius:var(--radius);max-width:500px;padding:26px}
    .modal-lg{max-width:660px}
    .modal::before{display:none}
    .modal-footer{flex-direction:row}
    .modal-footer .btn{flex:none;min-width:120px}
}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* ============================================================ ALERTS */
.alert{padding:11px 14px;border-radius:var(--radius-sm);margin-bottom:12px;font-size:14px;display:flex;align-items:flex-start;gap:9px;line-height:1.4}
.alert i{margin-top:1px;flex-shrink:0}
.alert-success{background:#d1fae5;color:#065f46;border-left:4px solid #10b981}
.alert-error{background:#fee2e2;color:#991b1b;border-left:4px solid #ef4444}
.alert-warning{background:#fef3c7;color:#92400e;border-left:4px solid #f59e0b}
.alert-info{background:#e0e7ff;color:#3730a3;border-left:4px solid var(--color-primary)}

/* ============================================================ TIMER */
.timer-display{font-size:17px;font-weight:700;padding:6px 11px;border-radius:var(--radius-sm);background:var(--color-bg);display:inline-block;font-variant-numeric:tabular-nums;min-width:64px;text-align:center}
.timer-display.warning{background:#fef3c7;color:#92400e}
.timer-display.danger{background:#fee2e2;color:#991b1b}
.progress-bar{height:5px;background:var(--color-light-gray);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;border-radius:3px;transition:width 1s linear}

/* ============================================================ LOGIN */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-dark),#3d3d5c);padding:20px}
.login-box{background:white;border-radius:var(--radius);padding:34px 26px;width:100%;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.login-logo{text-align:center;margin-bottom:22px}
.login-logo .login-icon{width:66px;height:66px;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:28px;color:white;margin:0 auto 10px}
.login-logo h1{font-size:19px;font-weight:700}
.login-logo p{font-size:13px;color:var(--color-gray)}

/* ============================================================ SERVICIO CARDS */
.servicio-card{border:2px solid transparent;border-radius:var(--radius);padding:13px 10px;cursor:pointer;transition:var(--tr);text-align:center;touch-action:manipulation}
.servicio-card:active{transform:scale(.97)}
.servicio-card.selected{border-color:var(--color-primary);background:rgba(108,99,255,.06)}
.servicio-card .servicio-icon{font-size:30px;margin-bottom:7px}
.servicio-card .servicio-nombre{font-weight:600;font-size:13px}
.servicio-card .servicio-info{font-size:11px;color:var(--color-gray);margin-top:3px}

/* ============================================================ RADIO */
.radio-group{display:flex;gap:10px}
.radio-option{display:flex;align-items:center;gap:8px;cursor:pointer;padding:10px 14px;border:2px solid var(--color-light-gray);border-radius:var(--radius-sm);flex:1;transition:var(--tr);touch-action:manipulation;font-size:15px}
.radio-option input{display:none}
.radio-option.selected{border-color:var(--color-primary);background:rgba(108,99,255,.05)}
.radio-option .radio-icon{font-size:19px}

/* ============================================================ COLOR PICKER */
.color-input-group{display:flex;align-items:center;gap:10px}
.color-input-group input[type="color"]{width:44px;height:38px;border:none;border-radius:6px;cursor:pointer;padding:2px;flex-shrink:0}
.color-input-group input[type="text"]{flex:1}

/* ============================================================ FILTROS */
.filtros-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.filtro-item{flex:1;min-width:130px}
.filtro-buscar{flex:2;min-width:160px}
.filtro-btns{display:flex;gap:8px;align-self:flex-end}

/* ============================================================ VISTAS */
.vista-movil{display:none}
.vista-escritorio{display:block}

/* ============================================================ BOTTOM NAV */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:var(--bottom-nav-h);background:var(--color-dark);z-index:300;box-shadow:0 -3px 16px rgba(0,0,0,.2);padding-bottom:env(safe-area-inset-bottom)}
.bottom-nav-inner{display:flex;height:100%;align-items:stretch}
.bottom-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:rgba(255,255,255,.5);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;padding:4px 2px;border-radius:9px;transition:var(--tr);touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer;border:none;background:none}
.bottom-nav-item i{font-size:18px}
.bottom-nav-item.active,.bottom-nav-item:active{color:var(--color-primary);background:rgba(108,99,255,.12)}

/* ============================================================ SCROLLBAR */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--color-light-gray);border-radius:3px}

/* ============================================================ TABLET ≤1024 */
@media(max-width:1024px){.grid-3{grid-template-columns:1fr 1fr}}

/* ============================================================ MOBILE ≤768 */
@media(max-width:768px){
    /* Sidebar */
    .sidebar{transform:translateX(-100%)}
    .sidebar.mobile-open{transform:translateX(0)}
    .main-content{margin-left:0!important}

    /* Espacio bottom nav */
    .page-content{padding:12px;padding-bottom:calc(var(--bottom-nav-h) + 14px + env(safe-area-inset-bottom))}

    /* Bottom nav */
    .bottom-nav{display:flex;flex-direction:column}

    /* Topbar */
    .topbar{padding:0 12px}
    .topbar-date{display:none}

    /* Grids */
    .grid-2,.grid-3{grid-template-columns:1fr}
    .form-row{grid-template-columns:1fr;gap:0}
    .stats-grid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}

    /* Stats compactos */
    .stat-card{padding:12px;gap:10px}
    .stat-icon{width:42px;height:42px;font-size:17px;border-radius:9px}
    .stat-info .stat-value{font-size:18px}
    .stat-info .stat-label{font-size:10px}

    /* Cards */
    .card{padding:13px;border-radius:10px}

    /* Vista tabla/tarjeta */
    .vista-escritorio{display:none}
    .vista-movil{display:block}

    /* Filtros en columna */
    .filtros-row{flex-direction:column;gap:10px}
    .filtro-item,.filtro-buscar{flex:none;width:100%;min-width:unset}
    .filtro-btns{width:100%}
    .filtro-btns .btn{flex:1}

    /* Page header */
    .page-header{flex-direction:column!important;align-items:flex-start!important}
    .page-header>.btn{width:100%;justify-content:center}

    /* Modal */
    .modal-footer{flex-direction:column-reverse}
    .modal-footer .btn{width:100%;flex:none}
}

/* ============================================================ SMALL ≤400 */
@media(max-width:400px){
    .bottom-nav-item span{display:none}
    .bottom-nav-item{gap:0}
    .bottom-nav-item i{font-size:20px}
}

/* ============================================================ SAFE AREA */
@supports(padding:env(safe-area-inset-bottom)){
    .bottom-nav{height:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom))}
}