/* =========================================================================
   PORKY SELECT - Sistema de diseno movil-first
   ========================================================================= */
:root {
  --rojo: #B10F2E;
  --rojo-osc: #6D071A;
  --rojo-claro: #FFF1F4;
  --rosa: #E85D78;
  --vino: #3A0610;
  --oro: #C9972B;
  --oro-claro: #FFF7E5;
  --crema: #FFF9F4;
  --marfil: #FFFCFA;

  --tinta: #1D1117;
  --tinta-2: #493C43;
  --tinta-3: #786E75;
  --tinta-4: #AEA5AB;

  --fondo: #F8F2F4;
  --superficie: #FFFFFF;
  --superficie-2: #FFF8FA;
  --superficie-3: rgba(255,255,255,.82);
  --borde: #EADFE3;
  --borde-fuerte: #D8C6CC;

  --ok: #12855A;
  --ok-bg: #E6F6EF;
  --alerta: #B26A00;
  --alerta-bg: #FFF4E2;
  --peligro: #C42130;
  --peligro-bg: #FDECEE;
  --info: #1D4E89;
  --info-bg: #E8F0FA;

  --r-sm: 11px;
  --r: 15px;
  --r-lg: 20px;
  --r-xl: 30px;

  --sombra-1: 0 1px 2px rgba(52,13,24,.04), 0 10px 26px rgba(52,13,24,.06);
  --sombra-2: 0 16px 46px rgba(52,13,24,.12), 0 3px 10px rgba(52,13,24,.07);
  --sombra-3: 0 28px 78px rgba(62,8,22,.24);
  --sombra-inset: inset 0 1px 0 rgba(255,255,255,.82);
  --brillo: inset 0 1px 0 rgba(255,255,255,.75);

  --nav-alto: 62px;
  --top-alto: 56px;
  --sidebar: 248px;

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }
html { scrollbar-gutter: stable; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.45;
  color: var(--tinta);
  background:
    radial-gradient(circle at top left, rgba(179,18,43,.12), transparent 32rem),
    radial-gradient(circle at 88% 12%, rgba(215,166,66,.12), transparent 26rem),
    linear-gradient(180deg, #FFFDFD 0%, var(--fondo) 44%, #F3EEF0 100%);
  overscroll-behavior-y: none;
}

a { color: var(--rojo); text-decoration: none; transition: color .18s ease, opacity .18s ease; }
a:hover { color: var(--rojo-osc); }
img { max-width: 100%; }

h1, h2, h3, h4 { margin: 0 0 .4rem; line-height: 1.25; font-weight: 700; }
h1 { font-size: 1.4rem; }
h2 { font-size: 1.12rem; }
h3 { font-size: 1rem; }

/* ---------- Layout ------------------------------------------------------ */
.app { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 60;
  height: calc(var(--top-alto) + var(--safe-t));
  padding-top: var(--safe-t);
  display: flex; align-items: center; gap: .6rem;
  padding-inline: 1rem;
  background:
    linear-gradient(135deg, rgba(59,7,16,.98), rgba(141,13,34,.98) 54%, rgba(179,18,43,.98)),
    radial-gradient(circle at 90% 10%, rgba(255,255,255,.2), transparent 20rem);
  color: #fff;
  box-shadow: 0 12px 30px rgba(80,6,21,.22);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.topbar h1 { font-size: 1.05rem; margin: 0; font-weight: 650; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .marca { display: flex; align-items: center; gap: .5rem; font-weight: 800;
  letter-spacing: .06em; font-size: .95rem; }
.topbar-acciones { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.topbar a, .topbar button { color: #fff; }

.icono-top {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.14); border-radius: 50%;
  color: #fff; cursor: pointer; flex: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.icono-top:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.28); transform: translateY(-1px); }
.icono-top:active { background: rgba(255,255,255,.28); }

.contenido {
  flex: 1;
  padding: .9rem .8rem calc(var(--nav-alto) + var(--safe-b) + 1.2rem);
  max-width: 1360px; width: 100%; margin: 0 auto;
}

.sidebar { display: none; }

/* Navegacion inferior (movil) */
.navbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
  height: calc(var(--nav-alto) + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--borde);
  box-shadow: 0 -12px 34px rgba(62,8,22,.1);
}
.navbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; color: var(--tinta-3); font-size: .66rem; font-weight: 600;
  padding-top: 4px; position: relative;
}
.navbar a svg { width: 22px; height: 22px; }
.navbar a.activo { color: var(--rojo); }
.navbar a.activo::before {
  content: ""; position: absolute; top: 0; width: 26px; height: 3px;
  background: linear-gradient(90deg, var(--rojo), var(--oro)); border-radius: 0 0 3px 3px;
}
.navbar .punto {
  position: absolute; top: 6px; right: 50%; transform: translateX(16px);
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--peligro); color: #fff; font-size: .6rem; font-weight: 700;
  display: grid; place-items: center;
}

/* ---------- Tarjetas ---------------------------------------------------- */
.tarjeta {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-1), var(--brillo);
  overflow: hidden;
}
.tarjeta + .tarjeta { margin-top: .85rem; }
.tarjeta-cuerpo { padding: .85rem .9rem; }
.tarjeta-titulo {
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem .9rem; border-bottom: 1px solid var(--borde);
  font-weight: 750; font-size: .92rem; background: linear-gradient(180deg, #fff, var(--superficie-2));
}
.tarjeta-titulo .cont { margin-left: auto; font-weight: 600; color: var(--tinta-3); font-size: .8rem; }

.seccion { margin-bottom: 1rem; }
.seccion-titulo {
  display: flex; align-items: center; gap: .5rem;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--tinta-3); font-weight: 700; margin: 1.1rem .2rem .5rem;
}
.seccion-titulo .linea { flex: 1; height: 1px; background: var(--borde); }

/* ---------- KPI --------------------------------------------------------- */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.kpi {
  background:
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,255,255,.82)),
    radial-gradient(circle at 100% 0, rgba(179,18,43,.09), transparent 52%);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg); padding: .85rem .9rem; box-shadow: var(--sombra-1), var(--brillo);
  position: relative; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kpi:hover { transform: translateY(-2px); border-color: rgba(179,18,43,.22); box-shadow: var(--sombra-2); }
.kpi::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--rojo), var(--oro));
}
.kpi.ok::after { background: var(--ok); }
.kpi.alerta::after { background: var(--alerta); }
.kpi.peligro::after { background: var(--peligro); }
.kpi.info::after { background: var(--info); }
.kpi .etiqueta { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-3); font-weight: 700; }
.kpi .valor { font-size: 1.28rem; font-weight: 850; letter-spacing: -.035em; margin-top: .15rem;
  font-variant-numeric: tabular-nums; }
.kpi .nota { font-size: .72rem; color: var(--tinta-3); margin-top: .12rem; }
.kpi .nota.mal { color: var(--peligro); font-weight: 600; }

/* ---------- Lista tipo tarjeta (movil) ---------------------------------- */
.lista { display: flex; flex-direction: column; gap: .45rem; }
.fila {
  display: block; background: rgba(255,255,255,.94); border: 1px solid var(--borde);
  border-radius: var(--r-lg); padding: .68rem .78rem; box-shadow: var(--sombra-1), var(--brillo);
  color: inherit; position: relative;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.fila:hover { transform: translateY(-1px); border-color: rgba(179,18,43,.18); box-shadow: var(--sombra-2); }
.fila:active { background: var(--superficie-2); }
.fila-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; }
.fila-codigo { font-family: var(--mono); font-size: .75rem; font-weight: 700; color: var(--rojo); }
.fila-fecha { margin-left: auto; font-size: .72rem; color: var(--tinta-3); }
.fila-titulo { font-weight: 750; font-size: .95rem; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-sub { font-size: .76rem; color: var(--tinta-3); margin-top: .12rem;
  display: flex; flex-wrap: wrap; gap: .2rem .55rem; }
.fila-pie { display: flex; align-items: center; gap: .5rem; margin-top: .42rem;
  padding-top: .42rem; border-top: 1px dashed var(--borde); }
.fila-monto { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.fila-monto.mal { color: var(--peligro); }

/* Acciones rapidas dentro de la fila */
.acciones-fila {
  display: flex; gap: .24rem; flex-wrap: wrap; margin-top: .5rem;
  padding: .24rem; border-radius: 999px; background: var(--superficie-2);
  border: 1px solid var(--borde);
}
.acciones-fila .btn { padding: .3rem .56rem; font-size: .72rem; min-height: 31px; border-radius: 999px; box-shadow: none; }

.lista-grid-compacta {
  max-width: 1180px;
  margin-inline: auto;
}

/* ---------- Tabla (escritorio) ------------------------------------------ */
.tabla-envoltura { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .85rem; }
table.tabla th {
  text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-3); font-weight: 800; padding: .68rem .72rem;
  border-bottom: 1px solid var(--borde); background: linear-gradient(180deg, #fff, var(--superficie-2));
  white-space: nowrap; position: sticky; top: 0;
}
table.tabla td { padding: .7rem .72rem; border-bottom: 1px solid var(--borde); vertical-align: middle; }
table.tabla tbody tr { transition: background .16s ease; }
table.tabla tbody tr:hover { background: linear-gradient(90deg, rgba(179,18,43,.045), rgba(215,166,66,.04)); }
table.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tabla .cen { text-align: center; }
table.tabla tfoot td { font-weight: 800; background: var(--superficie-2); border-top: 2px solid var(--borde-fuerte); }
.solo-escritorio { display: none; }

.listado-compacto {
  max-width: 1180px;
  margin-inline: auto;
}
.listado-compacto .tabla-envoltura {
  border-radius: inherit;
}
table.tabla-compacta {
  font-size: .8rem;
}
table.tabla-compacta th {
  padding: .48rem .56rem;
}
table.tabla-compacta td {
  padding: .5rem .56rem;
  line-height: 1.28;
}
table.tabla-compacta td:first-child {
  width: 7.5rem;
}
table.tabla-compacta td:last-child,
table.tabla-compacta th:last-child {
  white-space: nowrap;
}
table.tabla-compacta td a b {
  display: inline-block;
  max-width: 15rem;
  vertical-align: bottom;
}
.acciones-tabla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .18rem;
  padding: .18rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  box-shadow: var(--sombra-1), var(--brillo);
}
.acciones-tabla form {
  display: flex;
  margin: 0;
}
.acciones-tabla .btn-icono {
  width: 30px;
  height: 30px;
  min-height: 30px;
  border-radius: 999px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.acciones-tabla .btn-icono svg { width: 14px; height: 14px; }
.acciones-tabla .btn-icono:hover {
  background: var(--rojo-claro);
  color: var(--rojo-osc);
  box-shadow: none;
  transform: translateY(-1px);
}
.acciones-tabla .btn-icono.btn-wa:hover {
  background: #E9FBF1;
  color: #128C4A;
}
.acciones-tabla .btn:not(.btn-icono) {
  min-height: 30px;
  padding: 0 .55rem;
  border-radius: 999px;
  box-shadow: none;
}

/* ---------- Botones ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .38rem;
  padding: .58rem .9rem; border-radius: var(--r-sm); border: 1px solid var(--borde-fuerte);
  background: var(--superficie); color: var(--tinta); font-size: .84rem; font-weight: 650;
  cursor: pointer; font-family: inherit; text-align: center; min-height: 40px;
  box-shadow: var(--sombra-1), var(--brillo);
  transition: transform .16s ease, background .15s ease, box-shadow .16s ease, border-color .16s ease;
}
.btn:hover { transform: translateY(-1px); border-color: rgba(179,18,43,.26); box-shadow: var(--sombra-2); }
.btn:active { transform: scale(.98); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-primario { background: linear-gradient(135deg, var(--rojo-osc), var(--rojo)); border-color: rgba(179,18,43,.9); color: #fff; }
.btn-primario:active { background: var(--rojo-osc); }
.btn-oscuro { background: linear-gradient(135deg, var(--vino), var(--tinta)); border-color: var(--tinta); color: #fff; }
.btn-ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-peligro { background: var(--peligro); border-color: var(--peligro); color: #fff; }
.btn-suave { background: var(--rojo-claro); border-color: transparent; color: var(--rojo-osc); }
.btn-fantasma { background: transparent; border-color: transparent; color: var(--tinta-2); }
.btn-wa { background: #25D366; border-color: #25D366; color: #fff; }
.btn-bloque { width: 100%; }
.btn-chico { padding: .38rem .62rem; min-height: 32px; font-size: .76rem; }
.btn:disabled { opacity: .5; pointer-events: none; }

.btn-icono {
  width: 38px; height: 38px; min-height: 38px; padding: 0; border-radius: var(--r-sm);
  display: inline-grid; place-items: center;
}

.btn-reporte {
  min-height: 40px;
  padding: .58rem .92rem;
  border-radius: 999px;
  color: #fff;
  border-color: rgba(255,255,255,.18);
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.24), transparent 5rem),
    linear-gradient(135deg, var(--vino), var(--rojo-osc) 48%, var(--rojo));
  box-shadow: 0 14px 28px rgba(177,15,46,.24), inset 0 1px 0 rgba(255,255,255,.22);
  font-size: .8rem;
  font-weight: 900;
}
.btn-reporte:hover {
  color: #fff;
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 18px 36px rgba(177,15,46,.3), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-reporte svg {
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.22));
}

.barra-botones { display: flex; gap: .45rem; flex-wrap: wrap; }
.barra-botones .btn { flex: 1 1 auto; }

.fab {
  position: fixed; right: 14px; z-index: 65;
  bottom: calc(var(--nav-alto) + var(--safe-b) + 14px);
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--rojo-osc), var(--rojo) 70%, #D52E46); color: #fff; border: 1px solid rgba(255,255,255,.24);
  display: grid; place-items: center; box-shadow: var(--sombra-3); cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.fab:hover { transform: translateY(-2px) scale(1.02); }
.fab svg { width: 26px; height: 26px; }
.fab:active { background: var(--rojo-osc); }

/* Barra de acciones fija abajo (formularios) */
.barra-fija {
  position: fixed; left: 0; right: 0; z-index: 68;
  bottom: 0; padding: .6rem .8rem calc(.6rem + var(--safe-b));
  background: var(--superficie); border-top: 1px solid var(--borde);
  display: flex; gap: .5rem; box-shadow: 0 -2px 12px rgba(16,16,26,.08);
}
.barra-fija .btn { flex: 1; }
body.con-barra-fija .contenido { padding-bottom: 110px; }
body.con-barra-fija .navbar { display: none; }

/* ---------- Insignias --------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .2rem .56rem; border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .015em; white-space: nowrap;
  background: #EFEFF3; color: var(--tinta-2);
  border: 1px solid rgba(255,255,255,.52);
}
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-alerta { background: var(--alerta-bg); color: var(--alerta); }
.badge-peligro { background: var(--peligro-bg); color: var(--peligro); }
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-neutro { background: #EFEFF3; color: var(--tinta-2); }
.badge-punto::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.pastilla {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .55rem; border-radius: 999px; background: var(--superficie-2);
  border: 1px solid var(--borde); font-size: .72rem; color: var(--tinta-2);
}

/* ---------- Formularios ------------------------------------------------- */
.campo, .select, .textarea {
  width: 100%; padding: .68rem .78rem; font-size: 16px; /* 16px evita zoom en iOS */
  font-family: inherit; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-sm); min-height: 44px;
  appearance: none; -webkit-appearance: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.campo:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--rojo); box-shadow: 0 0 0 4px rgba(179,18,43,.12), var(--sombra-1);
}
select.campo, .select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B76' stroke-width='2.5' stroke-linecap='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right .6rem center; background-size: 16px;
  padding-right: 2rem;
}
textarea.campo { min-height: 76px; resize: vertical; }
.campo-archivo {
  width: 100%; padding: .55rem; font-size: .82rem; background: var(--superficie-2);
  border: 1px dashed var(--borde-fuerte); border-radius: var(--r-sm);
}
.campo[readonly] { background: var(--superficie-2); color: var(--tinta-3); }

.grupo { margin-bottom: .75rem; }
.grupo > label, .etiqueta {
  display: block; font-size: .74rem; font-weight: 700; color: var(--tinta-2);
  margin-bottom: .3rem; letter-spacing: .01em;
}
.grupo .ayuda { font-size: .72rem; color: var(--tinta-3); margin-top: .25rem; }
.grupo .error { font-size: .74rem; color: var(--peligro); margin-top: .25rem; font-weight: 600; }
.grupo.malo .campo, .grupo.malo .select { border-color: var(--peligro); }

.rejilla { display: grid; gap: .7rem; }
.rejilla-2 { grid-template-columns: 1fr 1fr; }
.rejilla-3 { grid-template-columns: 1fr; }

.check { width: 20px; height: 20px; accent-color: var(--rojo); }

.interruptor {
  display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem;
  background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--r-sm);
  cursor: pointer; min-height: 46px;
}
.interruptor input { position: absolute; opacity: 0; pointer-events: none; }
.interruptor .pista {
  width: 44px; height: 25px; border-radius: 999px; background: var(--borde-fuerte);
  position: relative; flex: none; transition: background .18s ease;
}
.interruptor .pista::after {
  content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: var(--sombra-1); transition: transform .18s ease;
}
.interruptor input:checked + .pista { background: var(--ok); }
.interruptor input:checked + .pista::after { transform: translateX(19px); }
.interruptor .texto { font-size: .84rem; font-weight: 650; }
.interruptor .texto small { display: block; font-weight: 500; color: var(--tinta-3); font-size: .72rem; }

/* Selector de segmentos */
.segmentos { display: flex; background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: var(--r-sm); padding: 3px; gap: 3px; }
.segmentos label { flex: 1; }
.segmentos input { position: absolute; opacity: 0; pointer-events: none; }
.segmentos span {
  display: block; text-align: center; padding: .45rem .3rem; border-radius: 6px;
  font-size: .8rem; font-weight: 650; color: var(--tinta-3); cursor: pointer;
}
.segmentos input:checked + span { background: var(--superficie); color: var(--rojo); box-shadow: var(--sombra-1); }

/* ---------- Buscador y filtros ------------------------------------------ */
.buscador { position: relative; margin-bottom: .6rem; }
.buscador .campo {
  padding-left: 2.45rem; padding-right: 5.2rem;
  min-height: 50px; border-radius: var(--r-lg);
  background: rgba(255,255,255,.92);
  box-shadow: var(--sombra-1), var(--brillo);
}
.buscador .lupa {
  position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--tinta-3); pointer-events: none;
}
.buscador .acciones-busq {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: flex; gap: 4px;
}
.buscador .acciones-busq .btn { min-height: 34px; padding: .3rem .55rem; }

.chips { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .35rem; margin-bottom: .55rem;
  scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; padding: .4rem .76rem; border-radius: 999px; font-size: .78rem; font-weight: 750;
  background: rgba(255,255,255,.88); border: 1px solid var(--borde-fuerte); color: var(--tinta-2);
  white-space: nowrap; cursor: pointer;
  box-shadow: var(--sombra-1), var(--brillo);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.chip:hover { transform: translateY(-1px); border-color: rgba(179,18,43,.24); box-shadow: var(--sombra-2); }
.chip.on { background: linear-gradient(135deg, var(--rojo-osc), var(--rojo)); border-color: rgba(179,18,43,.9); color: #fff; }
.chip .x { margin-left: .25rem; opacity: .8; }

.resumen-lista {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .78rem; color: var(--tinta-3); margin-bottom: .6rem;
}
.resumen-lista b { color: var(--tinta); }

/* Panel deslizante de filtros */
.velo {
  position: fixed; inset: 0; background: rgba(16,16,26,.45); z-index: 90;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.velo.abierto { opacity: 1; pointer-events: auto; }
.panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  max-height: 88vh; overflow-y: auto;
  background: rgba(255,255,255,.96); border-radius: var(--r-xl) var(--r-xl) 0 0;
  backdrop-filter: blur(20px);
  transform: translateY(101%); transition: transform .26s cubic-bezier(.32,.72,0,1);
  padding: 0 .9rem calc(1rem + var(--safe-b));
  box-shadow: var(--sombra-3);
}
.panel.abierto { transform: translateY(0); }
.panel-asa { width: 40px; height: 4px; border-radius: 2px; background: var(--borde-fuerte);
  margin: .55rem auto .3rem; }
.panel-cabecera {
  position: sticky; top: 0; background: var(--superficie); z-index: 2;
  display: flex; align-items: center; gap: .5rem; padding: .35rem 0 .7rem;
  border-bottom: 1px solid var(--borde); margin-bottom: .8rem;
}
.panel-cabecera h2 { margin: 0; font-size: 1rem; }
.panel-cabecera .cerrar { margin-left: auto; }
.panel-pie { position: sticky; bottom: 0; background: var(--superficie); padding: .7rem 0 .2rem;
  border-top: 1px solid var(--borde); display: flex; gap: .5rem; }
.panel-pie .btn { flex: 1; }

/* ---------- Mensajes ---------------------------------------------------- */
.mensajes { position: fixed; top: calc(var(--top-alto) + var(--safe-t) + 8px); left: 8px; right: 8px;
  z-index: 100; display: flex; flex-direction: column; gap: .4rem; pointer-events: none; }
.mensaje {
  display: flex; align-items: flex-start; gap: .5rem; padding: .65rem .8rem;
  border-radius: var(--r); background: var(--tinta); color: #fff; font-size: .84rem;
  box-shadow: var(--sombra-3); pointer-events: auto;
  animation: entra .22s ease; font-weight: 600;
}
.mensaje.success { background: var(--ok); }
.mensaje.error { background: var(--peligro); }
.mensaje.warning { background: var(--alerta); }
.mensaje.info { background: var(--info); }
.mensaje .x { margin-left: auto; background: none; border: 0; color: inherit; opacity: .8;
  cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 .2rem; }
@keyframes entra { from { opacity: 0; transform: translateY(-10px); } }

.aviso {
  display: flex; gap: .55rem; padding: .7rem .8rem; border-radius: var(--r);
  font-size: .82rem; border: 1px solid; margin-bottom: .7rem;
}
.aviso svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.aviso-info { background: var(--info-bg); border-color: #C6DAF2; color: #163C6B; }
.aviso-alerta { background: var(--alerta-bg); border-color: #F3DCB4; color: #7A4700; }
.aviso-peligro { background: var(--peligro-bg); border-color: #F5C4C9; color: #8C1622; }
.aviso-ok { background: var(--ok-bg); border-color: #BFE6D5; color: #0B5C3E; }

/* ---------- Estados vacios ---------------------------------------------- */
.vacio { text-align: center; padding: 2.5rem 1rem; color: var(--tinta-3); }
.vacio svg { width: 52px; height: 52px; opacity: .3; margin-bottom: .6rem; }
.vacio h3 { color: var(--tinta-2); }
.vacio p { font-size: .85rem; margin: .2rem 0 1rem; }

/* ---------- Paginacion --------------------------------------------------- */
.paginacion { display: flex; align-items: center; justify-content: center; gap: .4rem;
  margin-top: 1rem; flex-wrap: wrap; }
.paginacion .btn { min-width: 40px; }
.paginacion .actual { padding: .5rem .8rem; font-size: .82rem; color: var(--tinta-3); font-weight: 600; }

/* ---------- Detalle ------------------------------------------------------ */
.encabezado-doc {
  background:
    radial-gradient(circle at 92% 8%, rgba(255,255,255,.2), transparent 18rem),
    linear-gradient(135deg, var(--vino), var(--rojo-osc) 46%, var(--rojo));
  color: #fff; border-radius: var(--r-lg); padding: 1rem .95rem; margin-bottom: .8rem;
  box-shadow: var(--sombra-2);
  border: 1px solid rgba(255,255,255,.15);
}
.encabezado-doc .codigo { font-family: var(--mono); font-size: .8rem; opacity: .85; letter-spacing: .04em; }
.encabezado-doc .nombre { font-size: 1.24rem; font-weight: 800; margin: .1rem 0 .35rem; }
.encabezado-doc .monto { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.encabezado-doc .meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.encabezado-doc .meta .pastilla { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.2); color: #fff; }
.encabezado-doc .badge { background: rgba(255,255,255,.9); color: var(--rojo-osc); }

.datos { display: grid; grid-template-columns: 1fr; }
.dato { display: flex; gap: .6rem; padding: .55rem .9rem; border-bottom: 1px solid var(--borde); }
.dato:last-child { border-bottom: 0; }
.dato .k { font-size: .8rem; color: var(--tinta-3); flex: none; width: 42%; }
.dato .v { font-size: .86rem; font-weight: 650; flex: 1; word-break: break-word; }
.dato .v.num { font-variant-numeric: tabular-nums; }

.totales { padding: .3rem 0; }
.total-fila { display: flex; padding: .42rem .9rem; font-size: .87rem; }
.total-fila .k { color: var(--tinta-3); }
.total-fila .v { margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; }
.total-fila.grande { border-top: 2px solid var(--borde-fuerte); margin-top: .3rem; padding-top: .6rem;
  font-size: 1.05rem; }
.total-fila.grande .k, .total-fila.grande .v { font-weight: 800; color: var(--tinta); }

.progreso { height: 7px; border-radius: 4px; background: var(--borde); overflow: hidden; margin: .45rem 0 .2rem; }
.progreso i { display: block; height: 100%; background: var(--ok); border-radius: 4px; }
.progreso.mal i { background: var(--peligro); }

/* ---------- Editor de items (pedido / OC) ------------------------------- */
.items-editor { display: flex; flex-direction: column; gap: .55rem; }
.item-fila {
  border: 1px solid var(--borde); border-radius: var(--r); background: var(--superficie);
  padding: .6rem .65rem; position: relative; box-shadow: var(--sombra-1);
}
.item-fila.eliminada { display: none; }
.item-cab { display: flex; align-items: center; gap: .45rem; margin-bottom: .45rem; }
.item-num { width: 22px; height: 22px; border-radius: 50%; background: var(--rojo-claro);
  color: var(--rojo-osc); font-size: .7rem; font-weight: 800; display: grid; place-items: center; flex: none; }
.item-nombre { font-weight: 650; font-size: .87rem; line-height: 1.25; flex: 1;
  overflow: hidden; text-overflow: ellipsis; }
.item-descripcion {
  width: 100%; border: 0; border-bottom: 1px solid transparent; background: transparent;
  font-family: inherit; font-weight: 650; font-size: 15px; color: var(--tinta);
  padding: .1rem 0; min-height: 26px;
}
.item-descripcion:focus { outline: none; border-bottom-color: var(--rojo); }
.item-cat { font-size: .7rem; color: var(--tinta-3); }
.item-quitar { border: 0; background: none; color: var(--peligro); cursor: pointer;
  width: 30px; height: 30px; display: grid; place-items: center; flex: none; border-radius: 6px; }
.item-quitar:active { background: var(--peligro-bg); }
.item-campos { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; }
.item-campos.con-pz { grid-template-columns: 0.7fr 1fr 1fr 0.8fr; }
.item-campos label { font-size: .64rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinta-3); font-weight: 700; display: block; margin-bottom: .12rem; }
.item-campos .campo { min-height: 40px; padding: .4rem .45rem; font-size: 15px; text-align: right; }
.item-pie { display: flex; align-items: center; margin-top: .45rem; padding-top: .4rem;
  border-top: 1px dashed var(--borde); font-size: .8rem; }
.item-pie .imp { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.item-pie .desc-monto { color: var(--peligro); font-size: .74rem; }

/* Buscador de productos */
.buscador-prod { position: relative; }
.resultados-prod {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40;
  background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: var(--r);
  box-shadow: var(--sombra-3); max-height: 46vh; overflow-y: auto; display: none;
}
.resultados-prod.abierto { display: block; }
.resultado {
  display: flex; align-items: center; gap: .5rem; padding: .6rem .7rem; cursor: pointer;
  border-bottom: 1px solid var(--borde);
}
.resultado:last-child { border-bottom: 0; }
.resultado:hover, .resultado.marcado { background: var(--rojo-claro); }
.resultado .info { flex: 1; min-width: 0; }
.resultado .n { font-weight: 650; font-size: .86rem; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.resultado .c { font-size: .72rem; color: var(--tinta-3); }
.resultado .p { font-weight: 700; font-size: .84rem; white-space: nowrap;
  font-variant-numeric: tabular-nums; }

/* Panel de piezas */
.tabla-piezas { width: 100%; border-collapse: collapse; font-size: .84rem; }
.tabla-piezas th { text-align: left; font-size: .68rem; text-transform: uppercase;
  color: var(--tinta-3); padding: .4rem .45rem; border-bottom: 1px solid var(--borde); }
.tabla-piezas td { padding: .3rem .45rem; border-bottom: 1px solid var(--borde); }
.tabla-piezas input { width: 100%; padding: .35rem .4rem; min-height: 36px; font-size: 15px;
  border: 1px solid var(--borde); border-radius: 6px; text-align: right; }
.tabla-piezas .quitar { color: var(--peligro); background: none; border: 0; cursor: pointer;
  font-size: 1rem; padding: .2rem .35rem; }
.piezas-scroll { max-height: 44vh; overflow-y: auto; border: 1px solid var(--borde);
  border-radius: var(--r-sm); }
.piezas-resumen { display: flex; gap: .6rem; flex-wrap: wrap; font-size: .8rem;
  padding: .55rem .1rem; }
.piezas-resumen b { font-variant-numeric: tabular-nums; }

/* Cargando */
.cargando { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff; border-radius: 50%; animation: giro .7s linear infinite; }
.cargando.osc { border-color: rgba(0,0,0,.15); border-top-color: var(--rojo); }
@keyframes giro { to { transform: rotate(360deg); } }

.centro-carga { display: flex; flex-direction: column; align-items: center; gap: .6rem;
  padding: 1.6rem; color: var(--tinta-3); font-size: .84rem; }

/* Adjuntos */
.adjuntos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; }
.adjunto {
  border: 1px solid var(--borde); border-radius: var(--r-sm); overflow: hidden;
  background: var(--superficie-2); position: relative; aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: .68rem; color: var(--tinta-3); text-align: center; padding: .3rem;
}
.adjunto img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.adjunto .etq { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.6);
  color: #fff; font-size: .62rem; padding: .15rem .25rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.adjunto .borrar { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; border: 0; cursor: pointer;
  display: grid; place-items: center; font-size: .75rem; z-index: 2; }
.adjunto .icono-doc { width: 30px; height: 30px; opacity: .5; }

.zona-archivo {
  border: 2px dashed var(--borde-fuerte); border-radius: var(--r); padding: 1rem .8rem;
  text-align: center; color: var(--tinta-3); font-size: .82rem; background: var(--superficie-2);
}
.zona-archivo svg { width: 26px; height: 26px; opacity: .5; margin-bottom: .3rem; }

/* Mini grafico de barras */
.grafico { display: flex; align-items: flex-end; gap: 3px; height: 76px; padding: .3rem 0; }
.grafico .barra { flex: 1; background: var(--rojo-claro); border-radius: 3px 3px 0 0; min-height: 3px;
  position: relative; }
.grafico .barra i { position: absolute; inset: auto 0 0 0; background: var(--rojo);
  border-radius: 3px 3px 0 0; }
.grafico-etq { display: flex; justify-content: space-between; font-size: .62rem; color: var(--tinta-4); }

/* Utilidades */
.txt-der { text-align: right; } .txt-cen { text-align: center; }
.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }
.suave { color: var(--tinta-3); }
.chico { font-size: .78rem; }
.mini { font-size: .7rem; }
.negrita { font-weight: 700; }
.mal { color: var(--peligro); }
.bien { color: var(--ok); }
.oculto { display: none !important; }
.mt { margin-top: .7rem; } .mt2 { margin-top: 1.2rem; }
.mb { margin-bottom: .7rem; }
.fila-flex { display: flex; align-items: center; gap: .5rem; }
.crece { flex: 1; }
.envuelve { flex-wrap: wrap; }

/* ---------- Hero dashboard ---------------------------------------------- */
.hero-dashboard {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1rem;
  margin-bottom: .9rem;
  color: #fff;
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 85% 12%, rgba(255,255,255,.25), transparent 18rem),
    radial-gradient(circle at 10% 90%, rgba(215,166,66,.26), transparent 16rem),
    linear-gradient(135deg, var(--vino), var(--rojo-osc) 52%, var(--rojo));
  box-shadow: var(--sombra-3);
  border: 1px solid rgba(255,255,255,.16);
}
.hero-dashboard::after {
  content: "";
  position: absolute;
  inset: 10% -8% auto auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,.09);
}
.hero-dashboard h1 { margin: 0; font-size: clamp(1.35rem, 3.6vw, 2rem); letter-spacing: -.035em; }
.hero-dashboard .chico { color: rgba(255,255,255,.78); }
.hero-dashboard .hero-sello {
  position: relative;
  z-index: 1;
  flex: none;
  display: none;
  padding: .52rem .72rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.13);
  color: rgba(255,255,255,.9);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

/* ---------- Login ------------------------------------------------------- */
.login-pantalla {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 1.2rem;
  background:
    radial-gradient(circle at 20% 10%, rgba(215,166,66,.28), transparent 24rem),
    radial-gradient(circle at 84% 16%, rgba(255,255,255,.16), transparent 20rem),
    linear-gradient(150deg, var(--rojo-osc) 0%, #4A0711 60%, #161116 100%);
}
.login-caja { width: 100%; max-width: 380px; }
.login-marca { text-align: center; color: #fff; margin-bottom: 1.3rem; }
.login-marca .logo { width: 82px; height: 82px; margin: 0 auto .7rem; border-radius: 26px;
  background: linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.08)); display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.24); box-shadow: 0 18px 50px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.25); }
.login-marca .logo svg { width: 44px; height: 44px; }
.login-marca h1 { font-size: 1.55rem; letter-spacing: .1em; font-weight: 800; margin: 0; }
.login-marca p { opacity: .75; font-size: .82rem; margin: .2rem 0 0; }
.login-tarjeta { background: rgba(255,255,255,.94); border-radius: var(--r-xl); padding: 1.45rem 1.15rem;
  box-shadow: var(--sombra-3), var(--brillo); border: 1px solid rgba(255,255,255,.58); backdrop-filter: blur(18px); }
.login-pie { text-align: center; color: rgba(255,255,255,.6); font-size: .72rem; margin-top: 1rem; }

/* ---------- Escritorio -------------------------------------------------- */
@media (min-width: 820px) {
  body { font-size: 15px; }
  .navbar { display: none; }
  .app { flex-direction: row; }
  .sidebar {
    display: flex; flex-direction: column; width: var(--sidebar); flex: none;
    background:
      linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,248,250,.88)),
      radial-gradient(circle at top left, rgba(179,18,43,.1), transparent 20rem);
    border-right: 1px solid rgba(217,203,208,.8);
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    box-shadow: 16px 0 46px rgba(62,8,22,.06);
  }
  .sidebar-marca {
    display: flex; align-items: center; gap: .6rem; padding: 1rem .95rem;
    font-weight: 900; letter-spacing: .08em; color: var(--rojo-osc);
    border-bottom: 1px solid var(--borde);
  }
  .sidebar-marca svg { width: 28px; height: 28px; filter: drop-shadow(0 6px 12px rgba(179,18,43,.18)); }
  .sidebar nav { padding: .6rem .55rem; display: flex; flex-direction: column; gap: 2px; }
  .sidebar nav .grupo-nav { font-size: .64rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--tinta-4); font-weight: 700; padding: .8rem .6rem .3rem; }
  .sidebar nav a {
    display: flex; align-items: center; gap: .62rem; padding: .6rem .64rem;
    border-radius: var(--r); color: var(--tinta-2); font-size: .86rem; font-weight: 650;
    border: 1px solid transparent;
    transition: background .16s ease, color .16s ease, transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  }
  .sidebar nav a svg { width: 19px; height: 19px; opacity: .7; }
  .sidebar nav a:hover { background: rgba(255,255,255,.76); border-color: var(--borde); transform: translateX(2px); }
  .sidebar nav a.activo {
    background: linear-gradient(135deg, rgba(179,18,43,.12), rgba(255,255,255,.86));
    color: var(--rojo-osc);
    border-color: rgba(179,18,43,.14);
    box-shadow: var(--sombra-1);
  }
  .sidebar nav a.activo svg { opacity: 1; }
  .sidebar nav a .cont { margin-left: auto; font-size: .7rem; background: var(--peligro);
    color: #fff; border-radius: 999px; padding: 0 .35rem; font-weight: 700; }
  .sidebar-pie { margin-top: auto; padding: .85rem; border-top: 1px solid var(--borde);
    font-size: .74rem; color: var(--tinta-3); }

  .principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .topbar { border-radius: 0; }
  .contenido { padding: 1.25rem 1.45rem 2.7rem; }
  body.con-barra-fija .contenido { padding-bottom: 100px; }
  body.con-barra-fija .navbar { display: none; }

  .kpis { grid-template-columns: repeat(4, 1fr); }
  .rejilla-3 { grid-template-columns: repeat(3, 1fr); }
  .datos { grid-template-columns: 1fr 1fr; }
  .dato .k { width: 38%; }

  .solo-escritorio { display: block; }
  .solo-movil { display: none !important; }
  .fab { display: none; }

  .panel {
    left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -46%) scale(.98);
    width: min(680px, 94vw); max-height: 86vh; border-radius: var(--r-lg);
    opacity: 0; transition: opacity .2s ease, transform .2s ease;
  }
  .panel.abierto { transform: translate(-50%, -50%); opacity: 1; }
  .panel-asa { display: none; }
  .barra-fija { left: var(--sidebar); }
  .mensajes { left: auto; right: 16px; width: 380px; }
  .item-campos.con-pz { grid-template-columns: .6fr 1fr 1fr 1fr .8fr; }
  .dos-columnas { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1rem; align-items: start; }
  .hero-dashboard { padding: 1.25rem 1.35rem; margin-bottom: 1.1rem; }
  .hero-dashboard .hero-sello { display: inline-flex; }
  .lista-grid-compacta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .55rem;
  }
}

@media (min-width: 1200px) {
  .rejilla-4 { grid-template-columns: repeat(4, 1fr); }
}

/* =========================================================================
   Premium refresh - capa visual integral
   ========================================================================= */
::selection { background: rgba(177,15,46,.16); color: var(--vino); }

:focus-visible {
  outline: 3px solid rgba(177,15,46,.18);
  outline-offset: 2px;
}

body {
  background:
    radial-gradient(circle at 12% 0%, rgba(177,15,46,.13), transparent 28rem),
    radial-gradient(circle at 92% 6%, rgba(201,151,43,.14), transparent 28rem),
    linear-gradient(135deg, var(--marfil) 0%, var(--crema) 34%, var(--fondo) 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(rgba(109,7,26,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109,7,26,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 58%);
}

.topbar {
  background:
    radial-gradient(circle at 92% 10%, rgba(255,255,255,.2), transparent 16rem),
    linear-gradient(135deg, var(--vino), var(--rojo-osc) 48%, var(--rojo));
  box-shadow: 0 14px 36px rgba(58,6,16,.22);
}

.icono-top {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.22);
}
.icono-top svg { filter: drop-shadow(0 1px 1px rgba(0,0,0,.12)); }

.contenido {
  padding-top: 1rem;
}

.tarjeta,
.fila,
.kpi,
.login-tarjeta {
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,250,251,.9));
  border-color: rgba(216,198,204,.86);
  box-shadow: var(--sombra-1), var(--sombra-inset);
}

.tarjeta {
  position: relative;
}
.tarjeta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,151,43,.38), transparent);
  pointer-events: none;
}

.tarjeta-titulo,
.panel-cabecera,
table.tabla th {
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,247,249,.94));
}

.seccion-titulo {
  color: var(--rojo-osc);
  letter-spacing: .11em;
}
.seccion-titulo .linea {
  background: linear-gradient(90deg, rgba(177,15,46,.26), transparent);
}

.kpis { gap: .75rem; }
.kpi {
  padding: .95rem 1rem;
}
.kpi::before {
  content: "";
  position: absolute;
  inset: auto -20% -45% auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(177,15,46,.05);
}
.kpi .etiqueta {
  color: var(--tinta-3);
  font-weight: 850;
}
.kpi .valor {
  color: var(--tinta);
  font-size: clamp(1.18rem, 2vw, 1.45rem);
}

table.tabla {
  background: rgba(255,255,255,.72);
}
table.tabla th {
  color: #6A5661;
  border-bottom-color: rgba(216,198,204,.86);
}
table.tabla td {
  border-bottom-color: rgba(234,223,227,.82);
}
table.tabla tbody tr:hover {
  background:
    linear-gradient(90deg, rgba(255,241,244,.92), rgba(255,247,229,.46));
}
table.tabla-compacta {
  letter-spacing: -.005em;
}
.listado-compacto {
  max-width: 1220px;
}

.acciones-tabla,
.acciones-fila {
  background: rgba(255,255,255,.72);
  border-color: rgba(216,198,204,.9);
  box-shadow: var(--sombra-inset), 0 6px 16px rgba(58,6,16,.05);
}
.acciones-tabla .btn-icono,
.acciones-fila .btn {
  color: var(--tinta-2);
}

.btn {
  border-color: rgba(216,198,204,.92);
  font-weight: 750;
}
.btn-primario {
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.18), transparent 7rem),
    linear-gradient(135deg, var(--vino), var(--rojo-osc) 45%, var(--rojo));
  box-shadow: 0 12px 24px rgba(177,15,46,.22), var(--sombra-inset);
}
.btn-primario:hover {
  border-color: rgba(177,15,46,.95);
  box-shadow: 0 16px 34px rgba(177,15,46,.26), var(--sombra-inset);
}
.btn-suave {
  background: linear-gradient(180deg, #FFF7F9, var(--rojo-claro));
  color: var(--rojo-osc);
  border-color: rgba(177,15,46,.12);
}
.btn-ok {
  background: linear-gradient(135deg, #0F7651, var(--ok));
}
.btn-wa {
  background: linear-gradient(135deg, #128C4A, #25D366);
}

.badge {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76);
}
.badge-ok { background: #EAF8F1; color: #0C6F4A; }
.badge-alerta { background: #FFF4D9; color: #8A5200; }
.badge-peligro { background: #FFF0F2; color: #A21727; }
.badge-info { background: #EAF2FF; color: #174B87; }
.badge-neutro { background: #F1EEF0; color: #625760; }

.campo, .select, .textarea {
  background: rgba(255,255,255,.92);
  border-color: rgba(216,198,204,.95);
  border-radius: var(--r);
}
.campo:hover, .select:hover, .textarea:hover {
  border-color: rgba(177,15,46,.28);
}
.grupo > label, .etiqueta {
  color: var(--tinta-2);
  font-weight: 820;
}

.buscador .campo {
  min-height: 52px;
  border-radius: 999px;
  border-color: rgba(216,198,204,.9);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,250,251,.92));
}
.buscador .lupa {
  left: .85rem;
  color: var(--rojo-osc);
  opacity: .72;
}
.chip {
  border-color: rgba(216,198,204,.96);
}
.chip.on {
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.22), transparent 5rem),
    linear-gradient(135deg, var(--vino), var(--rojo));
  box-shadow: 0 10px 22px rgba(177,15,46,.18), var(--sombra-inset);
}

.panel {
  border: 1px solid rgba(255,255,255,.72);
}
.panel-cabecera {
  backdrop-filter: blur(18px);
}
.velo {
  background: rgba(29,17,23,.48);
}
.velo.abierto {
  backdrop-filter: blur(3px);
}

.mensaje {
  border: 1px solid rgba(255,255,255,.16);
}
.aviso {
  box-shadow: var(--sombra-1), var(--sombra-inset);
}
.vacio {
  border: 1px dashed rgba(216,198,204,.95);
  border-radius: var(--r-xl);
  background: rgba(255,255,255,.54);
}

.encabezado-doc,
.hero-dashboard {
  background:
    radial-gradient(circle at 86% 14%, rgba(255,255,255,.22), transparent 17rem),
    radial-gradient(circle at 12% 86%, rgba(201,151,43,.3), transparent 18rem),
    linear-gradient(135deg, var(--vino), var(--rojo-osc) 50%, var(--rojo));
}

.grafico .barra {
  background: #F8DDE4;
}
.grafico .barra i {
  background: linear-gradient(180deg, var(--rojo), var(--rojo-osc));
}

.barra-fija {
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(18px);
  box-shadow: 0 -18px 40px rgba(58,6,16,.12);
}

.navbar {
  background: rgba(255,255,255,.9);
}
.navbar a.activo {
  color: var(--rojo-osc);
}

@media (min-width: 820px) {
  .topbar {
    height: 58px;
    padding-inline: 1.25rem;
  }
  .topbar h1 {
    font-size: 1.08rem;
    font-weight: 800;
  }
  .sidebar {
    background:
      radial-gradient(circle at 0% 0%, rgba(177,15,46,.1), transparent 18rem),
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,249,250,.92));
  }
  .sidebar-marca {
    min-height: 58px;
    background: rgba(255,255,255,.64);
    color: var(--vino);
  }
  .sidebar nav {
    gap: .18rem;
    padding: .75rem .65rem;
  }
  .sidebar nav .grupo-nav {
    color: #A18B94;
    font-weight: 850;
    letter-spacing: .12em;
  }
  .sidebar nav a {
    min-height: 40px;
  }
  .sidebar nav a:hover {
    background: rgba(255,255,255,.9);
    color: var(--rojo-osc);
  }
  .sidebar nav a.activo {
    background:
      linear-gradient(135deg, rgba(177,15,46,.13), rgba(255,255,255,.92));
    border-color: rgba(177,15,46,.18);
  }
  .contenido {
    padding: 1.35rem 1.55rem 2.8rem;
  }
  .panel {
    width: min(720px, 94vw);
    border-radius: var(--r-xl);
  }
}

@media (max-width: 819px) {
  .contenido {
    padding-inline: .75rem;
  }
  .topbar {
    min-height: calc(var(--top-alto) + var(--safe-t));
  }
  .kpis {
    gap: .55rem;
  }
  .kpi {
    padding: .78rem .82rem;
  }
  .navbar a {
    font-size: .64rem;
  }
}

/* =========================================================================
   Premium refresh v2 - cambio visual mas evidente
   ========================================================================= */
body {
  background:
    radial-gradient(circle at 0% 0%, rgba(177,15,46,.16), transparent 30rem),
    radial-gradient(circle at 100% 0%, rgba(201,151,43,.16), transparent 32rem),
    linear-gradient(135deg, #FFFDFC 0%, #FFF6F7 38%, #F3E9ED 100%);
}

.principal {
  background:
    linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,0) 18rem);
}

.topbar {
  color: var(--vino);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,248,250,.9));
  border-bottom: 1px solid rgba(216,198,204,.85);
  box-shadow: 0 14px 34px rgba(58,6,16,.1);
}
.topbar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--vino), var(--rojo), var(--oro));
}
.topbar h1 {
  color: var(--vino);
  font-weight: 900;
}
.topbar a,
.topbar button {
  color: var(--vino);
}
.topbar .marca {
  color: var(--vino);
}
.topbar-acciones {
  gap: .42rem;
}
.icono-top {
  color: var(--rojo-osc);
  background: linear-gradient(180deg, #fff, #FFF4F6);
  border-color: rgba(177,15,46,.14);
  box-shadow: 0 10px 22px rgba(58,6,16,.09), var(--sombra-inset);
}
.icono-top:hover {
  background: linear-gradient(180deg, #fff, var(--rojo-claro));
  border-color: rgba(177,15,46,.28);
}

.contenido {
  max-width: 1280px;
}

.tarjeta,
.listado-compacto {
  border-radius: 24px;
}
.tarjeta {
  background:
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(255,249,251,.94));
  border: 1px solid rgba(214,196,203,.9);
  box-shadow: 0 18px 42px rgba(58,6,16,.08), var(--sombra-inset);
}
.tarjeta-titulo {
  padding: .82rem 1rem;
  color: var(--vino);
  font-weight: 900;
  border-bottom-color: rgba(216,198,204,.75);
}

.buscador {
  margin-bottom: .78rem;
}
.buscador .campo {
  min-height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(177,15,46,.13);
  box-shadow: 0 16px 34px rgba(58,6,16,.09), var(--sombra-inset);
}
.buscador .acciones-busq .btn {
  border-radius: 14px;
  background: var(--rojo-claro);
  color: var(--rojo-osc);
}

.chips {
  gap: .5rem;
  margin-bottom: .7rem;
}
.chip {
  padding: .44rem .82rem;
  border-radius: 14px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 7px 18px rgba(58,6,16,.06), var(--sombra-inset);
}
.chip.on {
  border-color: rgba(177,15,46,.75);
  transform: translateY(-1px);
}

.resumen-lista {
  padding-inline: .2rem;
  color: #7D6972;
}
.resumen-lista b {
  color: var(--vino);
  font-weight: 900;
}

table.tabla {
  border-radius: 22px;
  overflow: hidden;
}
table.tabla th {
  padding-block: .62rem;
  color: #715862;
  font-size: .66rem;
  letter-spacing: .085em;
}
table.tabla td {
  padding-block: .58rem;
}
table.tabla-compacta td {
  padding-block: .52rem;
}
table.tabla tbody tr:nth-child(even) {
  background: rgba(255,249,251,.5);
}
table.tabla tbody tr:hover {
  background: linear-gradient(90deg, #FFF2F5, #FFF8EA);
}
table.tabla td a b {
  color: var(--rojo-osc);
}

.acciones-tabla {
  gap: .2rem;
  padding: .2rem;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #FFF8FA);
}
.acciones-tabla .btn-icono {
  width: 31px;
  height: 31px;
  min-height: 31px;
}
.acciones-tabla .btn-icono:hover {
  background: var(--rojo);
  color: #fff;
}

.badge {
  border-radius: 10px;
  padding: .22rem .54rem;
}

.kpi {
  min-height: 86px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 14%, rgba(177,15,46,.09), transparent 8rem),
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(255,249,251,.94));
}
.kpi .valor {
  font-weight: 950;
}

.btn {
  border-radius: 14px;
}
.btn-icono {
  border-radius: 14px;
}
.fab {
  width: 60px;
  height: 60px;
  right: 18px;
}

.fila {
  border-radius: 20px;
  border-color: rgba(216,198,204,.85);
}

.campo, .select, .textarea {
  border-radius: 15px;
}
.panel {
  border-radius: 28px 28px 0 0;
}

@media (min-width: 820px) {
  :root { --sidebar: 266px; }
  .app {
    background:
      linear-gradient(90deg, rgba(255,255,255,.86), rgba(255,255,255,0) 18rem);
  }
  .sidebar {
    border-right: 0;
    box-shadow: 18px 0 45px rgba(58,6,16,.08);
  }
  .sidebar-marca {
    min-height: 64px;
    padding-inline: 1rem;
    border-bottom: 0;
    background:
      linear-gradient(135deg, rgba(58,6,16,.98), rgba(177,15,46,.92));
    color: #fff;
  }
  .sidebar-marca svg {
    color: #fff;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.22));
  }
  .sidebar nav {
    padding: .9rem .75rem;
    gap: .24rem;
  }
  .sidebar nav a {
    border-radius: 16px;
    min-height: 43px;
    padding-inline: .78rem;
  }
  .sidebar nav a.activo {
    background: #fff;
    color: var(--rojo-osc);
    border-color: rgba(177,15,46,.18);
    box-shadow: 0 12px 28px rgba(58,6,16,.1), var(--sombra-inset);
  }
  .sidebar nav a.activo::before {
    content: "";
    width: 4px;
    align-self: stretch;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--rojo), var(--oro));
    margin-left: -.35rem;
  }
  .sidebar-pie {
    margin: .75rem;
    border: 1px solid rgba(216,198,204,.75);
    border-radius: 18px;
    background: rgba(255,255,255,.7);
  }
  .topbar {
    height: 64px;
    position: sticky;
  }
  .contenido {
    padding: 1.55rem 1.7rem 3rem;
  }
  .listado-compacto {
    max-width: 1240px;
  }
  .panel {
    border-radius: 28px;
  }
}

@media (max-width: 819px) {
  .topbar {
    color: #fff;
    background:
      radial-gradient(circle at 90% 8%, rgba(255,255,255,.22), transparent 12rem),
      linear-gradient(135deg, var(--vino), var(--rojo));
  }
  .topbar h1,
  .topbar a,
  .topbar button,
  .topbar .marca {
    color: #fff;
  }
  .icono-top {
    color: #fff;
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.2);
  }
  .panel {
    border-radius: 28px 28px 0 0;
  }
}

/* =========================================================================
   Premium refresh v3 - listas tipo data cards y shell de alto contraste
   ========================================================================= */
.topbar {
  color: #fff;
  background:
    radial-gradient(circle at 88% 0%, rgba(255,255,255,.22), transparent 18rem),
    linear-gradient(135deg, #2A040B 0%, #650717 48%, #B10F2E 100%);
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 42px rgba(58,6,16,.22);
}
.topbar::before {
  height: 3px;
  background: linear-gradient(90deg, var(--oro), #F3D27D, var(--rojo));
}
.topbar h1,
.topbar a,
.topbar button,
.topbar .marca {
  color: #fff;
}
.icono-top {
  color: #fff;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 12px 26px rgba(0,0,0,.12);
}
.icono-top:hover {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.34);
}

.contenido {
  padding-top: 1.65rem;
}

.buscador .campo {
  background: #fff;
  border: 0;
  box-shadow: 0 20px 55px rgba(58,6,16,.12), inset 0 0 0 1px rgba(216,198,204,.8);
}
.chips {
  padding: .08rem .08rem .5rem;
}
.chip {
  border-radius: 999px;
  background: #fff;
  border-color: rgba(216,198,204,.85);
}
.chip.on {
  background: linear-gradient(135deg, #2A040B, var(--rojo-osc) 48%, var(--rojo));
}

/* Convierte tablas de listados en filas-tarjeta sin cambiar el HTML. */
.listado-compacto {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.listado-compacto::before {
  display: none;
}
.listado-compacto .tabla-envoltura {
  overflow-x: auto;
  padding: .15rem .1rem .4rem;
}
.listado-compacto table.tabla {
  min-width: 920px;
  border-collapse: separate;
  border-spacing: 0 .62rem;
  background: transparent;
}
.listado-compacto table.tabla thead th {
  position: static;
  padding: .35rem .72rem;
  background: transparent;
  border: 0;
  color: #8B7580;
}
/* El filter promueve cada fila a su propia capa: sin el, el scroll de listas
   largas pasa de ~17ms a ~47ms por frame. No sustituir por box-shadow. */
.listado-compacto table.tabla tbody tr {
  filter: drop-shadow(0 14px 24px rgba(58,6,16,.08));
}
.listado-compacto table.tabla tbody tr:hover {
  filter: drop-shadow(0 18px 30px rgba(58,6,16,.13));
}
.listado-compacto table.tabla td {
  background: rgba(255,255,255,.97);
  border-top: 1px solid rgba(216,198,204,.78);
  border-bottom: 1px solid rgba(216,198,204,.78);
  border-bottom-width: 1px;
}
.listado-compacto table.tabla td:first-child {
  border-left: 1px solid rgba(216,198,204,.78);
  border-radius: 18px 0 0 18px;
}
.listado-compacto table.tabla td:last-child {
  border-right: 1px solid rgba(216,198,204,.78);
  border-radius: 0 18px 18px 0;
}
.listado-compacto table.tabla tbody tr:hover td {
  background: linear-gradient(180deg, #fff, #FFF6F8);
  border-color: rgba(177,15,46,.2);
}
/* Al desplazar con la rueda el cursor queda quieto y el :hover recorre las
   filas, re-rasterizando la capa con filter de cada una: el frame sube de
   ~19ms a ~128ms. Mientras dura el desplazamiento se resuelve a los mismos
   valores del estado normal, asi no hay repintado. */
body.desplazando .listado-compacto table.tabla tbody tr:hover {
  filter: drop-shadow(0 14px 24px rgba(58,6,16,.08));
}
body.desplazando .listado-compacto table.tabla tbody tr:hover td {
  background: rgba(255,255,255,.97);
  border-color: rgba(216,198,204,.78);
}
.listado-compacto table.tabla tfoot td {
  background: #fff;
  border: 0;
}

.acciones-tabla {
  border-radius: 999px;
  background: #FFF8FA;
  border-color: rgba(177,15,46,.12);
}
.acciones-tabla .btn-icono {
  color: var(--vino);
}
.acciones-tabla .btn-icono:hover {
  background: linear-gradient(135deg, var(--vino), var(--rojo));
}

.badge {
  font-weight: 900;
  border: 0;
}
.badge-ok {
  background: #DFF7EC;
  color: #087047;
}
.badge-info {
  background: #E2F0FF;
  color: #075C9F;
}
.badge-alerta {
  background: #FFF0C8;
  color: #8E5600;
}
.badge-peligro {
  background: #FFE4E9;
  color: #A60E25;
}

.fila {
  border-radius: 24px;
  box-shadow: 0 16px 32px rgba(58,6,16,.09), var(--sombra-inset);
}

@media (min-width: 820px) {
  .sidebar {
    color: rgba(255,255,255,.78);
    background:
      radial-gradient(circle at 20% 0%, rgba(255,255,255,.12), transparent 13rem),
      linear-gradient(180deg, #2A040B 0%, #4C0714 48%, #26040A 100%) !important;
    box-shadow: 24px 0 55px rgba(42,4,11,.2);
  }
  .sidebar-marca {
    background: transparent;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .sidebar nav .grupo-nav {
    color: rgba(255,255,255,.45);
  }
  .sidebar nav a {
    color: rgba(255,255,255,.76);
    border-color: transparent;
  }
  .sidebar nav a svg {
    opacity: .86;
  }
  .sidebar nav a:hover {
    color: #fff;
    background: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.08);
  }
  .sidebar nav a.activo {
    color: var(--vino);
    background: linear-gradient(135deg, #fff, #FFF0F4);
    border-color: rgba(255,255,255,.35);
    box-shadow: 0 18px 36px rgba(0,0,0,.18);
  }
  .sidebar nav a.activo svg {
    color: var(--rojo);
  }
  .sidebar-pie {
    color: rgba(255,255,255,.64);
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.12);
  }
  .principal {
    background:
      radial-gradient(circle at 100% 0%, rgba(201,151,43,.12), transparent 24rem),
      linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,0) 18rem);
  }
}

@media (prefers-color-scheme: dark) {
  .listado-compacto table.tabla td {
    background: rgba(32,25,30,.98);
    border-color: rgba(72,56,64,.86);
  }
  .listado-compacto table.tabla tbody tr:hover td {
    background: rgba(177,15,46,.12);
    border-color: rgba(177,15,46,.28);
  }
  body.desplazando .listado-compacto table.tabla tbody tr:hover td {
    background: rgba(32,25,30,.98);
    border-color: rgba(72,56,64,.86);
  }
  .listado-compacto table.tabla thead th {
    color: var(--tinta-3);
  }
}

/* =========================================================================
   Premium icons - iconografia con mas presencia visual
   ========================================================================= */
svg {
  flex: none;
}
svg use {
  stroke-width: 2.25;
}

.sidebar nav a svg,
.navbar a svg {
  opacity: 1;
  color: currentColor;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.sidebar nav a svg {
  width: 31px;
  height: 31px;
}
.sidebar nav a:hover svg {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
}
.sidebar nav a.activo svg {
  color: #fff;
  background: linear-gradient(135deg, var(--vino), var(--rojo));
  border-color: rgba(177,15,46,.22);
  box-shadow: 0 10px 18px rgba(177,15,46,.22), inset 0 1px 0 rgba(255,255,255,.2);
}

.navbar a svg {
  width: 28px;
  height: 28px;
  padding: 5px;
  background: rgba(177,15,46,.06);
  border-color: rgba(177,15,46,.08);
}
.navbar a.activo svg {
  color: #fff;
  background: linear-gradient(135deg, var(--vino), var(--rojo));
  border-color: rgba(177,15,46,.3);
  box-shadow: 0 8px 18px rgba(177,15,46,.22);
}

.icono-top,
.btn-icono {
  overflow: hidden;
}
.icono-top svg {
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.18));
}
.btn-icono svg {
  width: 17px;
  height: 17px;
}

.acciones-tabla {
  gap: .28rem;
  padding: .24rem;
}
.acciones-tabla .btn-icono {
  width: 34px;
  height: 34px;
  min-height: 34px;
  border-radius: 12px;
  background: #F7F1F4;
  border: 1px solid rgba(216,198,204,.9);
  color: var(--tinta-2);
  transition: transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
.acciones-tabla .btn-icono:hover {
  transform: translateY(-2px);
  color: #fff;
  box-shadow: 0 10px 20px rgba(58,6,16,.16);
}
.acciones-tabla .btn-icono[title*="Ver"] {
  background: #EAF2FF;
  color: #165BA3;
  border-color: #CFE2FF;
}
.acciones-tabla .btn-icono[title*="Ver"]:hover {
  background: linear-gradient(135deg, #0D4D91, #2376D1);
}
.acciones-tabla .btn-icono[title*="Editar"] {
  background: #FFF4D9;
  color: #8A5200;
  border-color: #F2DCAB;
}
.acciones-tabla .btn-icono[title*="Editar"]:hover {
  background: linear-gradient(135deg, #9A5C00, #D6951B);
}
.acciones-tabla .btn-icono[title*="PDF"] {
  background: #FFE7EC;
  color: #A60E25;
  border-color: #F4C3CD;
}
.acciones-tabla .btn-icono[title*="PDF"]:hover {
  background: linear-gradient(135deg, #8E0B1F, #D92342);
}
.acciones-tabla .btn-icono[title*="Adjuntos"] {
  background: #F0ECFF;
  color: #5B3BB4;
  border-color: #DCD2FF;
}
.acciones-tabla .btn-icono[title*="Adjuntos"]:hover {
  background: linear-gradient(135deg, #4A2DA0, #7D5DE8);
}
.acciones-tabla .btn-icono[title*="estado"],
.acciones-tabla .btn-icono[title*="Estado"] {
  background: #EEF9F3;
  color: #0C6F4A;
  border-color: #CDEDDD;
}
.acciones-tabla .btn-icono[title*="estado"]:hover,
.acciones-tabla .btn-icono[title*="Estado"]:hover {
  background: linear-gradient(135deg, #0C6F4A, #18A06D);
}
.acciones-tabla .btn-icono[title*="Eliminar"] {
  background: #FFE7EC;
  color: #A60E25;
  border-color: #F4C3CD;
}
.acciones-tabla .btn-icono[title*="Eliminar"]:hover {
  background: linear-gradient(135deg, #8E0B1F, #D92342);
}
.acciones-tabla .btn-wa {
  background: #E6FAF0;
  color: #128C4A;
  border-color: #C5F0D9;
}
.acciones-tabla .btn-wa:hover {
  background: linear-gradient(135deg, #128C4A, #25D366);
  color: #fff;
}

.btn svg,
.chip svg,
.pastilla svg,
.aviso svg,
.fila svg {
  opacity: 1;
}
.vacio svg {
  opacity: .46;
  color: var(--rojo-osc);
  filter: drop-shadow(0 10px 18px rgba(177,15,46,.16));
}
.login-marca .logo svg,
.sidebar-marca svg {
  opacity: 1;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.24));
}

@media (prefers-color-scheme: dark) {
  .acciones-tabla .btn-icono {
    border-color: rgba(255,255,255,.08);
  }
  .sidebar nav a svg,
  .navbar a svg {
    border-color: rgba(255,255,255,.08);
  }
  .vacio svg {
    color: var(--rosa);
  }
}

/* ---------- Impresion ---------------------------------------------------- */
@media print {
  .topbar, .navbar, .sidebar, .fab, .barra-fija, .filtros-barra, .no-imprimir { display: none !important; }
  body { background: #fff; font-size: 11px; }
  .contenido { padding: 0; max-width: none; }
  .tarjeta { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  table.tabla th { background: #eee !important; -webkit-print-color-adjust: exact; }
  a { color: #000; }
}

/* ---------- Modo oscuro del sistema -------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #F2F2F5; --tinta-2: #C9C9D2; --tinta-3: #9A9AA6; --tinta-4: #74747F;
    --fondo: #110D10; --superficie: #1A1519; --superficie-2: #241B21;
    --superficie-3: rgba(32,25,30,.82);
    --borde: #2E2E38; --borde-fuerte: #3C3C48;
    --rojo-claro: #34151C;
    --ok-bg: #10291F; --alerta-bg: #2C2110; --peligro-bg: #2E1418; --info-bg: #14213A;
    --sombra-1: 0 1px 2px rgba(0,0,0,.4);
    --sombra-2: 0 2px 8px rgba(0,0,0,.45);
    --sombra-3: 0 8px 28px rgba(0,0,0,.6);
    --sombra-inset: inset 0 1px 0 rgba(255,255,255,.06);
  }
  body {
    background:
      radial-gradient(circle at 12% 0%, rgba(177,15,46,.18), transparent 28rem),
      radial-gradient(circle at 92% 6%, rgba(201,151,43,.1), transparent 28rem),
      linear-gradient(135deg, #120D10 0%, #171116 48%, #0E0B0D 100%);
  }
  body::before { opacity: .25; }
  .tarjeta,
  .fila,
  .kpi,
  .login-tarjeta,
  .acciones-tabla,
  .acciones-fila,
  .campo,
  .select,
  .textarea,
  .panel,
  .navbar,
  .barra-fija {
    background: linear-gradient(180deg, rgba(32,25,30,.96), rgba(26,21,25,.9));
    border-color: rgba(72,56,64,.9);
  }
  .tarjeta-titulo,
  .panel-cabecera,
  table.tabla th {
    background: linear-gradient(180deg, rgba(36,27,33,.98), rgba(29,22,27,.96));
  }
  table.tabla { background: rgba(26,21,25,.74); }
  table.tabla td { border-bottom-color: rgba(72,56,64,.64); }
  table.tabla tbody tr:hover { background: rgba(177,15,46,.1); }
  .sidebar {
    background:
      radial-gradient(circle at 0% 0%, rgba(177,15,46,.16), transparent 18rem),
      linear-gradient(180deg, rgba(31,23,28,.98), rgba(22,17,21,.94)) !important;
    border-right-color: rgba(72,56,64,.85);
  }
  .sidebar-marca { background: rgba(255,255,255,.03); color: #fff; }
  .sidebar nav a:hover { background: rgba(255,255,255,.06); }
  .sidebar nav a.activo {
    background: linear-gradient(135deg, rgba(177,15,46,.26), rgba(255,255,255,.05));
    color: #fff;
  }
  .topbar {
    color: #fff;
    background:
      radial-gradient(circle at 92% 10%, rgba(255,255,255,.08), transparent 16rem),
      linear-gradient(135deg, #1A0E13, #2B111A 48%, #4B1020);
    border-bottom-color: rgba(72,56,64,.9);
  }
  .topbar h1,
  .topbar a,
  .topbar button,
  .topbar .marca {
    color: #fff;
  }
  .icono-top {
    color: #fff;
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.12);
  }
  .sidebar-marca {
    background: linear-gradient(135deg, #1A0E13, #4B1020);
  }
  .principal {
    background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 18rem);
  }
  .buscador .campo { background: rgba(32,25,30,.96); }
  .buscador .lupa { color: var(--rosa); }
  .chip { background: rgba(32,25,30,.86); border-color: rgba(72,56,64,.9); }
  .badge { background: #2A2A33; color: var(--tinta-2); }
  .badge-ok { background: var(--ok-bg); color: #74E0B2; }
  .badge-alerta { background: var(--alerta-bg); color: #F5C56A; }
  .badge-peligro { background: var(--peligro-bg); color: #F58A99; }
  .badge-info { background: var(--info-bg); color: #8DB9F2; }
  .mensaje { background: #2A2A33; }
  .vacio { background: rgba(32,25,30,.54); border-color: rgba(72,56,64,.9); }
  select.campo, .select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9AA6' stroke-width='2.5' stroke-linecap='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  }
  .tabla-piezas input { background: var(--superficie-2); color: var(--tinta); }
}

/* =========================================================================
   BARRA LATERAL EN RIEL - se despliega al acercar el cursor
   Solo aplica en escritorio; en movil sigue mandando la barra inferior.
   ========================================================================= */
@media (min-width: 820px) {
  :root {
    --riel: 76px;              /* ancho colapsado (solo iconos) */
    --riel-pad: .75rem;        /* padding lateral del <nav> */
    --riel-icono: 36px;
    /* Centra el icono dentro del riel */
    --riel-hueco: calc((var(--riel) - var(--riel-pad) * 2 - var(--riel-icono)) / 2);
  }

  /* La barra flota sobre el contenido: al expandirse no recorre la pagina */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--riel);
    z-index: 80;
    overflow-x: hidden; overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.32) transparent;
    transition:
      width .26s cubic-bezier(.32,.72,0,1) .22s,
      box-shadow .26s ease .22s;
  }

  .sidebar:hover,
  .sidebar:focus-within,
  .sidebar.expandida {
    width: var(--sidebar);
    box-shadow: 30px 0 72px rgba(42,4,11,.34);
    transition-delay: .06s;    /* expande rapido, colapsa con calma */
  }

  /* El contenido reserva solo el ancho del riel */
  .principal { margin-left: var(--riel); }
  .barra-fija { left: var(--riel); }

  /* ---- Etiquetas: ocultas en riel, visibles al desplegar ---- */
  .sidebar .etq-nav {
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .16s ease, transform .22s cubic-bezier(.32,.72,0,1);
  }
  .sidebar:hover .etq-nav,
  .sidebar:focus-within .etq-nav,
  .sidebar.expandida .etq-nav {
    opacity: 1;
    transform: none;
    transition-delay: .1s;
  }

  /* ---- Marca ---- */
  .sidebar-marca {
    gap: 0;
    padding: 0 var(--riel-pad);
    min-height: 64px;
    overflow: hidden;
  }
  .sidebar-marca svg {
    flex: none;
    width: 36px; height: 36px;
    margin-inline: var(--riel-hueco);
    transition: margin .26s cubic-bezier(.32,.72,0,1);
  }
  .sidebar:hover .sidebar-marca svg,
  .sidebar:focus-within .sidebar-marca svg,
  .sidebar.expandida .sidebar-marca svg { margin-right: .6rem; }

  /* ---- Items de navegacion ---- */
  .sidebar nav { padding: .9rem var(--riel-pad); gap: .24rem; }
  .sidebar nav a {
    position: relative;
    gap: .68rem;
    /* -1px por el borde del item, para que el icono quede centrado exacto */
    padding: 0 calc(var(--riel-hueco) - 1px);
    min-height: 44px;
    overflow: hidden;
  }
  .sidebar nav a svg {
    width: var(--riel-icono); height: var(--riel-icono);
    flex: none;
    padding: 7px;
  }
  /* La barra del item activo estorba en modo riel */
  .sidebar nav a.activo::before { display: none; }
  .sidebar:hover nav a.activo::before,
  .sidebar:focus-within nav a.activo::before,
  .sidebar.expandida nav a.activo::before {
    display: block;
    position: absolute; left: 5px; top: 50%;
    width: 3px; height: 20px; margin: 0;
    transform: translateY(-50%);
    border-radius: 999px;
    background: linear-gradient(180deg, var(--rojo), var(--oro));
  }
  .sidebar nav a:hover { transform: none; }

  /* Contador: punto sobre el icono en riel, insignia al desplegar */
  .sidebar nav a .cont {
    position: absolute;
    top: 8px; left: calc(var(--riel-hueco) + 11px);
    min-width: 16px; padding: 0 4px;
    font-size: .62rem; line-height: 16px;
    text-align: center;
    transition: none;
  }
  .sidebar:hover nav a .cont,
  .sidebar:focus-within nav a .cont,
  .sidebar.expandida nav a .cont {
    position: static;
    margin-left: auto;
    font-size: .7rem; line-height: 1.5;
  }

  /* ---- Separadores de grupo ---- */
  /* Colapsado: una linea fina. Desplegado: el titulo del grupo. */
  .sidebar nav .grupo-nav {
    height: 1px;
    padding: 0;
    margin: .55rem var(--riel-hueco);
    background: rgba(255,255,255,.14);
    border-radius: 1px;
    overflow: hidden;
    transition: height .2s ease, margin .2s ease, padding .2s ease, background .2s ease;
  }
  .sidebar:hover nav .grupo-nav,
  .sidebar:focus-within nav .grupo-nav,
  .sidebar.expandida nav .grupo-nav {
    height: 26px;
    padding: .55rem .6rem .2rem;
    margin: 0;
    background: transparent;
  }

  /* ---- Pie: avatar siempre visible, datos al desplegar ---- */
  .sidebar-pie {
    display: flex; align-items: center; gap: .6rem;
    margin: .75rem calc(var(--riel-pad) - .1rem);
    padding: .6rem calc(var(--riel-hueco) - .15rem);
    overflow: hidden;
    line-height: 1.35;
  }
  .avatar-usuario {
    flex: none;
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--rojo), var(--oro));
    color: #fff; font-weight: 800; font-size: .8rem;
  }

  /* Quien no soporta :has() usa el ancho del riel: nada se rompe */
  .app:has(.sidebar:hover) .principal,
  .app:has(.sidebar:focus-within) .principal,
  .app:has(.sidebar.expandida) .principal { margin-left: var(--riel); }
}

/* Si el usuario pidio menos animacion, se despliega sin transiciones */
@media (min-width: 820px) and (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar .etq-nav,
  .sidebar-marca svg,
  .sidebar nav .grupo-nav { transition: none; }
}

/* ---------- Dashboard ejecutivo ----------------------------------------- */
.dashboard {
  display: flex;
  flex-direction: column;
  gap: .95rem;
}
.dashboard-hero {
  min-height: 150px;
  align-items: stretch;
  padding: 1.25rem;
  margin-bottom: .1rem;
}
.dashboard-hero .hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dashboard-hero h1 {
  font-size: clamp(1.65rem, 3.8vw, 2.45rem);
  line-height: 1.02;
}
.dashboard-hero .chico {
  margin-top: .35rem;
  font-size: .86rem;
  color: rgba(255,255,255,.82);
}
.hero-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  min-width: 190px;
}
.hero-mini {
  min-width: 170px;
  padding: .78rem .85rem;
  border-radius: 18px;
  color: #fff;
  text-align: right;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.hero-mini span {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  opacity: .72;
  font-weight: 900;
}
.hero-mini b {
  display: block;
  margin-top: .16rem;
  font-size: 1.15rem;
  letter-spacing: -.03em;
}

.dashboard-kpis {
  margin-top: -.15rem;
}
.dashboard-kpis .kpi {
  min-height: 112px;
  padding: 1rem 1.05rem;
}
.dashboard-kpis .kpi .valor {
  font-size: clamp(1.35rem, 2.2vw, 1.72rem);
}

.dashboard-section-title {
  margin-top: .25rem;
  margin-bottom: -.25rem;
  color: var(--vino);
  font-size: .72rem;
}
.dashboard-section-title a {
  margin-left: auto;
  padding: .3rem .58rem;
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(216,198,204,.7);
  font-weight: 900;
}

.acciones-dashboard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .72rem;
}
.acciones-dashboard .accion-rapida {
  min-height: 54px;
  justify-content: center;
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(58,6,16,.09), var(--sombra-inset);
}
.acciones-dashboard .accion-rapida svg {
  width: 19px;
  height: 19px;
}

.dashboard-chart {
  border-radius: 26px;
}
.dashboard-chart .tarjeta-cuerpo {
  padding: 1rem 1rem .8rem;
}
.dashboard-chart .grafico {
  height: 112px;
  gap: 4px;
  padding: .2rem .05rem .45rem;
}
.dashboard-chart .grafico .barra {
  border-radius: 10px;
  background:
    linear-gradient(180deg, #F8DCE4, #FBEAF0);
  overflow: hidden;
}
.dashboard-chart .grafico .barra i {
  border-radius: 10px;
  background:
    linear-gradient(180deg, #D92342, #8E0B1F);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
.dashboard-chart .grafico-etq {
  padding-inline: .1rem;
  font-weight: 800;
}

.dashboard-columnas {
  gap: 1.1rem;
}
.dashboard-columnas .lista,
.dashboard-recientes {
  gap: .62rem;
}
.dashboard-columnas .fila,
.dashboard-recientes .fila {
  padding: .82rem .9rem;
}

.dashboard-maestros .kpi {
  min-height: 92px;
}

@media (min-width: 1080px) {
  .dashboard {
    gap: 1.05rem;
  }
  .dashboard-hero {
    min-height: 170px;
    padding: 1.45rem 1.55rem;
  }
}

@media (max-width: 819px) {
  .dashboard-hero {
    flex-direction: column;
    min-height: auto;
  }
  .hero-panel {
    align-items: flex-start;
  }
  .hero-mini {
    text-align: left;
    width: 100%;
  }
  .acciones-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-chart .grafico {
    height: 92px;
  }
}

/* ---------- Cabecera premium de pagina ---------------------------------- */
.topbar {
  isolation: isolate;
  min-height: calc(68px + var(--safe-t));
  padding-inline: 1.35rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% -40%, rgba(255,255,255,.3), transparent 18rem),
    radial-gradient(circle at 18% 130%, rgba(201,151,43,.26), transparent 18rem),
    linear-gradient(125deg, #2A040B 0%, #5B0715 42%, #A70E2A 78%, #C9972B 145%);
}
.topbar::before {
  height: 4px;
  background: linear-gradient(90deg, #F1C45D, #FFF0A6, #B10F2E);
  z-index: 2;
}
.topbar::after {
  content: "";
  position: absolute;
  inset: 4px 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  pointer-events: none;
}
.topbar h1 {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .72rem;
  margin: 0;
  color: #fff;
  font-size: clamp(1.08rem, 1.8vw, 1.28rem);
  font-weight: 950;
  letter-spacing: -.02em;
  text-shadow: 0 2px 12px rgba(0,0,0,.22);
}
.topbar h1::before {
  content: "";
  width: 10px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(180deg, #FFF1A8, var(--oro), var(--rojo));
  box-shadow: 0 0 0 5px rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.2);
}
.topbar-acciones {
  position: relative;
  z-index: 1;
  gap: .5rem;
}
.topbar .icono-top {
  width: 42px;
  height: 42px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.09));
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 12px 26px rgba(0,0,0,.18);
}
.topbar .icono-top:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.16));
  border-color: rgba(255,255,255,.4);
}

@media (min-width: 820px) {
  .topbar {
    height: 68px;
    padding-left: 1.55rem;
    padding-right: 1.2rem;
  }
}

@media (max-width: 819px) {
  .topbar {
    min-height: calc(60px + var(--safe-t));
    padding-inline: .9rem;
  }
  .topbar h1::before {
    height: 24px;
    width: 7px;
  }
  .topbar .icono-top {
    width: 38px;
    height: 38px;
  }
}


/* =========================================================================
   PANELES CERRADOS: inertes
   Un panel cerrado seguia siendo "position: fixed" con opacity 0 pero
   activo, formando una caja invisible en medio de la pantalla que se
   tragaba clics, rueda del raton y seleccion de texto. Tampoco se usa
   "visibility: hidden" aqui porque cortaria la animacion de cierre: el
   tabulador se resuelve con el atributo inert desde JavaScript.
   ========================================================================= */
.panel:not(.abierto) { pointer-events: none; }
.panel.abierto { pointer-events: auto; }

/* El velo ya era inerte al estar cerrado; se deja explicito por simetria */
.velo:not(.abierto) { pointer-events: none; }

/* Bloquea el scroll del fondo solo mientras hay un panel abierto.
   Se usa una clase en vez de estilo en linea para que una restauracion
   desde el cache del navegador no deje la pagina sin scroll. */
body.panel-abierto { overflow: hidden; }

/* =========================================================================
   BUSCADOR DE PRODUCTOS - confirmacion de lo agregado
   Al elegir un producto el buscador se limpia solo, asi que sin una
   confirmacion visible no queda rastro de que se agrego.
   ========================================================================= */
#ultimo-agregado {
  display: none;
  align-items: center;
  gap: .6rem;
  margin: .5rem 0 .1rem;
  padding: .55rem .7rem;
  border-radius: var(--r);
  border: 1px solid rgba(18,133,90,.28);
  background: linear-gradient(135deg, var(--ok-bg), rgba(255,255,255,.6));
  color: #0B5C3E;
}
#ultimo-agregado.visible {
  display: flex;
  animation: aparece-agregado .28s cubic-bezier(.32,.72,0,1);
}
#ultimo-agregado .marca-ok {
  flex: none;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ok); color: #fff;
  font-size: .82rem; font-weight: 800;
}
#ultimo-agregado .detalle { flex: 1; min-width: 0; }
#ultimo-agregado .nombre {
  font-weight: 700; font-size: .87rem; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#ultimo-agregado .meta { font-size: .72rem; opacity: .85; }
#ultimo-agregado .deshacer {
  flex: none;
  border: 1px solid rgba(18,133,90,.35);
  background: rgba(255,255,255,.7);
  color: #0B5C3E;
  border-radius: 999px;
  padding: .3rem .7rem;
  font-size: .74rem; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
#ultimo-agregado .deshacer:hover { background: #fff; }

@keyframes aparece-agregado {
  from { opacity: 0; transform: translateY(-6px); }
}

/* Marca en los resultados: el producto ya esta en el detalle */
.resultado.ya-agregado { background: rgba(179,18,43,.045); }
.resultado .insignia-lista {
  display: inline-block;
  margin-top: .18rem;
  padding: .05rem .4rem;
  border-radius: 999px;
  background: var(--alerta-bg);
  color: var(--alerta);
  font-size: .64rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
}

/* La fila recien agregada parpadea para ubicarla de un vistazo */
.item-fila.recien-agregada {
  animation: destaca-fila 1.6s ease-out;
}
@keyframes destaca-fila {
  0%   { border-color: var(--ok); box-shadow: 0 0 0 3px rgba(18,133,90,.22); }
  70%  { border-color: var(--ok); box-shadow: 0 0 0 3px rgba(18,133,90,.10); }
  100% { border-color: var(--borde); box-shadow: var(--sombra-1); }
}

@media (prefers-reduced-motion: reduce) {
  #ultimo-agregado.visible, .item-fila.recien-agregada { animation: none; }
}

@media (prefers-color-scheme: dark) {
  #ultimo-agregado { color: #74E0B2; background: rgba(18,133,90,.14); }
  #ultimo-agregado .deshacer { background: rgba(255,255,255,.06); color: #74E0B2; }
}

/* =========================================================================
   FOCO vs ERROR: no pueden verse igual
   El foco usaba el rojo de la marca y el error el rojo de peligro. Con el
   autofocus del primer campo, cualquier envio fallido hacia parecer que el
   error estaba ahi, aunque estuviera mas abajo en el formulario.
   ========================================================================= */
.campo:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--oro);
  box-shadow: 0 0 0 4px rgba(215,166,66,.28), var(--sombra-1);
}

/* El error se distingue por color, grosor y fondo, no solo por el borde */
.grupo.malo .campo,
.grupo.malo .select,
.grupo.malo .textarea {
  border-color: var(--peligro);
  border-width: 2px;
  background-color: var(--peligro-bg);
}
/* Si el campo con error recibe el foco, sigue mandando el rojo de error */
.grupo.malo .campo:focus,
.grupo.malo .select:focus,
.grupo.malo .textarea:focus {
  border-color: var(--peligro);
  box-shadow: 0 0 0 4px rgba(196,33,48,.20);
}
.grupo.malo > label { color: var(--peligro); }
.grupo .error::before { content: "\26A0  "; }

@media (prefers-color-scheme: dark) {
  .campo:focus, .select:focus, .textarea:focus {
    box-shadow: 0 0 0 4px rgba(215,166,66,.22);
  }
  .grupo.malo .campo,
  .grupo.malo .select,
  .grupo.malo .textarea { background-color: rgba(196,33,48,.10); }
}