/* ============================================================
   CENTRO DE ATENCION — Grupo Vaccaro
   ============================================================ */

:root {
    --azul:        #1E388F;
    --azul-claro:  #005EB8;
    --acento:      #d98324;
    --fondo:       #f4f6f9;
    --panel:       #ffffff;
    --borde:       #e2e7ee;
    --texto:       #1c2733;
    --texto-suave: #5c6b7a;
    --ok:          #1f7a4d;
    --alerta:      #b4541a;
    --error:       #c0392b;
    --radio:       10px;
    --sombra:      0 1px 3px rgba(28,39,51,.08), 0 6px 16px rgba(28,39,51,.05);
    --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
body { margin:0; font-family:var(--fuente); background:var(--fondo); color:var(--texto); line-height:1.55; }
a { color:var(--azul-claro); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ---------- Topbar ---------- */
.topbar { background:var(--azul); color:#fff; }
.topbar-inner { max-width:1140px; margin:0 auto; padding:10px 20px; min-height:60px;
    display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.logo { color:#fff; font-weight:700; font-size:1.12rem; display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; }
.logo:hover { text-decoration:none; opacity:.92; }
.logo-img { width:46px; height:46px; border-radius:50%; display:block; box-shadow:0 2px 8px rgba(0,0,0,.2); }
.logo-txt { display:flex; flex-direction:column; line-height:1.15; }
.logo-nombre { font-size:1rem; font-weight:700; }
.logo-emp { font-weight:400; opacity:.75; font-size:.78rem; }
.login-logo { width:80px; height:80px; border-radius:50%; display:block; margin:0 auto 14px; box-shadow:0 4px 14px rgba(0,0,0,.18); }
.nav { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.nav a { color:#dbe5f0; font-size:.92rem; }
.nav a:hover { color:#fff; text-decoration:none; }
.nav-user { color:#9db4cc; font-size:.86rem; border-left:1px solid rgba(255,255,255,.2); padding-left:16px; }
.nav-user small { opacity:.8; }
.nav-salir { color:#f3c08a !important; }

/* ---------- Contenido ---------- */
.contenido { max-width:1140px; margin:0 auto; padding:28px 20px 50px; }
.pagina-titulo { font-size:1.5rem; margin:0 0 4px; color:var(--azul); }
.pagina-sub { color:var(--texto-suave); margin:0 0 24px; }

/* ---------- Panel ---------- */
.panel { background:var(--panel); border:1px solid var(--borde); border-radius:var(--radio);
    box-shadow:var(--sombra); padding:22px; margin-bottom:20px; }
.panel h3 { margin-top:0; }

/* ---------- Login ---------- */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(160deg,#1E388F 0%,#14245c 100%); padding:20px; }
.login-card { background:#fff; border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,.25);
    padding:36px 32px; width:100%; max-width:390px; }
.login-card h1 { margin:0 0 4px; font-size:1.35rem; color:var(--azul); text-align:center; }
.login-card .emp { text-align:center; color:var(--acento); font-weight:600; font-size:.9rem; margin:0 0 20px; }
.login-card p.sub { margin:0 0 22px; text-align:center; color:var(--texto-suave); font-size:.9rem; }
.login-links { margin-top:16px; text-align:center; font-size:.88rem; }

/* ---------- Formularios ---------- */
.campo { margin-bottom:16px; }
.campo label { display:block; font-size:.88rem; font-weight:600; margin-bottom:6px; }
.campo input, .campo select, .campo textarea {
    width:100%; padding:10px 12px; border:1px solid var(--borde); border-radius:8px;
    font-size:.95rem; font-family:inherit; color:var(--texto); background:#fff;
    transition:border-color .15s, box-shadow .15s; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline:none; border-color:var(--azul-claro); box-shadow:0 0 0 3px rgba(47,93,138,.15); }
.campo textarea { min-height:120px; resize:vertical; }
.campo .ayuda { font-size:.82rem; color:var(--texto-suave); margin:6px 0 0; }
.req { color:var(--error); }
.fila { display:flex; gap:14px; flex-wrap:wrap; }
.fila .campo { flex:1; min-width:160px; }

/* ---------- Botones ---------- */
.btn { display:inline-block; background:var(--azul); color:#fff; border:none; border-radius:8px;
    padding:10px 20px; font-size:.95rem; font-weight:600; cursor:pointer; font-family:inherit;
    transition:background .15s; }
.btn:hover { background:var(--azul-claro); text-decoration:none; }
.btn-block { width:100%; }
.btn-acento { background:var(--acento); }
.btn-acento:hover { background:#c0731f; }
.btn-sec { background:#fff; color:var(--azul); border:1px solid var(--borde); }
.btn-sec:hover { background:#f0f3f7; }
.btn-sm { padding:6px 12px; font-size:.85rem; }
.btn-peligro { background:#fff; color:var(--error); border:1px solid #f0c8c2; }
.btn-peligro:hover { background:#fdf0ee; }

/* ---------- Tablas ---------- */
.tabla { width:100%; border-collapse:collapse; font-size:.92rem; }
.tabla th, .tabla td { text-align:left; padding:11px 13px; border-bottom:1px solid var(--borde); }
.tabla th { color:var(--texto-suave); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.4px; }
.tabla tbody tr:hover { background:#f8fafc; }
.fila-link { font-weight:600; }
.num-ticket { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.86rem; color:var(--azul); white-space:nowrap; }

/* ---------- Badges de estado ---------- */
.badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:.76rem; font-weight:600; white-space:nowrap; }
.badge-nuevo             { background:#e6f0fb; color:#1f5d9e; }
.badge-en_proceso        { background:#fdf0dc; color:#9a5a12; }
.badge-esperando_cliente { background:#f3e8fb; color:#7a3da0; }
.badge-resuelto          { background:#e3f3ea; color:#1f7a4d; }
.badge-cerrado           { background:#eceef1; color:#5c6b7a; }
.badge-reabierto         { background:#fde8e6; color:#b03325; }
.badge-area { background:#eef2f7; color:#3a536e; }

.prio-alta  { color:var(--error); font-weight:600; }
.prio-media { color:var(--alerta); }
.prio-baja  { color:var(--texto-suave); }

/* ---------- Avisos ---------- */
.aviso { padding:12px 16px; border-radius:8px; margin-bottom:18px; font-size:.92rem; }
.aviso-error { background:#fdecea; color:#a32f22; border:1px solid #f5c6c0; }
.aviso-ok    { background:#e7f5ec; color:#1f7a4d; border:1px solid #bfe3cc; }
.aviso-info  { background:#eaf1fa; color:#1f5d9e; border:1px solid #c5d9f0; }
.aviso-legal { background:#fbf7ef; color:#6b5836; border:1px solid #e8dcc4; font-size:.86rem; }

/* ---------- Mensajes / conversacion ---------- */
.mensaje { border:1px solid var(--borde); border-radius:10px; padding:14px 16px; margin-bottom:12px; background:#fff; }
.mensaje.propio { background:#f3f7fc; border-color:#d5e3f2; }
.mensaje.staff  { background:#fdf7ee; border-color:#f0dcc0; }
.mensaje.interna { background:#f6f3fb; border-color:#e0d4f0; }
.mensaje.sistema { background:#f4f6f9; border-color:#e2e7ee; font-style:italic; color:var(--texto-suave); }
.mensaje-meta { font-size:.8rem; color:var(--texto-suave); margin-bottom:6px; display:flex; justify-content:space-between; gap:12px; }
.mensaje-autor { font-weight:600; color:var(--texto); }
.mensaje-cuerpo { white-space:pre-wrap; }
.tag-interna { background:#7a3da0; color:#fff; padding:1px 8px; border-radius:10px; font-size:.7rem; font-weight:600; }

/* ---------- Fotos ---------- */
.fotos-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; margin-top:6px; }
.fotos-grid a { display:block; border:1px solid var(--borde); border-radius:8px; overflow:hidden; aspect-ratio:1; }
.fotos-grid img { width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- Utilidades ---------- */
.entre { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.vacio { text-align:center; padding:40px 20px; color:var(--texto-suave); }
.filtros { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; align-items:center; }
.filtros select { padding:8px 12px; border:1px solid var(--borde); border-radius:8px; font-family:inherit; }
.muted { color:var(--texto-suave); font-size:.88rem; }
.mt { margin-top:16px; }
.dato { margin:2px 0; }
.dato b { color:var(--texto-suave); font-weight:600; }

/* ---------- Footer ---------- */
.footer { max-width:1140px; margin:0 auto; padding:24px 20px 40px; }
.footer-legal { font-size:.8rem; color:var(--texto-suave); border-top:1px solid var(--borde); padding-top:16px; margin:0 0 8px; }
.footer-marca { font-size:.82rem; color:var(--texto-suave); margin:0; }

/* ---------- Responsive ---------- */
@media (max-width:680px) {
    .topbar-inner { padding:10px 16px; }
    .nav-user { border-left:none; padding-left:0; }
    .tabla { font-size:.85rem; }
    .tabla th:nth-child(4), .tabla td:nth-child(4) { display:none; }
}

/* ---------- Estadisticas ---------- */
.seccion-titulo { font-size:.95rem; color:var(--azul); margin:26px 0 14px; padding-bottom:8px; border-bottom:2px solid var(--borde); text-transform:uppercase; letter-spacing:.6px; font-weight:700; display:flex; align-items:center; gap:8px; }
.seccion-titulo::before { content:''; width:4px; height:18px; background:var(--acento); border-radius:2px; display:inline-block; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:8px; }
.stat-card { position:relative; background:var(--panel); border:1px solid var(--borde); border-radius:14px; box-shadow:var(--sombra); padding:22px 20px; overflow:hidden; transition:transform .15s, box-shadow .15s; }
.stat-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(28,39,51,.1); }
.stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--azul),var(--azul-claro)); }
.stat-card.acento::before { background:linear-gradient(90deg,var(--acento),#e8a04e); }
.stat-card.ok::before { background:linear-gradient(90deg,var(--ok),#3fa873); }
.stat-card.alerta::before { background:linear-gradient(90deg,#b03325,#d9614f); }
.stat-num { font-size:2.2rem; font-weight:800; color:var(--azul); line-height:1.1; letter-spacing:-.5px; }
.stat-label { color:var(--texto-suave); font-size:.84rem; margin-top:6px; }
.barra-row { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.barra-label { width:150px; font-size:.88rem; color:var(--texto); flex-shrink:0; font-weight:500; }
.barra-track { flex:1; background:#eef1f5; border-radius:8px; height:26px; overflow:hidden; position:relative; }
.barra-fill { height:100%; border-radius:8px; min-width:3px; transition:width .4s ease; background:linear-gradient(90deg,var(--azul-claro),var(--azul)); }
.barra-val { width:42px; text-align:right; font-weight:800; font-size:.95rem; color:var(--azul); }
.panel-stat { border-radius:14px; }
.panel-stat h3 { font-size:1rem; margin-bottom:16px; display:flex; align-items:center; gap:8px; }

/* ---------- Semaforo SLA ---------- */
.sla { display:inline-block; padding:3px 10px; border-radius:20px; font-size:.76rem; font-weight:600; white-space:nowrap; }
.sla::before { content:''; display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:middle; }
.sla-verde    { background:#e3f3ea; color:#1f7a4d; }
.sla-verde::before    { background:#16A34A; }
.sla-amarillo { background:#fdf0dc; color:#9a5a12; }
.sla-amarillo::before { background:#e8a04e; }
.sla-rojo     { background:#fde8e6; color:#b03325; }
.sla-rojo::before     { background:#d9302a; }

/* ---------- Paginacion ---------- */
.paginacion { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:18px; padding-top:16px; border-top:1px solid var(--borde); }
.tabla thead th a { color:inherit; text-decoration:none; }
.tabla thead th a:hover { color:var(--azul); text-decoration:underline; }

/* ---------- Tabla con scroll horizontal (evita desborde) ---------- */
.tabla-scroll { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tabla-scroll .tabla { min-width:900px; }

/* ---------- Estadisticas: hero ---------- */
.stats-hero { display:flex; gap:18px; flex-wrap:wrap; align-items:stretch; margin-bottom:8px; }
.hero-kpis { flex:1; min-width:300px; display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; }
.kpi-big { display:flex; align-items:center; gap:14px; background:var(--panel); border:1px solid var(--borde); border-radius:14px; box-shadow:var(--sombra); padding:18px 20px; transition:transform .15s, box-shadow .15s; }
.kpi-big:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(28,39,51,.1); }
.kpi-ico { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; }
.ico-azul { background:#e7edfb; } .ico-naranja { background:#fcefdc; } .ico-verde { background:#e3f3ea; } .ico-rojo { background:#fde8e6; }
.kpi-n { font-size:2rem; font-weight:800; color:var(--azul); line-height:1; letter-spacing:-.5px; }
.kpi-l { font-size:.82rem; color:var(--texto-suave); margin-top:4px; }
.hero-gauge { background:var(--panel); border:1px solid var(--borde); border-radius:14px; box-shadow:var(--sombra); padding:18px 28px; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:200px; }
.gauge-num { font-size:30px; font-weight:800; fill:var(--azul); }
.gauge-cap { font-size:12px; fill:var(--texto-suave); }
.gauge-label { font-size:.85rem; color:var(--texto-suave); margin-top:8px; font-weight:600; }

/* ---------- Estadisticas: donas ---------- */
.donut-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:16px; }
.donut-wrap { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.donut-svg { flex-shrink:0; }
.donut-total { font-size:26px; font-weight:800; fill:var(--azul); }
.donut-cap { font-size:11px; fill:var(--texto-suave); }
.donut-leyenda { flex:1; min-width:140px; display:flex; flex-direction:column; gap:7px; }
.ley-item { display:flex; align-items:center; gap:8px; font-size:.86rem; }
.ley-color { width:12px; height:12px; border-radius:3px; flex-shrink:0; }
.ley-nombre { flex:1; color:var(--texto); }
.ley-val { color:var(--texto-suave); font-weight:600; font-size:.8rem; white-space:nowrap; }

/* ---------- Comprobante PDF ---------- */
.comp-pdf { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    aspect-ratio:1; border:1px solid var(--borde); border-radius:8px; background:#fbfcfe; text-decoration:none; padding:10px; }
.comp-pdf:hover { border-color:var(--azul); background:#f4f7fc; }
.comp-pdf-ico { background:#d9302a; color:#fff; font-weight:700; font-size:.8rem; padding:4px 10px; border-radius:5px; letter-spacing:.5px; }
.comp-pdf-nom { font-size:.72rem; color:var(--texto-suave); text-align:center; word-break:break-word; line-height:1.2; }