/* ============================================================
   FIBRA HOGAR — Theme global minimalista
   - Fondo blanco con patrón punteado sutil
   - Tipografía 100% Inter (mata Playfair Display, Fraunces y serif)
   - KPIs grandes estilo Tesla/Apple
   ============================================================ */

/* === TIPOGRAFÍA INTER OBLIGATORIA EN TODO === */
*, *::before, *::after,
html, body, p, span, div, h1, h2, h3, h4, h5, h6,
input, select, textarea, button, label, a, td, th,
.value, .v, .title, .grad, .kpi, .kpi-mini,
.topbar h1, .login-brand h1, .card .head h3, .card .head h2,
.hero h2.title, .hero h2.title .grad,
.fab-eyebrow, .fh-fab-sub, .fh-fab-lbl{
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
  font-feature-settings: 'cv11' 1, 'ss01' 1, 'cv02' 1;
}
html, body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body{ letter-spacing:-0.005em; }

/* Fondo punteado sobre blanco */
html, body{
  background-color: #ffffff;
  background-image: radial-gradient(circle at 1px 1px, rgba(15, 15, 16, 0.12) 1px, transparent 0);
  background-size: 22px 22px;
  background-attachment: fixed;
}

/* === KPI NUMBERS estilo Tesla/Apple — GRANDES, ULTRA TIGHT === */
.kpi .value,
.kpi-mini .value,
.kpibar .v,
.kpibar .k .v{
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 44px !important;
  letter-spacing: -0.045em !important;
  line-height: 1.05 !important;
  color: #0f0f10 !important;
  margin-top: 8px !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'cv11' 1;
}
.kpibar .v, .kpibar .k .v{ font-size: 34px !important; }

/* === KPIs COMPACTOS (despachos / operarios) — más pequeños y minimalistas === */
.kpis-compact{ display:grid !important; grid-template-columns:repeat(6,minmax(0,1fr)) !important; gap:10px !important; margin-bottom:14px !important; }
.kpis-compact .kpi{
  padding: 12px 14px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 60px;
}
.kpis-compact .kpi .ico{
  flex-shrink:0;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  font-size: 16px;
  background: #fafaf7;
  border-radius: 9px;
  border: 1px solid rgba(15,15,16,0.05);
}
.kpis-compact .kpi.k-deliv .ico{ background:#d1fae5; color:#047857; }
.kpis-compact .kpi.k-proc .ico{ background:#fed7aa; color:#b45309; }
.kpis-compact .kpi.k-pend .ico{ background:#fef3c7; color:#92400e; }
.kpis-compact .kpi.k-pick .ico{ background:#fde2bc; color:#92400e; }
.kpis-compact .kpi.k-verif .ico{ background:#dbeafe; color:#1e40af; }
.kpis-compact .kpi.k-total .ico{ background:#f3f4f6; color:#374151; }
.kpis-compact .kpi-body{
  display:flex; flex-direction:column; gap:0; min-width:0;
}
.kpis-compact .kpi .label{
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: #6b7280 !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpis-compact .kpi .value{
  font-size: 22px !important;
  letter-spacing: -0.025em !important;
  margin-top: 1px !important;
  line-height: 1.1 !important;
  color: #0f0f10 !important;
  font-weight: 700 !important;
}
.kpis-compact .kpi .hint{
  font-size: 10.5px !important;
  color: #9ca3af !important;
  margin-top: 0 !important;
  line-height: 1.2;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpis-compact .kpi::before{ display:none !important; }
@media (max-width:1100px){ .kpis-compact{ grid-template-columns:repeat(3,1fr) !important; } }
@media (max-width:640px){ .kpis-compact{ grid-template-columns:repeat(2,1fr) !important; } }

/* Etiquetas pequeñas de KPI (mayúsculas tracking) */
.kpi .label,
.kpi-mini .label{
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #6b7280 !important;
}

/* Hint debajo del número (delta) */
.kpi .hint,
.kpi-mini .hint{
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
  margin-top: 6px !important;
  letter-spacing: -0.005em;
}

/* Card KPI: hairline border, sin gradient pesado */
.kpi, .kpi-mini{
  border: 1px solid rgba(15,15,16,0.06) !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  box-shadow: 0 1px 2px rgba(15,15,16,0.04) !important;
  background:#ffffff !important;
}
/* Eliminamos la barra de color izquierda agresiva en los KPI — usamos solo el ícono dorado en lugar */
.kpi::before, .kpi-mini::before{
  width: 0 !important;
  display:none !important;
}

/* === Hero "Centro de control ejecutivo" — sin gradient agresivo, tipografía Inter === */
.hero{
  background: #ffffff !important;
  color: #0f0f10 !important;
  padding: 36px 24px 28px !important;
  border-bottom: 1px solid rgba(15,15,16,0.06);
}
.hero::before, .hero::after{ display:none !important; }
.hero .greeting{
  color: #6b7280 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
}
.hero .greeting .dot{ background: #16a34a !important; }
.hero h2.title{
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
  font-size: 38px !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;
  color: #0f0f10 !important;
  margin: 6px 0 4px !important;
  line-height: 1.1;
}
.hero h2.title .grad{
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #b08a3e !important;  /* solo "ejecutivo" en dorado sólido */
}
.hero .subtitle{
  font-size: 14px !important;
  color: #6b7280 !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em;
}
.hero .date-tag{
  font-size: 12px !important;
  color: #6b7280 !important;
  background: #fafaf7 !important;
  border: 1px solid rgba(15,15,16,0.08) !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  margin-top: 12px !important;
  display: inline-flex !important;
  font-weight: 500 !important;
}

/* Cards opacos para que el patrón no se vea a través
   (excluimos toast, curso-banner y hero porque tienen colores propios) */
.card, .kpi, .kpi-mini, .login-card, .mod, .toolbar, .modal, .topbar,
.col, .orden-card, .insumo-item, .persona-item,
.pipeline, .pipe-step, .kpibar .k{
  background-color: #ffffff;
}

/* ===== Topbar legible: fondo blanco, texto y botones en negro ===== */
.topbar{
  background: #ffffff !important;
  color: #0f0f10 !important;
  border-bottom: 1px solid rgba(15,15,16,0.08);
}
.topbar::after{ display:none !important; }  /* sin la línea dorada animada */
.topbar h1,
.topbar h1 .gold,
.topbar h1 span{
  color: #0f0f10 !important;
  font-weight: 700;
  letter-spacing: -0.015em;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
}
.topbar h1 .gold{
  /* mantener el resaltado en dorado oscuro para diferenciar la sección */
  color: #8a6a20 !important;
}
/* Marca FH puede quedar oscura */
.topbar .mark{ background: #0f0f10 !important; }
.topbar .mark span{
  background: linear-gradient(135deg, #e8d093, #b08a3e) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color: transparent !important;
}
/* Pills (reloj, usuario, tag) en gris claro con texto negro */
.topbar .pill, .topbar .tag{
  background: #fafaf7 !important;
  color: #0f0f10 !important;
  border: 1px solid rgba(15,15,16,0.12) !important;
}
.topbar .tag{
  background: linear-gradient(135deg,#fdf6e6,#f7eac7) !important;
  color: #6b4f1a !important;
  border-color: rgba(176,138,62,0.30) !important;
}
/* Botones de la topbar en negro */
.topbar .btn-logout,
.topbar #btnPdf,
.topbar #btnLogout,
.topbar #btnOperarios,
.topbar .btn-refresh,
header .btn-logout,
header #btnPdf,
header #btnLogout{
  background: #ffffff !important;
  color: #0f0f10 !important;
  border: 1px solid rgba(15,15,16,0.18) !important;
  font-weight: 600;
}
.topbar .btn-logout:hover,
.topbar #btnPdf:hover,
.topbar #btnLogout:hover,
.topbar #btnOperarios:hover,
.topbar .btn-refresh:hover{
  background: #f5f3ee !important;
  border-color: rgba(15,15,16,0.30) !important;
}
.topbar .btn-portal{
  background: #0f0f10 !important;
  color: #fff !important;
  border-color: #0f0f10 !important;
}

/* ===== Toasts / notificaciones — estilo Apple/Linear minimalista ===== */
.toast-wrap{
  position:fixed !important;
  top:18px !important;
  right:18px !important;
  bottom:auto !important;
  left:auto !important;
  display:flex; flex-direction:column; gap:10px;
  z-index:9999;
  pointer-events:none;
  max-width:380px;
}
.toast-wrap .toast{
  pointer-events:auto;
  background:rgba(15,15,16,0.96) !important;
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  color:#fff !important;
  padding:13px 16px 13px 14px !important;
  border-radius:12px !important;
  font-size:13.5px !important;
  font-weight:500;
  line-height:1.4;
  letter-spacing:-0.005em;
  border:1px solid rgba(255,255,255,0.06) !important;
  box-shadow:
    0 10px 40px rgba(15,15,16,0.20),
    0 2px 8px rgba(15,15,16,0.12),
    inset 0 0 0 1px rgba(255,255,255,0.04);
  display:flex; align-items:flex-start; gap:10px;
  animation: fhToastIn .25s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-left:3px solid rgba(255,255,255,0.20) !important;
}
.toast-wrap .toast.ok{ border-left-color: #34c759 !important; }
.toast-wrap .toast.warn,
.toast-wrap .toast.alerta{ border-left-color: #ff9f0a !important; }
.toast-wrap .toast.err,
.toast-wrap .toast.danger{ border-left-color: #ff453a !important; }
.toast-wrap .toast.info{ border-left-color: #0a84ff !important; }
@keyframes fhToastIn{
  from{ opacity:0; transform: translateX(20px) scale(0.96); }
  to  { opacity:1; transform: translateX(0)    scale(1);    }
}

/* Notificaciones del módulo FIBRA_NOTIF (#fh-notif-wrap) */
#fh-notif-wrap{
  top:18px !important;
  right:18px !important;
  max-width:380px;
}
#fh-notif-wrap > div{
  background:rgba(255,255,255,0.98) !important;
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-radius:12px !important;
  box-shadow:
    0 10px 40px rgba(15,15,16,0.14),
    0 2px 8px rgba(15,15,16,0.08),
    0 0 0 1px rgba(15,15,16,0.04) !important;
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif !important;
  padding:13px 14px !important;
}

/* Botón mute de notificaciones — estilo Apple */
#fh-notif-mute-btn{
  border-radius:14px !important;
  border:1px solid rgba(15,15,16,0.10) !important;
  box-shadow:0 4px 14px rgba(15,15,16,0.12), 0 0 0 1px rgba(15,15,16,0.04) !important;
}

/* Botón FAB navegación rápida — más Apple-style */
#fh-fab-nav{
  border-radius:12px !important;
  box-shadow:0 4px 14px rgba(15,15,16,0.12), 0 0 0 1px rgba(15,15,16,0.04) !important;
}

/* ============================================================
   FH-DELTA — Badge estilo Apple/Tremor para cifras (% / Δ)
   Variante "complex": número a la izquierda + caja con flecha a la derecha
   Pastel: verde (sube), rojo (baja), gris (neutro)
   ============================================================ */
.fh-delta{
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 4px 4px 10px;
  border-radius:10px;
  background: #ffffff;
  border:1px solid rgba(15,15,16,0.08);
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
  font-size:13.5px; font-weight:700;
  letter-spacing:-0.01em;
  font-variant-numeric: tabular-nums;
  line-height:1.2;
  vertical-align:middle;
}
.fh-delta .fh-delta-val{ display:inline-flex; align-items:center; }
.fh-delta .fh-delta-box{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:7px;
  background: #f3f4f6;
}
.fh-delta .fh-delta-arrow{
  width:14px; height:14px; display:block;
}

/* === Verde — subida === */
.fh-delta.is-up{ }
.fh-delta.is-up .fh-delta-val{ color:#047857; }
.fh-delta.is-up .fh-delta-box{ background:#d1fae5; }
.fh-delta.is-up .fh-delta-arrow{ color:#047857; stroke:#047857; }

/* === Rojo — bajada === */
.fh-delta.is-down{ }
.fh-delta.is-down .fh-delta-val{ color:#b91c1c; }
.fh-delta.is-down .fh-delta-box{ background:#fee2e2; }
.fh-delta.is-down .fh-delta-arrow{ color:#b91c1c; stroke:#b91c1c; }

/* === Gris — neutral === */
.fh-delta.is-neutral{ }
.fh-delta.is-neutral .fh-delta-val{ color:#374151; }
.fh-delta.is-neutral .fh-delta-box{ background:#f3f4f6; }
.fh-delta.is-neutral .fh-delta-arrow{ color:#374151; stroke:#374151; }

/* === Dorado — destacar como sección institucional === */
.fh-delta.is-gold .fh-delta-val{ color:#8a6a20; }
.fh-delta.is-gold .fh-delta-box{ background:#fdf6e6; }
.fh-delta.is-gold .fh-delta-arrow{ color:#8a6a20; stroke:#8a6a20; }

/* Variante "solid" — más compacta */
.fh-delta.is-solid{ padding:4px 10px; }
.fh-delta.is-solid .fh-delta-box{ display:none; }
.fh-delta.is-solid.is-up{ background:#d1fae5; border-color:rgba(4,120,87,0.15); color:#047857; }
.fh-delta.is-solid.is-down{ background:#fee2e2; border-color:rgba(185,28,28,0.15); color:#b91c1c; }
.fh-delta.is-solid.is-neutral{ background:#f3f4f6; border-color:rgba(55,65,81,0.10); color:#374151; }

/* Reemplazo automático del estilo .pct existente (lo dejamos pastel) */
.kpi .pct, .pct{
  display:inline-flex; align-items:center; gap:5px;
  background:#f3f4f6;
  color:#374151;
  padding:3px 9px 3px 8px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:700;
  font-variant-numeric: tabular-nums;
  letter-spacing:-0.005em;
}

/* ============================================================
   TABLAS — Estilo Comparison Table (shadcn / minimalista)
   Filas limpias, hairline borders, hover sutil, headers
   en mayúsculas con tracking, sin background pesado.
   ============================================================ */
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif !important;
  font-size:13.5px;
  letter-spacing:-0.005em;
  color:#0f0f10;
}
table thead th{
  background:#ffffff !important;
  color:#6b7280 !important;
  font-size:11.5px !important;
  font-weight:600 !important;
  letter-spacing:0.02em;
  text-transform:none !important;
  padding:12px 14px !important;
  border-bottom:1px solid rgba(15,15,16,0.08) !important;
  text-align:left;
  white-space:nowrap;
  position:sticky; top:0; z-index:2;
}
table tbody td{
  padding:14px !important;
  border-bottom:1px solid rgba(15,15,16,0.05) !important;
  vertical-align:middle;
  color:#0f0f10;
  font-weight:500;
}
table tbody tr{
  transition:background-color .12s ease;
}
table tbody tr:hover{
  background-color:rgba(15,15,16,0.025) !important;
}
table tbody tr:last-child td{ border-bottom:none; }

/* Celdas numéricas → tabular-nums, alineadas a la izquierda como Comparison Table */
table td.num, table td.hora, table .total{
  font-variant-numeric:tabular-nums;
  font-weight:600;
  color:#0f0f10;
}

/* Botones de acción dentro de tabla — outline pequeño */
table .opbtn,
table button[data-act]{
  background:#ffffff !important;
  border:1px solid rgba(15,15,16,0.14) !important;
  color:#0f0f10 !important;
  padding:6px 12px !important;
  border-radius:8px !important;
  font-size:12.5px !important;
  font-weight:600;
  letter-spacing:-0.005em;
  cursor:pointer;
  transition:background .12s, border-color .12s, transform .08s;
}
table .opbtn:hover,
table button[data-act]:hover{
  background:#fafaf7 !important;
  border-color:rgba(15,15,16,0.22) !important;
}
table .opbtn:active,
table button[data-act]:active{ transform:scale(.97); }

/* Botones por intención */
table .opbtn.warn{ color:#b91c1c !important; border-color:rgba(185,28,28,0.30) !important; }
table .opbtn.warn:hover{ background:#fef2f2 !important; }
table .opbtn.gold{ color:#8a6a20 !important; border-color:rgba(176,138,62,0.30) !important; }
table .opbtn.gold:hover{ background:#fdf6e6 !important; }
table .opbtn.info{ color:#1e40af !important; border-color:rgba(30,64,175,0.25) !important; }
table .opbtn.info:hover{ background:#eff6ff !important; }

/* Card que envuelve la tabla */
.card .scroll table thead th:first-child{ padding-left:18px !important; }
.card .scroll table tbody td:first-child{ padding-left:18px !important; }
.card .scroll table thead th:last-child{ padding-right:18px !important; }
.card .scroll table tbody td:last-child{ padding-right:18px !important; }

/* Inputs y selects en toolbar de filtros — estilo Comparison Table */
.toolbar .group input,
.toolbar .group select,
.group input,
.group select{
  background:#ffffff !important;
  border:1px solid rgba(15,15,16,0.12) !important;
  border-radius:8px !important;
  padding:9px 12px !important;
  font-size:13.5px !important;
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif !important;
  color:#0f0f10;
  transition:border-color .12s, box-shadow .12s;
}
.toolbar .group input:focus,
.toolbar .group select:focus,
.group input:focus,
.group select:focus{
  outline:none !important;
  border-color:rgba(15,15,16,0.30) !important;
  box-shadow:0 0 0 3px rgba(15,15,16,0.06) !important;
}

/* Labels de toolbar — más sutiles */
.toolbar .group label,
.group > label{
  font-size:10.5px !important;
  font-weight:600 !important;
  color:#6b7280 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  margin-bottom:5px !important;
}

/* Toolbar buttons (Reset, Nueva orden, etc) */
.toolbar .btn,
.btn:not(.btn-primary):not(.btn-gold):not(.btn-iniciar-turno):not(.btn-portal):not(.btn-action):not(.btn-stop):not(.btn-cancel):not(.btn-logout):not(.btn-full){
  background:#ffffff !important;
  border:1px solid rgba(15,15,16,0.14) !important;
  color:#0f0f10 !important;
  font-weight:600;
  padding:9px 14px !important;
  border-radius:8px !important;
  font-size:13px !important;
}
.toolbar .btn:hover{
  background:#fafaf7 !important;
  border-color:rgba(15,15,16,0.22) !important;
}
.toolbar .btn-primary{
  background:#0f0f10 !important;
  color:#ffffff !important;
  border-color:#0f0f10 !important;
}
.toolbar .btn-primary:hover{ background:#1a1a1d !important; }

/* Card heads sin gradient pesado, más limpio */
.card .head{
  background:#ffffff !important;
  padding:16px 20px !important;
  border-bottom:1px solid rgba(15,15,16,0.06) !important;
}
.card .head h2, .card .head h3{
  font-size:16px !important;
  font-weight:700 !important;
  color:#0f0f10 !important;
  letter-spacing:-0.02em !important;
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif !important;
}
.card .head .meta, .card .head .count{
  font-size:12.5px !important;
  color:#6b7280 !important;
  font-weight:500;
}
.kpi.k-cump .pct{ background:#d1fae5; color:#047857; }
.kpi.k-pend .pct, .kpi.warn .pct{ background:#fef3c7; color:#92400e; }
.kpi.k-ent .pct{ background:#d1fae5; color:#047857; }
.kpi.danger .pct{ background:#fee2e2; color:#b91c1c; }
#fh-fab-panel{
  border-radius:14px !important;
  box-shadow:0 20px 60px rgba(15,15,16,0.18), 0 0 0 1px rgba(15,15,16,0.04) !important;
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  background:rgba(255,255,255,0.98) !important;
}
#fh-fab-tip{
  border-radius:10px !important;
}

/* Bordes cuadrados (radius 0) para cards y formularios — pero NO uso !important
   en botones/inputs para no romper estilos críticos de scripts. */
.card, .kpi, .kpi-mini, .login-card, .mod, .toolbar,
.modal, .mhead, .mbody, .mfoot,
.curso-banner, .col, .orden-card, .insumo-item, .persona-item,
.kpibar .k, .scroll, table, thead th, tbody td,
.pipe-step, .pipeline, .pipe-arrow,
.toast, .hero, .greeting, .date-tag,
.btn, .btn-primary, .btn-gold, .btn-portal, .btn-logout,
.btn-action, .btn-full, .btn-add-persona, .btn-del-row, .btn-del,
.btn-toggle, .btn-stop, .btn-cancel, .btn-rm,
.field input, .field textarea, .field select,
.group input, .group select,
.login-card input, .login-card .btn,
.head, .ac-item, .autocomp, .total-calc, .progreso,
.tab{
  border-radius: 0;
}

/* Excepciones: badges/chips/pills siguen pill-shaped */
.badge, .pill, .chip, .estado-badge, .tipo, .login-tag, .tag,
.check-item, .fh-fab-now, .rol-badge, .mesa-tag, .count{
  border-radius: 999px;
}

/* Números modernos tabular-nums en cifras clave */
.value, .v, .timer, .total, .total-calc, .num,
[data-fld="total"], [data-fld="dif"], [data-fld="timer"],
.mod-stats .row .n, table td.num, table td.hora,
.kpi .value, .kpibar .v{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.015em;
}

/* Tipografía Inter en titulares (sin tocar elementos críticos) */
h1, h2, h3, h4, .card .head h3, .topbar h1,
.hero h2.title{
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing: -0.025em;
}
.hero h2.title{ letter-spacing: -0.04em; font-weight: 800; }
.kpi .value, .kpi-mini .value{
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.04em;
  font-weight: 800;
}