body{
background-color:#050505;
color:#ffffff;
scrollbar-width:thin;
scrollbar-color:rgba(255,255,255,0.1) transparent;
overflow-y:auto;
overflow-anchor:none;
}
.overflow-x-auto {
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}
.modal-content-container {
    flex: 1;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom);
}
.modal-content-container::-webkit-scrollbar {
    width: 4px;
}
.modal-content-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}
.modal-content-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}
#modalResumenDieta .diet-phase-review{
font-family:"Inter",sans-serif;
color:#fff;
padding:0 12px;
}
#modalResumenDieta .diet-phase-review *{box-sizing:border-box}
#modalResumenDieta .diet-phase-review .phase-title{font-size:22px;font-weight:700;letter-spacing:0;margin-bottom:6px;color:#fff;text-align:center;display:flex;align-items:center;justify-content:center;gap:10px}
#modalResumenDieta .diet-phase-review .phase-desc{font-size:13px;color:rgba(255,255,255,.35);margin-bottom:18px;text-align:center}
#modalResumenDieta .diet-phase-review .phase-icon{display:inline-flex;width:36px;height:36px;border-radius:10px;align-items:center;justify-content:center;font-size:16px;margin-right:10px;flex-shrink:0}
#modalResumenDieta .diet-phase-review .glass-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:1cm;margin-bottom:1cm;position:relative;overflow:hidden;max-width:100%;margin-left:auto;margin-right:auto}
#modalResumenDieta .diet-phase-review .glass-card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
#modalResumenDieta .diet-phase-review .glass-card.green{border-color:rgba(16,185,129,.15);background:rgba(16,185,129,.035)}
#modalResumenDieta .diet-phase-review .glass-card.purple{border-color:rgba(99,102,241,.15);background:rgba(99,102,241,.035)}
#modalResumenDieta .diet-phase-review .glass-card.gold{border-color:rgba(251,191,36,.15);background:rgba(251,191,36,.035)}
#modalResumenDieta .diet-phase-review .glass-card .label{font-size:11px;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:1px;font-weight:500;margin-bottom:4px}
#modalResumenDieta .diet-phase-review .glass-card .value{font-size:22px;font-weight:700;letter-spacing:0;color:#fff}
#modalResumenDieta .diet-phase-review .glass-card .sub{font-size:12px;color:rgba(255,255,255,.4);margin-top:2px}
#modalResumenDieta .diet-phase-review .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#modalResumenDieta .diet-phase-review .macro-row{display:flex;gap:10px;margin:14px 0 10px}
#modalResumenDieta .diet-phase-review .macro-bar-wrap{flex:1;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05);border-radius:10px;padding:12px 14px}
#modalResumenDieta .diet-phase-review .macro-bar-label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.35);font-weight:500;margin-bottom:6px;display:flex;justify-content:space-between;gap:8px}
#modalResumenDieta .diet-phase-review .macro-bar-bg{height:6px;background:rgba(255,255,255,.05);border-radius:3px;overflow:hidden}
#modalResumenDieta .diet-phase-review .macro-bar-fill{height:100%;border-radius:3px;position:relative}
#modalResumenDieta .diet-phase-review .macro-bar-fill::after{content:"";position:absolute;top:0;left:0;right:0;height:50%;background:rgba(255,255,255,.15);border-radius:3px 3px 0 0}
#modalResumenDieta .diet-phase-review .macro-bar-fill.protein{background:linear-gradient(180deg,#818cf8,#6366f1)}
#modalResumenDieta .diet-phase-review .macro-bar-fill.carbs{background:linear-gradient(180deg,#fbbf24,#f59e0b)}
#modalResumenDieta .diet-phase-review .macro-bar-fill.fat{background:linear-gradient(180deg,#f472b6,#ec4899)}
#modalResumenDieta .diet-phase-review .macro-numbers{display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.45);margin-top:4px}
#modalResumenDieta .diet-phase-review .pct-slider-wrap{display:flex;align-items:center;gap:14px;margin:8px 0}
#modalResumenDieta .diet-phase-review .pct-slider-wrap label{font-size:13px;font-weight:500;min-width:60px;color:rgba(255,255,255,.6)}
#modalResumenDieta .diet-phase-review .pct-slider{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.06);appearance:none;pointer-events:none}
#modalResumenDieta .diet-phase-review .pct-slider::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #000;box-shadow:0 2px 8px rgba(0,0,0,.5)}
#modalResumenDieta .diet-phase-review .pct-value{font-size:16px;font-weight:700;min-width:48px;text-align:right}
#modalResumenDieta .diet-phase-review .exchange-table{width:100%;border-collapse:collapse;margin-bottom:10px}
#modalResumenDieta .diet-phase-review .exchange-table th{padding:8px 10px;font-size:9px;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.3);font-weight:500;text-align:left;border-bottom:1px solid rgba(255,255,255,.05)}
#modalResumenDieta .diet-phase-review .exchange-table td{padding:8px 10px;font-size:12px;border-bottom:1px solid rgba(255,255,255,.03);color:rgba(255,255,255,.65)}
#modalResumenDieta .diet-phase-review .exchange-table .group-name{font-weight:500;display:flex;align-items:center;gap:6px}
#modalResumenDieta .diet-phase-review .exchange-table .group-icon{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0}
#modalResumenDieta .diet-phase-review .total-row td{font-weight:700;color:#fff;border-top:2px solid rgba(255,255,255,.08);padding-top:10px;font-size:13px}
#modalResumenDieta .diet-phase-review .day-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-bottom:18px;align-items:start}
#modalResumenDieta .diet-phase-review .day-card{width:320px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:1cm;margin-bottom:1cm;transition:transform .2s ease,box-shadow .2s ease}
#modalResumenDieta .diet-phase-review .day-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
#modalResumenDieta .diet-phase-review .day-card .day-name{font-size:12px;font-weight:600;margin-bottom:6px;display:flex;align-items:center;gap:6px;color:#fff;justify-content:center;text-align:center}
#modalResumenDieta .diet-phase-review .day-card .day-name .dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0}
#modalResumenDieta .diet-phase-review .day-card .exchange-item{display:flex;justify-content:space-between;gap:12px;padding:3px 0;font-size:11px;color:rgba(255,255,255,.55);border-bottom:1px solid rgba(255,255,255,.025)}
#modalResumenDieta .diet-phase-review .day-card .exchange-item:last-child{border-bottom:none}
#modalResumenDieta .diet-phase-review .day-card .exchange-item .qty{font-weight:600;color:rgba(255,255,255,.85)}
#modalResumenDieta .diet-phase-review .phase4-qty-input,#modalResumenDieta .diet-phase-review .diet-readonly-input{width:40px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:4px;color:#fff;text-align:center;font-size:11px;padding:2px 4px;outline:none}
/* Fase 3 capturada: los cuadros de "Establecer intercambios" (.input-styled) y
   el selector de lácteos (.select-styled) usan clases de crear-dieta.html que
   aquí no existían → se veía un rectángulo blanco. Mismo estilo que el creador. */
#modalResumenDieta .diet-phase-review .input-group{position:relative;margin-bottom:4px}
#modalResumenDieta .diet-phase-review .input-styled,#modalResumenDieta .diet-phase-review .select-styled{width:100%;padding:14px 16px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);font-size:15px;color:#fff;outline:none;font-family:'Inter',sans-serif;cursor:default}
#modalResumenDieta .diet-phase-review .input-styled::-webkit-outer-spin-button,#modalResumenDieta .diet-phase-review .input-styled::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;display:none}
#modalResumenDieta .diet-phase-review .input-styled[type=number]{-moz-appearance:textfield}
#modalResumenDieta .diet-phase-review .select-styled{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,.3)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
#modalResumenDieta .diet-phase-review .select-styled option{background:#0a0a0a;color:#fff}
#modalResumenDieta .diet-phase-review .meal-card{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05);border-radius:12px;margin-bottom:1cm;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
#modalResumenDieta .diet-phase-review .meal-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
#modalResumenDieta .diet-phase-review .meal-header{padding:12px 14px;font-weight:600;font-size:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;background:rgba(255,255,255,.02);border-bottom:1px solid rgba(255,255,255,.035);color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none}
#modalResumenDieta .diet-phase-review .meal-body{padding:1cm}
#modalResumenDieta .diet-phase-review .meal-item{display:flex;justify-content:space-between;gap:8px;padding:6px 0;font-size:12px;color:rgba(255,255,255,.65);border-bottom:1px solid rgba(255,255,255,.025)}
#modalResumenDieta .diet-phase-review .meal-item:last-child{border-bottom:none}
#modalResumenDieta .diet-phase-review .summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
#modalResumenDieta .diet-phase-review .summary-card{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:1cm;margin-bottom:1cm;text-align:center;transition:transform .2s ease,box-shadow .2s ease}
#modalResumenDieta .diet-phase-review .summary-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
#modalResumenDieta .diet-phase-review .summary-card .s-label{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.3);font-weight:500;margin-bottom:4px}
#modalResumenDieta .diet-phase-review .summary-card .s-value{font-size:20px;font-weight:700;letter-spacing:0}
#modalResumenDieta .diet-phase-review .summary-card .s-sub{font-size:10px;color:rgba(255,255,255,.35);margin-top:2px}
#modalResumenDieta .diet-phase-review .summary-list{list-style:none;padding:0;margin:0}
#modalResumenDieta .diet-phase-review .summary-list li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.035);font-size:12px;color:rgba(255,255,255,.65)}
#modalResumenDieta .diet-phase-review .summary-list li .s-label{color:rgba(255,255,255,.35)}
#modalResumenDieta .diet-phase-review .summary-list li .s-val{font-weight:600;color:#fff;text-align:right}
#modalResumenDieta .diet-phase-review .proteicos-sub{cursor:pointer;-webkit-user-select:none;user-select:none}
#modalResumenDieta .diet-phase-review .proteicos-sub td{padding-top:4px;padding-bottom:4px}
#modalResumenDieta .diet-phase-review .proteicos-sub .sub-toggle{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:rgba(255,255,255,.35);cursor:pointer;-webkit-user-select:none;user-select:none}
#modalResumenDieta .diet-phase-review .proteicos-sub .sub-toggle i{transition:transform .2s ease}
#modalResumenDieta .diet-phase-review .proteicos-sub.open .sub-toggle i{transform:rotate(180deg)}
#modalResumenDieta .diet-phase-review .proteicos-sub .sub-content{display:none}
#modalResumenDieta .diet-phase-review .proteicos-sub.open .sub-content{display:table-row}
#modalResumenDieta .fase-dot-completa{background:#34d399!important;box-shadow:0 0 0 3px rgba(52,211,153,.08)}
#modalResumenDieta .fase-dot-activa{background:#fff!important;transform:scale(1.35);box-shadow:0 0 0 4px rgba(255,255,255,.08)}
/* ===== ADAPTACIÓN IPHONE/MOBILE PARA MODAL RESUMEN DIETA ===== */
@media (max-width: 640px) {
    /* Grids a una columna */
    #modalResumenDieta .diet-phase-review .form-grid,
    #modalResumenDieta .diet-phase-review .summary-grid {
        grid-template-columns: 1fr;
    }
    
    /* Macro row en columna */
    #modalResumenDieta .diet-phase-review .macro-row {
        flex-direction: column;
    }
    
    /* Tamaño de fuente del título reducido */
    #modalResumenDieta .diet-phase-review .phase-title {
        font-size: 18px;
    }
    
    /* Day cards a ancho completo */
    #modalResumenDieta .diet-phase-review .day-card {
        width: 100%;
    }
    
    /* ===== ESTILOS ESPECÍFICOS IPHONE PARA MODAL ===== */
    
    /* Modal principal - pantalla completa en mobile con Safe Areas */
    #modalResumenDieta {
        position: fixed;
        inset: 0;
        z-index: 160;
        align-items: flex-end;
        justify-content: center;
        padding: 0;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    
    #modalResumenDieta > div:first-child {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(24px);
    }
    
    /* Contenedor del modal - fullscreen en mobile con Safe Areas */
    #modalResumenDieta > div:last-child {
        position: relative;
        width: 100%;
        max-width: 100%;
        background: #0a0a0a;
        border: none;
        border-radius: 0;
        box-shadow: none;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: 100%;
        max-height: 100%;
        min-height: 100%;
    }
    
    /* Header compacto para mobile con Safe Area */
    #modalResumenDieta header {
        padding: 12px 16px;
        padding-top: max(12px, env(safe-area-inset-top));
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: rgba(255, 255, 255, 0.03);
        flex-shrink: 0;
    }
    
    #modalResumenDieta header h2 {
        font-size: 13px;
    }
    
    #modalResumenDieta header p {
        font-size: 8px;
    }
    
    /* Progress bar compacta con Safe Area */
    #modalResumenDieta .progress-container {
        padding: 10px 16px 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        flex-shrink: 0;
    }
    
    #modalResumenDieta .progress-label {
        font-size: 10px;
    }
    
    /* PESTAÑAS DE FASES - DISEÑO HORIZONTAL SCROLLABLE */
    #modalResumenDieta .phase-tabs {
        padding: 10px 12px;
        width: 100%;
        max-width: 100%;
        /* Mismo aire que en escritorio entre las pestañas y el título de la
           fase (antes quedaban pegadas: margin 0). */
        margin: 0 0 22px;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-shrink: 0;
        gap: 6px;
        scroll-behavior: smooth;
    }
    
    #modalResumenDieta .phase-tabs::-webkit-scrollbar {
        display: none;
    }
    
    #modalResumenDieta .phase-tab {
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 9px;
        font-weight: 500;
        flex: 0 0 auto;
        min-width: auto;
        white-space: nowrap;
        line-height: 1.3;
        gap: 4px;
    }
    
    #modalResumenDieta .phase-tab .tab-number {
        width: 18px;
        height: 18px;
        font-size: 9px;
    }
    
    #modalResumenDieta .phase-tab .tab-icon {
        width: 18px;
        height: 18px;
        font-size: 8px;
    }
    
    /* OCULTAR TEXTO DESCRIPTIVO EN MOBILE - SOLO MOSTRAR NÚMERO */
    #modalResumenDieta .phase-tab span:not(.tab-number):not(.tab-icon) {
        display: none !important;
    }
    
    /* Asegurar que las pestañas se centren y muestren solo el número en mobile */
    #modalResumenDieta .phase-tab {
        justify-content: center;
        min-width: 40px;
        padding: 8px 10px;
    }
    
    /* Contenedor de contenido con scroll */
    #modalResumenDieta .modal-content-container {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 16px;
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        padding-bottom: 16px;
    }
    
    /* Footer compacto */
    #modalResumenDieta footer {
        padding: 12px 16px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        background: rgba(0, 0, 0, 0.3);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }
    
    #modalResumenDieta footer button {
        padding: 10px 14px;
        font-size: 9px;
    }
    
    /* ===== ADAPTACIÓN DE TARJETAS Y CONTENIDO ===== */
    
    /* Glass cards con padding reducido */
    #modalResumenDieta .diet-phase-review .glass-card {
        padding: 14px;
        margin-bottom: 10px;
        max-width: 100%;
    }
    
    /* Tamaños de fuente reducidos */
    #modalResumenDieta .diet-phase-review .glass-card .label {
        font-size: 9px;
    }
    
    #modalResumenDieta .diet-phase-review .glass-card .value {
        font-size: 18px;
    }
    
    #modalResumenDieta .diet-phase-review .glass-card .sub {
        font-size: 10px;
    }
    
    /* Phase description */
    #modalResumenDieta .diet-phase-review .phase-desc {
        font-size: 11px;
        margin-bottom: 12px;
    }
    
    /* Macro bars */
    #modalResumenDieta .diet-phase-review .macro-bar-wrap {
        padding: 10px 12px;
    }
    
    #modalResumenDieta .diet-phase-review .macro-bar-label {
        font-size: 9px;
    }
    
    #modalResumenDieta .diet-phase-review .macro-numbers {
        font-size: 10px;
    }
    
    /* Sliders */
    #modalResumenDieta .diet-phase-review .pct-slider-wrap {
        gap: 10px;
        margin: 6px 0;
    }
    
    #modalResumenDieta .diet-phase-review .pct-slider-wrap label {
        font-size: 11px;
        min-width: 50px;
    }
    
    #modalResumenDieta .diet-phase-review .pct-value {
        font-size: 14px;
        min-width: 40px;
    }
    
    /* Tabla de intercambios */
    #modalResumenDieta .diet-phase-review .exchange-table th {
        padding: 6px 8px;
        font-size: 8px;
    }
    
    #modalResumenDieta .diet-phase-review .exchange-table td {
        padding: 6px 8px;
        font-size: 11px;
    }
    
    /* Day cards */
    #modalResumenDieta .diet-phase-review .day-card {
        padding: 12px;
        margin-bottom: 10px;
    }
    
    #modalResumenDieta .diet-phase-review .day-card .day-name {
        font-size: 11px;
    }
    
    #modalResumenDieta .diet-phase-review .day-card .exchange-item {
        font-size: 10px;
    }
    
    /* Meal cards */
    #modalResumenDieta .diet-phase-review .meal-card {
        margin-bottom: 10px;
    }
    
    #modalResumenDieta .diet-phase-review .meal-header {
        padding: 10px 12px;
        font-size: 11px;
    }
    
    #modalResumenDieta .diet-phase-review .meal-body {
        padding: 10px 12px;
    }
    
    #modalResumenDieta .diet-phase-review .meal-item {
        font-size: 11px;
    }
    
    /* Summary cards */
    #modalResumenDieta .diet-phase-review .summary-card {
        padding: 12px;
        margin-bottom: 10px;
    }
    
    #modalResumenDieta .diet-phase-review .summary-card .s-label {
        font-size: 8px;
    }
    
    #modalResumenDieta .diet-phase-review .summary-card .s-value {
        font-size: 16px;
    }
    
    #modalResumenDieta .diet-phase-review .summary-card .s-sub {
        font-size: 9px;
    }
    
    /* Summary list */
    #modalResumenDieta .diet-phase-review .summary-list li {
        font-size: 11px;
        padding: 6px 0;
    }
    
    /* Inputs readonly */
    #modalResumenDieta .diet-phase-review .phase4-qty-input,
    #modalResumenDieta .diet-phase-review .diet-readonly-input {
        width: 36px;
        font-size: 10px;
        padding: 2px 3px;
    }
    
    /* Icono de fase */
    #modalResumenDieta .diet-phase-review .phase-icon {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        font-size: 14px;
        margin-right: 8px;
    }
    
    /* Título de fase */
    #modalResumenDieta .diet-phase-review .phase-title {
        font-size: 16px;
        margin-bottom: 4px;
    }
    
    /* Grid de días */
    #modalResumenDieta .diet-phase-review .day-grid {
        gap: 10px;
        margin-bottom: 12px;
    }
    
    /* Form grid */
    #modalResumenDieta .diet-phase-review .form-grid {
        gap: 8px;
    }
    
    /* Macro row */
    #modalResumenDieta .diet-phase-review .macro-row {
        gap: 8px;
        margin: 10px 0 8px;
    }
    
    /* Contenedor de contenido */
    #modalResumenDieta .diet-phase-review {
        padding: 0;
    }
    
    /* Asegurar que no haya overflow horizontal */
    #modalResumenDieta .diet-phase-review * {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Tablas con scroll horizontal */
    #modalResumenDieta .diet-phase-review .exchange-table {
        font-size: 10px;
    }
    
    /* Botones de modo */
    #modalResumenDieta .diet-phase-review button[style*="cursor:default"] {
        padding: 5px 10px;
        font-size: 10px;
    }
    
    /* Justificación cards */
    #modalResumenDieta .diet-phase-review .glass-card[style*="border-color: rgba(239, 68, 68"] {
        padding: 12px;
    }
    
    #modalResumenDieta .diet-phase-review .glass-card[style*="border-color: rgba(239, 68, 68"] div[style*="font-size: 13px"] {
        font-size: 11px;
    }
    
    /* Phase sub */
    #modalResumenDieta .phase-sub {
        font-size: 11px;
        margin-bottom: 8px;
    }
}
/* Phase Tabs and Progress Bar styles from crear-dieta.html */
#modalResumenDieta .progress-container{padding:8px 24px 0;width:100%;max-width:800px;margin:0 auto}
#modalResumenDieta .progress-bar-bg{width:100%;height:4px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden}
#modalResumenDieta .progress-bar-fill{height:100%;background:linear-gradient(90deg,#6366f1,#818cf8,#c6c6c6,#ffffff);border-radius:2px;transition:width .6s cubic-bezier(.4,0,.2,1);width:0%;background-size:200% 100%;animation:progressShimmer 3s ease-in-out infinite}
@keyframes progressShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
#modalResumenDieta .progress-label{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;color:rgba(255,255,255,.3)}
#modalResumenDieta .phase-tabs{display:flex;gap:4px;padding:12px 24px 0;width:100%;max-width:800px;margin:0 auto 30px;flex-wrap:wrap}
/* Aire entre la fila de las 6 fases (los 6 cuadros con Resumen del paciente,
   TMB + GET + Macros, Conversión a intercambios…) y el TÍTULO de la fase
   abierta: estaban demasiado pegados. Se separa por los dos lados (margen
   inferior de las pestañas + relleno superior del contenido) = ~54px. */
#modalResumenDieta #contenidoFaseDieta{padding-top:24px;margin-top:0}
#modalResumenDieta .phase-tab{padding:8px 10px;border-radius:8px;font-size:10px;font-weight:500;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);color:rgba(255,255,255,.3);display:flex;align-items:center;gap:5px;font-family:'Inter',sans-serif;user-select:none;flex:1;justify-content:center;min-width:0;text-align:center;line-height:1.2;position:relative;overflow:hidden}
#modalResumenDieta .phase-tab::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.02));opacity:0;transition:opacity .4s}
#modalResumenDieta .phase-tab:hover::before{opacity:1}
#modalResumenDieta .phase-tab:hover{border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.55)}
#modalResumenDieta .phase-tab.active{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:#fff;box-shadow:0 0 30px rgba(255,255,255,.04)}
#modalResumenDieta .phase-tab .tab-number{width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;flex-shrink:0;transition:all .4s}
#modalResumenDieta .phase-tab .tab-icon{display:none;width:18px;height:18px;border-radius:50%;background:rgba(16,185,129,.15);color:#34d399;align-items:center;justify-content:center;font-size:8px;flex-shrink:0}
#modalResumenDieta .phase-tab.active .tab-number{background:rgba(255,255,255,.15)}
#modalResumenDieta .phase-tab.done .tab-number{display:none}
#modalResumenDieta .phase-tab.done .tab-icon{display:flex}
#modalResumenDieta .phase-tab.done{color:rgba(255,255,255,.45)}
#modalResumenDieta .phase-tab.done:hover{color:rgba(255,255,255,.6)}
#modalResumenDieta .phase-tab.done.active{color:#fff}
#modalResumenDieta .phase-tab.done.active .tab-icon{background:rgba(16,185,129,.25)}
#modalResumenDieta .phase-sub{font-size:14px;font-weight:500;margin-bottom:10px;color:rgba(255,255,255,.55)}
#modalResumenDieta .diet-phase-review .phase{display:none;animation:fadeIn .5s cubic-bezier(.4,0,.2,1) forwards}
#modalResumenDieta .diet-phase-review .phase.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.respuesta{
font-family:"Manrope",sans-serif;
font-size:16px;
font-weight:500;
letter-spacing:-0.01em;
color:rgba(255,255,255,0.9);
}
        ::-webkit-scrollbar { width: 4px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
        .glass { backdrop-filter: blur(12px); background: rgba(255, 255, 255, 0.04); }
        .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; }
        .active-tab { border-bottom: 2px solid white; color: white; }

        /* Cursor pointer solo para elementos interactivos */
        [onclick],
        button,
        a,
        .cursor-pointer,
        [role="button"] {
            cursor: pointer;
        }

/* Quitar flechas de inputs numéricos (spinners) */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}

.menu-active{
    color: #ffffff !important;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.08);
    border-left-color: #ffffff !important;
}

/* Sidebar States Management */
#sidebar {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
main, #topHeader {
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.sidebar-hidden #sidebar { transform: translateX(-100%); }
body.sidebar-hidden main, body.sidebar-hidden #topHeader { margin-left: 0 !important; width: 100% !important; }
/* Con el sidebar oculto el contenido ocupa todo el ancho disponible */
body.sidebar-hidden #contentArea { max-width: 100%; }

@media (min-width: 768px) {
    body.sidebar-compact #sidebar { width: 80px; }
    body.sidebar-compact main, body.sidebar-compact #topHeader { margin-left: 80px !important; width: calc(100% - 80px) !important; }
    body.sidebar-compact #sidebar .text-sm, 
    body.sidebar-compact #sidebar p, 
    body.sidebar-compact #sidebar h1 span:not(.logo-n),
    body.sidebar-compact #sidebar button span:not(.material-symbols-outlined) { 
        display: none; 
    }
    body.sidebar-compact #sidebar .px-4 { 
        padding-left: 1.25rem !important; 
        padding-right: 1.25rem !important; 
    }
    body.sidebar-compact #sidebar #btnNewPatientSidebar { width: fit-content; padding-left: 0.75rem; padding-right: 0.75rem; margin-left: auto; margin-right: auto; }
    body.sidebar-compact #sidebar .justify-end { justify-content: center; }
    
    /* Tooltip Styling */
    body.sidebar-compact #sidebar a[data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        left: 100%;
        margin-left: 12px;
        top: 50%;
        transform: translateY(-50%);
        background: #1f1f1f;
        color: white;
        padding: 6px 10px;
        border-radius: 6px;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: all 0.2s ease;
        border: 1px solid rgba(255,255,255,0.1);
        box-shadow: 0 4px 12px rgba(0,0,0,0.5);
        z-index: 100;
    }
    body.sidebar-compact #sidebar a[data-tooltip]:hover::after {
        opacity: 1;
        transform: translateY(-50%) translateX(5px);
    }
    body.sidebar-compact #sidebar { overflow: visible !important; }
}

#sidebar a {
    border-left: 3px solid transparent;
    border-radius: 0 0.5rem 0.5rem 0 !important;
    transition: all 0.2s ease;
}

#sidebar {
    overflow-x: hidden;
}

.fade-in {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(30px) scale(0.98);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform, filter;
}
.fade-in.visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
}

/* MENU MOBILE */

.mobile-nav{
position:fixed;
bottom:0;
left:0;
width:100%;
height:96px;
padding-bottom:env(safe-area-inset-bottom);
background:#000;
border-top:1px solid rgba(255,255,255,0.06);
display:flex;
justify-content:space-around;
align-items:center;
z-index:9999;
}

.mobile-nav button{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
font-size:10px;
color:rgba(255,255,255,0.6);
gap:3px;
}

.mobile-nav button span{
font-size:22px;
}

@media (min-width:768px){
.mobile-nav{
display:none;
}
}

.mobile-bottom-nav{
position:fixed;
bottom:0;
left:0;
width:100%;
height: 96px;
padding-bottom: env(safe-area-inset-bottom);
background: #000000;
border-top: 1px solid rgba(255,255,255,0.08);
display: grid;
grid-template-columns: repeat(5, 1fr);
align-items:center;
z-index: 45;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.mobile-bottom-nav button{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
font-size: 10px;
font-weight: 500;
gap: 2px;
transition: all 0.2s;
}

.mobile-bottom-nav.hide{
transform: translateY(100%);
opacity: 0;
pointer-events: none;
}

/* Teclado abierto (barra de escribir del chat, buscadores...): el menú inferior
   NO sube con el teclado. Se queda fijo abajo, fuera de la vista mientras se
   escribe (el teclado lo tapa), y reaparece al cerrarlo. */
.mobile-bottom-nav.kb-pinned{
transform: translateY(100%);
opacity: 0;
pointer-events: none;
}

@media (min-width:768px){
.mobile-bottom-nav{
display:none;
}
}

/* ===== Modal Pre-registro: chips de listas (objetivos, deporte, origen, motivación) ===== */
.prereg-chips{
display:flex;
flex-wrap:wrap;
gap:8px;
}

.prereg-chips p{
display:inline-flex;
align-items:center;
gap:7px;
padding:5px 12px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
border-radius:999px;
font-size:11px;
line-height:1.4;
color:rgba(255,255,255,.85);
font-weight:500;
max-width:100%;
}

.prereg-chips:empty::before{
content:"Sin información";
font-size:11px;
color:rgba(255,255,255,.30);
font-style:italic;
}

@media (max-width:768px){

.prereg-chips p{
font-size:10.5px;
padding:4px 10px;
}

}

#modalPrereg{
overflow-x:hidden;
}

#modalPrereg *{
max-width:100%;
}

#modalPrereg{
-webkit-overflow-scrolling: touch;
}

.modal-bg{
opacity:0;
transition:opacity .5s ease;
}

.modal-anim.visible .modal-bg{
opacity:1;
}

.modal-anim > div:nth-child(2) {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center center;
}

.modal-anim.visible > div:nth-child(2) {
    opacity: 1;
    transform: scale(1) translateY(0);
}


#sidebar{
overflow-y:auto;
scrollbar-width:thin;
}

/* ===== Botón flotante de IA asomado y arrastrable =====
   Por defecto asoma solo una porción por el borde derecho de la pantalla.
   Se puede arrastrar (ratón o táctil) y al soltar se acopla al borde lateral
   (izquierdo/derecho) más cercano; el atributo data-dock (right/left) decide
   hacia qué borde queda "asomado". La posición se guarda en localStorage.
   Nunca se acopla arriba/abajo: en móvil la parte superior coincide con la
   cámara y quedaría inaccesible. */
#chatFabWrap{
  position: fixed;
  z-index: 60;
  touch-action: manipulation;
}
/* Zona de hover ampliada hacia el interior de la pantalla (así la cercanía
   dispara la salida del botón), adaptada al borde donde esté acoplado. */
#chatFabWrap[data-dock="right"]::before{
  content:""; position:absolute; top:-28px; bottom:-28px;
  left:-90px; right:-16px; z-index:-1; pointer-events:auto;
}
#chatFabWrap[data-dock="left"]::before{
  content:""; position:absolute; top:-28px; bottom:-28px;
  right:-90px; left:-16px; z-index:-1; pointer-events:auto;
}
#chatFabWrap #btnChat{
  will-change: transform, opacity;
  transition:transform .38s cubic-bezier(.22,1,.36,1),
              opacity .3s ease,
              box-shadow .3s ease;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  /* Cuerpo de esfera: brillo especular arriba-izq + tinte AI abajo-dcha + volumen */
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 16%, rgba(255,255,255,0) 44%),
    radial-gradient(circle at 70% 85%, rgba(110,231,183,.20) 0%, rgba(110,231,183,0) 42%),
    linear-gradient(145deg, #ffffff 0%, #f4f6f5 40%, #d3dad6 76%, #a9b3ae 100%);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.95),   /* luz superior */
    inset 0 -7px 12px rgba(15,25,20,.22),    /* sombra interna inferior */
    inset 0 0 0 1px rgba(255,255,255,.45),   /* filo de cristal */
    0 10px 24px rgba(0,0,0,.5),              /* caída profunda */
    0 3px 8px rgba(0,0,0,.4),
    0 0 24px rgba(110,231,183,.14);          /* halo verde AI sutil */
}
/* Estado asomado según el borde: el botón mide 56px (w-14) y se desplaza
   ~46px hacia el borde lateral correspondiente dejando asomar ~16px (10px
   quedan fuera + sombra). Solo laterales: nunca arriba/abajo. */
#chatFabWrap[data-dock="right"]  #btnChat { transform: translateX(calc(100% - 10px)); opacity:.55; }
#chatFabWrap[data-dock="left"]   #btnChat { transform: translateX(calc(-100% + 10px)); opacity:.55; }
/* Reflejo glossy (specular highlight) */
#chatFabWrap #btnChat::after{
  content:"";
  position:absolute;
  top:7%; left:14%;
  width:54%; height:36%;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 68%);
  filter:blur(1px);
  pointer-events:none;
}
/* "NL" ligeramente grabado en la perla */
#chatFabWrap #btnChat > span:first-child{
  text-shadow:0 1px 1px rgba(255,255,255,.85);
}
#chatFabWrap:hover #btnChat,
#chatFabWrap:focus-within #btnChat{
  transform: translate(0,0) scale(1.05);
  opacity: 1;
  cursor: grabbing;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,1),
    inset 0 -7px 12px rgba(15,25,20,.24),
    inset 0 0 0 1px rgba(255,255,255,.5),
    0 18px 42px rgba(0,0,0,.55),
    0 6px 14px rgba(0,0,0,.4),
    0 0 34px rgba(110,231,183,.28);          /* halo se intensifica al salir */
}
#chatFabWrap #btnChat:active{
  transform: translate(0,0) scale(.92);
  cursor: grabbing;
}
/* En pantallas táctiles (móvil) el botón vive "escondido", asomando solo una
   franja por el borde acoplado (como el chat del portal-cliente). Deslizar
   hacia el interior de la pantalla lo despliega y hacia el borde lo vuelve a
   esconder; también basta con tocarlo. La clase .fab-open (gestionada por JS)
   lo mantiene desplegado de forma fija. El arrastre para reubicarlo se conserva. */
@media (hover: none), (pointer: coarse){
  #chatFabWrap::before{
    display: none;
  }
  #chatFabWrap[data-dock="right"]  #btnChat { transform: translateX(calc(100% - 16px)); opacity:.55; }
  #chatFabWrap[data-dock="left"]   #btnChat { transform: translateX(calc(-100% + 16px)); opacity:.55; }
  /* Desplegado (flick al interior, toque o última posición guardada) */
  #chatFabWrap.fab-open #btnChat{
    transform: none;
    opacity: 1;
  }
}

#chatWindow{
opacity:1;
}

/* ===== Notificaciones en cascada (Compartir / Copiar link) =====
   Se apilan de arriba a abajo en #toastCascade; cada una entra deslizándose
   desde la derecha con retardo escalonado y sale en el mismo orden. */
#toastCascade .cascade-toast{
  width: 100%;
  opacity: 0;
  transform: translateX(48px) scale(.96);
  transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .35s ease;
  will-change: transform, opacity;
}
#toastCascade .cascade-toast.show{
  opacity: 1;
  transform: translateX(0) scale(1);
}
#toastCascade .cascade-toast.hide{
  opacity: 0;
  transform: translateX(48px) scale(.96);
}
@media (prefers-reduced-motion: reduce){
  #toastCascade .cascade-toast{ transition: opacity .3s ease; transform: none; }
}

#chatWindow.open{
opacity:1;
}

/* ===== Chat Central: en móvil (iPhone) a sangre, sin tarjeta =====
   La lista de clientes y la conversación se pintan directamente sobre el
   content area: sin fondo de tarjeta, sin borde ni esquinas redondeadas.
   En escritorio se mantiene el estilo de dos tarjetas (WhatsApp Desktop). */
@media (max-width: 767.98px){
  #chatGlobalListaPanel,
  #chatGlobalPanelDerecho{
    background: transparent;
    border: none;
    border-radius: 0;
  }
  /* Cabecera y pie de la conversación: sin tinte de tarjeta (quedan los
     separadores border-b / border-t) */
  #chatGlobalConversacion > div.bg-surface-container-low{
    background: transparent;
  }
}

/* ===== Chat Central fijo: la página no scrollea =====
   En la pestaña Chat (body.chat-fijo, lo gestiona activarMenu) el documento
   queda bloqueado: únicamente scrollean por dentro la lista de clientes
   (#chatGlobalLista) y los mensajes de la conversación (#chatGlobalMsgs). */
html:has(body.chat-fijo),
body.chat-fijo{
  overflow: hidden;
  overscroll-behavior: none;
}
body.chat-fijo #chatGlobalLista,
body.chat-fijo #chatGlobalMsgs{
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* Sin scroll anchoring dentro del chat: al llegar al final de la conversación
   el navegador no "recoloca" el contenido (bug del salto hacia arriba). */
#chatGlobalMsgs,
#chatGlobalLista,
#chatGlobalConversacion{
  overflow-anchor: none;
}
/* Altura en escritorio: entre la cabecera y el padding inferior del content */
@media (min-width: 768px){
  #chatClientesWrap{
    height: calc(100vh - 164px);
    height: calc(100dvh - 164px);
  }
}
/* Móvil: el chat se comporta como el overlay del portal-cliente (que funciona
   de forma natural con el teclado): capa FIJA entre la cabecera (safe-area +
   20px + h-16 = 84px) y la barra inferior (96px fijos, safe-area incluida).
   Al abrir el teclado iOS desplaza el viewport visual y la barra de escritura
   sube con él; al cerrarlo todo vuelve a su sitio sin scroll residual. */
@media (max-width: 767.98px){
  body.chat-fijo #chatClientesWrap{
    position: fixed;
    left: 0;
    right: 0;
    top: calc(env(safe-area-inset-top, 0px) + 84px);
    bottom: 96px;
    height: auto;
    z-index: 30;
    background: #050505;
  }
}

html, body{
overflow-x:hidden;
max-width:100%;
}

#contentArea{
overflow-x:hidden;
overflow-anchor:none;
}
.scrollbar-hide::-webkit-scrollbar{
display:none;
}

.scrollbar-hide{
scrollbar-width:none;
}

/* Chat oculto por defecto */
#chatWindow {

  opacity: 0 !important;
  transform: translateY(20px) scale(0.95);
  pointer-events: none;

  transition: all 0.25s cubic-bezier(.22,1,.36,1);
  z-index: 9999;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.calendar-day {
    min-height: 100px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 8px;
    transition: background-color 0.2s;
}
.calendar-day:hover {
    background-color: rgba(255, 255, 255, 0.03);
}
.calendar-day.today {
    background-color: rgba(255, 255, 255, 0.05);
}

.roulette-container {
    perspective: 1200px;
    height: 260px;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    position: relative;
    background: transparent !important;
    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}
.roulette-item {
    scroll-snap-align: center;
    transition: all 0.1s ease-out;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
}

.floating-calendar-header {
    background: transparent !important;
    border: none !important;
}

#calendarContainer.dia-view-active {
    background: transparent !important;
}

#calendarContainerParent.dia-view-active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#chatWindow.visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Pantalla de carga profesional */
#splash-screen {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.splash-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.18) 1.5px, transparent 1.5px);
    background-size: 32px 32px;
    mask-image: radial-gradient(circle at center, black, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at center, black, transparent 80%);
}
.splash-grid::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.45) 1.5px, transparent 1.5px);
    background-size: 32px 32px;
    -webkit-mask-image: linear-gradient(135deg, transparent 40%, black 50%, transparent 60%);
    mask-image: linear-gradient(135deg, transparent 40%, black 50%, transparent 60%);
    -webkit-mask-size: 300% 300%;
    mask-size: 300% 300%;
    animation: dots-sweep 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes dots-sweep {
    0% { -webkit-mask-position: 100% 100%; mask-position: 100% 100%; opacity: 0; }
    15% { opacity: 1; }
    45%, 55% { opacity: 1; filter: brightness(1.15); }
    85% { opacity: 1; }
    100% { -webkit-mask-position: 0% 0%; mask-position: 0% 0%; opacity: 0; }
}
.splash-n {
    font-family: 'Michroma', sans-serif;
    font-size: 5rem;
    position: relative;
    z-index: 2;
    animation: pulse-n 5s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes pulse-n {
    0%, 100% { transform: scale(1); opacity: 0.8; filter: drop-shadow(0 0 0px rgba(255,255,255,0)); }
    50% { transform: scale(1.02); opacity: 1; filter: drop-shadow(0 0 30px rgba(255,255,255,0.2)); }
}
.splash-hidden {
    opacity: 0;
    visibility: hidden;
}

@keyframes bell-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.animate-bell-bounce {
  display: inline-block;
  animation: bell-bounce 0.4s ease-in-out 2;
}

@keyframes splashLoad {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* Animación en escalera solo para móviles */
@media (max-width: 767px) {
    #sidebar {
        background: rgba(5, 5, 5, 0.4) !important;
        backdrop-filter: blur(40px) saturate(200%);
        -webkit-backdrop-filter: blur(40px) saturate(200%);
        border-right: 1px solid rgba(255, 255, 255, 0.1);
    }
    #sidebar .flex-col > * {
        opacity: 0;
        transform: translateX(-20px);
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Retardos de SALIDA (cuando se cierra el menú) */
    #sidebar.-translate-x-full .flex-col > *:nth-child(1) { transition-delay: 200ms; } /* Logo sale al final */
    #sidebar.-translate-x-full .flex-col > *:nth-child(2) { transition-delay: 100ms; } /* El bloque de navegación sale después */
    #sidebar.-translate-x-full .flex-col > *:nth-child(3) { transition-delay: 0ms; }   /* El botón inferior sale de inmediato */

    #sidebar:not(.-translate-x-full) .flex-col > * {
        opacity: 1;
        transform: translateX(0);
    }

    #sidebar nav > * {
        opacity: 0;
        transform: translateX(-15px);
        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #sidebar:not(.-translate-x-full) nav > * {
        opacity: 1;
        transform: translateX(0);
    }

    /* Retardos progresivos ENTRADA (cuando se abre el menú) */
    #sidebar:not(.-translate-x-full) .flex-col > *:nth-child(1) { transition-delay: 50ms; }  /* Logo */
    #sidebar:not(.-translate-x-full) .flex-col > *:nth-child(2) { transition-delay: 80ms; }  /* Nav Container */
    #sidebar:not(.-translate-x-full) .flex-col > *:nth-child(3) { transition-delay: 350ms; } /* Botón Nuevo Paciente */

    /* Retardos progresivos para los items del menú (ENTRADA) */
    #sidebar:not(.-translate-x-full) nav > *:nth-child(1) { transition-delay: 100ms; }
    #sidebar:not(.-translate-x-full) nav > *:nth-child(2) { transition-delay: 130ms; }
    #sidebar:not(.-translate-x-full) nav > *:nth-child(3) { transition-delay: 160ms; }
    #sidebar:not(.-translate-x-full) nav > *:nth-child(4) { transition-delay: 190ms; }
    #sidebar:not(.-translate-x-full) nav > *:nth-child(5) { transition-delay: 220ms; }
    #sidebar:not(.-translate-x-full) nav > *:nth-child(6) { transition-delay: 250ms; }
    #sidebar:not(.-translate-x-full) nav > *:nth-child(7) { transition-delay: 280ms; }
    #sidebar:not(.-translate-x-full) nav > *:nth-child(8) { transition-delay: 310ms; }
    #sidebar:not(.-translate-x-full) nav > *:nth-child(9) { transition-delay: 340ms; }
    #sidebar:not(.-translate-x-full) nav > *:nth-child(10) { transition-delay: 370ms; }
    #sidebar:not(.-translate-x-full) nav > *:nth-child(11) { transition-delay: 400ms; }
    #sidebar:not(.-translate-x-full) nav > *:nth-child(12) { transition-delay: 430ms; }
    #sidebar:not(.-translate-x-full) nav > *:nth-child(13) { transition-delay: 460ms; }
    #sidebar:not(.-translate-x-full) nav > *:nth-child(14) { transition-delay: 490ms; }
    #sidebar:not(.-translate-x-full) nav > *:nth-child(15) { transition-delay: 520ms; }
    #sidebar:not(.-translate-x-full) nav > *:nth-child(16) { transition-delay: 550ms; }
    #sidebar:not(.-translate-x-full) nav > *:nth-child(17) { transition-delay: 580ms; }
    #sidebar:not(.-translate-x-full) nav > *:nth-child(18) { transition-delay: 610ms; }

    /* Retardos progresivos para los items del menú (SALIDA) */
    #sidebar.-translate-x-full nav > *:nth-child(1) { transition-delay: 100ms; }
    #sidebar.-translate-x-full nav > *:nth-child(2) { transition-delay: 90ms; }
    #sidebar.-translate-x-full nav > *:nth-child(3) { transition-delay: 80ms; }
    #sidebar.-translate-x-full nav > *:nth-child(4) { transition-delay: 70ms; }
    #sidebar.-translate-x-full nav > *:nth-child(5) { transition-delay: 60ms; }
    #sidebar.-translate-x-full nav > *:nth-child(6) { transition-delay: 50ms; }
    #sidebar.-translate-x-full nav > *:nth-child(7) { transition-delay: 40ms; }
    #sidebar.-translate-x-full nav > *:nth-child(8) { transition-delay: 30ms; }
    #sidebar.-translate-x-full nav > *:nth-child(9) { transition-delay: 20ms; }
    #sidebar.-translate-x-full nav > *:nth-child(10) { transition-delay: 10ms; }
    #sidebar.-translate-x-full nav > *:nth-child(11) { transition-delay: 0ms; }
    #sidebar.-translate-x-full nav > *:nth-child(12) { transition-delay: 0ms; }
    #sidebar.-translate-x-full nav > *:nth-child(13) { transition-delay: 0ms; }
    #sidebar.-translate-x-full nav > *:nth-child(14) { transition-delay: 0ms; }
    #sidebar.-translate-x-full nav > *:nth-child(15) { transition-delay: 0ms; }
    #sidebar.-translate-x-full nav > *:nth-child(16) { transition-delay: 0ms; }
    /* ===== MODAL PRE-REGISTRO EN IPHONE (safe area) =====
       En móvil la tarjeta deja de ser fullscreen: se convierte en una tarjeta
       flotante más pequeña que vive DENTRO del safe area (notch / Dynamic Island
       y home indicator). El contenedor absorbe los insets y la tarjeta se
       dimensiona a su contenido. */
    #modalPrereg {
        padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
                 max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    }

    /* Tarjeta: altura automática en vez de ocupar toda la pantalla */
    #modalPrereg > div:nth-child(2) {
        height: auto;
        max-height: 100%;
        max-width: 100%;
        border-radius: 24px;
    }

    /* El safe area ya lo descuenta el padding del contenedor:
       fuera las compensaciones internas (header, footer y scroll). */
    #modalPrereg header {
        padding-top: 0;
    }

    #modalPrereg footer {
        padding-bottom: 0;
    }

    #modalPrereg .modal-content-container {
        padding-bottom: 0;
    }
}