/* ============================================================================
   Hoja de estilos maestra — Sistema de Seguimiento del Servicio BUAP
   Referenciada desde Views/Shared/_Layout.cshtml. Consolida los tokens de
   color y componentes usados en todas las pantallas (mismos que el prototipo
   de UX aprobado en la Fase 0).
   ============================================================================ */
:root{
    --azul-profundo:#0B3B52;
    --azul-profundo-2:#082C3E;
    --azul-claro:#00AEEF;
    --azul-claro-suave:#E4F6FE;
    --tinta:#15202B;
    --gris-niebla:#F4F7F9;
    --gris-borde:#DEE7EC;
    --gris-texto:#5B6B75;
    --blanco:#FFFFFF;
    --exito:#1E8F6F;
    --exito-suave:#E4F5EF;
    --alerta:#B8842A;
    --alerta-suave:#FBF1E0;
    --error:#C0392B;
    --error-suave:#FBEAE8;
}

body{
    font-family:'Segoe UI', -apple-system, Arial, sans-serif;
    background:var(--gris-niebla);
    color:var(--tinta);
    margin:0;
}

/* ---------- Barra superior ---------- */
.nav-buap{
    background:var(--blanco);
    border-bottom:1px solid var(--gris-borde);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 28px;
    flex-wrap:wrap;
    gap:12px;
}
.nav-buap-marca{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.nav-buap-marca:hover{ text-decoration:none; color:inherit; }
.nav-buap-escudo{ width:34px; height:34px; flex:none; }
.nav-buap-escudo svg{ width:100%; height:100%; display:block; }
.nav-buap-titulo{ font-weight:700; font-size:15px; line-height:1.2; }
.nav-buap-titulo span{ display:block; font-weight:400; font-size:12px; color:var(--gris-texto); }

.nav-buap-links{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.nav-buap-links a{
    color:var(--azul-profundo); text-decoration:none; font-size:13.5px; font-weight:600;
    padding:8px 12px; border-radius:8px;
}
.nav-buap-links a:hover{ background:var(--azul-claro-suave); text-decoration:none; }

.chip-usuario{
    display:flex; align-items:center; gap:8px; background:var(--gris-niebla);
    padding:6px 12px 6px 6px; border-radius:99px; font-size:13px;
}
.avatar-buap{
    width:26px; height:26px; border-radius:50%; background:var(--azul-profundo); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
}
.chip-usuario .rol{ color:var(--gris-texto); font-size:11.5px; }
.chip-usuario a{ color:var(--error); font-weight:700; text-decoration:none; margin-left:6px; font-size:12.5px; }

/* ---------- Contenedores y tarjetas (reutilizados en todo el sistema) ---------- */
.envoltura-app{ max-width:900px; margin:0 auto; padding:24px 16px 60px; }
.tarjeta-blanca{ background:#fff; border:1px solid var(--gris-borde); border-radius:12px; padding:22px; margin-bottom:16px; }
.tarjeta-cuenta{
    max-width:420px; margin:60px auto; background:#fff; border:1px solid var(--gris-borde);
    border-radius:12px; padding:32px; box-shadow:0 20px 50px -30px rgba(11,59,82,0.3);
}
.tarjeta-cuenta h2{ color:var(--azul-profundo); font-weight:700; margin-bottom:6px; }
.tarjeta-cuenta .subtitulo{ color:var(--gris-texto); font-size:14px; margin-bottom:22px; }

/* ---------- Botones (sobrescriben Bootstrap con nuestra marca) ---------- */
.btn-primary{ background:var(--azul-profundo) !important; border-color:var(--azul-profundo) !important; }
.btn-primary:hover{ background:var(--azul-profundo-2) !important; border-color:var(--azul-profundo-2) !important; }
a{ color:var(--azul-profundo); }

/* ---------- Estados y badges ---------- */
.badge-estado{ font-size:12px; font-weight:700; padding:4px 10px; border-radius:99px; display:inline-block; }
.badge-programada{ background:var(--azul-claro-suave); color:var(--azul-profundo); }
.badge-atendido{ background:var(--exito-suave); color:var(--exito); }
.badge-cancelada{ background:var(--gris-niebla); color:var(--gris-texto); }
.badge-alerta{ background:var(--alerta-suave); color:var(--alerta); }

/* ---------- Componentes de agenda / validación ---------- */
.opcion-grande{ display:block; border:2px solid var(--gris-borde); border-radius:12px; padding:20px; margin-bottom:14px; text-decoration:none; color:inherit; }
.opcion-grande:hover{ border-color:var(--azul-claro); text-decoration:none; color:inherit; }
.opcion-grande.deshabilitada{ opacity:.55; pointer-events:none; }
.opcion-grande h4{ color:var(--azul-profundo); margin:8px 0 4px 0; }
.chip-hora{ display:inline-block; padding:9px 14px; margin:4px; border:1.5px solid var(--gris-borde); border-radius:8px; text-decoration:none; color:inherit; }
.chip-hora:hover{ border-color:var(--azul-profundo); text-decoration:none; color:inherit; }
.chip-hora.sin-cupo{ opacity:.4; pointer-events:none; text-decoration:line-through; }

/* ---------- Calendario (selección de día) ---------- */
.calendario-buap{
    max-width:340px; background:var(--blanco); border:1px solid var(--gris-borde);
    border-radius:12px; padding:18px; box-shadow:0 2px 10px rgba(11,59,82,.06);
}
.calendario-buap .calendario-cabecera{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.calendario-buap .calendario-mes{ font-weight:700; color:var(--azul-profundo); font-size:15px; text-transform:capitalize; }
.calendario-buap .calendario-nav{
    border:1.5px solid var(--gris-borde); background:var(--blanco); border-radius:8px;
    width:30px; height:30px; font-size:16px; line-height:1; cursor:pointer; color:var(--azul-profundo);
}
.calendario-buap .calendario-nav:disabled{ opacity:.3; cursor:default; }
.calendario-buap .calendario-nav:hover:not(:disabled){ border-color:var(--azul-profundo); background:var(--azul-claro-suave); }
.calendario-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; text-align:center; }
.calendario-grid .calendario-dow{ font-size:11px; font-weight:700; color:var(--gris-texto); padding:4px 0 8px; }
.calendario-grid .calendario-dia{
    aspect-ratio:1; display:flex; align-items:center; justify-content:center;
    border-radius:50%; cursor:pointer; border:1.5px solid transparent; background:none; font-size:13.5px; color:var(--tinta);
}
.calendario-grid .calendario-dia:hover{ border-color:var(--azul-profundo); background:var(--azul-claro-suave); }
.calendario-grid .calendario-dia.bloqueado{ color:var(--gris-borde); cursor:default; pointer-events:none; }
.calendario-grid .calendario-dia.vacio{ pointer-events:none; }
.calendario-buap .calendario-leyenda{ margin-top:12px; font-size:11.5px; color:var(--gris-texto); }

/* ---------- Switch (para ajustes binarios) ---------- */
.switch-buap{ position:relative; display:inline-block; width:46px; height:26px; vertical-align:middle; }
.switch-buap input{ opacity:0; width:0; height:0; }
.switch-buap .slider-buap{
    position:absolute; cursor:pointer; inset:0; background:var(--gris-borde);
    border-radius:26px; transition:background-color .15s ease;
}
.switch-buap .slider-buap::before{
    content:""; position:absolute; width:20px; height:20px; left:3px; bottom:3px;
    background:var(--blanco); border-radius:50%; transition:transform .15s ease;
    box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.switch-buap input:checked + .slider-buap{ background:var(--exito); }
.switch-buap input:checked + .slider-buap::before{ transform:translateX(20px); }
.switch-buap input:focus + .slider-buap{ box-shadow:0 0 0 3px var(--azul-claro-suave); }
.switch-buap-etiqueta{ display:inline-block; margin-left:10px; font-weight:600; vertical-align:middle; }

/* ---------- Buscador de catálogo (armazón / mica en orden de servicio) ---------- */
.buscador-catalogo{ position:relative; margin-bottom:12px; }
.buscador-catalogo input{ width:100%; padding:10px 12px; border-radius:8px; border:1.5px solid var(--gris-borde); font-family:inherit; font-size:14px; }
.lista-catalogo{ display:flex; flex-direction:column; gap:8px; max-height:280px; overflow-y:auto; margin-bottom:6px; }
.item-catalogo{ border:1.5px solid var(--gris-borde); border-radius:9px; padding:11px 13px; cursor:pointer; font-size:13px; }
.item-catalogo:hover{ border-color:var(--azul-claro); }
.item-catalogo.seleccionado{ border-color:var(--azul-profundo); background:var(--azul-claro-suave); }
.item-catalogo .clave{ font-weight:800; color:var(--azul-profundo); font-size:12.5px; }
.item-catalogo .desc{ color:var(--tinta); margin:3px 0; }
.item-catalogo .marca{ color:var(--gris-texto); font-size:11.5px; }
.aviso-catalogo{ font-size:12px; color:var(--gris-texto); margin-bottom:16px; display:flex; gap:6px; align-items:flex-start; }
.resumen-seleccion{ background:var(--exito-suave); border-radius:9px; padding:12px 14px; font-size:13px; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.resumen-seleccion b{ color:#155943; }
.resumen-seleccion button{ background:none; border:none; color:var(--azul-profundo); font-weight:700; font-size:12.5px; cursor:pointer; font-family:inherit; flex:none; }
.oculto{ display:none !important; }

/* ---------- Lista de verificación (validación técnica) ---------- */
.checklist-drh{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
@media (max-width:600px){ .checklist-drh{ grid-template-columns:1fr; } }
.check-item{ display:flex; align-items:center; gap:8px; font-size:13.5px; background:var(--gris-niebla); padding:9px 11px; border-radius:8px; }
.check-item input{ margin:0; }
.campo-obligatorio::after{ content:" *"; color:var(--error); }

/* ---------- Zona de arrastrar y soltar archivos ---------- */
.dropzone{ border:1.5px dashed var(--gris-borde); border-radius:10px; padding:22px; text-align:center; color:var(--gris-texto); font-size:13px; cursor:pointer; transition:border-color .15s ease, background .15s ease; }
.dropzone:hover{ border-color:var(--azul-claro); }
.dropzone.arrastrando{ border-color:var(--azul-claro); background:var(--azul-claro-suave); color:var(--azul-profundo); }
.lista-archivos{ margin-top:10px; font-size:12.5px; }
.lista-archivos div{ padding:6px 10px; background:var(--gris-niebla); border-radius:6px; margin-bottom:6px; display:flex; justify-content:space-between; }

/* ---------- Pie de página ---------- */
.pie-buap{ text-align:center; color:var(--gris-texto); font-size:12px; padding:20px; }