/* ============================================================
   PORTAL DEL CLIENTE — estilos.
   FASE24_3: rediseño visual moderno + navegación consolidada (barra
   inferior en móvil, sidebar en escritorio) + mobile first. Mismos
   nombres de clase que ya usan las vistas salvo donde el propio informe
   de la tarea documenta el cambio (tabla de archivos -> lista de
   tarjetas, menú de 8 rutas -> 5). Ningún cambio aquí toca lógica,
   consultas ni Supabase.
   ============================================================ */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{min-height:100vh;margin:0;background:var(--fs-bg-app);color:var(--fs-text-primary);font-family:var(--fs-font);-webkit-font-smoothing:antialiased}

/* Foco visible en todo elemento interactivo (accesibilidad, FASE24_3
   sección 10) — un solo anillo consistente, nunca solo un cambio de
   color que dependa de distinguir tonos. */
:focus-visible{outline:2px solid var(--fs-accent);outline-offset:2px;border-radius:var(--fs-radius-sm)}
a{color:var(--fs-accent)}

.fs-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Enlace "saltar al contenido" — visible solo al recibir foco por
   teclado, primer elemento tabulable de la página. */
.fs-skip-link{position:absolute;left:8px;top:-48px;background:var(--fs-primary);color:#fff;padding:10px 16px;border-radius:var(--fs-radius-sm);z-index:1000;transition:top var(--fs-transition)}
.fs-skip-link:focus{top:8px}

/* ---------- Login ---------- */
#fspc-login{max-width:380px;margin:64px auto;background:var(--fs-bg-surface);border:1px solid var(--fs-border);border-radius:var(--fs-radius-lg);padding:32px 28px;box-shadow:var(--fs-shadow)}
#fspc-login h3{margin:0 0 4px;font-size:var(--fs-text-xl);font-weight:700;color:var(--fs-text-primary)}
#fspc-login p{margin:0 0 20px;font-size:var(--fs-text-sm);color:var(--fs-text-muted);line-height:1.5}
#fspc-login label{display:block;font-size:var(--fs-text-sm);font-weight:600;color:var(--fs-text-secondary);margin-bottom:6px;margin-top:14px}
#fspc-login input{width:100%;padding:12px 14px;min-height:48px;border:1px solid var(--fs-border);border-radius:var(--fs-radius);font-size:16px;font-family:inherit;transition:border-color var(--fs-transition),box-shadow var(--fs-transition)}
#fspc-login input:focus{outline:none;border-color:var(--fs-accent);box-shadow:0 0 0 3px var(--fs-accent-light)}
#fspc-login button{width:100%;margin-top:24px;padding:14px;min-height:52px;border:none;border-radius:var(--fs-radius);background:var(--fs-accent);color:#fff;font-size:var(--fs-text-md);font-weight:700;cursor:pointer;transition:background var(--fs-transition),transform var(--fs-transition)}
#fspc-login button:hover{background:var(--fs-accent-hover)}
#fspc-login button:active{transform:scale(.98)}
#fspc-login button:disabled{opacity:.55;cursor:default;transform:none}
#fspc-login .fspc-msg{margin-top:12px;font-size:var(--fs-text-sm);color:var(--fs-error)}
#fspc-login .fspc-msg.ok{color:var(--fs-success)}
.fspc-login-ayuda{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--fs-border);font-size:var(--fs-text-sm);color:var(--fs-text-muted);line-height:1.5;text-align:center}

/* ---------- App shell ---------- */
#fspc-app{display:flex;min-height:100vh;background:var(--fs-bg-app)}

/* Navegación: mismo <aside>/<nav> para las 3 presentaciones (barra
   inferior en móvil, rail de iconos en tablet, sidebar completo en
   escritorio) — solo cambia el CSS por punto de corte, no el marcado. */
#fspc-sidebar{background:var(--fs-primary);color:#fff;display:flex;flex-direction:column}
#fspc-sidebar .fspc-brand{padding:20px 20px 16px;font-size:var(--fs-text-md);font-weight:700;letter-spacing:.2px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:8px}
#fspc-sidebar .fspc-brand small{display:block;font-size:var(--fs-text-xs);font-weight:400;opacity:.65;margin-top:2px}
#fspc-sidebar nav{flex:1;display:flex;flex-direction:column;gap:2px;padding:0 12px}
#fspc-sidebar .fspc-nav-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--fs-radius);color:rgba(255,255,255,.78);font-size:var(--fs-text-sm);font-weight:600;text-decoration:none;cursor:pointer;border:none;background:none;text-align:left;width:100%;font-family:inherit;transition:background var(--fs-transition),color var(--fs-transition)}
#fspc-sidebar .fspc-nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
#fspc-sidebar .fspc-nav-item.active{background:rgba(255,255,255,.14);color:#fff}
#fspc-sidebar .fspc-nav-item.active .fspc-nav-icon{color:#fff}
#fspc-sidebar .fspc-nav-icon{width:20px;height:20px;flex:0 0 20px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85)}
#fspc-sidebar .fspc-nav-icon svg{width:20px;height:20px}

#fspc-main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--fs-bg-app)}
#fspc-topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:var(--fs-bg-surface);border-bottom:1px solid var(--fs-border);position:sticky;top:0;z-index:10}
#fspc-topbar .fspc-topbar-title{font-size:var(--fs-text-md);font-weight:700;color:var(--fs-text-primary)}
#fspc-topbar .fspc-topbar-user{display:flex;align-items:center;gap:16px;font-size:var(--fs-text-sm);color:var(--fs-text-muted)}
#fspc-topbar button{background:none;border:none;color:var(--fs-accent);font-size:var(--fs-text-sm);cursor:pointer;font-family:inherit;font-weight:600;padding:8px;border-radius:var(--fs-radius-sm)}
#fspc-topbar button:hover{background:var(--fs-accent-light)}
#fspc-content{flex:1;padding:24px;overflow:auto}

/* ---------- Móvil: barra de navegación inferior fija (<768px) ---------- */
@media (max-width:767px){
  #fspc-app{flex-direction:column}

  #fspc-sidebar{
    position:fixed;left:0;right:0;bottom:0;z-index:20;
    width:100%;height:var(--fs-bottomnav-h);
    padding-bottom:var(--fs-safe-bottom);
    border-top:1px solid rgba(255,255,255,.1);
    box-shadow:0 -2px 12px rgba(16,24,40,.12);
  }
  #fspc-sidebar .fspc-brand{display:none}
  #fspc-sidebar nav{flex-direction:row;padding:0;gap:0;height:var(--fs-bottomnav-h)}
  #fspc-sidebar .fspc-nav-item{
    flex:1 1 0;flex-direction:column;justify-content:center;gap:2px;
    min-height:44px;padding:6px 4px;border-radius:0;
    font-size:10.5px;letter-spacing:.1px;
  }
  #fspc-sidebar .fspc-nav-item.active{background:transparent;color:#fff}
  #fspc-sidebar .fspc-nav-item.active .fspc-nav-icon{color:var(--fs-accent-light)}
  #fspc-sidebar .fspc-nav-label{line-height:1.1}

  #fspc-main{padding-bottom:calc(var(--fs-bottomnav-h) + var(--fs-safe-bottom))}
  #fspc-content{padding:16px}
  #fspc-topbar{padding:12px 16px}
}

/* ---------- Tablet: rail de iconos, sin barra inferior (768-1023px) ---------- */
@media (min-width:768px) and (max-width:1023px){
  #fspc-sidebar{width:var(--fs-rail-w);flex:0 0 var(--fs-rail-w)}
  #fspc-sidebar .fspc-brand{display:none}
  #fspc-sidebar .fspc-nav-item{flex-direction:column;gap:4px;font-size:10px;padding:10px 4px;text-align:center}
  #fspc-content{padding:20px}
}

/* ---------- Escritorio: sidebar completo (1024px+) ---------- */
@media (min-width:1024px){
  #fspc-sidebar{width:var(--fs-sidebar-w);flex:0 0 var(--fs-sidebar-w);padding:20px 0}
  #fspc-content{padding:32px;max-width:1100px;margin:0 auto;width:100%}
}

/* ---------- Componentes reutilizados en las vistas ---------- */
.fs-page-header{margin-bottom:var(--fs-space-5);display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:var(--fs-space-2)}
.fs-page-title{font-size:var(--fs-text-xl);font-weight:700;color:var(--fs-text-primary);letter-spacing:-.2px}
.fs-page-subtitle{font-size:var(--fs-text-sm);color:var(--fs-text-muted);margin-top:4px}

.fs-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--fs-space-4);margin-bottom:var(--fs-space-5)}
.fs-kpi-card{background:var(--fs-bg-surface);border:1px solid var(--fs-border);border-radius:var(--fs-radius-lg);padding:var(--fs-space-4);box-shadow:var(--fs-shadow-sm)}
.fs-kpi-label{font-size:var(--fs-text-xs);color:var(--fs-text-muted);margin-bottom:var(--fs-space-2);text-transform:uppercase;letter-spacing:.4px}
.fs-kpi-value{font-size:26px;font-weight:700;color:var(--fs-text-primary)}
.fs-kpi-value.alerta{color:var(--fs-critica)}

.fs-panel{background:var(--fs-bg-surface);border:1px solid var(--fs-border);border-radius:var(--fs-radius-lg);padding:var(--fs-space-5);box-shadow:var(--fs-shadow-sm);margin-bottom:var(--fs-space-4)}
.fs-panel-title{font-size:var(--fs-text-xs);font-weight:700;color:var(--fs-text-secondary);text-transform:uppercase;letter-spacing:.6px;margin-bottom:var(--fs-space-4);padding-bottom:var(--fs-space-3);border-bottom:1px solid var(--fs-border)}

.fs-card{background:var(--fs-bg-surface);border:1px solid var(--fs-border);border-radius:var(--fs-radius-lg);padding:var(--fs-space-4) var(--fs-space-5);box-shadow:var(--fs-shadow-sm);margin-bottom:var(--fs-space-3);transition:box-shadow var(--fs-transition)}
.fs-card-titulo{font-size:var(--fs-text-base);font-weight:700;color:var(--fs-text-primary);margin-bottom:var(--fs-space-2)}
.fs-card-fila{font-size:var(--fs-text-sm);color:var(--fs-text-secondary);margin-top:4px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.fs-card-fila b{color:var(--fs-text-primary);font-weight:600}
.fs-card-items{margin-top:var(--fs-space-3);padding-top:var(--fs-space-3);border-top:1px solid var(--fs-border)}
.fs-card-item{font-size:12.5px;color:var(--fs-text-secondary);padding:4px 0;display:flex;align-items:center;gap:6px}

.fs-badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--fs-radius-pill);font-size:11px;font-weight:700;white-space:nowrap;letter-spacing:.2px}
.fs-badge-gris{background:#F2F4F7;color:var(--fs-text-secondary)}
.fs-badge-azul{background:var(--fs-accent-light);color:var(--fs-accent)}
.fs-badge-ambar{background:var(--fs-media-bg);color:var(--fs-media)}
.fs-badge-rojo{background:var(--fs-critica-bg);color:var(--fs-critica)}
.fs-badge-verde{background:var(--fs-success-bg);color:var(--fs-success)}

/* Alertas en línea (Inicio) — no confundir con .fs-msg (resultado de
   una acción concreta): esto es un aviso persistente de contexto. */
.fs-alert{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--fs-radius);font-size:var(--fs-text-sm);margin-bottom:var(--fs-space-4)}
.fs-alert-ambar{background:var(--fs-media-bg);color:#92400E;border:1px solid #FDE68A}
.fs-alert-rojo{background:var(--fs-critica-bg);color:#991B1B;border:1px solid #FECACA}
.fs-alert a{font-weight:700;white-space:nowrap}

.fs-table-wrap{background:var(--fs-bg-surface);border-radius:var(--fs-radius-lg);border:1px solid var(--fs-border);box-shadow:var(--fs-shadow-sm);overflow-x:auto}
table.fs-table{width:100%;border-collapse:collapse;min-width:640px;font-size:var(--fs-text-sm)}
table.fs-table th,table.fs-table td{padding:10px 12px;border-bottom:1px solid var(--fs-border);text-align:left;vertical-align:middle}
table.fs-table th{background:var(--fs-bg-surface-2);font-weight:600;color:var(--fs-text-muted);white-space:nowrap;font-size:11px;text-transform:uppercase;letter-spacing:.3px}
table.fs-table tr:last-child td{border-bottom:none}
table.fs-table tr:hover td{background:var(--fs-bg-app)}

.fs-toolbar{display:flex;flex-wrap:wrap;gap:var(--fs-space-2);align-items:center;margin-bottom:var(--fs-space-4);background:var(--fs-bg-surface);border:1px solid var(--fs-border);padding:var(--fs-space-3);border-radius:var(--fs-radius-lg);box-shadow:var(--fs-shadow-sm)}
.fs-toolbar select,.fs-toolbar input{padding:9px 10px;min-height:44px;border:1px solid var(--fs-border);border-radius:var(--fs-radius-sm);font-size:14px;background:var(--fs-bg-surface);color:var(--fs-text-primary);font-family:inherit}
@media (max-width:767px){
  .fs-toolbar{flex-direction:column;align-items:stretch}
  .fs-toolbar select,.fs-toolbar input,.fs-toolbar button{width:100%}
}

.fs-btn{padding:10px 18px;min-height:44px;border:none;border-radius:var(--fs-radius);font-size:14px;cursor:pointer;font-weight:600;font-family:inherit;transition:opacity var(--fs-transition),background var(--fs-transition),transform var(--fs-transition),box-shadow var(--fs-transition);display:inline-flex;align-items:center;justify-content:center;gap:8px}
.fs-btn-primary{background:var(--fs-accent);color:#fff}
.fs-btn-primary:hover{background:var(--fs-accent-hover)}
.fs-btn-primary:active{transform:scale(.98)}
.fs-btn-secondary{background:#EEF0F3;color:var(--fs-text-primary)}
.fs-btn-secondary:hover{background:#E4E7EC}
.fs-btn-secondary:active{transform:scale(.98)}
.fs-btn:disabled{opacity:.5;cursor:default;transform:none}
.fs-btn-sm{padding:7px 12px;min-height:38px;font-size:12px}
/* Boton de accion principal de cada pantalla de envio: grande, a lo
   ancho, facil de acertar con el pulgar en movil. */
.fs-btn-grande{width:100%;min-height:52px;font-size:16px;margin-top:var(--fs-space-2)}

/* CTA primario de Inicio: mas prominente que un fs-btn normal, con
   subtitulo — el punto de entrada principal de toda la app. */
.fs-btn-cta{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--fs-accent);color:#fff;border:none;border-radius:var(--fs-radius-lg);padding:18px 20px;margin-bottom:var(--fs-space-5);cursor:pointer;box-shadow:var(--fs-shadow);transition:transform var(--fs-transition),box-shadow var(--fs-transition)}
.fs-btn-cta:hover{box-shadow:var(--fs-shadow-lg)}
.fs-btn-cta:active{transform:scale(.99)}
.fs-btn-cta-texto{font-size:var(--fs-text-lg);font-weight:700}
.fs-btn-cta-sub{font-size:var(--fs-text-sm);opacity:.85}

.fs-grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--fs-space-4)}
.fs-field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--fs-space-3)}
.fs-field label{font-size:var(--fs-text-sm);font-weight:600;color:var(--fs-text-secondary)}
/* font-size:16px minimo: por debajo de eso, iOS Safari hace zoom
   automatico al enfocar el campo, una fuente de confusion tipica
   en movil. */
.fs-field input,.fs-field select,.fs-field textarea{width:100%;padding:12px 14px;min-height:46px;border:1px solid var(--fs-border);border-radius:var(--fs-radius);font-size:16px;font-family:inherit;background:var(--fs-bg-surface);color:var(--fs-text-primary);transition:border-color var(--fs-transition),box-shadow var(--fs-transition)}
.fs-field textarea{min-height:80px}
.fs-field input:focus,.fs-field select:focus,.fs-field textarea:focus{outline:none;border-color:var(--fs-accent);box-shadow:0 0 0 3px var(--fs-accent-light)}
.fs-field.required label::after{content:" *";color:var(--fs-error)}
.fs-field-hint{font-size:var(--fs-text-xs);color:var(--fs-text-muted)}

.fs-msg{padding:12px 14px;border-radius:var(--fs-radius);margin:0 0 var(--fs-space-4);font-size:var(--fs-text-sm)}
.fs-msg.ok{background:var(--fs-success-bg);color:#166534;border:1px solid #86efac}
.fs-msg.err{background:var(--fs-error-bg);color:#991b1b;border:1px solid #fca5a5}

.fs-empty{padding:40px 24px;text-align:center;color:var(--fs-text-muted);font-size:var(--fs-text-sm);line-height:1.6}
.fs-empty-error{color:var(--fs-critica)}
.fs-loader{display:flex;align-items:center;justify-content:center;gap:var(--fs-space-2);padding:40px;color:var(--fs-text-muted);font-size:var(--fs-text-sm)}
.fs-spinner{width:16px;height:16px;border:2px solid var(--fs-border);border-top-color:var(--fs-accent);border-radius:50%;animation:fspc-spin .7s linear infinite}
@keyframes fspc-spin{to{transform:rotate(360deg)}}

.fs-enlace-box{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--fs-accent-light);border:1px solid #BFDBFE;border-radius:var(--fs-radius-lg);padding:16px 18px;margin-bottom:var(--fs-space-4)}
.fs-enlace-texto{font-size:var(--fs-text-sm);color:var(--fs-text-primary);max-width:520px}
.fs-enlace-texto b{display:block;font-size:14px;margin-bottom:3px}
.fs-enlace-box.fs-enlace-off{background:var(--fs-bg-surface-2);border-color:var(--fs-border)}
.fs-enlace-off .fs-field-hint{margin-top:4px}
iframe.fs-doc-iframe{width:100%;height:480px;border:1px solid var(--fs-border);border-radius:var(--fs-radius-lg);margin-top:var(--fs-space-4)}

/* ---------- Hub "Enviar" (FASE24_3, sección 2) ---------- */
.fs-hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--fs-space-4)}
.fs-hub-card{display:flex;flex-direction:column;align-items:flex-start;gap:var(--fs-space-2);text-align:left;background:var(--fs-bg-surface);border:1px solid var(--fs-border);border-radius:var(--fs-radius-lg);padding:var(--fs-space-5);cursor:pointer;font-family:inherit;box-shadow:var(--fs-shadow-sm);transition:border-color var(--fs-transition),box-shadow var(--fs-transition),transform var(--fs-transition);min-height:132px}
.fs-hub-card:hover{border-color:var(--fs-accent);box-shadow:var(--fs-shadow)}
.fs-hub-card:active{transform:scale(.99)}
.fs-hub-card-icono{color:var(--fs-accent);background:var(--fs-accent-light);border-radius:var(--fs-radius);padding:10px;display:inline-flex}
.fs-hub-card-titulo{font-size:var(--fs-text-md);font-weight:700;color:var(--fs-text-primary)}
.fs-hub-card-desc{font-size:var(--fs-text-sm);color:var(--fs-text-muted);line-height:1.4}
.fs-hub-volver{margin-bottom:var(--fs-space-4)}
.fs-hub-seccion-titulo{font-size:var(--fs-text-sm);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--fs-text-muted);margin:var(--fs-space-6) 0 var(--fs-space-3)}
.fs-hub-seccion-titulo:first-of-type{margin-top:var(--fs-space-4)}

/* ---------- Gestiones laborales (FASE25.5): checkboxes de formulario y
   tarjetas de trabajador (peonadas/horas) ---------- */
.fs-checkbox-label{display:flex;align-items:center;gap:8px;font-size:var(--fs-text-sm);color:var(--fs-text-primary);cursor:pointer;font-weight:400}
.fs-checkbox-label input[type="checkbox"]{width:auto;min-height:0;flex:0 0 auto}
.fs-checkbox-grupo{display:flex;flex-wrap:wrap;gap:var(--fs-space-3) var(--fs-space-4)}
.fs-gl-fila-trabajador{margin-bottom:var(--fs-space-3)}
/* La marca "*" de .fs-field.required se genera para CUALQUIER <label>
   dentro del contenedor: en un checkboxGroup hay varias <label> (una por
   opción) y todas heredarían el asterisco, dando a entender que cada
   opción es obligatoria por separado en vez de "elige al menos una". El
   asterisco real ya está en la pregunta (label principal); se anula en
   las etiquetas de cada opción. */
.fs-field.required .fs-checkbox-grupo label::after{content:none}

/* ---------- Lista de archivos de subida (FASE24_3, sección 8) ----------
   Sustituye a la <table> anterior: en pantallas estrechas una tabla de
   4 columnas obliga a scroll lateral; esta lista envuelve su contenido
   en su lugar. */
.fs-file-picker{margin-bottom:var(--fs-space-3)}
.fs-file-picker-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;min-height:46px;border:1.5px dashed var(--fs-border-strong);border-radius:var(--fs-radius);background:var(--fs-bg-surface-2);color:var(--fs-accent);font-weight:700;font-size:14px;cursor:pointer;transition:border-color var(--fs-transition),background var(--fs-transition)}
.fs-file-picker-btn:hover{border-color:var(--fs-accent);background:var(--fs-accent-light)}
.fs-file-input-oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fs-file-input-oculto:focus-visible + .fs-file-picker-btn,.fs-file-input-oculto:focus + .fs-file-picker-btn{outline:2px solid var(--fs-accent);outline-offset:2px}

.fs-file-list{display:flex;flex-direction:column;gap:var(--fs-space-2);margin-top:var(--fs-space-3)}
.fs-file-row{background:var(--fs-bg-surface-2);border:1px solid var(--fs-border);border-radius:var(--fs-radius);padding:var(--fs-space-3);display:flex;flex-wrap:wrap;align-items:center;gap:var(--fs-space-2) var(--fs-space-3)}
.fs-file-row-main{display:flex;align-items:center;gap:var(--fs-space-3);flex:1 1 200px;min-width:0}
.fs-file-icon{color:var(--fs-text-muted);flex:0 0 auto}
.fs-file-row-info{min-width:0}
.fs-file-nombre{font-size:var(--fs-text-sm);font-weight:600;color:var(--fs-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fs-file-meta{font-size:var(--fs-text-xs);color:var(--fs-text-muted)}
.fs-file-row-estado{display:flex;align-items:center;gap:var(--fs-space-2)}
.fs-file-quitar{background:none;border:none;color:var(--fs-text-muted);cursor:pointer;padding:6px;border-radius:var(--fs-radius-sm);display:flex;min-width:32px;min-height:32px;align-items:center;justify-content:center;transition:background var(--fs-transition),color var(--fs-transition)}
.fs-file-quitar:hover{background:var(--fs-critica-bg);color:var(--fs-critica)}
.fs-file-motivo{flex-basis:100%;font-size:var(--fs-text-xs);color:var(--fs-critica)}

/* ---------- Feed de Avisos (FASE24_3, sección 1) ---------- */
.fs-avisos-feed{display:flex;flex-direction:column;gap:0;padding:0}
.fs-aviso-item{display:flex;align-items:flex-start;gap:var(--fs-space-3);padding:var(--fs-space-4);border-bottom:1px solid var(--fs-border)}
.fs-aviso-item:last-child{border-bottom:none}
.fs-aviso-icono{flex:0 0 auto;color:var(--fs-text-muted);margin-top:1px}
.fs-aviso-item.fs-alert-rojo .fs-aviso-icono{color:var(--fs-critica)}
.fs-aviso-item.fs-alert-ambar .fs-aviso-icono{color:var(--fs-media)}
.fs-aviso-texto{font-size:var(--fs-text-sm);color:var(--fs-text-secondary);line-height:1.5}

/* ---------- Mensajes (FASE25 3-4): pestañas, lista de conversaciones,
   hilo y compositor. Mobile-first: la misma tarjeta apilada de móvil ya
   funciona en escritorio (más aire, sin scroll horizontal en ningún
   punto). ---------- */
.fs-msg-tabs{display:flex;gap:var(--fs-space-2);margin-bottom:var(--fs-space-4);border-bottom:1px solid var(--fs-border)}
.fs-msg-tab{background:none;border:none;font-family:inherit;font-size:var(--fs-text-sm);font-weight:600;color:var(--fs-text-muted);padding:10px 4px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--fs-transition),border-color var(--fs-transition)}
.fs-msg-tab.active{color:var(--fs-accent);border-bottom-color:var(--fs-accent)}
.fs-msg-tab:hover{color:var(--fs-text-primary)}

.fs-conv-toolbar{display:flex;justify-content:flex-end;margin-bottom:var(--fs-space-4)}
.fs-conv-list{display:flex;flex-direction:column;gap:var(--fs-space-3)}

.fs-conv-card{display:flex;flex-direction:column;gap:6px;text-align:left;width:100%;background:var(--fs-bg-surface);border:1px solid var(--fs-border);border-radius:var(--fs-radius);padding:var(--fs-space-4);cursor:pointer;font-family:inherit;transition:box-shadow var(--fs-transition),transform var(--fs-transition)}
.fs-conv-card:hover{box-shadow:var(--fs-shadow)}
.fs-conv-card:active{transform:scale(.99)}
.fs-conv-card-noleida{border-left:3px solid var(--fs-accent)}
.fs-conv-card-fila1{display:flex;align-items:center;justify-content:space-between;gap:var(--fs-space-2)}
.fs-conv-card-asunto{font-size:var(--fs-text-md);font-weight:700;color:var(--fs-text-primary);display:flex;align-items:center;gap:6px}
.fs-conv-punto{width:8px;height:8px;border-radius:50%;background:var(--fs-accent);flex:0 0 auto}
.fs-conv-card-estrella{color:var(--fs-media);display:flex;flex:0 0 auto}
.fs-conv-card-resumen{font-size:var(--fs-text-sm);color:var(--fs-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fs-conv-card-fila3{display:flex;align-items:center;justify-content:space-between;gap:var(--fs-space-2);margin-top:2px}
.fs-conv-card-fecha{font-size:var(--fs-text-xs);color:var(--fs-text-muted)}

@media (min-width:1024px){
  .fs-conv-card{flex-direction:row;align-items:center;flex-wrap:wrap;gap:var(--fs-space-3)}
  .fs-conv-card-fila1{flex:1 1 260px}
  .fs-conv-card-resumen{flex:2 1 320px}
  .fs-conv-card-fila3{flex:0 0 auto}
}

.fs-hilo-volver{display:inline-flex;align-items:center;gap:6px;background:none;border:none;font-family:inherit;font-size:var(--fs-text-sm);font-weight:600;color:var(--fs-accent);cursor:pointer;padding:8px 0;margin-bottom:var(--fs-space-2)}
.fs-hilo-header{display:flex;align-items:center;justify-content:space-between;gap:var(--fs-space-3);padding-bottom:var(--fs-space-3);border-bottom:1px solid var(--fs-border);margin-bottom:var(--fs-space-3)}
.fs-hilo-header-info{display:flex;align-items:center;gap:var(--fs-space-3);flex-wrap:wrap}
.fs-hilo-asunto{font-size:var(--fs-text-lg);font-weight:700;color:var(--fs-text-primary)}
.fs-hilo-destacar{background:none;border:none;color:var(--fs-media);cursor:pointer;padding:6px;border-radius:var(--fs-radius-sm);flex:0 0 auto}
.fs-hilo-destacar:hover{background:var(--fs-media-bg)}

.fs-hilo-mensajes{display:flex;flex-direction:column;gap:var(--fs-space-3);max-height:55vh;overflow-y:auto;padding:var(--fs-space-2) 2px;margin-bottom:var(--fs-space-3)}
.fs-hilo-msg{max-width:85%;padding:10px 14px;border-radius:var(--fs-radius);font-size:var(--fs-text-sm);line-height:1.5}
.fs-hilo-msg-autor{font-size:var(--fs-text-xs);font-weight:700;margin-bottom:2px;opacity:.75}
.fs-hilo-msg-texto{white-space:pre-line;overflow-wrap:break-word}
.fs-hilo-msg-fecha{font-size:var(--fs-text-xs);color:var(--fs-text-muted);margin-top:4px}

.fs-hilo-msg-cliente{align-self:flex-end;background:var(--fs-accent);color:#fff}
.fs-hilo-msg-cliente .fs-hilo-msg-fecha{color:rgba(255,255,255,.75)}
.fs-hilo-msg-empleado{align-self:flex-start;background:var(--fs-bg-surface-2);border:1px solid var(--fs-border);color:var(--fs-text-primary)}
.fs-hilo-msg-empleado .fs-hilo-msg-autor{color:var(--fs-accent)}
.fs-hilo-msg-ia{align-self:flex-start;background:var(--fs-accent-light);border:1px solid var(--fs-border);color:var(--fs-text-primary)}
.fs-hilo-msg-ia .fs-hilo-msg-autor{color:var(--fs-accent)}
.fs-hilo-msg-sistema{align-self:center;background:none;border:1px dashed var(--fs-border);color:var(--fs-text-muted);max-width:95%;text-align:center}
.fs-hilo-msg-sistema .fs-hilo-msg-autor{opacity:.6}

.fs-hilo-compositor{display:flex;gap:var(--fs-space-2);align-items:flex-end}
.fs-hilo-compositor textarea{flex:1;resize:none;padding:12px 14px;border:1px solid var(--fs-border);border-radius:var(--fs-radius);font-family:inherit;font-size:16px}
.fs-hilo-compositor textarea:focus{outline:none;border-color:var(--fs-accent);box-shadow:0 0 0 3px var(--fs-accent-light)}
.fs-hilo-compositor-btn{flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:none;background:var(--fs-accent);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--fs-transition),transform var(--fs-transition)}
.fs-hilo-compositor-btn:hover{background:var(--fs-accent-hover)}
.fs-hilo-compositor-btn:active{transform:scale(.94)}

.fs-inicio-mensajes-card{display:block;width:100%;text-align:left;background:var(--fs-bg-surface);border:1px solid var(--fs-border);border-radius:var(--fs-radius);padding:var(--fs-space-4);margin-bottom:var(--fs-space-4);cursor:pointer;font-family:inherit;transition:box-shadow var(--fs-transition)}
.fs-inicio-mensajes-card:hover{box-shadow:var(--fs-shadow)}
.fs-inicio-mensajes-titulo{font-size:var(--fs-text-sm);font-weight:700;color:var(--fs-accent);margin-bottom:4px}
.fs-inicio-mensajes-resumen{font-size:var(--fs-text-sm);color:var(--fs-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Historial: detalle de archivos desplegable */
.fs-hist-toggle{background:none;border:none;color:var(--fs-accent);font-size:var(--fs-text-sm);font-weight:600;cursor:pointer;padding:6px 0;font-family:inherit}
.fs-hist-toggle:hover{text-decoration:underline}

/* ---------- Centro de Solicitudes (extractos bancarios) ---------- */
.fspc-sol-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--fs-space-3)}
.fspc-sol-opcion{padding:var(--fs-space-4);min-height:56px;border:1px solid var(--fs-border);border-radius:var(--fs-radius-lg);background:var(--fs-bg-surface);color:var(--fs-text-primary);font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;text-align:left;transition:border-color var(--fs-transition),background var(--fs-transition),box-shadow var(--fs-transition)}
.fspc-sol-opcion:hover{border-color:var(--fs-accent);background:var(--fs-accent-light)}
.fspc-sol-opcion.seleccionada{border-color:var(--fs-accent);background:var(--fs-accent-light);box-shadow:inset 0 0 0 1.5px var(--fs-accent)}
.fs-hidden{display:none}
.fspc-sol-card:hover{border-color:var(--fs-accent)}
.fspc-sol-card-ver{font-size:12px;color:var(--fs-accent);font-weight:600;margin-top:6px}

.fspc-timeline{position:relative;padding-left:26px}
.fspc-timeline::before{content:"";position:absolute;left:5px;top:4px;bottom:4px;width:2px;background:var(--fs-border)}
.fspc-timeline-item{position:relative;padding-bottom:20px}
.fspc-timeline-item:last-child{padding-bottom:0}
.fspc-timeline-dot{position:absolute;left:-26px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--fs-accent);border:2px solid var(--fs-bg-surface);box-shadow:0 0 0 2px var(--fs-accent)}
.fspc-timeline-titulo{font-size:14px;font-weight:700;color:var(--fs-text-primary)}
.fspc-timeline-desc{font-size:12.5px;color:var(--fs-text-secondary);margin-top:2px}
.fspc-timeline-fecha{font-size:11px;color:var(--fs-text-muted);margin-top:4px}
.fspc-timeline-clickable{cursor:pointer}
.fspc-timeline-detalle{margin-top:6px;padding-top:6px;border-top:1px dashed var(--fs-border);font-size:12px;color:var(--fs-text-secondary)}

.fspc-mensaje-asesor{margin-top:8px;padding:10px 12px;border-radius:var(--fs-radius-sm);background:var(--fs-accent-light);border-left:3px solid var(--fs-accent);cursor:pointer}
.fspc-mensaje-asesor-titulo{font-size:12px;font-weight:700;color:var(--fs-accent);display:flex;align-items:center;gap:6px}
.fspc-mensaje-asesor-texto{font-size:13px;color:var(--fs-text-primary);white-space:pre-line;margin-top:4px}
.fspc-mensaje-asesor-fecha{font-size:11px;color:var(--fs-text-muted);margin-top:6px}
.fspc-mensaje-nuevo{font-size:10px;padding:2px 6px;border-radius:4px;background:var(--fs-accent);color:#fff;font-weight:700;letter-spacing:.3px}

@media (max-width:767px){
  .fs-grid2{grid-template-columns:1fr}
}

/* ---------- Banners PWA (FASE24_4-A, secciones 5/6): actualización e
   instalación. Fijos, fuera del flujo de #fspc-app, por encima de la
   barra de navegación inferior en móvil. ---------- */
.fs-pwa-banner{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:30;
  max-width:420px;margin:0 auto;
  background:var(--fs-bg-surface);border:1px solid var(--fs-border);
  border-radius:var(--fs-radius-lg);box-shadow:var(--fs-shadow-lg);
  padding:14px 16px;display:flex;flex-direction:column;gap:10px;
}
/* [hidden] debe ganar siempre a "display:flex" de arriba (misma
   especificidad de selector, pero el orden en la hoja no es fiable):
   sin esta regla, el banner se ve aunque el atributo hidden esté puesto. */
.fs-pwa-banner[hidden]{display:none}
.fs-pwa-banner-texto{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-text-sm);color:var(--fs-text-primary)}
.fs-pwa-banner-submsg{font-size:var(--fs-text-xs);color:var(--fs-text-muted)}
.fs-pwa-banner-acciones{display:flex;gap:8px;justify-content:flex-end}

@media (max-width:767px){
  .fs-pwa-banner{
    left:12px;right:12px;
    bottom:calc(var(--fs-bottomnav-h) + var(--fs-safe-bottom) + 12px);
  }
}

/* Instrucciones de instalación manual en iPhone/iPad (Perfil). */
.fs-pwa-ios-pasos{margin:10px 0 0;padding-left:20px;font-size:var(--fs-text-sm);color:var(--fs-text-secondary);display:flex;flex-direction:column;gap:6px}

/* ---------- Errores de arranque (mismo patron que APP/assets/css/main.css) ---------- */
.fs-boot-error{min-height:100vh;display:flex;align-items:center;justify-content:center;font-family:var(--fs-font);background:var(--fs-bg-app);padding:16px}
.fs-boot-error-card{background:var(--fs-bg-surface);border-radius:var(--fs-radius-lg);box-shadow:var(--fs-shadow-lg);padding:40px;max-width:440px;text-align:center}
.fs-boot-error-card h2{font-size:var(--fs-text-lg);font-weight:700;color:var(--fs-critica);margin-bottom:10px}
.fs-boot-error-card p{font-size:var(--fs-text-sm);color:var(--fs-text-secondary);line-height:1.6}
.fs-boot-error-card code{background:var(--fs-bg-app);padding:1px 6px;border-radius:var(--fs-radius-sm);font-size:var(--fs-text-xs);color:var(--fs-critica)}