@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');
/* ============================================================================
   estilos-compartidos.css — CSS compartido entre los módulos de Puente Público.
   Contiene: tokens de diseño (:root), reset base, tipografía, folder-header,
   botones/badges/stamp, drawer/sidebar mobile, tabs, dashboard cards,
   hitos del proceso, calendario, panel de habilitación y overlay de etapas.

   Se referencia con <link rel="stylesheet" href="estilos-compartidos.css?v=1">
   en el <head> de cada HTML, ANTES del <style> inline propio de cada archivo,
   para que las reglas inline puedan seguir sobrescribiendo mientras dura la
   migración a este archivo único.

   IMPORTANTE: no se ha borrado ningún <style> inline todavía — eso lo hace
   cada agente siguiente en su propio módulo.
   ============================================================================ */

:root{
  --red:#C0392B; --red-dk:#96281B; --red-lt:#FDECEA;
  --navy:#1A2744; --navy2:#253461; --gold:#D4A017;
  --bg:#F4F6FA; --surface:#fff; --border:#E2E6F0;
  --text:#1A2744; --muted:#6B7590;
  --green:#1D9E75; --green-lt:#E4F6EF; --amber:#B7791F; --amber-lt:#FBF0DC;
  --r:10px; --sh:0 2px 12px rgba(26,39,68,.08);
  --azul:#0C447C; --azul-lt:#DCE9F8; --morado:#3C3489; --morado-lt:#EEEDFE;

  /* Tokens semánticos de estado (nuevos — auditoría UI 2026).
     --status-warn quedó más oscuro (#9c6318) que --amber (#B7791F): la
     auditoría encontró que texto ámbar sobre fondo ámbar-claro estaba en el
     límite de legibilidad. Usar --status-warn para TEXTO, no para fondos. */
  --status-ok:#166534; --status-ok-bg:#EAF6EE;
  --status-warn:#9c6318; --status-warn-bg:#FBF0DC;
  --status-error:#b91c1c; --status-error-bg:#FEE2E2;
  --status-neutral:#475569; --status-neutral-bg:#F3F4F6;
}

/* ---- Reset y tipografía base ---- */
*{box-sizing:border-box;}
body{
  margin:0; font-family:'IBM Plex Sans','Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color:var(--text); padding:16px;
}
@media (min-width:640px){ body{ padding:24px; } }
@media (min-width:1280px){ body{ padding:24px 32px; } }
h1,h2,h3{font-family:'IBM Plex Sans','Segoe UI', system-ui, sans-serif; font-weight:700; margin:0;}

/* ---- Encabezado tipo carpeta ---- */
.folder-header{max-width:var(--ancho-max);margin:0 auto 18px auto;border-radius:var(--r);background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 100%);box-shadow:var(--sh);padding:16px 22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.folder-header h1{font-size:19px;letter-spacing:-0.2px;color:#fff;}
.folder-header .sub{font-size:11px;color:rgba(255,255,255,.6);margin-top:2px;}
.tag-modulo{font-size:10px;font-weight:700;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;padding:5px 10px;border-radius:20px;letter-spacing:0.5px;text-transform:uppercase;}
.top-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.top-actions .quien{font-size:11px;color:rgba(255,255,255,.65);}
@media (max-width: 700px) {
  .folder-header{flex-direction:column;align-items:flex-start;}
  .top-actions{width:100%;}
  .top-actions .btn.small{flex:1 1 auto;}
}

.config-warning{max-width:var(--ancho-max);margin:0 auto 18px auto;background:var(--red-lt);border:1px solid var(--red);border-radius:var(--r);color:var(--red-dk);padding:12px 16px;font-size:11px;line-height:1.6;display:none;}

/* ---- Botones ---- */
.btn{font-family:inherit;font-size:12px;font-weight:700;padding:9px 16px;background:var(--red);color:#fff;border:none;border-radius:7px;cursor:pointer;letter-spacing:0.2px;white-space:nowrap;transition:background .15s;}
.btn:hover{background:var(--red-dk);}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--navy);}
.btn.ghost:hover{background:var(--bg);}
/* Dentro del header oscuro, .btn.ghost necesita texto claro — si no, el
   texto navy queda del mismo tono que el fondo navy y se vuelve invisible. */
.top-actions .btn.ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff;}
.top-actions .btn.ghost:hover{background:rgba(255,255,255,.18);}
.btn.small{padding:5px 12px;font-size:11px;}

/* ---- Badges / stamp / sello de estado ---- */
.stamp{border-radius:20px;padding:7px 18px;font-weight:700;font-size:12px;letter-spacing:0.3px;text-transform:uppercase;border:none;}
.stamp.habil{background:var(--green-lt);color:var(--green);}
.stamp.inhabil{background:var(--red-lt);color:var(--red-dk);}
.stamp.tramite{background:var(--amber-lt);color:var(--amber);}

.badge{font-size:10px;font-weight:700;padding:4px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:0.3px;}
.badge.pendiente{background:var(--bg);color:var(--muted);}
.badge.en_revision{background:var(--amber-lt);color:var(--amber);}
.badge.aprobado{background:var(--green-lt);color:var(--green);}
.badge.rechazado{background:var(--red-lt);color:var(--red-dk);}
.motivo{font-size:11px;color:var(--red-dk);margin-top:4px;font-style:italic;}

/* ---- Tabs ---- */
.tabs{max-width:var(--ancho-max);margin:0 auto;display:flex;gap:4px;}
.tab-btn{font-family:inherit;font-size:13px;font-weight:700;padding:10px 18px;background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;color:var(--muted);}
.tab-btn.active{color:var(--red);border-bottom-color:var(--red);}
.tab-content{max-width:var(--ancho-max);margin:0 auto 22px auto;background:var(--surface);border:1px solid var(--border);border-radius:0 var(--r) var(--r) var(--r);box-shadow:var(--sh);padding:20px;}
.tab-content .capa-desc{font-size:12px;color:var(--muted);margin-bottom:14px;line-height:1.6;}

/* ---- Secciones / dashboard ---- */
.section-title{max-width:var(--ancho-max);margin:0 auto 8px auto;font-size:15px;font-weight:700;color:var(--navy);}
.section-sub{max-width:var(--ancho-max);margin:0 auto 12px auto;font-size:11px;color:var(--muted);}
.dash-grid{max-width:var(--ancho-max);margin:0 auto 18px auto;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.dash-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--sh);padding:18px;}
.dash-card .dtitle{font-size:12px;color:var(--muted);margin:0 0 2px;font-weight:600;}
.dash-card .dsub{font-size:10px;color:var(--muted);margin:0 0 8px;min-height:12px;}
.dash-ring-row{display:flex;align-items:center;gap:14px;margin-top:10px;}
.leg-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);margin-bottom:4px;}
.leg-sw{width:9px;height:9px;border-radius:2px;flex-shrink:0;}
@media (max-width: 700px) {
  .dash-grid{grid-template-columns:1fr;}
  .dash-ring-row{flex-wrap:wrap;justify-content:center;text-align:center;}
}

.coinc-table{width:100%;border-collapse:collapse;font-size:11px;}
.coinc-table th{text-align:left;color:var(--navy);font-weight:600;font-size:11px;letter-spacing:.3px;padding:10px 12px;white-space:nowrap;border-bottom:1px solid var(--border);}
.coinc-table td{padding:8px 12px;border-bottom:1px solid var(--border);vertical-align:top;}
.coinc-table tr:last-child td{border-bottom:none;}
.coinc-table td.coinc-codigo{color:var(--navy);font-weight:700;white-space:nowrap;}
.src-chip{font-size:9px;display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:999px;margin:0 4px 4px 0;font-weight:600;}
.src-api{background:#DCE9F8;color:#0C447C;}
.src-onb{background:#EEEDFE;color:#3C3489;}
.src-eval{background:var(--green-lt);color:var(--green);}
.src-none{background:var(--bg);color:var(--muted);}

/* ---- Menú lateral (secciones dentro del expediente) + drawer mobile ---- */
.app-shell{display:flex;max-width:var(--ancho-max);margin:0 auto;align-items:flex-start;gap:0;}
.sidebar{width:230px;flex-shrink:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh);padding:10px;position:sticky;top:14px;}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--muted);background:transparent;border:none;border-radius:8px;padding:10px 12px;cursor:pointer;margin-bottom:2px;}
.nav-item .ico{width:16px;text-align:center;flex-shrink:0;font-size:13px;}
.nav-item:hover{background:var(--bg);color:var(--text);}
.nav-item.active{background:var(--navy);color:#fff;}
.main-content{flex:1;min-width:0;padding-left:16px;}
.main-content .section-title:first-child{margin-top:0;}
.panel-seccion{display:none;}
.panel-seccion.activo{display:block;}
.main-content .section-title, .main-content .section-sub, .main-content .post-list,
.main-content .postform, .main-content .busq-scroll, .main-content .notif-scroll, .main-content .mensajes-wrap,
.main-content .toolbar, .main-content .dash-grid, .main-content .tab-content, .main-content .tabs{
  max-width:none;margin-left:0;margin-right:0;
}

.btn-hamburguesa{display:none;}
.sidebar-overlay{display:none;}

@media (max-width:900px){
  .btn-hamburguesa{
    display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0;
    border:none;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;font-size:16px;cursor:pointer;
  }
  .sidebar-overlay{
    display:block;position:fixed;inset:0;background:rgba(10,14,28,.45);z-index:39;
    opacity:0;pointer-events:none;transition:opacity .2s ease;
  }
  .sidebar-overlay.abierto{opacity:1;pointer-events:auto;}
  @media (prefers-reduced-motion: reduce){ .sidebar-overlay{transition:none;} }

  .app-shell{flex-direction:column;}
  .sidebar{
    width:78%;max-width:290px;flex-direction:column;display:flex;
    position:fixed;top:0;bottom:0;left:0;z-index:40;overflow-y:auto;
    border-radius:0;box-shadow:4px 0 24px rgba(0,0,0,.18);
    transform:translateX(-105%);transition:transform .22s ease;gap:4px;padding:12px;
  }
  .sidebar.abierto{transform:translateX(0);}
  @media (prefers-reduced-motion: reduce){ .sidebar{transition:none;} }
  .nav-item{flex-direction:row;white-space:normal;text-align:left;padding:12px;margin-bottom:2px;}
  .main-content{padding-left:0;padding-top:14px;}
}

.busq-scroll{max-width:var(--ancho-max);margin:0 auto 24px auto;max-height:480px;overflow-y:auto;border:1px solid var(--border);border-radius:10px;background:#fff;padding:4px;}
.notif-scroll{max-width:var(--ancho-max);margin:0 auto 24px auto;max-height:420px;overflow-y:auto;border:1px solid var(--border);border-radius:10px;background:#fff;}
.notif-scroll .post-row{margin:0;border-radius:0;border-left:none;border-right:none;border-top:none;}
.post-row{border:1px solid var(--border);border-radius:8px;background:#fff;padding:8px 12px;margin-bottom:6px;display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:12px;flex-wrap:wrap;}
.post-row .pcode{font-weight:700;color:var(--navy);}
.post-row .pmeta{color:var(--muted);font-size:11px;}

/* ---- Hitos del proceso de postulación ---- */
.hitos-panel{border:1px solid var(--border);border-top:none;border-radius:0 0 8px 8px;background:var(--bg);padding:16px;margin:-6px 0 6px 0;font-size:12px;}
.hitos-leyenda{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin-bottom:18px;}
.hito-def{background:#fff;border:1px solid var(--border);border-radius:7px;padding:9px 11px;}
.hito-def .num{font-size:9px;font-weight:700;color:var(--red);letter-spacing:0.4px;margin-bottom:3px;}
.hito-def .nombre{font-size:11.5px;font-weight:700;color:var(--navy);margin-bottom:3px;}
.hito-def .desc{font-size:10.5px;color:var(--muted);line-height:1.45;}

.hito-timeline{position:relative;padding-left:24px;max-width:520px;}
.hito-timeline::before{content:'';position:absolute;left:8px;top:5px;bottom:5px;width:2px;background:var(--border);}
.hito-paso{position:relative;padding-bottom:16px;}
.hito-paso:last-child{padding-bottom:0;}
.hito-paso::before{content:'';position:absolute;left:-24px;top:1px;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--border);}
.hito-paso.completo::before{border-color:var(--green);background:var(--green);}
.hito-paso.completo::after{content:'✓';position:absolute;left:-20px;top:2px;font-size:10px;font-weight:700;color:#fff;}
.hito-paso.actual::before{border-color:var(--amber);background:#fff;box-shadow:0 0 0 4px var(--amber-lt);}
.hito-paso.actual::after{content:'';position:absolute;left:-19px;top:5px;width:7px;height:7px;border-radius:50%;background:var(--amber);}
.hito-paso.pendiente .hp-nombre, .hito-paso.pendiente .hp-fecha{color:var(--muted);}
.hp-nombre{font-size:12px;font-weight:600;color:var(--text);margin-bottom:1px;}
.hp-fecha{font-size:10.5px;color:var(--muted);}
.hito-paso.actual .hp-fecha{color:var(--amber);font-weight:600;}

/* ---- Calendario ---- */
.cal-cuerpo{display:grid;grid-template-columns:1fr 280px;gap:16px;align-items:start;}
@media (max-width:760px){ .cal-cuerpo{grid-template-columns:1fr;} }
.cal-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh);padding:16px;}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.cal-mes{font-size:14px;font-weight:700;color:var(--navy);text-transform:capitalize;}
.cal-nav button{width:28px;height:28px;border:1px solid var(--border);background:var(--surface);border-radius:7px;cursor:pointer;color:var(--navy);font-size:12px;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.cal-dow{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;color:var(--muted);text-align:center;padding-bottom:3px;}
.cal-dia{aspect-ratio:1;border:1px solid var(--border);border-radius:8px;padding:4px;cursor:pointer;display:flex;flex-direction:column;gap:2px;background:var(--surface);}
.cal-dia:hover{border-color:var(--navy);}
.cal-dia.fuera-de-mes{opacity:.35;pointer-events:none;}
.cal-dia.hoy{border-color:var(--red);border-width:2px;}
.cal-dia.seleccionado{background:var(--bg);border-color:var(--navy);}
.cal-dia .num{font-size:10.5px;font-weight:600;color:var(--text);}
.cal-puntos{display:flex;flex-wrap:wrap;gap:2px;margin-top:auto;}
.cal-punto{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.cal-leyenda{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border);}
.cal-leyenda-item{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--muted);}
.cal-leyenda-item .cal-punto{width:8px;height:8px;}
.cal-evento{border-left:3px solid var(--border);padding:8px 10px;margin-bottom:8px;background:var(--bg);border-radius:0 8px 8px 0;}
.cal-evento:last-child{margin-bottom:0;}
.cal-evento .tipo{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;}
.cal-evento .desc{font-size:11.5px;font-weight:600;color:var(--text);margin-top:2px;}
.cal-evento .meta{font-size:10px;color:var(--muted);margin-top:2px;}
.cal-evento .link{font-size:10px;color:var(--navy);display:inline-block;margin-top:4px;}
.cal-evento.vacio{color:var(--muted);font-size:11px;text-align:center;padding:14px 10px;border-left:none;}
.cal-prox-item{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--border);}
.cal-prox-item:last-child{border-bottom:none;}
.cal-prox-fecha{flex-shrink:0;width:34px;text-align:center;background:var(--bg);border-radius:6px;padding:4px 2px;}
.cal-prox-fecha .d{font-size:12.5px;font-weight:700;color:var(--navy);line-height:1;}
.cal-prox-fecha .m{font-size:7.5px;text-transform:uppercase;color:var(--muted);}
.cal-prox-texto{font-size:10.5px;line-height:1.4;}
.cal-prox-texto b{color:var(--navy);}

/* ---- Spinner de carga ---- */
.spinner{width:26px;height:26px;border:3px solid var(--border);border-top-color:var(--red);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 8px;}
@keyframes spin{to{transform:rotate(360deg);}}
.cargando-mini{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 10px;font-size:11px;color:var(--muted);}

/* ---- Panel de habilitación (hab-*) ---- */
.hab-resumen{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.hab-resumen h3{font-size:16px;color:var(--text);}
.hab-sello{font-size:13px;font-weight:800;padding:6px 16px;border-radius:20px;display:inline-flex;align-items:center;gap:6px;}
.hab-sello.habil{background:var(--green-lt);color:var(--green);}
.hab-sello.inhabil{background:var(--red-lt);color:var(--red-dk);}
.hab-sello.evaluando{background:var(--amber-lt);color:var(--amber);}
.hab-frase{font-size:13px;color:var(--text);margin-bottom:16px;}
.hab-frase b{font-weight:700;}
.hab-subtitulo{font-size:15px;font-weight:700;color:var(--text);margin-bottom:10px;}
.hab-card{border:1px solid var(--border);border-radius:8px;padding:14px 16px;margin-bottom:10px;display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;background:#fff;}
.hab-card .hab-titulo{font-weight:700;font-size:13px;color:var(--text);}
.hab-card .hab-institucion{font-size:11px;color:#5b7fa6;margin-top:2px;}
.hab-card .hab-info{flex:1;min-width:180px;}
.hab-card .hab-derecha{flex:2;min-width:260px;display:flex;gap:10px;align-items:flex-start;}
.hab-icono{min-width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;margin-top:1px;}
.hab-icono.cumple{background:var(--green);}
.hab-icono.no-cumple{background:var(--red);}
.hab-icono.en-proceso{background:var(--amber);}
.hab-icono.pendiente{background:var(--border);color:var(--muted);}
.hab-texto{font-size:12.5px;color:var(--text);line-height:1.4;}
.hab-motivo{font-size:11px;color:var(--red-dk);margin-top:4px;font-style:italic;}

/* ---- Overlay de etapas ---- */
.etapas-overlay{display:none;position:fixed;inset:0;background:rgba(26,39,68,.5);z-index:200;align-items:center;justify-content:center;padding:20px;}
.etapas-overlay.open{display:flex;}
.etapas-box{background:#fff;border-radius:10px;padding:20px;max-width:520px;width:100%;max-height:80vh;overflow-y:auto;position:relative;}
.etapas-cerrar{position:absolute;top:12px;right:12px;background:none;border:none;font-size:16px;cursor:pointer;color:var(--muted);}
.etapas-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;}
.etapas-grid .ef{font-size:11px;}
.etapas-grid .ef label{display:block;color:var(--muted);text-transform:uppercase;font-size:9px;font-weight:600;margin-bottom:2px;}

/* ============================================================
   ESTILO 3D — portado de Gestión Sitios 2.0 (globals.css) y adaptado a la
   paleta de Puente Público (navy #1A2744 / rojo #C0392B). Selectores con
   prefijo "body" para ganar especificidad sobre los <style> inline de cada
   módulo sin tener que editarlos.
   ============================================================ */

/* Fondo: gris azulado con luz arriba y trama de puntos tenue. */
body{
  background-color:#e6ebf2;
  background-image:
    radial-gradient(rgba(26,39,68,.09) 1px, transparent 1.2px),
    radial-gradient(ellipse 120% 60% at 50% 0%, rgba(255,255,255,.85), transparent 70%),
    linear-gradient(to bottom, #eef2f7, #dde4ee);
  background-size:18px 18px,100% 100%,100% 100%;
  background-attachment:local,fixed,fixed;
}

/* Tarjetas en relieve. */
body .card, body .expediente-head, body .hab-card, body .dash-card, body .cal-card,
body .post-row, body .pain-card, body .plan-card, body .score-card, body .sidebar{
  border:1px solid var(--border);
  background:linear-gradient(to bottom, #fafbfd, #ffffff);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -2px 0 rgba(0,0,0,.04),
    0 1px 2px rgba(15,23,42,.08),
    0 4px 10px -2px rgba(15,23,42,.12),
    0 12px 24px -8px rgba(15,23,42,.18);
}
body .post-row{transition:transform .12s ease, box-shadow .12s ease;}
body .post-row:hover{transform:translateY(-1px);}

/* Cabecera navy: brillo fino arriba y sombra en capas. */
body .folder-header{
  background:linear-gradient(to bottom, #2a3d66, #1A2744);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 2px 0 #0f1a33,
    0 8px 20px -6px rgba(10,20,45,.45);
}

/* Botón principal 3D (rojo de marca): canto inferior, sube al hover, se hunde al presionar. */
body .btn{
  border:1px solid #9b2a1f;
  background:linear-gradient(to bottom, #d65a4c, #b8342a);
  color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 2px 0 #8a2419,
    0 3px 8px -2px rgba(140,35,25,.35);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
body .btn:hover{
  background:linear-gradient(to bottom, #d65a4c, #b8342a);
  filter:brightness(1.05);
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    0 3px 0 #8a2419,
    0 6px 12px -3px rgba(140,35,25,.4);
}
body .btn:active{
  transform:translateY(2px);
  box-shadow:inset 0 2px 3px rgba(0,0,0,.18), 0 0 0 #8a2419, 0 1px 3px rgba(140,35,25,.3);
}
body .btn:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:none;}
body .btn:focus-visible{outline:2px solid #93c5fd;outline-offset:2px;}

/* Botón secundario (ghost): variante neutra 3D, mismo volumen sin competir en color. */
body .btn.ghost, body .btn.google{
  color:#1e3a5f;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
  border:1px solid #c3ccd8;
  background:linear-gradient(to bottom, #ffffff, #e4e9f0);
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 0 #b7c2d0,
    0 3px 8px -2px rgba(15,23,42,.18);
}
body .btn.ghost:hover, body .btn.google:hover{
  background:linear-gradient(to bottom, #ffffff, #e4e9f0);
  box-shadow:inset 0 1px 0 #fff, 0 3px 0 #b7c2d0, 0 6px 12px -3px rgba(15,23,42,.22);
}
body .btn.ghost:active, body .btn.google:active{
  box-shadow:inset 0 2px 3px rgba(0,0,0,.12), 0 0 0 #b7c2d0, 0 1px 3px rgba(15,23,42,.15);
}

/* Botones de la barra superior navy: "vidrio" en relieve. */
body .folder-header .btn, body .folder-header button, body .folder-header a.btn, body .top-actions .btn{
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  text-shadow:none;
  background:linear-gradient(to bottom, rgba(255,255,255,.2), rgba(255,255,255,.06));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 2px 0 rgba(0,0,0,.35),
    0 3px 8px -2px rgba(0,0,0,.45);
}
body .folder-header .btn:hover, body .folder-header button:hover, body .top-actions .btn:hover{
  transform:translateY(-1px);
  background:linear-gradient(to bottom, rgba(255,255,255,.26), rgba(255,255,255,.1));
}

/* Campos de ingreso hundidos. */
body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]),
body select, body textarea{
  border-radius:.45rem;
  background-image:linear-gradient(to bottom, #f3f6fa, #ffffff 45%);
  box-shadow:
    inset 0 1px 2px rgba(15,23,42,.12),
    inset 0 1px 0 rgba(15,23,42,.04),
    0 1px 0 rgba(255,255,255,.9);
  transition:box-shadow .15s ease, border-color .15s ease;
}
body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]):focus,
body select:focus, body textarea:focus{
  outline:none;
  background-image:none;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.08), 0 0 0 3px rgba(26,39,68,.22);
}

/* Pestañas tipo cápsula: riel hundido, pestaña activa en relieve navy. */
body .tabs{
  background:linear-gradient(to bottom, #dfe6ef, #eaeff5);
  border-radius:.6rem;
  padding:4px;
  box-shadow:
    inset 0 2px 3px rgba(15,23,42,.14),
    inset 0 -1px 0 rgba(255,255,255,.7),
    0 1px 0 rgba(255,255,255,.8);
}
body .tab-btn{border-radius:.45rem;}
body .tab-btn.active{
  color:#fff;
  background:linear-gradient(to bottom, #2a4f86, #152f57);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 1px 0 #0d1f3c,
    0 2px 5px -1px rgba(10,25,55,.45);
  text-shadow:0 1px 0 rgba(0,0,0,.3);
  border-bottom-color:transparent;
}

/* Menú lateral: ítem activo en relieve navy. */
body .nav-item.active{
  background:linear-gradient(to bottom, #2a3d66, #1A2744);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 2px 0 #0f1a33,
    0 3px 8px -2px rgba(10,20,45,.4);
}

/* Encabezados de tabla como barra en relieve. */
body table thead tr, body table th{
  background:linear-gradient(to bottom, #f4f7fb, #dfe7f1);
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}
body table thead tr{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 0 #c3d0e0, 0 2px 4px -1px rgba(15,23,42,.12);
}

/* Títulos de sección con relieve leve. */
body .section-title, body .hab-subtitulo{
  text-shadow:0 1px 0 rgba(255,255,255,.9), 0 2px 3px rgba(15,23,42,.18);
}

/* Sellos y badges con volumen. */
body .stamp, body .badge, body .hab-sello{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(15,23,42,.15);
}

/* Pantallas táctiles: área mínima para botones pequeños. */
@media (hover:none){ body .btn.small{min-height:36px;} }

@media print{
  body{background:#fff !important;}
  body .card, body .expediente-head, body .hab-card, body .dash-card, body .cal-card, body .post-row{box-shadow:none !important;}
}


/* ============================================================
   FASE 2 — Jerarquía visual (2026-09-25)
   Cuatro niveles de profundidad: hundido (campos), plano (filas),
   relieve suave (tarjetas), relieve fuerte (acción principal y
   estado crítico). Un solo botón rojo por vista: el resto usa
   .btn.sec (neutro) o .btn.ter (texto).
   ============================================================ */
:root{
  --fs-1:11px; --fs-2:12.5px; --fs-3:14px; --fs-4:17px; --fs-5:22px; --fs-6:32px;
  --sh-suave: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(15,23,42,.08), 0 4px 10px -2px rgba(15,23,42,.10);
  --sh-fuerte: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 0 rgba(0,0,0,.04), 0 1px 2px rgba(15,23,42,.08), 0 4px 10px -2px rgba(15,23,42,.12), 0 12px 24px -8px rgba(15,23,42,.18);
  --status-info:#1d4f91; --status-info-bg:#e3edfa;
  --cal-sev:#d99a3c;
}
.serif, body .section-title.serif, .titulo-serif{font-family:'DM Serif Display', Georgia, serif; font-weight:400;}
.mono{font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums;}

/* Relieve suave por defecto en tarjetas; fuerte solo donde se pide. */
body .card, body .hab-card, body .dash-card, body .cal-card, body .pain-card,
body .plan-card, body .score-card, body .sidebar{ box-shadow:var(--sh-suave); }
body .expediente-head, body .relieve-fuerte, body .plan-card.destacado{ box-shadow:var(--sh-fuerte); }

/* Filas planas: sin sombra, separadas por línea; suben solo al pasar el cursor. */
body .post-row{ box-shadow:none; background:var(--surface); }
body .post-row:hover{ box-shadow:var(--sh-suave); }

/* Botón secundario neutro y terciario (texto). */
body .btn.sec{
  color:var(--navy); text-shadow:none; border:1px solid var(--border);
  background:var(--surface); box-shadow:0 1px 2px rgba(15,23,42,.08);
}
body .btn.sec:hover{ background:var(--bg); transform:none; box-shadow:0 1px 2px rgba(15,23,42,.1); filter:none; }
body .btn.sec:active{ transform:translateY(1px); box-shadow:inset 0 1px 2px rgba(15,23,42,.12); }
body .btn.ter{
  color:var(--status-info); background:none; border:0; box-shadow:none; text-shadow:none; padding:6px 8px;
}
body .btn.ter:hover{ background:var(--status-info-bg); transform:none; box-shadow:none; filter:none; }

/* Pastillas de estado (reutilizables). */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;border-radius:999px;padding:2px 9px;white-space:nowrap;}
.pill.ok{background:var(--status-ok-bg);color:var(--status-ok);}
.pill.warn{background:var(--status-warn-bg);color:var(--status-warn);}
.pill.err{background:var(--status-error-bg);color:var(--status-error);}
.pill.neu{background:var(--status-neutral-bg);color:var(--status-neutral);}
.pill.info{background:var(--status-info-bg);color:var(--status-info);}

/* Tarjetas KPI (Mi día, dashboard). */
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.kpi{display:grid;gap:2px;background:linear-gradient(to bottom,#fafbfd,#fff);border:1px solid var(--border);border-radius:12px;box-shadow:var(--sh-suave);padding:14px 16px;}
.kpi .v{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:28px;font-weight:600;line-height:1.1;color:var(--navy);}
.kpi .l{font-size:12.5px;color:var(--muted);}
.kpi.warn .v{color:var(--status-warn);} .kpi.err .v{color:var(--status-error);} .kpi.info .v{color:var(--status-info);}
@media (max-width:720px){ .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }

/* Filas de pendientes con franja de severidad. */
.fila-pend{display:grid;grid-template-columns:4px 1fr auto auto;gap:12px;align-items:center;padding:11px 4px;border-top:1px solid var(--border);}
.fila-pend:first-child{border-top:0;}
.fila-pend .sev{align-self:stretch;border-radius:4px;background:var(--status-info);}
.fila-pend .sev.err{background:var(--status-error);} .fila-pend .sev.warn{background:var(--cal-sev);}
.fila-pend .t{font-weight:600;font-size:13.5px;} .fila-pend .s{font-size:12.5px;color:var(--muted);}
@media (max-width:560px){ .fila-pend{grid-template-columns:4px 1fr;} .fila-pend > :nth-child(3), .fila-pend > :nth-child(4){grid-column:2;} }

/* Barras de avance por capa. */
.barras-capa{display:grid;gap:8px;}
.barra-capa{display:grid;grid-template-columns:140px 1fr auto;gap:10px;align-items:center;font-size:12.5px;}
.barra-capa .pista{height:8px;border-radius:99px;background:#eef2f7;box-shadow:inset 0 1px 2px rgba(15,23,42,.12);overflow:hidden;}
.barra-capa .relleno{height:100%;border-radius:99px;}

/* Selector segmentado (reemplaza 4 botones por causal). */
.seg{display:inline-flex;padding:3px;border-radius:9px;background:#eef2f7;box-shadow:inset 0 1px 2px rgba(15,23,42,.12);gap:2px;flex-wrap:wrap;}
.seg button{font:inherit;font-size:11.5px;font-weight:600;border:0;background:none;color:var(--muted);padding:4px 9px;border-radius:7px;cursor:pointer;}
.seg button.on-ok{background:var(--status-ok-bg);color:var(--status-ok);box-shadow:0 1px 2px rgba(15,23,42,.15);}
.seg button.on-warn{background:var(--status-warn-bg);color:var(--status-warn);box-shadow:0 1px 2px rgba(15,23,42,.15);}
.seg button.on-neu{background:#fff;color:var(--text);box-shadow:0 1px 2px rgba(15,23,42,.15);}
.seg button.on-err{background:var(--status-error-bg);color:var(--status-error);box-shadow:0 1px 2px rgba(15,23,42,.15);}
.seg button:disabled{cursor:default;}
.seg button:focus-visible{outline:2px solid #93c5fd;outline-offset:1px;}


/* ============================================================
   ANCHO COMPLETO (2026-09-25) — igual que Gestión Sitios: el menú
   lateral mantiene su ancho y el contenido usa toda la pantalla.
   --ancho-max limita solo pantallas muy anchas (sobre 1920 px).
   ============================================================ */
:root{ --ancho-max: 1920px; }
.sidebar{ width:240px; }
.main-content{ padding-left:20px; }
@media (min-width:1600px){ .sidebar{ width:260px; } .main-content{ padding-left:24px; } }

/* Rótulos de grupo del menú lateral (común a todos los módulos). */
.nav-grupo{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);padding:12px 12px 4px;}
.nav-grupo:first-child{padding-top:4px;}
a.nav-item{text-decoration:none;}

/* Barra superior: botones de ícono cuadrados, bloque rol/correo y
   "Salir" con ícono. El orden visual se fija con `order`. */
body .top-actions{align-items:center;gap:10px;}
body .top-actions .selector-empresa{order:1;height:36px;font-size:12px;}
body .top-actions .btn.icono{order:2;width:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:.6rem;}
body .top-actions .btn.icono.activo{color:#86efac;}
body .top-actions .quien-bloque{order:3;display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;margin-left:6px;}
body .top-actions .quien-bloque .tag-modulo{background:none;border:0;padding:0;border-radius:0;color:#fff;font-size:13px;font-weight:700;letter-spacing:0;text-transform:none;}
body .top-actions .quien-bloque .quien{font-size:11.5px;color:rgba(255,255,255,.65);}
body .top-actions .btn.salir{order:4;height:40px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;border-radius:.6rem;}
@media (max-width:700px){ body .top-actions .quien-bloque{display:none;} }

/* Buscador de la barra superior. */
body .buscador-global{position:relative;display:flex;align-items:center;gap:8px;flex:1 1 260px;max-width:420px;margin:0 16px;
  height:36px;padding:0 14px;border-radius:999px;color:rgba(255,255,255,.75);
  background:linear-gradient(to bottom, rgba(255,255,255,.14), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 2px 6px -2px rgba(0,0,0,.4);}
body .buscador-global:focus-within{border-color:rgba(255,255,255,.5);}
body .buscador-global input{all:unset;flex:1;min-width:0;color:#fff;font-size:13px;}
body .buscador-global input::placeholder{color:rgba(255,255,255,.6);}
body .bg-resultados{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;min-width:300px;max-height:360px;overflow:auto;
  background:#fff;border-radius:.75rem;padding:6px;box-shadow:0 12px 32px -8px rgba(15,23,42,.35);border:1px solid #dbe2ea;}
body .bg-grupo{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted,#64748b);padding:8px 10px 4px;}
body .bg-item{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;gap:10px;width:100%;padding:8px 10px;border-radius:.5rem;
  font-size:13px;color:#0f172a;cursor:pointer;}
body .bg-item:hover, body .bg-item:focus-visible{background:#eef2f7;}
body .bg-item span{color:#64748b;font-size:12px;}
body .bg-vacio{padding:12px 10px;font-size:13px;color:#64748b;}
@media (max-width:700px){ body .buscador-global{order:3;flex-basis:100%;max-width:none;margin:10px 0 0;} }
body .buscador-global input::-webkit-search-cancel-button{-webkit-appearance:none;}
/* Los resultados viven dentro de .folder-header: anular el estilo "vidrio"
   que esa barra aplica a todos sus botones (dejaba el texto blanco sobre blanco). */
body .folder-header .bg-resultados .bg-item{color:#0f172a;background:none;border:0;box-shadow:none;text-shadow:none;transform:none;font-weight:500;height:auto;justify-content:space-between}
body .folder-header .bg-resultados .bg-item:hover, body .folder-header .bg-resultados .bg-item:focus-visible{background:#eef2f7;transform:none}

/* Sub-modos (bajo las pestañas): mismo riel hundido que .tabs, un nivel
   color: la opción activa va en el mismo relieve navy. */
body .seg.modos{background:linear-gradient(to bottom,#dfe6ef,#eaeff5);border-radius:.6rem;padding:4px;gap:4px;
  box-shadow:inset 0 2px 3px rgba(15,23,42,.14),inset 0 -1px 0 rgba(255,255,255,.7),0 1px 0 rgba(255,255,255,.8)}
body .seg.modos button{font-size:13px;font-weight:600;padding:8px 14px;border-radius:.45rem;color:var(--muted)}
body .seg.modos button:hover{color:var(--navy)}
body .seg.modos button.on-neu{color:#fff;background:linear-gradient(to bottom,#2a4f86,#152f57);text-shadow:0 1px 0 rgba(0,0,0,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 0 #0d1f3c,0 2px 5px -1px rgba(10,25,55,.45)}

/* El input del buscador global no debe tomar el estilo "hundido" de los campos. */
body .buscador-global input[type="search"]{all:unset;flex:1;min-width:0;color:#fff;font-size:13px;background:none!important;box-shadow:none!important;border:0!important}

/* ============================================================
   MENÚ LATERAL COLAPSABLE Y OCULTABLE (2026-10-28) — igual que Gestión Sitios:
   · Contraer: queda solo con íconos (64 px); al pasar el mouse se expande
     por encima del contenido sin moverlo.
   · Ocultar: desaparece por completo; aparece al acercar el mouse al borde
     izquierdo. La preferencia se recuerda (localStorage, ver auth-shared.js).
   Solo en escritorio; en pantallas chicas sigue el cajón con hamburguesa.
   ============================================================ */
.sb-ctl, .sb-borde{display:none;}
@media (min-width:901px){
  .app-shell{--sb-w:240px;}
  .app-shell .sidebar{width:var(--sb-w);transition:width .2s ease,margin-right .2s ease,transform .2s ease,box-shadow .2s ease;}
  .sb-ctl{display:flex;justify-content:flex-end;gap:4px;margin:-2px -2px 6px;}
  .sb-ctl button{width:28px;height:28px;display:grid;place-items:center;padding:0;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer;}
  .sb-ctl button:hover,.sb-ctl button:focus-visible{background:var(--bg);color:var(--text);}
  .sb-ctl button svg{width:16px;height:16px;display:block;transition:transform .2s ease;}
  .sb-ctl .sb-col.es-col svg{transform:rotate(180deg);}

  /* Contraído: solo íconos */
  .app-shell.sb-colapsado .sidebar:not(.sb-hover){width:64px;padding:10px 8px;}
  .app-shell.sb-colapsado .sidebar:not(.sb-hover) .nav-txt{display:none;}
  .app-shell.sb-colapsado .sidebar:not(.sb-hover) .nav-item{justify-content:center;padding:10px 0;gap:0;}
  .app-shell.sb-colapsado .sidebar:not(.sb-hover) .nav-grupo{font-size:0;line-height:0;height:1px;padding:0;margin:8px 6px;background:var(--border);}
  .app-shell.sb-colapsado .sidebar:not(.sb-hover) .sb-ctl{justify-content:center;margin:-2px 0 6px;}
  .app-shell.sb-colapsado .sidebar:not(.sb-hover) .sb-ocu{display:none;}
  /* Contraído + mouse encima: se expande flotando; el contenido no se mueve */
  .app-shell.sb-colapsado .sidebar.sb-hover{margin-right:calc(64px - var(--sb-w));z-index:30;box-shadow:6px 0 28px rgba(10,25,55,.22);}

  /* Oculto: fuera del flujo; se muestra al acercar el mouse al borde izquierdo */
  .app-shell.sb-oculto .sidebar{position:fixed;top:0;bottom:0;left:0;z-index:1100;border-radius:0 14px 14px 0;overflow-y:auto;transform:translateX(-103%);box-shadow:none;}
  .app-shell.sb-oculto .sidebar.sb-hover{transform:none;box-shadow:6px 0 28px rgba(10,25,55,.28);}
  .app-shell.sb-oculto .main-content{padding-left:0;}
  .app-shell.sb-oculto .sb-borde{display:flex;position:fixed;top:0;bottom:0;left:0;width:12px;z-index:1090;align-items:center;}
  .app-shell.sb-oculto .sb-borde span{display:block;width:6px;height:64px;border-radius:0 6px 6px 0;background:var(--navy);opacity:.75;box-shadow:0 1px 4px rgba(10,25,55,.35);}
  @media (prefers-reduced-motion: reduce){ .app-shell .sidebar{transition:none;} .sb-ctl button svg{transition:none;} }
}
@media (min-width:1600px){ .app-shell{--sb-w:260px;} }