/* ══════════════════════════════════════════════════════════════
   Axioma · polish.css — Capa de refinamiento visual
   Se carga DESPUÉS de styles.css. Solo eleva lo existente:
   materialidad, jerarquía tipográfica, foco, profundidad y detalle.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Curvas de movimiento propias: entrada rápida, salida suave */
  --ease:      cubic-bezier(.32, .72, 0, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);

  /* Elevación por capas: sombra ambiental + sombra de contacto + luz superior */
  --lift-1: 0 1px 2px rgba(0,0,0,.16), 0 0 0 1px rgba(255,255,255,.02) inset;
  --lift-2: 0 2px 4px rgba(0,0,0,.12), 0 6px 16px -6px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.04) inset;
  --lift-3: 0 4px 8px rgba(0,0,0,.14), 0 18px 40px -14px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.05) inset;
  --lift-pop: 0 10px 20px -8px rgba(0,0,0,.35), 0 30px 60px -24px rgba(0,0,0,.5);

  /* Halo de color del acento (se recalcula en modo inocuidad) */
  --glow: 77,163,255;
}
[data-mode="foodsafety"] { --glow: 18,185,129; }
[data-theme="light"] {
  --lift-1: 0 1px 2px rgba(16,40,60,.06), 0 0 0 1px rgba(16,40,60,.03) inset;
  --lift-2: 0 1px 2px rgba(16,40,60,.05), 0 6px 16px -8px rgba(16,40,60,.14);
  --lift-3: 0 2px 6px rgba(16,40,60,.07), 0 20px 44px -18px rgba(16,40,60,.24);
  --lift-pop: 0 12px 24px -10px rgba(16,40,60,.18), 0 36px 70px -28px rgba(16,40,60,.28);
}

/* ── Textura de fondo: evita el plano digital muerto ── */
body::before {
  background-image:
    radial-gradient(1200px 600px at 85% -10%, rgba(var(--glow), .07), transparent 60%),
    radial-gradient(900px 500px at 5% 100%, rgba(var(--glow), .045), transparent 55%);
}
[data-theme="light"] body::before {
  background-image:
    radial-gradient(1100px 560px at 85% -10%, rgba(var(--glow), .05), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(var(--glow), .035), transparent 55%);
}

/* ══════════ RITMO Y ESPACIO ══════════
   El aire es lo que separa un producto cuidado de una maqueta. */
body .cw-card, body .hc-card { padding: 22px 24px; border-radius: 16px; }
body .cw-doc { padding: 18px 19px; border-radius: 16px; gap: 10px; }
body .cw-kpi { padding: 17px 19px; border-radius: 16px; }
body .cw-exec { padding: 14px 16px; border-radius: 13px; }
body .rn-section { border-radius: 16px; margin-bottom: 14px; }
body .rn-fields { padding: 8px 18px 16px; }
body .rn-field { padding: 14px 0; }
body .proj-card { padding: 22px; border-radius: 16px; gap: 11px; }
body .cw-kpis { gap: 12px; margin-bottom: 20px; }
body .cw-doc-grid { gap: 14px; }
body .cw-layout { padding-top: 24px; }
body .cw-tabs { gap: 3px; margin-bottom: 24px; }
body .cw-tab { padding: 12px 16px; font-size: 13.5px; }

/* ══════════ TIPOGRAFÍA ══════════ */
body {
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  text-rendering: optimizeLegibility;
}
/* Jerarquía real: los títulos mandan, el apoyo se retira */
body .cw-title  { font-size: 25px; font-weight: 800; }
body .hc-title  { font-size: 25px; font-weight: 800; }
body .rn-title  { font-size: 22px; font-weight: 800; letter-spacing: -.032em; }
body .projects-title { font-size: 28px; font-weight: 800; }
body .cw-section-title { font-size: 14.5px; font-weight: 750; margin-bottom: 14px; }
body .cw-doc-title { font-size: 15px; font-weight: 700; }
body .cw-kpi-val { font-size: 28px; font-weight: 800; letter-spacing: -.04em; }
body .cw-kpi-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text3); margin-top: 6px;
}
body .rn-label { font-size: 14px; font-weight: 650; }
body .cw-exec-title { font-size: 14px; font-weight: 650; }
h1, h2, h3, .cw-title, .hc-title, .rn-title, .projects-title, .fs-hero-title {
  letter-spacing: -.028em;
  text-wrap: balance;
}
/* Cifras alineadas en todo dato numérico */
.cw-kpi-val, .hc-kpi-v, .metric b, .rv-table td, .cw-bar-val,
.del-row-n, .rn-cl-btn, .pv-num, .rn-num-wrap input, .cw-exec-time,
input[type="number"], .rn-sec-badge, .cw-tab-badge {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
/* Micro-etiquetas: mayúsculas con aire, nunca apretadas */
.form-section-label, .cwb-side-title, .cw-setting-name + .cw-setting-desc,
.rn-asuser-label, .of-cat-head, .cwb-field-type, .roles-family-label {
  letter-spacing: .085em;
}

/* ══════════ FOCO ACCESIBLE ══════════ */
:focus-visible {
  outline: 2px solid rgba(var(--glow), .9);
  outline-offset: 2px;
  border-radius: 8px;
}
.btn:focus-visible, .input:focus-visible, .cw-tab:focus-visible {
  outline-offset: 3px;
}

/* ══════════ BOTONES ══════════
   Se usa `body .btn` para superar los <style> incrustados de cada vista. */
body .btn {
  position: relative;
  font-weight: 650;
  font-size: 13.5px;
  letter-spacing: -.008em;
  border-radius: 10px;
  padding: 10px 17px;
  transition: transform .14s var(--ease), box-shadow .18s var(--ease),
              background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
body .btn-sm { padding: 7px 13px; font-size: 12.5px; border-radius: 9px; }
body .btn-primary {
  background: linear-gradient(180deg, var(--primary-h), var(--primary));
  box-shadow: 0 1px 2px rgba(0,0,0,.22), 0 6px 16px -6px rgba(var(--glow), .55),
              0 1px 0 rgba(255,255,255,.2) inset;
}
body .btn-primary:not(:disabled):hover {
  background: linear-gradient(180deg, var(--primary-h), var(--primary-h));
  box-shadow: 0 2px 5px rgba(0,0,0,.22), 0 10px 24px -8px rgba(var(--glow), .7),
              0 1px 0 rgba(255,255,255,.26) inset;
  transform: translateY(-1.5px);
}
body .btn-primary:not(:disabled):active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
body .btn-ghost {
  background: var(--white-a04);
  border: 1px solid var(--border);
  box-shadow: var(--lift-1);
}
body .btn-ghost:not(:disabled):hover {
  background: var(--white-a08);
  border-color: var(--border-h);
  transform: translateY(-1.5px);
  box-shadow: var(--lift-2);
}
body .btn-ghost:not(:disabled):active { transform: translateY(0); }
body .btn-danger { box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 6px 16px -6px rgba(255,77,77,.55); }
body .btn-danger:not(:disabled):hover { transform: translateY(-1.5px); }

/* ══════════ CAMPOS ══════════ */
body .input, body select.input, body textarea.input {
  border-radius: 9px;
  background: var(--white-a03);
  box-shadow: 0 1px 2px rgba(0,0,0,.08) inset;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
body .input:hover:not(:focus) { border-color: var(--border-h); }
body .input:focus {
  background: var(--white-a04);
  border-color: rgba(var(--glow), .55);
  box-shadow: 0 0 0 3px rgba(var(--glow), .14), 0 1px 2px rgba(0,0,0,.08) inset;
  outline: none;
}
.input::placeholder { color: var(--text3); opacity: .75; }

/* ══════════ SUPERFICIES ══════════ */
body .cw-card, body .hc-card, body .cw-kpi, body .cw-doc, body .cw-exec, body .rn-section, body .proj-card,
body .cwb-doc, body .cwb-field, body .of-item, body .hc-kpi, body .hc-biz, body .hc-pcc, body .fs-mini {
  box-shadow: var(--lift-1);
  transition: transform .16s var(--ease), box-shadow .2s var(--ease),
              border-color .16s var(--ease), background .16s var(--ease);
}
.cw-doc:hover, .proj-card:hover, .cw-exec:hover, .of-item:hover, .hc-biz:hover, .fs-mini:hover {
  box-shadow: var(--lift-2);
}
body .cw-modal, body .cw-addmenu, body .cw-menu, body .pv-modal, body .del-modal, body .cwz-card, body .notif-panel {
  box-shadow: var(--lift-pop);
  border-radius: 16px;
}
.cw-menu, .cw-addmenu { border-radius: 13px; }

/* Indicadores con barra de estado: el color comunica antes que el número */
body .cw-kpi { position: relative; overflow: hidden; }
body .cw-kpi::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: currentColor; opacity: .5;
  transition: opacity .2s var(--ease), height .2s var(--ease);
}
body .cw-kpi:hover::before { opacity: 1; height: 4px; }
body .cw-kpi::after {
  content: ''; position: absolute; right: -30px; top: -30px;
  width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle, currentColor, transparent 70%);
  opacity: .07; pointer-events: none;
}
.cw-kpi.good  { color: var(--success); }
.cw-kpi.warn  { color: var(--warn); }
.cw-kpi.bad   { color: var(--error); }
.cw-kpi.info  { color: var(--primary); }
.cw-kpi-label { color: var(--text3); }

/* ══════════ CABECERA ══════════ */
body .app-header {
  height: 56px;
  background: var(--glass-bg-heavy);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 6px 22px -18px rgba(0,0,0,.9);
}
.app-header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent 2%, rgba(var(--glow), .45) 24%, rgba(var(--glow), .18) 60%, transparent 98%);
  pointer-events: none;
}
body .brand-icon {
  border-radius: 9px;
  box-shadow: 0 2px 8px -2px rgba(var(--glow), .55), 0 1px 0 rgba(255,255,255,.2) inset;
}
.brand-name { letter-spacing: -.022em; }
.nav-link {
  border-radius: 8px;
  font-weight: 600;
  position: relative;
}
.nav-link.active::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: -11px; width: 22px; height: 2px; border-radius: 2px;
  background: var(--primary);
  box-shadow: 0 0 10px rgba(var(--glow), .8);
}

/* ══════════ PESTAÑAS ══════════ */
body .cw-tab { border-radius: 9px 9px 0 0; transition: color .16s var(--ease), background .16s var(--ease); }
.cw-tab:hover { background: var(--white-a03); }
.cw-tab.active { background: linear-gradient(180deg, rgba(var(--glow), .1), transparent); }

/* ══════════ ESTADOS Y ETIQUETAS ══════════ */
body .cw-status, body .hc-risk, body .hc-badge, body .proj-type-badge, body .cw-fw-badge, body .rn-sec-badge {
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .015em;
}
/* Punto de estado: se lee de un vistazo antes que el texto */
body .cw-status::before {
  content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; margin-right: 6px; vertical-align: 1px;
  box-shadow: 0 0 6px currentColor;
}
.cw-status.done::before    { animation: none; }
.cw-status.overdue::before { animation: pulse-dot 2s var(--ease) infinite; }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ══════════ TABLAS ══════════ */
.rv-table thead th, .hc-tbl th {
  background: linear-gradient(180deg, var(--surf2), var(--surface));
  backdrop-filter: blur(6px);
}
.rv-table tbody tr { transition: background .14s var(--ease); }
.rv-table tbody tr:hover { background: var(--white-a04); }

/* ══════════ BARRAS DE PROGRESO ══════════ */
.rn-progress-track, .cw-bar-track {
  box-shadow: 0 1px 2px rgba(0,0,0,.14) inset;
  border-radius: 999px;
}
body .rn-progress-fill, body .cw-bar-fill {
  border-radius: 999px;
  box-shadow: 0 0 12px -2px rgba(var(--glow), .7);
  transition: width .45s var(--ease-out);
}

/* ══════════ AVATARES ══════════ */
body .cw-avatar, body .notif-avatar {
  box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.12) inset;
  letter-spacing: .02em;
}

/* ══════════ BARRA INFERIOR MÓVIL ══════════ */
body .bottom-nav {
  background: var(--glass-bg-heavy);
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  box-shadow: 0 -8px 28px -20px rgba(0,0,0,.9);
}
.bottom-nav-item.active { position: relative; }
.bottom-nav-item.active::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 20px; height: 2px; border-radius: 0 0 2px 2px;
  background: var(--primary); box-shadow: 0 0 10px rgba(var(--glow), .9);
}

/* ══════════ TOASTS ══════════ */
body .toast {
  border-radius: 11px;
  box-shadow: var(--lift-3);
  backdrop-filter: blur(10px);
  border-left: 3px solid currentColor;
}

/* ══════════ MODALES ══════════ */
.cw-modal-overlay, .modal-overlay, .confirm-overlay, .cwz-overlay {
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}
.cw-modal, .cwz-card { animation: modal-in .32s var(--ease-out); }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ══════════ ENTRADA DE CONTENIDO ══════════ */
.cw-pane.active > *, .hc-pane.active > * { animation: rise .34s var(--ease-out) both; }
.cw-pane.active > *:nth-child(2) { animation-delay: .04s; }
.cw-pane.active > *:nth-child(3) { animation-delay: .08s; }
.cw-pane.active > *:nth-child(4) { animation-delay: .12s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cw-pane.active > *, .hc-pane.active > *, .cw-modal, .cwz-card { animation: none !important; }
  .btn:hover, .cw-doc:hover, .proj-card:hover { transform: none !important; }
}

/* ══════════ BARRAS DE DESPLAZAMIENTO ══════════ */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); background-clip: content-box; }

/* ══════════ TARJETAS DE PROYECTO · rediseño ══════════
   Antes: bloque plano con texto apilado. Ahora: banda de color por tipo,
   jerarquía clara y acciones separadas del contenido. */
body .proj-card {
  position: relative;
  padding-top: 24px;
  background:
    linear-gradient(180deg, var(--white-a03), transparent 30%),
    var(--surface);
}
body .proj-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  opacity: .85; transition: opacity .2s var(--ease), height .2s var(--ease);
  border-radius: 16px 16px 0 0;
}
body .proj-card:hover::before { opacity: 1; height: 4px; }
body .proj-name { font-size: 17px; font-weight: 750; letter-spacing: -.025em; }
body .proj-details {
  background: var(--white-a03);
  border: 1px solid var(--border);
  border-radius: 10px;
}
body .proj-detail-key { letter-spacing: .06em; }
body .proj-card-actions {
  padding-top: 13px; margin-top: 8px;
  border-top: 1px solid var(--border);
  gap: 7px;
}
body .proj-type-badge {
  padding: 4px 10px; font-size: 10px; font-weight: 750; letter-spacing: .05em;
}
body .proj-mod-count { padding: 3px 10px; font-weight: 700; }

/* Documentos: la recurrencia es el dato que más se consulta */
body .cw-doc-recur {
  background: var(--white-a03); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 10px; font-size: 11.5px; width: fit-content;
}

/* Listado "Hoy": la hora manda a la izquierda */
body .cw-exec-time {
  font-size: 13px; font-weight: 800; color: var(--text);
  background: var(--white-a04); border-radius: 8px;
  padding: 6px 9px; min-width: 52px; text-align: center;
}

/* ══════════ EMPTY STATES ══════════ */
.cw-empty-icon { filter: saturate(.4); }
.cw-empty h3 { letter-spacing: -.02em; }

/* ══════════ DETALLE FINO ══════════ */
hr, .cwb-section, .cw-card, .hc-card { border-color: var(--border); }
.cw-section-title svg, .hc-card-title svg { filter: drop-shadow(0 0 6px rgba(var(--glow), .5)); }
::selection { background: rgba(var(--glow), .28); }

/* Chips y píldoras interactivas */
.cwb-cfg-pill, .cwz-chip, .cwb-recur-chip, .role-chip {
  transition: transform .14s var(--ease), border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}
.cwb-cfg-pill:hover, .cwz-chip:hover, .cwb-recur-chip:hover { transform: translateY(-1px); }

/* Skeletons con brillo direccional */
.cw-skel, .hc-skel, .rn-skel {
  background: linear-gradient(100deg, var(--white-a03) 30%, var(--white-a10) 50%, var(--white-a03) 70%);
  background-size: 220% 100%;
}