/* =============================================
   VARIABLES GLOBALES DE COLOR — PALETA PLADIEX
   ============================================= */
:root {
    /* Paleta principal */
    --bg:         #0f172a;
    --card:       #1e293b;
    --accent:     #E7BA11;
    --text-main:  #1e293b;
    --border:     #e2e8f0;
    --success:    #10b981;
    --error:      #ef4444;

    /* Jerarquía de azules */
    --blue-dark:  #01587A;   /* Títulos principales / acciones */
    --blue-mid:   #5CB3C1;   /* Subtítulos / etiquetas */
    --blue-light: #99D8DD;   /* Sólo fondos / decoración */

    /* Borde de las cards — gris puro sólido (sin degradado) */
    --grad-border: #cbd5e1;
}

/* =============================================
   RESET Y BASE
   ============================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    /* Degradado blanco perceptible de fondo */
    background: linear-gradient(160deg, #ffffff 0%, #eaf5f8 100%);
    min-height: 100vh;
    color: var(--text-main);
    overflow-x: hidden;
}

button {
    cursor: pointer;
    transition: 0.2s;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
}

/* =============================================
   JERARQUÍA DE TEXTO — COLORES
   ============================================= */
h1, h2, .title, #dash-extra-title, #todo-title,
[style*="font-size: 1.1rem"], [style*="font-size: 1.3rem"] {
    color: var(--blue-dark) !important;
}

h3, h4, h5, h6, .subtitle {
    color: var(--blue-mid) !important;
}

/* Reemplazar #99D8DD suelto por --blue-mid */
[style*="color:#99D8DD"], [style*="color: #99D8DD"] {
    color: var(--blue-mid) !important;
}
[stroke="#99D8DD"] {
    stroke: var(--blue-mid) !important;
}
[style*="border: 2px solid #99D8DD"],
[style*="border: 1.5px solid #99D8DD"] {
    border-color: var(--blue-mid) !important;
}

/* =============================================
   BORDE DEGRADADO REUTILIZABLE
   (gris-azulado → azul muy claro)
   ============================================= */
.grad-border {
    background: #ffffff !important;
    border: 8px solid var(--grad-border) !important;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* Variante de borde delgado para secciones internas (modales, inputs) */
.grad-border-sm {
    background: #ffffff;
    border: 3px solid var(--grad-border);
    border-radius: 12px;
}

/* =============================================
   PANTALLA DE LOGIN
   ============================================= */
#login-screen {
    position: fixed;
    inset: 0;
    background-image: url('../assets/fondo.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
#login-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(1, 40, 60, 0.45);
    z-index: 0;
}
.login-box {
    position: relative;
    z-index: 1;
    width: 420px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.login-top {
    background: var(--blue-dark);
    padding: 36px 40px 28px;
    text-align: center;
    position: relative;
}
.login-top > * { position: relative; z-index: 1; }
.login-logo {
    max-width: 90px;
    height: auto;
    display: block;
    margin: 0 auto 10px;
}
.login-subtitle {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 500;
    text-align: center;
}
.login-bottom {
    background: #ffffff;
    padding: 28px 36px 32px;
}
.input-group {
    position: relative;
    margin-bottom: 15px;
    text-align: left;
}
.input-group label {
    display: block;
    font-size: 0.75rem;
    color: var(--blue-mid);
    margin-bottom: 5px;
    margin-left: 5px;
    font-weight: 600;
}
.login-bottom select,
.login-bottom input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f1f5f9;
    border: 2px solid var(--border);
    color: var(--blue-dark);
    outline: none;
    appearance: none;
    font-size: 0.9rem;
    font-family: 'Poppins', sans-serif;
    transition: border-color 0.2s;
}
.login-bottom select:focus,
.login-bottom input:focus {
    border-color: var(--blue-dark);
}
.select-wrapper { position: relative; }
.select-wrapper:has(select)::after {
    content: '▼';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--blue-dark);
    pointer-events: none;
    font-size: 0.75rem;
}
.login-btn {
    width: 100%;
    padding: 13px;
    background: var(--blue-dark);
    color: #ffffff;
    font-size: 0.95rem;
    margin-top: 6px;
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-family: 'Poppins', sans-serif;
    transition: background 0.2s;
}
.login-btn:hover { background: var(--accent); color: #ffffff; }
.link-recuperar {
    font-size: 0.75rem;
    color: var(--blue-dark);
    text-decoration: none;
    font-weight: 600;
    display: block;
    text-align: center;
    margin-top: 15px;
}

/* =============================================
   BARRA SUPERIOR (TOP NAV)
   ============================================= */
#main-app { display: none; }

.top-nav {
    position: fixed;
    top: 0;
    left: 260px;
    right: 0;
    height: 70px;
    background: #ffffff;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 30px;
    z-index: 100;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
    gap: 12px;
}
.btn-refresh {
    font-size: 0.78rem;
    padding: 6px 16px;
    border-radius: 20px;
    background: var(--blue-dark);
    color: white;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
}
.btn-refresh:hover { background: #01415a; }
.api-badge {
    font-size: 0.68rem;
    padding: 4px 12px;
    border-radius: 20px;
    background: #fef3c7;
    border: 2px solid var(--accent);
    color: #92400e;
    margin-right: auto;
    font-weight: 600;
}
.notif-container { position: relative; margin-right: 20px; }
.notif-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #f0f9ff;
    border: 1.5px solid var(--blue-dark);
    color: var(--blue-dark);
    cursor: pointer;
    transition: all 0.2s;
}
.notif-trigger:hover { background: #e0f2fe; }
.user-tag {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f1f5f9;
    padding: 5px 15px;
    border-radius: 50px;
    border: 3px solid var(--blue-dark) !important;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s;
}
.user-tag:hover { transform: scale(1.05); }
.avatar {
    width: 35px;
    height: 35px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    font-weight: 800;
    font-size: 0.8rem;
}

/* =============================================
   BARRA LATERAL (SIDEBAR)
   ============================================= */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    /* Degradado azul-amarillo tomado de la imagen de fondo de referencia */
    background: linear-gradient(160deg, #4a9fb8 0%, #02597c 38%, #024a63 60%, #8a8a2e 88%, #d9a818 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    padding: 25px;
    z-index: 200;
    /* Columna flex: logo arriba, navegación scrollable en medio, pie abajo.
       Evita que el pie (antes position:absolute) tape los ítems en pantallas
       de poca altura (móvil horizontal). */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* La navegación toma el espacio restante y hace su propio scroll */
#main-nav {
    flex: 1 1 auto;
    min-height: 0;          /* imprescindible para permitir scroll en un flex item */
    overflow-y: auto;
    overflow-x: hidden;
}

/* Pie de la barra: en flujo normal, pegado abajo (ya no absolute) */
.sidebar-footer {
    flex-shrink: 0;
    margin-top: auto;
}

/* ÁREA DE LOGO — full bleed, más grande que los botones de navegación */
.sidebar-logo-area {
    margin: -25px -25px 24px -25px;
    padding: 28px 22px;
    /* Degradado que intensifica las tonalidades del sidebar */
    background: linear-gradient(135deg, #01375a 0%, #01587A 45%, #017a99 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
}
.sidebar-logo-area img,
.sidebar-logo {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    transform: scale(1.18);   /* amplía visualmente sin distorsionar */
}

/* Fallback si el img va directo sin wrapper */
.sidebar > img {
    width: 100%;
    max-width: 100%;
    display: block;
    margin: 0 auto 30px auto;
}

.btn-logout {
    width: 100%;
    color: var(--blue-dark);
    background: #ffffff;
    font-size: 0.8rem;
    padding: 11px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s, color 0.2s;
}
.btn-logout:hover { background: #fee2e2; color: var(--error); }

/* Botón "Agregar al calendario" (reutilizable en tarjetas de actividad) */
.btn-cal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e0f2fe;
    color: #01587A;
    border: none;
    padding: 9px 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.82rem;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.btn-cal:hover { background: #bae6fd; }
.btn-cal-sm { padding: 5px 7px; }

/* ===== Globito de chat flotante (Comunicaciones, en todos los módulos) ===== */
#chat-fab {
    position: fixed; right: 22px; bottom: 22px;
    width: 58px; height: 58px; border-radius: 50%;
    background: var(--blue-dark); color: #fff; border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 8px 24px rgba(1, 88, 122, 0.40);
    z-index: 900; transition: transform 0.2s, background 0.2s;
}
#chat-fab:hover { transform: scale(1.06); background: #014d69; }
#chat-fab svg { display: block; }
#chat-fab .chat-fab-close { display: none; }
#chat-fab.activo .chat-fab-open { display: none; }
#chat-fab.activo .chat-fab-close { display: block; }

#chat-float {
    position: fixed; right: 22px; bottom: 92px;
    width: 360px; max-width: calc(100vw - 24px);
    height: 520px; max-height: calc(100vh - 130px);
    background: #fff; border: 1px solid var(--border);
    border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
    display: none; flex-direction: column; overflow: hidden; z-index: 901;
}
#chat-float.open { display: flex; }

.chatf-head {
    background: var(--blue-dark); color: #fff; padding: 12px 14px;
    display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.chatf-head-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.9rem; }
.chatf-x { background: transparent; border: none; color: #fff; cursor: pointer; display: flex; padding: 2px; border-radius: 6px; }
.chatf-x:hover { background: rgba(255, 255, 255, 0.15); }

/* Cuerpo: contactos (columna izquierda) + conversación (derecha) */
.chatf-body { display: flex; flex: 1 1 auto; min-height: 0; }

.chatf-contacts {
    width: 74px; flex-shrink: 0; overflow-y: auto;
    padding: 12px 0; border-right: 1px solid var(--border); background: #f8fafc;
}
.chatf-contacts #chat-devlist { display: flex; flex-direction: column; align-items: center; gap: 10px; }
/* Avatar de iniciales; el nombre completo aparece al pasar el cursor (title). */
.chatf-contact {
    position: relative;
    width: 46px; height: 46px; border-radius: 50%;
    border: 2px solid #5CB3C1; background: #fff; color: #01587A;
    font-weight: 700; font-size: 0.82rem; cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.chatf-contact:hover { background: #e0f2fe; }
.chatf-contact.activo { border-color: #01587A; background: #01587A; color: #fff; }
.chatf-contact-dot {
    position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px;
    padding: 0 4px; border-radius: 9px; background: var(--error); color: #fff;
    font-size: 0.6rem; font-weight: 800; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center; border: 2px solid #f8fafc;
}

.chatf-conv { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; }
.chatf-convhead {
    padding: 10px 14px; font-weight: 700; color: var(--blue-dark);
    font-size: 0.82rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.chatf-messages {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 14px;
    display: flex; flex-direction: column; gap: 10px; background: #fff;
}
.chatf-inputrow {
    flex-shrink: 0; display: flex; gap: 8px; padding: 10px 12px;
    border-top: 1px solid var(--border); background: #fff;
}
.chatf-inputrow input {
    flex: 1 1 auto; min-width: 0; padding: 10px 12px; border: 2px solid #5CB3C1;
    border-radius: 10px; outline: none; font-family: 'Poppins', sans-serif; font-size: 0.85rem;
}
.chatf-inputrow input:focus { border-color: var(--blue-dark); }
.chatf-send {
    flex-shrink: 0; width: 44px; background: var(--blue-dark); color: #fff;
    border: none; border-radius: 10px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.chatf-send:hover { background: #014d69; }

/* Botón de adjuntar (clip) y previsualización del adjunto */
.chatf-attach {
    flex-shrink: 0; width: 40px; background: transparent; color: #64748b;
    border: none; border-radius: 10px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.chatf-attach:hover { background: #eef2f6; color: #01587A; }
.chatf-adjprev {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    border-top: 1px solid var(--border); background: #f8fafc; flex-shrink: 0;
}
.chatf-adjprev img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.chatf-adjprev-doc { font-size: 1.3rem; flex-shrink: 0; }
.chatf-adjprev-name {
    flex: 1 1 auto; min-width: 0; font-size: 0.78rem; color: #334155;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chatf-adjprev-x {
    flex-shrink: 0; width: 26px; height: 26px; background: #fee2e2; color: #dc2626;
    border: none; border-radius: 6px; cursor: pointer; font-size: 0.8rem; font-weight: 700;
}

/* Contador de mensajes sin leer sobre el globito */
#chat-fab-badge {
    position: absolute; top: -3px; right: -3px; min-width: 22px; height: 22px;
    padding: 0 5px; border-radius: 11px; background: var(--error); color: #fff;
    font-size: 0.7rem; font-weight: 800; display: none; align-items: center;
    justify-content: center; border: 2px solid #fff; box-sizing: border-box;
}

/* Móvil: el panel ocupa casi toda la pantalla */
@media (max-width: 820px) {
    #chat-float {
        right: 10px; left: 10px; width: auto; max-width: none;
        top: 66px; bottom: 80px; height: auto; max-height: none;
    }
    #chat-fab { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}
.sidebar-footer-text {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    margin-top: 12px;
    font-weight: 600;
    letter-spacing: 1px;
}

/* Navegación Sidebar */
.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    margin-bottom: 5px;
    text-align: left;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.10);
    font-size: 0.82rem;
    border-radius: 10px;
    font-weight: 600;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s, transform 0.1s;
    letter-spacing: 0.2px;
}
.nav-item svg { flex-shrink: 0; opacity: 0.85; transition: opacity 0.15s; }
.nav-item:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    transform: translateX(3px);
}
.nav-item:hover svg { opacity: 1; }
.nav-item.active {
    background: #ffffff !important;
    color: var(--blue-dark) !important;
    border: none !important;
    border-left: 5px solid var(--accent) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.nav-item.active svg { opacity: 1 !important; color: var(--blue-dark) !important; }

/* =============================================
   ÁREA DE CONTENIDO
   ============================================= */
.content {
    margin-left: 260px;
    padding: 100px 32px 40px;
}
.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.btn-primary {
    background: var(--blue-dark);
    color: white;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    border: none;
    transition: background 0.2s;
}
.btn-primary:hover { background: var(--accent); color: white; }

/* =============================================
   CARDS / RECUADROS CON BORDE DEGRADADO
   (gris-azulado → azul muy claro)
   ============================================= */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.kpi-card,
.data-table,
.section-box,
#modal-box {
    background: #ffffff !important;
    border: 8px solid var(--grad-border) !important;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.kpi-card {
    padding: 20px;
    border: 8px solid transparent !important;
    transition: transform 0.15s, box-shadow 0.15s;
}
.kpi-card:hover,
.section-box:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}
.kpi-val {
    font-size: 2rem;
    font-weight: 800;
    color: var(--accent) !important;
}
.progress-container {
    background: var(--border);
    height: 12px;
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    background: var(--success);
    width: 0%;
    transition: width 0.8s ease;
    border-radius: 10px;
}

/* =============================================
   TABLAS
   ============================================= */
.data-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border: 11px solid transparent !important;
}
.data-table th {
    /* Azul medio-oscuro, menos intenso que --blue-dark */
    background: #1e6e8c;
    padding: 13px 16px;
    text-align: left;
    color: #ffffff !important;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}
/* Celdas con más air y separador sutil */
.data-table td {
    color: var(--text-main) !important;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f4f7;
    vertical-align: middle;
}
/* Zebra suave en filas pares */
.data-table tbody tr:nth-child(even) td {
    background: #f8fbfc;
}
.data-table tbody tr:hover td {
    background: #eef6f8;
    transition: background 0.15s;
}

/* Badges */
.badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: bold;
    text-transform: uppercase;
    border: 1px solid transparent;
}
.v-alto  { background: rgba(239,68,68,0.1);  color: #f87171; border-color: #ef4444; }
.v-medio { background: rgba(245,158,11,0.1); color: #fbbf24; border-color: #f59e0b; }
.v-bajo  { background: rgba(92,179,193,0.1); color: var(--blue-dark); border-color: var(--blue-mid); }

/* Section box y modal */
.section-box {
    border: 10px solid transparent !important;
    padding: 24px;
    margin-top: 20px;
    transition: box-shadow 0.15s;
}
#modal-box { border: 7px solid transparent !important; }

/* =============================================
   PERFIL / MODALES INTERNOS
   Sección interna con borde degradado (igual que las cards)
   ============================================= */
.perfil-section {
    background: #ffffff;
    border: 3px solid var(--grad-border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

/* Input genérico reutilizable en modales */
.modal-input {
    width: 100%;
    padding: 10px;
    border: 2px solid var(--border);
    border-radius: 8px;
    outline: none;
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    margin-bottom: 8px;
    box-sizing: border-box;
    transition: border-color 0.2s;
    color: var(--text-main);
    background: #fafcfe;
}
.modal-input:focus { border-color: var(--blue-dark); }

/* Input genérico para sprints/ui */
.form-input {
    width: 100%;
    padding: 11px 12px;
    border: 2px solid var(--blue-mid);
    border-radius: 10px;
    outline: none;
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    color: var(--blue-dark);
    background: #fafcfe;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.form-input:focus { border-color: var(--blue-dark); }

/* =============================================
   CHATS Y COMUNICACIONES
   ============================================= */
.chat-container { display: flex; gap: 20px; height: 600px; }
.chat-sidebar { width: 210px; flex-shrink: 0; overflow-y: auto; }
.chat-sidebar-title {
    font-size: 0.75rem;
    color: var(--blue-mid);
    margin-bottom: 8px;
    font-weight: 600;
}
.chat-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.chat-header {
    background: var(--blue-dark);
    color: white;
    padding: 15px;
    font-weight: 700;
    min-height: 50px;
}
.chat-messages-area {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.chat-input-wrapper {
    padding: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
    align-items: center;
}
.chat-input {
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    outline: none;
    font-family: 'Poppins', sans-serif;
    font-size: 0.88rem;
}
.chat-input:focus { border-color: var(--blue-dark); }
.chat-input-wrapper .btn-primary { flex-shrink: 0; white-space: nowrap; }

/* =============================================
   ANIMACIONES Y TRANSICIONES
   ============================================= */
.section { display: none; }
.section.active {
    display: block;
    animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =============================================
   PANEL LATERAL (SLIDE PANEL)
   ============================================= */
#slide-panel {
    scrollbar-width: thin;
    scrollbar-color: var(--blue-mid) #f0f9fc;
}
#slide-panel::-webkit-scrollbar { width: 7px; }
#slide-panel::-webkit-scrollbar-track { background: #f0f9fc; }
#slide-panel::-webkit-scrollbar-thumb {
    background: var(--blue-mid);
    border-radius: 4px;
}

.dash-panel-card {
    position: relative;
    overflow: hidden;
}
.dash-panel-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(92,179,193,0.04) 0%, transparent 60%);
    pointer-events: none;
}

#dash-main-grid { grid-template-columns: 1fr 1fr; }

/* =============================================
   RESPONSIVE
   ============================================= */

/* Botón hamburguesa — oculto en escritorio, visible en móvil/tablet */
.menu-toggle {
    display: none;
    background: var(--blue-dark);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: auto;
}
.menu-toggle svg { display: block; }

/* Overlay oscuro detrás del sidebar cuando está abierto en móvil */
#sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 150;
}

/* ---------- TABLET (≤ 1024px) ---------- */
@media (max-width: 1024px) {
    #dash-main-grid { grid-template-columns: 1fr 1fr; }
    .content { padding: 90px 22px 40px; }
    #slide-panel { left: 0 !important; }
}

/* ---------- MÓVIL / TABLET ESTRECHA (≤ 820px) ---------- */
@media (max-width: 820px) {
    /* Sidebar se convierte en panel deslizable (drawer) */
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.28s ease;
        width: 250px;
        box-shadow: 4px 0 24px rgba(0,0,0,0.25);
        overflow: hidden;   /* el scroll lo maneja #main-nav */
    }
    body.sidebar-open .sidebar { transform: translateX(0); }
    body.sidebar-open #sidebar-overlay { display: block; }

    /* La barra superior ocupa todo el ancho */
    .top-nav { left: 0; padding: 0 12px; gap: 8px; justify-content: flex-start; }
    .content { margin-left: 0; padding: 86px 16px 40px; }

    /* Mostrar el botón hamburguesa a la izquierda */
    .menu-toggle { display: flex; order: -1; flex-shrink: 0; }

    /* El selector de proyecto se encoge para no romper la barra.
       El !important es necesario porque el <select> trae max-width inline. */
    #proyecto-selector { margin-right: 0; }
    #proyecto-selector select { max-width: 108px !important; }

    /* El badge de estado se oculta en móvil (es solo informativo) */
    .api-badge { display: none; }

    /* La campana y el usuario se empujan a la derecha y no se encogen */
    .notif-container { margin-left: auto; flex-shrink: 0; }
    .user-tag { flex-shrink: 0; padding: 4px 8px; }
    /* En móvil solo se muestra el avatar (el nombre/rol ocupa demasiado ancho) */
    .user-tag > div:first-child { display: none; }

    /* Roadmap: apilar título y controles para que los botones (estado, editar,
       eliminar) no se corten al no caber en una sola fila. */
    #roadmap-list .section-box {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    #roadmap-list .section-box > div:last-child { flex-wrap: wrap; }

    /* El panel expandido ocupa toda la pantalla */
    #slide-panel { left: 0 !important; top: 64px; }

    /* Grid del dashboard en una columna */
    #dash-main-grid { grid-template-columns: 1fr !important; }

    /* Chat en columna vertical, altura adaptable */
    .chat-container { flex-direction: column; height: auto; gap: 12px; }
    .chat-sidebar {
        width: 100%;
        max-height: 130px;
        border-bottom: 1px solid var(--border);
        padding-bottom: 8px;
    }
    .chat-main { height: 60vh; min-height: 380px; }

    /* Login más compacto */
    .login-box { width: 92%; max-width: 380px; }

    /* Quitar el zoom del calendario en miniatura */
    #dash-calendario { transform: none !important; width: 100% !important; }
}

/* ---------- MÓVIL PEQUEÑO (≤ 480px) ---------- */
@media (max-width: 480px) {
    .content { padding: 80px 12px 32px; }

    /* Texto de usuario oculto, solo avatar para ahorrar espacio */
    .user-tag > div:first-child { display: none; }
    .user-tag { padding: 4px; border-width: 2px !important; }

    /* El selector se encoge un poco más */
    #proyecto-selector select { max-width: 95px; font-size: 0.78rem; }

    /* Títulos un poco más chicos */
    .title { font-size: 1.15rem; }

    /* Botones de acción de cabecera se ajustan */
    .flex-between { flex-wrap: wrap; gap: 10px; }

    /* Modal a ancho casi completo */
    #modal-box { padding: 22px; }

    /* Panel de notificaciones: el bloque ≤820px ya aplica position:fixed, sin duplicar */

    /* KPIs apilados */
    #dash-resumen-box [style*="grid-template-columns:1fr 1fr"],
    #dash-resumen-box [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* =============================================
   RESPONSIVE — MEJORAS MÓVIL v2
   ============================================= */

/* ---------- TABLET / MÓVIL ANCHO (≤ 820px) — correcciones generales ---------- */
@media (max-width: 820px) {

    /* ── Tablas: scroll horizontal para no romper el layout ── */
    .section-box {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .data-table { min-width: 540px; }

    /* ── Quitar transform en hover (glitches en táctil) ── */
    .kpi-card:hover,
    .section-box:hover {
        transform: none;
        box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    }

    /* ── flex-between se apila cuando hay poco espacio ── */
    .flex-between { flex-wrap: wrap; gap: 10px; }

    /* ── kpi-grid en 1 columna ── */
    .kpi-grid { grid-template-columns: 1fr; }

    /* ── Top-nav: ocultar texto del usuario, solo mostrar avatar ── */
    .user-tag > div:first-child { display: none; }
    .user-tag { padding: 4px; border-width: 2px !important; }

    /* ── Panel de notificaciones: fixed al viewport, no al contenedor ── */
    #notif-panel {
        position: fixed !important;
        top: 64px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-height: calc(100vh - 80px) !important;
        overflow-y: auto !important;
        border-radius: 12px !important;
        z-index: 1100 !important;
    }

    /* ── Modal: full-width, altura limitada y centrado ── */
    #modal-overlay { padding: 16px !important; }
    #modal-box {
        width: 100%   !important;
        max-width: 100% !important;
        max-height: 88vh !important;
    }

    /* ── Slide panel: ocupa toda la pantalla ── */
    #slide-panel { left: 0 !important; top: 64px; }

    /* ── Slide panel body: reducir padding para que el calendario no se corte ── */
    #slide-panel-body { padding: 20px 16px !important; }

    /* ── Login compacto ── */
    .login-bottom { padding: 22px 24px 28px; }
}

/* ---------- MÓVIL PEQUEÑO (≤ 420px) — ajustes extra finos ---------- */
@media (max-width: 420px) {
    /* Login muy ajustado */
    .login-box { width: 96%; }
    .login-top  { padding: 22px 18px 16px; }
    .login-bottom { padding: 18px 16px 22px; }

    /* Botones de acción más pequeños */
    .btn-primary { font-size: 0.77rem; padding: 8px 11px; }

    /* Reducir borde de section-box para aprovechar el espacio */
    .section-box { border-width: 4px !important; }
    #modal-box   { border-width: 4px !important; }

    /* Tabla: ancho mínimo reducido para pantallas de 360px */
    .data-table { min-width: 460px; }
}

/* ---------- HELPERS DE MODALES DE HISTORIAS ---------- */
._h-lbl {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}
._h-sel {
    width: 100%;
    padding: 9px 10px;
    border-radius: 8px;
    border: 2px solid #5CB3C1;
    color: #01587A;
    font-family: 'Poppins', sans-serif;
    font-size: 0.84rem;
    outline: none;
    background: #fff;
    cursor: pointer;
}
._h-sel:focus { border-color: #01587A; }

/* ---------- TELÉFONO EN HORIZONTAL (landscape) ---------- */
/* Phones in landscape have large width but short height (<= 500px).
   Force the same drawer sidebar behavior used in portrait mobile. */
@media (orientation: landscape) and (max-height: 500px) {
    /* Forzar sidebar como drawer, igual que en retrato móvil */
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.28s ease;
        width: 220px;
        box-shadow: 4px 0 24px rgba(0,0,0,0.25);
        overflow: hidden;   /* el scroll lo maneja #main-nav */
    }
    body.sidebar-open .sidebar  { transform: translateX(0); }
    body.sidebar-open #sidebar-overlay { display: block; }

    /* Top-nav ocupa todo el ancho */
    .top-nav {
        left: 0 !important;
        padding: 0 12px !important;
        gap: 8px !important;
        justify-content: flex-start !important;
        height: 56px !important;
    }
    /* Contenido sin margen izquierdo fijo */
    .content { margin-left: 0 !important; padding: 68px 14px 24px !important; }

    /* Mostrar hamburguesa */
    .menu-toggle { display: flex !important; order: -1; flex-shrink: 0; }

    /* Ocultar elementos no esenciales de la barra */
    .api-badge { display: none; }
    .user-tag > div:first-child { display: none; }
    .user-tag { padding: 4px; border-width: 2px !important; }

    /* Notif panel: fixed al viewport en landscape */
    #notif-panel {
        position: fixed !important;
        top: 56px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-height: calc(100vh - 68px) !important;
        overflow-y: auto !important;
        border-radius: 12px !important;
        z-index: 1100 !important;
    }
    #slide-panel { left: 0 !important; top: 56px; }
    #slide-panel-body { padding: 16px 14px !important; }

    /* Nav items más compactos para entrar en pantalla corta */
    .nav-item { padding: 8px 14px; margin-bottom: 2px; font-size: 0.8rem; }
    .sidebar-logo-area { min-height: 60px; padding: 12px 18px; }
}