/* Cotizador PerfectHome · hoja única de estilos (Sesión 05).
   El mundo visual es el del prototipo aprobado de la Sesión 03 (prototipos/pantallas/prototipo.css):
   mismos tokens, componentes y movimiento, pasados de marcos de dispositivo a pantallas reales.
   Claro en todas partes: el operativo lo usa al sol, en el celular; administración, en el escritorio. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("fuentes/archivo-latin-wdth-normal.de2f1fe81758.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("fuentes/archivo-latin-ext-wdth-normal.589f7bc0fac4.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --fuente: "Archivo", system-ui, sans-serif;
  --verde: #8BC34A;          /* acento: rellenos y marcas; nunca texto sobre blanco (2.1:1) */
  --verde-osc: #0B5B12;      /* acciones primarias y texto de marca (8.3:1) */
  --verde-hover: #094A0F;
  --tinte: #EFF6E6;
  --tinta: #16201A;
  --gris: #56605A;
  --gris-2: #6B746D;         /* más oscuro que el del prototipo: 4.6:1 sobre blanco para texto chico */
  --linea: #E1E6DF;
  --linea-fuerte: #C9D1C6;
  --borde-campo: #C3CBC0;
  --neutro: #EDF0EC;
  --fondo: #F4F6F3;
  --ambar: #7A4A00; --ambar-tinte: #FFF4DE; --ambar-borde: #EFC874;
  --rojo: #A8261D;  --rojo-tinte: #FCEBEA; --rojo-borde: #EFB0AA;
  --azul: #1D4E89;  --azul-tinte: #E9F0F9; --azul-borde: #BCD0EA;
  --violeta: #5B3A99; --violeta-tinte: #EFEAF8;
  --radio: 10px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body { font-family: var(--fuente); color: var(--tinta); background: var(--fondo); font-size: 15px; line-height: 1.45;
       font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; caret-color: var(--verde-osc); min-height: 100dvh; }
::selection { background: #D3EABA; color: var(--tinta); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--verde-osc); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--verde-osc); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: #C5CDC2 transparent; }
h1, h2, h3 { font-stretch: 108%; letter-spacing: -.01em; text-wrap: balance; }
p { text-wrap: pretty; }
/* «hidden» siempre gana, aunque el componente tenga su propio display. */
[hidden] { display: none !important; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- componentes compartidos ---------- */
.icono { width: 18px; height: 18px; flex: none; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.chip .icono { width: 13px; height: 13px; }
.chip.borrador, .chip.neutro, .chip.cancelada { background: var(--neutro); color: var(--gris); }
.chip.esperando_revision { background: var(--azul-tinte); color: var(--azul); }
.chip.en_revision, .chip.emitiendo { background: var(--violeta-tinte); color: var(--violeta); }
.chip.correccion_pedida, .chip.inactivo { background: var(--rojo-tinte); color: var(--rojo); }
.chip.cotizacion_emitida { background: var(--verde-osc); color: #fff; }
.chip.ok { background: var(--tinte); color: var(--verde-osc); }
.chip.pendiente, .chip.desactualizado { background: var(--ambar-tinte); color: var(--ambar); }

.btn { border: 0; border-radius: var(--radio); padding: 11px 18px; font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; justify-content: center;
       gap: 8px; min-height: 46px; text-decoration: none; line-height: 1.2;
       transition: transform 160ms var(--ease-out), background-color 160ms ease, border-color 160ms ease; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn.primario { background: var(--verde-osc); color: #fff; }
.btn.primario:disabled { background: #A3B8A5; cursor: not-allowed; }
.btn.secundario { background: #fff; color: var(--tinta); border: 1px solid var(--linea-fuerte); }
.btn.fantasma { background: none; color: var(--verde-osc); padding: 8px 10px; min-height: 44px; }
.btn.peligro { background: #fff; color: var(--rojo); border: 1px solid var(--rojo-borde); }
.btn.chico { min-height: 36px; padding: 7px 12px; font-size: 14px; }
/* Dar de baja se deshace (principio 5): no necesita gritar en rojo en cada fila; se tiñe al apuntarlo. */
.btn.baja { background: #fff; color: var(--gris); border: 1px solid var(--linea-fuerte); }
.btn.baja:focus-visible { color: var(--rojo); border-color: var(--rojo-borde); }
.btn.bloque { width: 100%; }
.btn .icono { width: 17px; height: 17px; }
@media (hover: hover) and (pointer: fine) {
  .btn.primario:hover:not(:disabled) { background: var(--verde-hover); }
  .btn.secundario:hover { border-color: var(--gris-2); }
  .btn.fantasma:hover { background: var(--tinte); }
  .btn.peligro:hover { background: var(--rojo-tinte); }
  .btn.baja:hover { color: var(--rojo); border-color: var(--rojo-borde); background: var(--rojo-tinte); }
  .tarjeta:hover { border-color: var(--linea-fuerte); }
  .tabla tr.clic:hover td { background: #F8FAF7; }
  .tabla tr.clic:hover a.fila { color: var(--verde-osc); }
  .lateral a:hover:not([aria-current]) { background: #EDF1EC; color: var(--tinta); }
  .toast button:hover { background: rgba(255,255,255,.18); }
}

.campo { display: block; margin-bottom: 16px; }
.campo > .etiqueta { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.campo .ayuda { display: block; font-size: 13px; color: var(--gris); margin-top: 6px; }
.campo .ayuda ul { margin: 4px 0 0; padding-left: 18px; }
.campo .error, .errores { display: block; font-size: 13.5px; color: var(--rojo); margin-top: 6px; }
.errores ul, ul.errorlist { list-style: none; margin: 0; padding: 0; }
.campo input:not([type=checkbox]):not([type=radio]), .campo textarea, .campo select {
  width: 100%; border: 1px solid var(--borde-campo); border-radius: var(--radio); padding: 11px 13px; background: #fff; font-size: 16px; min-height: 46px; }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: 3px solid rgba(139,195,74,.4); outline-offset: 0; border-color: var(--verde-osc); }
.campo input[aria-invalid=true] { border-color: var(--rojo); }
.campo input::placeholder { color: #7D867F; }
.campo input[disabled], .campo input[readonly] { background: var(--fondo); color: var(--gris); }
.campo.casilla { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: 15px; cursor: pointer; }
.campo.casilla input { width: 20px; height: 20px; accent-color: var(--verde-osc); margin: 0; }
.campo input.codigo-otp { font-size: 22px; letter-spacing: .3em; font-weight: 600; text-align: center; }

.aviso { border-radius: var(--radio); padding: 11px 13px; font-size: 14px; display: flex; gap: 10px; align-items: flex-start; border: 1px solid transparent; margin-bottom: 16px; }
.aviso .icono { margin-top: 1px; }
.aviso p { margin: 0; }
.aviso.ambar { background: var(--ambar-tinte); color: #5C3A00; border-color: var(--ambar-borde); }
.aviso.rojo { background: var(--rojo-tinte); color: #6E1A14; border-color: var(--rojo-borde); }
.aviso.verde { background: var(--tinte); color: var(--verde-osc); border-color: #CFE3B6; }
.aviso.azul { background: var(--azul-tinte); color: #183F6E; border-color: var(--azul-borde); }
.muted { color: var(--gris); }
.sutil { color: var(--gris-2); font-size: 13px; }
.codigo { color: var(--gris); font-size: 12.5px; letter-spacing: .01em; }
.vacio { text-align: center; padding: 40px 18px; color: var(--gris); }
.vacio h2, .vacio h3 { color: var(--tinta); font-size: 17px; margin: 12px 0 6px; font-weight: 650; }
.vacio p { margin: 0 auto; max-width: 42ch; }
.vacio .circulo { width: 60px; height: 60px; border-radius: 50%; background: var(--tinte); display: inline-flex; align-items: center; justify-content: center; color: var(--verde-osc); }
.vacio .circulo .icono { width: 28px; height: 28px; }
.vacio .btn { margin-top: 18px; }

/* ---------- entrada: acceso, contraseña y TOTP ---------- */
.entrada { min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; justify-items: center; padding: 24px 16px 20px;
           background: radial-gradient(120% 60% at 50% 0%, #fff 0%, var(--fondo) 70%); }
.entrada-cuerpo { width: 100%; max-width: 420px; align-self: center; padding: 8px 0 32px; }
.entrada-marca { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 26px; }
.entrada-marca img { height: 40px; width: auto; }
.entrada-marca .entorno { font-size: 12px; font-weight: 600; color: var(--ambar); background: var(--ambar-tinte); border-radius: 999px; padding: 3px 10px; }
.panel { background: #fff; border: 1px solid var(--linea); border-radius: 16px; padding: 26px 24px 24px; box-shadow: 0 1px 2px rgba(22,32,26,.04), 0 18px 36px -24px rgba(22,32,26,.28); }
.panel h1 { font-size: 24px; font-weight: 650; margin: 0 0 6px; }
.panel h2 { font-size: 17px; font-weight: 650; margin: 22px 0 8px; }
.panel > p, .panel .intro { color: var(--gris); margin: 0 0 20px; }
.panel form { margin-top: 18px; }
.panel .acciones { display: grid; gap: 8px; margin-top: 8px; }
.panel .secundarias { display: flex; justify-content: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.panel hr { border: 0; border-top: 1px solid var(--linea); margin: 22px 0; }
.entrada-pie { font-size: 12.5px; color: var(--gris); text-align: center; }
.qr { display: flex; justify-content: center; margin: 4px 0 18px; }
.qr img { width: 200px; height: 200px; border: 1px solid var(--linea); border-radius: 12px; padding: 8px; background: #fff; }
.secreto { font-family: var(--fuente); font-size: 14px; letter-spacing: .08em; word-break: break-all; background: var(--fondo); border-radius: 8px; padding: 8px 10px; }
.codigos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; list-style: none; padding: 14px 16px; margin: 0 0 16px; background: var(--fondo); border-radius: 12px;
           font-size: 17px; font-weight: 600; letter-spacing: .06em; }
.pasos-totp { counter-reset: paso; list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
.pasos-totp li { counter-increment: paso; display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-size: 14.5px; }
.pasos-totp li::before { content: counter(paso); width: 26px; height: 26px; border-radius: 50%; background: var(--tinte); color: var(--verde-osc); font-weight: 700; font-size: 13px;
                         display: flex; align-items: center; justify-content: center; }

/* ---------- campo: celular del operativo ---------- */
.app-campo { min-height: 100dvh; display: flex; flex-direction: column; max-width: 640px; margin: 0 auto; background: var(--fondo); }
.m-barra { background: #fff; padding: max(14px, env(safe-area-inset-top)) 12px 12px 18px; border-bottom: 1px solid var(--linea); display: flex; align-items: center; gap: 8px;
           position: sticky; top: 0; z-index: 10; }
.m-barra h1 { font-size: 21px; margin: 0; font-weight: 650; flex: 1; min-width: 0; }
.m-barra .atras { width: 44px; height: 44px; margin-left: -12px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--tinta);
                  transition: transform 160ms var(--ease-out); }
.m-barra .atras:active { transform: scale(.94); }
.m-barra .atras .icono { width: 22px; height: 22px; }
.m-barra .folio { flex: 1; min-width: 0; }
.m-barra .folio b { display: block; font-size: 16px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-barra .folio small { display: block; color: var(--gris); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-cuerpo { flex: 1; padding: 14px 16px calc(24px + env(safe-area-inset-bottom)); }
.m-cuenta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
            border-top: 1px solid var(--linea); background: #fff; font-size: 13.5px; color: var(--gris); }
.filtros { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.filtros a { border: 1px solid var(--linea-fuerte); background: #fff; border-radius: 999px; padding: 0 16px; min-height: 44px; font-size: 14px; white-space: nowrap;
             display: inline-flex; gap: 6px; align-items: center; color: var(--tinta); text-decoration: none; transition: transform 160ms var(--ease-out); }
.filtros a:active { transform: scale(.97); }
.filtros a[aria-current] { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.filtros .n { font-size: 11px; background: rgba(0,0,0,.07); border-radius: 999px; padding: 0 6px; }
.filtros a[aria-current] .n { background: rgba(255,255,255,.2); }
.tarjeta { background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 14px; margin-bottom: 10px; display: block; color: inherit; text-decoration: none;
           transition: transform 160ms var(--ease-out), border-color 160ms ease; }
.tarjeta:active { transform: scale(.985); }
.tarjeta .fila1 { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.tarjeta .folio-t { font-size: 13px; color: var(--gris); font-weight: 600; }
.tarjeta .titulo { font-weight: 650; font-size: 16px; }
.tarjeta .desc { color: var(--gris); font-size: 14px; margin-top: 2px; }
.tarjeta .meta { display: flex; gap: 12px; color: var(--gris-2); font-size: 12.5px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.datos-servicio { background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; font-size: 14px; }
.datos-servicio .cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.datos-servicio .cab b { font-weight: 650; }
.datos-servicio p { margin: 6px 0 0; color: var(--gris); }
.seccion-tit { font-size: 15px; font-weight: 650; margin: 20px 0 8px; display: flex; align-items: center; gap: 8px; }
.seccion-tit .cuenta { font-size: 12px; font-weight: 600; color: var(--gris); background: var(--neutro); border-radius: 999px; padding: 1px 8px; }
.renglon { background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: start; }
.renglon .nom { font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.renglon .cant { font-weight: 650; font-size: 15px; white-space: nowrap; text-align: right; }
.renglon .cant small { font-size: 12px; color: var(--gris-2); font-weight: 500; margin-left: 3px; }
.renglon .cod { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.renglon .nota { grid-column: 1 / -1; font-size: 13px; color: var(--gris); }

/* ---------- oficina: escritorio de administración ---------- */
.app-oficina { min-height: 100dvh; display: grid; grid-template-columns: 216px 1fr; background: #fff; }
.lateral { background: #F6F8F5; border-right: 1px solid var(--linea); padding: 20px 12px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100dvh; }
.lateral .logo { margin: 0 8px 22px; display: block; }
.lateral .logo img { height: 32px; width: auto; display: block; }
.lateral a { padding: 0 10px; min-height: 40px; border-radius: 8px; font-size: 14px; color: var(--gris); display: flex; gap: 9px; align-items: center; text-decoration: none;
             transition: background-color 120ms ease; }
.lateral a .icono { color: var(--gris-2); }
.lateral a[aria-current] { background: #fff; color: var(--tinta); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.lateral a[aria-current] .icono { color: var(--verde-osc); }
.lateral .usuario { margin-top: auto; font-size: 13px; color: var(--gris); padding: 12px 0 0; border-top: 1px solid var(--linea); display: grid; gap: 6px; }
.lateral .usuario b { color: var(--tinta); font-weight: 600; font-size: 14px; }
.lateral .usuario form .btn { width: 100%; justify-content: flex-start; padding: 0 10px; min-height: 40px; font-size: 14px; font-weight: 500; color: var(--gris); gap: 9px; }
.lateral .usuario form .btn .icono { color: var(--gris-2); width: 18px; height: 18px; }
.principal { padding: 26px 32px 60px; min-width: 0; max-width: 1240px; }
.encabezado { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; gap: 20px; flex-wrap: wrap; }
.encabezado h1 { margin: 0; font-size: 25px; font-weight: 650; }
.encabezado .sub { color: var(--gris); font-size: 14px; margin: 4px 0 0; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th { text-align: left; font-size: 12.5px; color: var(--gris); font-weight: 600; padding: 0 10px 10px; border-bottom: 1px solid var(--linea-fuerte); white-space: nowrap; }
.tabla td { padding: 12px 10px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla td.cod { white-space: nowrap; font-size: 13px; color: var(--gris); }
.tabla .r { text-align: right; white-space: nowrap; }
.tabla .fuerte { font-weight: 600; }
.tabla a.fila { color: inherit; text-decoration: none; font-weight: 600; }
.tabla a.fila:hover { color: var(--verde-osc); text-decoration: underline; }
/* Fila completa como un solo enlace: el del servicio se estira sobre toda la fila. */
.tabla tr.clic { position: relative; }
.tabla tr.clic a.fila::after { content: ""; position: absolute; inset: 0; }
.tabla tr.clic a.fila:focus-visible { outline: none; }
.tabla tr.clic:has(a.fila:focus-visible) { outline: 2px solid var(--verde-osc); outline-offset: -2px; }
/* Guardado visible (del prototipo): mientras se guarda, el formulario queda inerte. */
.guardado { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.guardado.guardando { color: var(--gris); background: var(--neutro); }
form[aria-busy="true"] { opacity: .75; transition: opacity 160ms ease; }
.clave-manual > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--gris); font-size: 13.5px; min-height: 44px; }
.clave-manual > summary::-webkit-details-marker { display: none; }
.clave-manual > summary .icono { width: 16px; height: 16px; transition: transform 160ms var(--ease-out); }
.clave-manual[open] > summary .icono { transform: rotate(90deg); }
.tabla tr.inactivo td { background: #FBFBFA; color: var(--gris); }
.tabla .falta { color: var(--ambar); font-weight: 600; font-size: 13px; }
.tabla .precio-nuevo { color: var(--ambar); font-weight: 600; font-size: 12px; margin-top: 3px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.migas { display: flex; gap: 6px; align-items: center; color: var(--gris); font-size: 14px; }
.migas a { color: var(--verde-osc); font-weight: 600; display: inline-flex; align-items: center; gap: 2px; text-decoration: none; min-height: 32px; }
.exp-cab { padding-bottom: 16px; border-bottom: 1px solid var(--linea); margin-bottom: 18px; }
.exp-cab h1 { margin: 8px 0 4px; font-size: 25px; font-weight: 650; }
.exp-cab .datos { display: flex; gap: 22px; color: var(--gris); font-size: 14px; margin-top: 8px; flex-wrap: wrap; }
.exp-cab .datos b { color: var(--tinta); font-weight: 600; }
.exp-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 24px; align-items: start; }
.descripcion { border: 1px solid var(--linea); border-radius: 12px; padding: 14px 16px; margin-bottom: 20px; }
.descripcion h2 { margin: 0; font-size: 15.5px; font-weight: 650; }
.descripcion p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; max-width: 72ch; white-space: pre-line; }
.descripcion .falta { color: var(--gris-2); font-style: normal; }
.app-campo .descripcion { background: #fff; margin-bottom: 12px; }
.totales { border: 1px solid var(--linea); border-radius: 14px; padding: 18px; position: sticky; top: 16px;
           background: #fff; z-index: 1; }
.totales h2 { font-size: 15.5px; font-weight: 650; margin: 0 0 8px; }
.totales .fila { display: flex; justify-content: space-between; padding: 6px 0; color: var(--gris); font-size: 14px; }
.totales .fila b { color: var(--tinta); font-weight: 600; }
.totales .total { border-top: 2px solid var(--verde-osc); margin-top: 8px; padding-top: 12px; display: flex; justify-content: space-between; align-items: baseline; }
.totales .total span { color: var(--verde-osc); font-weight: 650; }
.totales .total b { color: var(--verde-osc); font-size: 26px; font-weight: 650; letter-spacing: -.02em; }
.totales .nota { font-size: 12.5px; color: var(--gris-2); margin: 12px 0 0; }

/* usuarios */
.usuario-nombre b { display: block; font-weight: 600; }
.usuario-nombre small { display: block; color: var(--gris-2); font-size: 12.5px; }
.tabla-usuarios td { vertical-align: middle; }
.tabla-usuarios td:first-child { width: 24%; }
.roles-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.roles-form label { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linea-fuerte); border-radius: 999px; padding: 0 11px; min-height: 34px; font-size: 13px;
                    cursor: pointer; background: #fff; white-space: nowrap; transition: background-color 120ms ease, border-color 120ms ease; }
.roles-form label:has(input:checked) { background: var(--tinte); border-color: #BFD9A3; color: var(--verde-osc); font-weight: 600; }
.roles-form label:has(input:disabled) { cursor: default; opacity: .6; }
.roles-form label:has(input:focus-visible) { outline: 2px solid var(--verde-osc); outline-offset: 2px; }
.roles-form input { width: 15px; height: 15px; accent-color: var(--verde-osc); margin: 0; }
.acciones-fila { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.alta { margin-bottom: 22px; }
.alta > summary { list-style: none; cursor: pointer; }
.alta > summary::-webkit-details-marker { display: none; }
.alta > summary .cerrar, .alta[open] > summary .abrir { display: none; }
.alta > summary .abrir, .alta[open] > summary .cerrar { display: inline-flex; align-items: center; gap: 8px; }
.alta[open] > summary { background: #fff; color: var(--tinta); border: 1px solid var(--linea-fuerte); }
.alta[open] > summary.btn.primario:hover { background: var(--fondo); color: var(--tinta); }
.alta-cuerpo { border: 1px solid var(--linea); border-radius: 14px; padding: 18px 18px 20px; margin-top: 12px;
               transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
@starting-style { .alta[open] .alta-cuerpo { opacity: 0; transform: translateY(-4px); } }
.alta-cuerpo > p { margin: 0 0 16px; font-size: 14px; }
.alta-campos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 14px; }
.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------- catálogo e importaciones (Sesión 06) ---------- */
.encabezado.sin-margen { margin-bottom: 0; align-items: center; }
.exp-cab .sub { color: var(--gris); font-size: 14.5px; margin: 6px 0 0; max-width: 68ch; }
.acciones-fila.centro { justify-content: center; margin-top: 18px; }
.acciones-fila.inicio { justify-content: flex-start; }
.vacio .acciones-fila .btn { margin-top: 0; }
.btn[aria-disabled="true"] { opacity: .45; cursor: default; pointer-events: none; }

.barra-filtros { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 260px) auto; gap: 10px; margin-bottom: 12px; }
.buscador { position: relative; display: block; }
.buscador .icono { position: absolute; left: 13px; top: 50%; translate: 0 -50%; color: var(--gris-2); pointer-events: none; }
.buscador input, .selector select { width: 100%; min-height: 46px; border: 1px solid var(--borde-campo); border-radius: var(--radio); background: #fff; font-size: 16px; padding: 10px 13px; }
.buscador input { padding-left: 40px; }
.buscador input:focus, .selector select:focus { outline: 3px solid rgba(139,195,74,.4); outline-offset: 0; border-color: var(--verde-osc); }
.buscador input::placeholder { color: #7D867F; }

/* Buscar material (S07). Los resultados son los del prototipo aprobado (o-captura). */
.m-barra .btn { min-height: 44px; flex: none; }
.busca-material { display: flex; gap: 8px; margin-bottom: 14px; position: sticky; top: 0; z-index: 2; background: var(--fondo); padding: 2px 0 8px; }
.busca-material .buscador { flex: 1; }
.busca-material .buscador input { min-height: 50px; font-size: 17px; }
.js .busca-material .sin-js { display: none; }
.zona-resultados { transition: opacity .18s var(--ease-out); }
.zona-resultados[aria-busy="true"] { opacity: .55; }
.zona-resultados.llego > * { animation: resultados-entran .22s var(--ease-out); }
@keyframes resultados-entran { from { opacity: 0; translate: 0 4px; } }
.conteo { font-size: 13px; color: var(--gris); margin: 0 2px 8px; font-variant-numeric: tabular-nums; }
.lista-resultados { list-style: none; margin: 0 0 12px; padding: 0; background: #fff; border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; }
.resultado { padding: 12px 14px; border-bottom: 1px solid var(--linea); }
.resultado:last-child { border-bottom: 0; }
.resultado b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.resultado small { display: block; color: var(--gris-2); font-size: 13px; margin-top: 3px; overflow-wrap: anywhere; }
.resultado .cod { font-variant-numeric: tabular-nums; color: var(--gris); font-weight: 600; }
.resultado .chip { margin-top: 7px; white-space: normal; }
.aproximados { margin-top: 18px; }
.aproximados h2 { font-size: 15px; font-weight: 650; margin: 0 2px 2px; }
.aproximados > .sutil { margin: 0 2px 8px; }
.aproximados .lista-resultados { border-style: dashed; border-color: var(--ambar-borde); }
.ayuda-busqueda { padding: 6px 2px; color: var(--gris); }
.ayuda-busqueda p { margin: 0 0 10px; }
.ayuda-busqueda .sutil { max-width: 46ch; line-height: 1.45; }
.ejemplos { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.ejemplos a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; background: #fff;
  border: 1px solid var(--linea-fuerte); color: var(--tinta); text-decoration: none; font-size: 14.5px; transition: transform .12s var(--ease-out); }
.ejemplos a:active { transform: scale(.97); }
.tabla-busquedas td { vertical-align: middle; }
/* El botón para limpiar la búsqueda, con la tinta de la página y no el azul del navegador. */
.buscador input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 20px; height: 20px;
  cursor: pointer; background: var(--gris-2); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 18px no-repeat; }
.tabla .coincide { display: block; margin-top: 3px; font-size: 12.5px; color: var(--gris-2); }
.tabla .coincide .chip { margin-right: 4px; }

/* ---------- Captura (S08): prototipo o-datos y o-captura, con sus hojas ---------- */
.js .sin-js { display: none; }
html:not(.js) .solo-js { display: none; }
/* Pie fijo con el resumen y la acción principal (m-pie del prototipo). */
.m-pie { position: sticky; bottom: 0; z-index: 5; background: #fff; border-top: 1px solid var(--linea);
         padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
.m-pie .resumen, .m-pie .pie-nota { margin: 0 0 8px; font-size: 13px; color: var(--gris); font-variant-numeric: tabular-nums; }
body:has(.m-pie) .avisos { bottom: calc(96px + env(safe-area-inset-bottom)); }
.m-cuenta:has(.aviso-salir) { flex-wrap: wrap; }
.aviso-salir { flex: 1 1 100%; margin: 0; }
.aviso-salir p { margin: 0 0 10px; }

/* Guardando, Guardado y Sin conexión: cambia el color, no se mueve. */
.guardado { transition: background-color 200ms ease, color 200ms ease; min-width: 0; }
.guardado .icono { width: 14px; height: 14px; }
.guardado span { overflow: hidden; text-overflow: ellipsis; }
.guardado.ok { color: var(--verde-osc); background: var(--tinte); }
.guardado.offline { color: var(--ambar); background: var(--ambar-tinte); }
.guardado.error { color: var(--rojo); background: var(--rojo-tinte); }
.m-barra .guardado { flex: 0 1 auto; max-width: 56%; }

/* Datos del servicio: opciones grandes que funcionan con o sin JavaScript. */
.opciones-campo { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.opciones-campo > legend { padding: 0; margin-bottom: 8px; }
.campo .etiqueta em { font-style: normal; font-weight: 400; color: var(--gris-2); }
.campo textarea[aria-invalid=true] { border-color: var(--rojo); }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opciones label { position: relative; }
.opciones input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.opciones span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--borde-campo); border-radius: 999px; background: #fff;
                 font-size: 14.5px; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 160ms var(--ease-out); }
.opciones input:checked + span { background: var(--verde-osc); border-color: var(--verde-osc); color: #fff; }
.opciones input:focus-visible + span { outline: 2px solid var(--verde-osc); outline-offset: 2px; }
.opciones label:active span { transform: scale(.97); }

/* Renglones de la captura. */
.captura .renglones { margin-top: 6px; }
.grupo .seccion-tit { margin: 18px 2px 8px; }
.grupo:first-child .seccion-tit { margin-top: 12px; }
.lista-renglones { list-style: none; margin: 0; padding: 0; }
.captura .renglon { grid-template-columns: 1fr auto; grid-template-areas: "info info" "cant quitar"; gap: 10px 12px; align-items: center; padding: 12px;
                    scroll-margin: 90px 0 110px; }
.captura .renglon .info { grid-area: info; display: block; color: inherit; text-decoration: none; border-radius: 8px; margin: -4px; padding: 4px; }
.captura .renglon .info:focus-visible { outline: 2px solid var(--verde-osc); outline-offset: 0; }
.captura .renglon .nom { display: block; }
.captura .renglon .cod { margin-top: 4px; font-size: 12.5px; color: var(--gris-2); gap: 4px 6px; }
.renglon .codigo { font-weight: 600; color: var(--gris); font-variant-numeric: tabular-nums; }
.captura .renglon :is(.codigo, .mm, .nota):empty { display: none; }
.captura .renglon .codigo:not(:empty) + .mm:not(:empty)::before { content: "· "; }
.captura .renglon .nota { display: block; margin-top: 4px; }
.captura .renglon [data-chip] { display: none; }
.renglon.pendiente [data-chip=pendiente], .renglon.inactivo [data-chip=inactivo], .renglon.repetido [data-chip=repetido] { display: inline-flex; }
.chip.repetido { background: var(--ambar-tinte); color: var(--ambar); }
.renglon.pendiente { border-color: var(--ambar-borde); background: #FFFCF4; }
.renglon.inactivo { border-color: var(--rojo-borde); background: #FFFBFA; }
.cantidad { grid-area: cant; display: inline-flex; align-items: center; margin: 0; border: 1px solid var(--borde-campo); border-radius: 10px; overflow: hidden; background: #fff;
            justify-self: start; transition: border-color 120ms ease, box-shadow 120ms ease; }
.cantidad:focus-within { border-color: var(--verde-osc); box-shadow: 0 0 0 3px rgba(139,195,74,.35); }
.cantidad .paso { border: 0; background: #F3F5F2; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--tinta);
                  transition: background-color 100ms ease; }
.cantidad .paso:active { background: #E0E6DE; }
.cantidad input { width: 64px; border: 0; text-align: center; font-weight: 650; font-size: 16px; height: 44px; padding: 0 4px; background: #fff; font-variant-numeric: tabular-nums; }
.cantidad input:focus { outline: none; background: var(--tinte); }
.cantidad .u { font-size: 11.5px; color: var(--gris-2); padding: 0 8px 0 0; }
.cantidad .guardar-cant { order: 9; border: 0; border-left: 1px solid var(--linea); background: #fff; height: 44px; padding: 0 12px; font-weight: 600; color: var(--verde-osc); }
/* Sin JavaScript la cantidad lleva su botón «Guardar»: «Quitar» baja a su propio renglón para no encimarse. */
html:not(.js) .captura .renglon { grid-template-columns: 1fr; grid-template-areas: "info" "cant" "quitar"; }
html:not(.js) .captura .quitar { justify-self: start; margin-left: -8px; }
.captura .quitar { grid-area: quitar; justify-self: end; margin: 0; }
.renglon .borrar { border: 0; background: none; color: var(--gris); min-height: 44px; padding: 0 8px; font-size: 13.5px; display: inline-flex; gap: 5px; align-items: center;
                   border-radius: 8px; transition: background-color 120ms ease, color 120ms ease; }
.renglon .borrar .icono { width: 16px; height: 16px; }
.error-renglon { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--rojo); }
/* Un renglón nuevo aparece: opacidad y 4 px. Mover y quitar no se animan: pasan decenas de veces por lista. */
.renglon.entra { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
@starting-style { .renglon.entra { opacity: 0; transform: translateY(4px); } }

/* Secciones: dónde se agrega lo nuevo. */
.secciones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 14px 2px 2px; font-size: 13px; color: var(--gris); }
.secciones:empty { display: none; }
.secciones .etq { margin-right: 2px; }
.chip-seccion { border: 1px solid var(--linea-fuerte); background: #fff; border-radius: 999px; min-height: 44px; padding: 0 14px; font-size: 14px; color: var(--tinta);
                transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 160ms var(--ease-out); }
.chip-seccion:active { transform: scale(.97); }
.chip-seccion[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.crear-seccion { display: flex; gap: 6px; flex: 1 1 100%; margin: 0; }
.crear-seccion input { flex: 1; min-width: 0; min-height: 44px; border: 1px solid var(--borde-campo); border-radius: var(--radio); padding: 0 12px; font-size: 16px; background: #fff; }
.crear-seccion input:focus { outline: 3px solid rgba(139,195,74,.4); outline-offset: 0; border-color: var(--verde-osc); }

/* Resultados para agregar: el renglón entero es el botón. */
.captura .lista-resultados .resultado { padding: 0; }
.resultado form { margin: 0; }
.resultado .elegir { width: 100%; text-align: left; border: 0; background: #fff; padding: 12px 14px; display: block; color: inherit; transition: background-color 100ms ease; }
.resultado .elegir:active { background: #F1F5EF; }
.resultado .elegir:focus-visible { outline: 2px solid var(--verde-osc); outline-offset: -2px; }
.resultado .elegir b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.resultado .elegir small { display: block; margin-top: 3px; }
.resultado .ya { color: var(--verde-osc); font-weight: 600; }
.agregar-cant { display: flex; gap: 6px; align-items: center; padding: 0 14px 12px; font-size: 13px; color: var(--gris); }
.agregar-cant input { width: 72px; min-height: 40px; border: 1px solid var(--borde-campo); border-radius: 8px; padding: 0 8px; font-size: 16px; }
.sin-resultados { padding: 12px 2px 2px; }
.sin-resultados b { display: block; font-size: 15px; }
.sin-resultados p { margin: 4px 0 0; }
.no-encontrado { background: #fff; border: 1px solid var(--linea); border-radius: 12px; margin: 10px 0 14px; }
.no-encontrado > summary { list-style: none; cursor: pointer; min-height: 48px; padding: 0 14px; display: flex; align-items: center; font-size: 14.5px; font-weight: 600;
                           color: var(--verde-osc); border-radius: 12px; }
.no-encontrado > summary::-webkit-details-marker { display: none; }
.no-encontrado > summary:focus-visible { outline: 2px solid var(--verde-osc); outline-offset: -2px; }
.no-encontrado form { padding: 0 14px 14px; margin: 0; }
.no-encontrado form > .sutil { margin: 0 0 12px; }
.no-encontrado .error { margin: 0 0 10px; color: var(--rojo); font-size: 13.5px; }

/* Quitados: se recuperan cuando sea, no solo en los 3.5 s del aviso. */
.quitados { margin-top: 18px; background: #fff; border: 1px solid var(--linea); border-radius: 12px; }
.quitados > summary { list-style: none; cursor: pointer; min-height: 48px; padding: 0 14px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600;
                      color: var(--gris); border-radius: 12px; }
.quitados > summary::-webkit-details-marker { display: none; }
.quitados > summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
                             transform: rotate(45deg); transition: transform 160ms var(--ease-out); }
.quitados[open] > summary::after { transform: rotate(-135deg); }
.quitados > summary .cuenta { font-size: 12px; background: var(--neutro); border-radius: 999px; padding: 1px 8px; }
.quitados ul { list-style: none; margin: 0; padding: 0 6px 6px 14px; }
.quitados li { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--linea); padding: 4px 0; font-size: 14px; }
.quitados .q-nom { min-width: 0; }
.quitados .q-nom small { color: var(--gris-2); margin-left: 4px; font-variant-numeric: tabular-nums; }
.quitados form { margin: 0; }

/* Avisos de la captura: conflictos, errores y sesión. */
.avisos-captura { display: grid; gap: 8px; margin-bottom: 12px; }
.avisos-captura:empty { display: none; }
.avisos-captura .aviso { margin: 0; }
.aviso-cuerpo { min-width: 0; flex: 1; }
.aviso-cuerpo p { margin: 0; }
.aviso-cuerpo b + p { margin-top: 2px; }
.aviso-cuerpo .acciones-fila { margin-top: 10px; justify-content: flex-start; }
.conflictos { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.conflictos li { background: rgba(255,255,255,.75); border-radius: 8px; padding: 10px; }
.conflictos .acciones-fila { margin-top: 8px; }

/* Hoja inferior (prototipo capa-hoja): entra con la curva de cajón y sale más rápido. */
dialog.hoja { border: 0; padding: 0; margin: auto 0 0; width: 100%; max-width: 100%; max-height: 92dvh; border-radius: 22px 22px 0 0; background: #fff; color: var(--tinta);
              overflow: auto; overscroll-behavior: contain; transform: translateY(100%);
              transition: transform 200ms var(--ease-out), overlay 200ms allow-discrete, display 200ms allow-discrete; }
dialog.hoja[open] { transform: none; transition-duration: 300ms; transition-timing-function: var(--ease-drawer); }
@starting-style { dialog.hoja[open] { transform: translateY(100%); } }
dialog.hoja::backdrop { background: rgb(15 20 16 / 0); transition: background-color 200ms ease, overlay 200ms allow-discrete, display 200ms allow-discrete; }
dialog.hoja[open]::backdrop { background: rgb(15 20 16 / .45); }
@starting-style { dialog.hoja[open]::backdrop { background: rgb(15 20 16 / 0); } }
.hoja-cuerpo { padding: 10px 18px calc(20px + env(safe-area-inset-bottom)); margin: 0; }
.hoja .agarre { width: 40px; height: 5px; background: #D5DAD3; border-radius: 3px; margin: 0 auto 14px; }
.hoja h2 { font-size: 18px; margin: 0 0 4px; font-weight: 650; line-height: 1.3; }
.hoja .sub { color: var(--gris); font-size: 13.5px; margin: 0 0 12px; }
.hoja .aviso { margin: 8px 0; }
.valor-cant { display: block; font-size: 38px; font-weight: 650; text-align: center; padding: 6px 0 0; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.valor-cant small { font-size: 15px; color: var(--gris); font-weight: 500; margin-left: 6px; }
.en-seccion { text-align: center; margin: 2px 0 0; font-size: 13px; color: var(--gris); }
/* El teclado no se anima: se toca decenas de veces por lista. Solo cambia el fondo al presionar. */
.teclado-num { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.teclado-num button { border: 0; background: #EFF2EE; border-radius: 12px; height: 52px; font-size: 21px; font-weight: 500; display: flex; align-items: center;
                      justify-content: center; color: var(--tinta); font-variant-numeric: tabular-nums; }
.teclado-num button:active { background: #DDE3DB; }
.teclado-num button:disabled { opacity: .35; cursor: default; }
.teclado-num .icono { width: 24px; height: 24px; }
.acciones-hoja { display: flex; gap: 10px; margin-top: 16px; }
.acciones-hoja .btn { flex: 1; }
.acciones-hoja .btn.peligro { flex: 0 0 auto; }
.hoja .mover { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 12px; }
.hoja .mover .etiqueta, .mover-sin-js .etiqueta { flex: 1 1 100%; font-size: 14px; font-weight: 600; display: block; margin-bottom: 6px; }
.hoja .error { color: var(--rojo); font-size: 13.5px; margin: 0 0 8px; }
.form-renglon, .mover-sin-js { background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 14px; margin: 0 0 12px; }
.form-renglon .campo { margin-bottom: 10px; }
.form-renglon > .sutil { margin: 10px 0 0; }
@media (min-width: 720px) {
  dialog.hoja { margin: auto; max-width: 460px; border-radius: 18px; opacity: 0; transform: translateY(8px) scale(.98);
                transition: transform 160ms var(--ease-out), opacity 160ms var(--ease-out), overlay 160ms allow-discrete, display 160ms allow-discrete; }
  dialog.hoja[open] { opacity: 1; transform: none; transition-duration: 200ms; transition-timing-function: var(--ease-out); }
  @starting-style { dialog.hoja[open] { opacity: 0; transform: translateY(8px) scale(.98); } }
  .hoja .agarre { display: none; }
  .hoja-cuerpo { padding: 22px 22px 20px; }
}
@media (hover: hover) and (pointer: fine) {
  .renglon .borrar:hover { color: var(--rojo); background: var(--rojo-tinte); }
  .resultado .elegir:hover { background: #F8FAF7; }
  .chip-seccion:hover:not([aria-pressed="true"]) { border-color: var(--gris-2); }
}

.tabla td .sutil { margin-top: 2px; }
.tabla-catalogo td.cod, .tabla-filas td.cod { width: 1%; }
.tabla td.cod s, .cambios s { color: var(--gris-2); text-decoration-thickness: 1px; }
.tabla td.cod b { color: var(--tinta); font-weight: 600; }
.tabla td.motivo { color: var(--gris); font-size: 13.5px; max-width: 62ch; }
.cambios { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; color: var(--tinta); }
.cambios .campo-nombre { font-weight: 600; color: var(--gris); margin-right: 4px; }
.paginacion { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; }
.paginacion .donde { font-size: 14px; color: var(--gris); }

.chip.lote-previsualizado, .chip.fila-actualizada { background: var(--azul-tinte); color: var(--azul); }
.chip.lote-aplicado { background: var(--verde-osc); color: #fff; }
.chip.lote-revertido, .chip.lote-descartado, .chip.fila-sin_cambio, .chip.fila-descartada { background: var(--neutro); color: var(--gris); }
.chip.fila-nueva { background: var(--tinte); color: var(--verde-osc); }
.chip.fila-cuarentena { background: var(--ambar-tinte); color: var(--ambar); }

/* La conciliación se lee como una cuenta: lo que trae el archivo es igual a lo que entra más lo que no. */
.cuadre { border: 1px solid var(--linea); border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; }
.cuenta-filas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0; font-size: 14px; color: var(--gris); }
.cuenta-filas .termino b { font-size: 22px; font-weight: 650; font-stretch: 108%; color: var(--tinta); letter-spacing: -.01em; margin-right: 5px; }
.cuenta-filas .termino.entra b { color: var(--verde-osc); }
.cuenta-filas .termino.duda b { color: var(--ambar); }
.cuenta-filas .signo { font-size: 18px; color: var(--gris-2); }
.cuadre-nota { margin: 10px 0 0; font-size: 13.5px; color: var(--gris); max-width: 92ch; }
.cuadre-nota .ok, .cuadre-nota .falta { font-weight: 600; display: inline-flex; gap: 5px; align-items: center; margin-right: 8px; }
.cuadre-nota .ok { color: var(--verde-osc); }
.cuadre-nota .falta { color: var(--ambar); }
.cuadre-nota .icono { width: 15px; height: 15px; }
.barra-accion { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin: 4px 0 20px; }
.barra-accion form, .barra-accion .sutil { margin: 0; }
.lista-simple { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; }
/* Aviso plegable: el resumen siempre se ve; la lista larga, solo si se pide. */
.aviso.plegable { display: block; }
.aviso.plegable > summary { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; list-style: none; }
.aviso.plegable > summary::-webkit-details-marker { display: none; }
.aviso.plegable .ver, .aviso.plegable .ocultar { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.aviso.plegable .ocultar, .aviso.plegable[open] .ver { display: none; }
.aviso.plegable[open] .ocultar { display: inline; }
.aviso.plegable > .lista-simple { margin: 8px 0 0 28px; }
.aviso .codigo { color: inherit; opacity: .8; font-weight: 600; margin-right: 4px; }

.subir { border: 1px dashed var(--linea-fuerte); border-radius: 14px; padding: 18px; margin-bottom: 28px; max-width: 760px; background: #FBFCFA; }
.subir .campo { margin-bottom: 14px; }
.subir input[type=file] { padding: 8px; cursor: pointer; }
.subir input[type=file]::file-selector-button { font: inherit; font-weight: 600; font-size: 14px; border: 1px solid var(--linea-fuerte); background: #fff; color: var(--tinta);
  border-radius: 8px; padding: 6px 12px; margin-right: 12px; cursor: pointer; transition: border-color 160ms ease; }

.ficha-form { max-width: 760px; }
.ficha-form.angosto { max-width: 680px; }
.fila-campos.tres { grid-template-columns: minmax(0, 1.1fr) 1fr 1fr; }
.campo textarea { resize: vertical; min-height: 104px; line-height: 1.5; }
.ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin: 0 0 16px; max-width: 760px; }
.ficha .ancho { grid-column: 1 / -1; }
.ficha dt { font-size: 12.5px; color: var(--gris); font-weight: 600; margin-bottom: 3px; }
.ficha dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lado { display: grid; gap: 14px; position: sticky; top: 16px; }
.lado-bloque { border: 1px solid var(--linea); border-radius: 14px; padding: 16px 18px; }
.lado-bloque h2 { font-size: 15.5px; font-weight: 650; margin: 0 0 8px; }
.lado-bloque .precio { font-size: 26px; font-weight: 650; letter-spacing: -.02em; margin: 0; }
.lado-bloque .precio small { font-size: 13px; font-weight: 500; color: var(--gris); letter-spacing: 0; margin-left: 4px; }
.lado-bloque p.falta { color: var(--ambar); font-weight: 650; font-size: 18px; margin: 0; }
.lado-bloque .sutil { margin: 6px 0 12px; display: block; }
.lado-bloque form { margin-top: 12px; }
.lado-bloque .campo { margin-bottom: 10px; }
.parecidos h2 { font-size: 15px; font-weight: 650; margin: 0 0 4px; }
.parecidos ul { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 6px; }
.parecidos a { color: inherit; }
@media (hover: hover) and (pointer: fine) {
  .subir input[type=file]::file-selector-button:hover { border-color: var(--gris-2); }
}
@media (max-width: 900px) {
  .lado { position: static; }
  .barra-filtros { grid-template-columns: 1fr auto; }
  .barra-filtros .buscador { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .fila-campos.tres, .ficha { grid-template-columns: 1fr; }
  .cuenta-filas .termino b { font-size: 19px; }
  .paginacion { justify-content: space-between; }
}

/* ---------- aviso con deshacer (toast) ---------- */
.avisos { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: calc(100% - 28px); max-width: 480px;
          display: grid; gap: 8px; z-index: 60; pointer-events: none; }
.toast { background: var(--tinta); color: #fff; border-radius: 12px; padding: 10px 10px 10px 14px; display: flex; justify-content: space-between; align-items: center;
         gap: 12px; font-size: 14px; box-shadow: 0 12px 28px -8px rgba(0,0,0,.35); pointer-events: auto;
         transition: transform 280ms var(--ease-out), opacity 280ms var(--ease-out); }
@starting-style { .toast { opacity: 0; transform: translateY(12px); } }
.toast.saliendo { opacity: 0; transform: translateY(8px); transition-duration: 160ms; pointer-events: none; }
.toast[hidden] { display: none; }
.toast .texto { min-width: 0; }
.toast form { margin: 0; flex: none; }
.toast button { border: 0; background: rgba(255,255,255,.1); color: #fff; font-weight: 700; min-height: 40px; padding: 0 12px; border-radius: 8px;
                display: inline-flex; gap: 8px; align-items: center; transition: transform 160ms var(--ease-out), background-color 120ms ease; }
.toast button .icono { width: 16px; height: 16px; color: var(--verde); }  /* lima solo como acento (DEC-017) */
.toast button:active { transform: scale(.96); }
.toast kbd { font: inherit; font-size: 11.5px; color: #AFC0A8; font-weight: 500; }
.toast.error { background: #6E1A14; }
/* Mientras hay un aviso, la página deja espacio abajo para que no tape la última fila. */
body:has(.toast:not([hidden])) :is(.principal, .m-cuerpo) { padding-bottom: 120px; }
.js .solo-sin-js { display: none; }
fieldset.sin-borde { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.seccion-panel h2 { margin-top: 22px; }
.lateral .usuario .quien { display: grid; gap: 2px; margin-bottom: 6px; padding: 0 10px; justify-items: start; }
.lateral .usuario .entorno, .quien-campo .entorno { font-size: 11.5px; font-weight: 600; color: var(--ambar); background: var(--ambar-tinte); border-radius: 999px; padding: 1px 8px; margin-top: 4px; }
.quien-campo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.quien-campo b { color: var(--tinta); font-weight: 600; }
.quien-campo .entorno { margin-top: 0; }
@media (max-width: 640px) { .toast kbd { display: none; } }

/* ---------- plantillas (S09) ---------- */
.chip.compartida { background: var(--tinte); color: var(--verde-osc); }
.chip.propuesta { background: var(--azul-tinte); color: var(--azul); }
/* Barra inferior del operativo (prototipo m-nav): al fondo del pie fijo, de orilla a orilla. */
.m-nav { display: grid; grid-template-columns: repeat(3, 1fr); }
.m-pie .m-nav { margin: 12px -16px calc(-12px - env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--linea); }
.m-pie.solo-nav { padding-top: 0; }
.m-pie.solo-nav .m-nav { margin-top: 0; border-top: 0; }
.m-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 54px; font-size: 12px; color: var(--gris-2);
           text-decoration: none; transition: color 160ms ease; }
.m-nav a .icono { width: 22px; height: 22px; transition: transform 160ms var(--ease-out); }
.m-nav a:active .icono { transform: scale(.9); }
.m-nav a[aria-current] { color: var(--verde-osc); font-weight: 600; }
body:has(.m-nav) .avisos { bottom: calc(136px + env(safe-area-inset-bottom)); }
body:has(.m-pie .pie-nota):has(.m-nav) .avisos { bottom: calc(164px + env(safe-area-inset-bottom)); }
body:has(.m-pie.solo-nav) .avisos { bottom: calc(66px + env(safe-area-inset-bottom)); }
/* Formas de iniciar una lista (prototipo o-nueva). */
.opcion-grande { display: flex; gap: 14px; align-items: flex-start; width: 100%; text-align: left; border: 1px solid var(--linea); background: #fff; border-radius: 14px;
                 padding: 15px; margin-bottom: 10px; color: inherit; text-decoration: none; transition: transform 160ms var(--ease-out), border-color 160ms ease; }
.opcion-grande:active { transform: scale(.985); }
.opcion-grande .ic { width: 42px; height: 42px; border-radius: 11px; background: var(--tinte); color: var(--verde-osc); display: flex; align-items: center; justify-content: center; flex: none; }
.opcion-grande .ic .icono { width: 22px; height: 22px; }
.opcion-grande b { display: block; font-size: 16px; font-weight: 650; margin-bottom: 2px; }
.opcion-grande .t2 { color: var(--gris); font-size: 14px; }
.hoja .opcion-grande + .btn { margin-top: 6px; }
@media (hover: hover) and (pointer: fine) { .opcion-grande:hover { border-color: var(--verde-osc); } }
/* Detalle de una plantilla en el teléfono. */
.lista-plantilla { list-style: none; margin: 0 0 8px; padding: 0; }
.lista-plantilla li { background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
.lista-plantilla .nom { font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.lista-plantilla .cant { font-weight: 650; font-size: 15px; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.lista-plantilla .cant small { font-size: 12px; color: var(--gris-2); font-weight: 500; margin-left: 3px; }
.lista-plantilla .cod { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.lista-plantilla .codigo { font-weight: 600; color: var(--gris); font-variant-numeric: tabular-nums; }
.lista-plantilla .nota { grid-column: 1 / -1; font-size: 13px; color: var(--gris); }
.lista-plantilla li.inactivo { border-color: var(--rojo-borde); background: #FFFBFA; }
.sub-seccion { font-size: 13px; font-weight: 650; color: var(--gris); margin: 14px 2px 6px; }
.seccion-tit .version-t { margin-left: auto; font-size: 12.5px; font-weight: 500; }
.nota-pie { margin: 6px 2px 14px; font-size: 13px; }
.uso { white-space: pre-line; }
.acciones-plantilla { display: grid; gap: 8px; margin-top: 8px; }
.acciones-plantilla form { margin: 0; }
.acciones-plantilla .seccion-tit { margin-bottom: 0; }
.acciones-plantilla .sutil { margin: 2px 2px 0; font-size: 13px; }
.versiones { margin-top: 18px; background: #fff; border: 1px solid var(--linea); border-radius: 12px; }
.versiones > summary { list-style: none; cursor: pointer; min-height: 48px; padding: 0 14px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.versiones > summary::-webkit-details-marker { display: none; }
.versiones > summary .cuenta { font-size: 12px; background: var(--neutro); border-radius: 999px; padding: 1px 8px; }
.versiones ul { list-style: none; margin: 0; padding: 0; }
.versiones li a { display: grid; gap: 2px; padding: 10px 14px; min-height: 48px; border-top: 1px solid var(--linea); color: inherit; text-decoration: none; font-size: 14px; }
.versiones li a[aria-current] { background: var(--tinte); }
.versiones li small { color: var(--gris); font-size: 12.5px; }
.enlace-pie { text-align: center; margin: 18px 0 4px; font-size: 14px; }
.enlace-pie a { color: var(--verde-osc); font-weight: 600; display: inline-flex; min-height: 44px; align-items: center; }
/* Guardar como plantilla. */
.intro { color: var(--gris); font-size: 14.5px; margin: 2px 2px 16px; }
.opciones.apiladas { display: grid; gap: 8px; }
.opciones.apiladas label { display: block; }
.opciones.apiladas span { display: block; border-radius: 12px; padding: 11px 14px; min-height: 44px; }
.opciones.apiladas span b { font-weight: 600; }
.opciones.apiladas span small { display: block; font-size: 12.5px; opacity: .8; margin-top: 2px; }
.aviso-plantilla a { color: inherit; font-weight: 600; white-space: nowrap; }
.resumen-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -6px -8px 6px 0; }
.m-pie .resumen-fila .resumen { margin: 0; }
/* Oficina: biblioteca del equipo y editor del borrador. */
.lateral a .insignia { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--azul); color: #fff; font-size: 11.5px;
                       font-weight: 650; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.uso-plantilla { color: var(--gris); margin: 10px 0 0; max-width: 72ch; white-space: pre-line; }
.editor-plantilla h2 { font-size: 17px; font-weight: 650; margin: 0 0 10px; }
.tabla-editor td { vertical-align: middle; }
.tabla-editor input { width: 100%; min-height: 40px; border: 1px solid var(--borde-campo); border-radius: 8px; padding: 6px 9px; font: inherit; font-size: 14px; background: #fff; }
.tabla-editor input:focus { outline: 3px solid rgba(139,195,74,.4); outline-offset: 0; border-color: var(--verde-osc); }
.tabla-editor .cantidad-celda { display: inline-flex; align-items: center; gap: 6px; }
.tabla-editor .cantidad-celda input { width: 6.5em; text-align: right; font-variant-numeric: tabular-nums; }
.tabla-editor .cantidad-celda .u { font-size: 12.5px; color: var(--gris); min-width: 2.6em; text-align: left; }
.tabla-editor tr.inactivo td { background: #FFFBFA; }
.vacio-tabla { color: var(--gris); padding: 14px 10px; margin: 0; }
.agregar-material { margin: 20px 0 8px; padding: 16px; border: 1px dashed var(--linea-fuerte); border-radius: 14px; }
.agregar-material h3 { margin: 0 0 10px; font-size: 15px; font-weight: 650; }
.busca-fila { display: flex; gap: 8px; }
.busca-fila .buscador { flex: 1; }
.resultados-plantilla { margin-top: 10px; display: grid; gap: 6px; }
.resultados-plantilla:empty { display: none; }
.resultado-plantilla { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; background: var(--fondo); }
.resultado-plantilla b { display: block; font-weight: 600; font-size: 14px; }
.resultado-plantilla small { color: var(--gris); font-size: 12.5px; }
.guardar-version { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linea); }
.guardar-version .campo { max-width: 520px; }
.guardar-version .acciones-fila { justify-content: flex-start; }
.btn.peligro-texto { color: var(--rojo); }
.editar-materiales { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.versiones-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.versiones-lista a { color: var(--verde-osc); font-weight: 600; text-decoration: none; }
.versiones-lista a[aria-current] { color: var(--tinta); }
.versiones-lista small { display: block; color: var(--gris); font-size: 12.5px; }
.versiones-lista p { margin: 4px 0 0; font-size: 13px; }
.devolver { margin-top: 8px; }
/* ---------- copiar una lista (S10) ---------- */
.nota-lista { margin: 10px 2px 12px; font-size: 13px; }
body:has(.pie-captura) .avisos { bottom: calc(118px + env(safe-area-inset-bottom)); }
.datos-servicio p.origen { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gris); margin-top: 8px; }
.datos-servicio p.origen .icono { width: 15px; height: 15px; }
.m-pie.pie-doble { display: grid; gap: 8px; }
body:has(.pie-doble) .avisos { bottom: calc(136px + env(safe-area-inset-bottom)); }
/* ---------- entrega, correcciones y pendientes (S11) ---------- */
.lista-compacta { background: #fff; border: 1px solid var(--linea); border-radius: 12px; margin-bottom: 12px; }
.lista-compacta > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--linea); font-size: 14px; }
.lista-compacta > div:last-child { border-bottom: 0; }
.lista-compacta > div > span:last-child { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.resumen-envio .descripcion-envio { margin: 10px 0 0; color: var(--gris); font-size: 14px; white-space: pre-line; }
.pie-captura .botones-pie { display: grid; grid-template-columns: 1fr 1.35fr; gap: 8px; }
.linea-tiempo { list-style: none; margin: 0; padding: 0; }
.linea-tiempo li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding-bottom: 16px; position: relative; font-size: 14.5px; }
.linea-tiempo li::before { content: ""; position: absolute; left: 10px; top: 24px; bottom: 2px; width: 2px; background: var(--linea); }
.linea-tiempo li:last-child { padding-bottom: 0; }
.linea-tiempo li:last-child::before { display: none; }
.linea-tiempo .punto { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #E2E7E0; color: #fff; }
.linea-tiempo .punto .icono { width: 13px; height: 13px; }
.linea-tiempo .hecho .punto { background: var(--verde-osc); }
.linea-tiempo .actual .punto { background: #fff; border: 2px solid var(--verde-osc); }
.linea-tiempo .actual .punto::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--verde-osc); }
.linea-tiempo b { font-weight: 600; }
.linea-tiempo small { display: block; color: var(--gris-2); font-size: 12.5px; }
.linea-tiempo .futuro { color: var(--gris-2); }
.linea-tiempo form { margin-top: 8px; }
.seguimiento { cursor: default; }
.seguimiento:active { transform: none; }
.enviada { display: flex; gap: 12px; align-items: flex-start; padding: 2px 0 14px; margin-bottom: 14px; border-bottom: 1px solid var(--linea); }
.enviada .circulo { width: 36px; height: 36px; border-radius: 50%; background: var(--verde-osc); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.enviada b { display: block; font-size: 16px; font-weight: 650; }
.enviada small { color: var(--gris); font-size: 13.5px; }
.historial-lista { list-style: none; margin: 0; padding: 4px 14px 10px; }
.historial-lista li { padding: 6px 0 6px 12px; border-left: 2px solid var(--linea); font-size: 13.5px; }
.historial-lista li small { display: block; color: var(--gris-2); font-size: 12px; }
.aviso.correccion p + p { margin-top: 4px; }
.aviso-enlace { text-decoration: none; }
.renglon .chip.senalado { background: var(--ambar-tinte); color: var(--ambar); display: none; }
.renglon.senalado { border-color: var(--ambar-borde); box-shadow: inset 3px 0 0 var(--ambar); }
.renglon.senalado [data-chip=senalado] { display: inline-flex; }
/* Oficina: siguiente paso, pendientes y comparación. */
.siguiente { border-radius: 12px; padding: 13px 14px 13px 16px; margin-bottom: 18px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
             background: var(--tinta); color: #fff; }
.siguiente .txt { display: flex; gap: 12px; align-items: center; font-size: 15.5px; font-weight: 600; }
.siguiente .txt .icono { color: var(--verde); width: 22px; height: 22px; }
.siguiente .txt small { display: block; color: #B9C6B4; font-weight: 400; font-size: 13px; margin-top: 1px; }
.siguiente form { margin: 0; }
.siguiente .btn.primario { background: var(--verde); color: var(--tinta); }
.siguiente .btn.claro { background: rgba(255,255,255,.12); color: #fff; }
.tabla tr.pend td { background: #FFFCF4; }
.tabla .era { display: block; font-size: 12.5px; color: var(--gris); }
.historial { margin-top: 18px; }
.historial h3 { margin: 0 0 8px; font-size: 13.5px; font-weight: 650; }
.historial ol { margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--gris); }
.historial li { padding: 5px 0 5px 12px; border-left: 2px solid var(--linea-fuerte); }
.historial li b { color: var(--tinta); font-weight: 600; }
.lateral a .insignia.ambar { background: var(--ambar); }
.casillas { display: grid; gap: 2px; border: 1px solid var(--linea); border-radius: 12px; padding: 4px 12px; }
.casilla { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: 14.5px; cursor: pointer; border-bottom: 1px solid var(--linea); }
.casilla:last-child { border-bottom: 0; }
.casilla input { width: 20px; height: 20px; accent-color: var(--verde-osc); margin: 0; flex: none; }
.opciones-resolver { display: grid; gap: 14px; }
.opcion-resolver { border: 1px solid var(--linea); border-radius: 14px; padding: 16px 18px; }
.opcion-resolver h2 { font-size: 16px; font-weight: 650; margin: 0 0 4px; }
.opcion-resolver > p { margin: 0 0 12px; color: var(--gris); font-size: 14px; }
.cambio-agregado td { background: var(--tinte); }
.cambio-quitado td { background: var(--rojo-tinte); }
.cambio-quitado td.principal-celda { text-decoration: line-through; text-decoration-color: rgb(0 0 0 / .35); }
.cambio-cantidad td { background: var(--ambar-tinte); }
.devolver > summary { cursor: pointer; color: var(--gris); font-size: 14px; min-height: 44px; display: flex; align-items: center; }

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
  .app-oficina { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; }
  .lateral { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--linea); }
  .lateral .logo { margin: 0 12px 0 4px; }
  .lateral .logo img { height: 26px; }
  .lateral .usuario { margin: 0 0 0 auto; border: 0; padding: 0; display: flex; align-items: center; gap: 10px; }
  .lateral .usuario .quien { display: none; }
  .principal { padding: 20px 16px 48px; }
  .exp-cuerpo { grid-template-columns: 1fr; }
  .totales { position: static; }
  .alta-campos { grid-template-columns: 1fr 1fr; }
  .tabla-desplazable { overflow-x: auto; }
}
@media (max-width: 640px) {
  /* Tablas apilables: cada fila se vuelve un bloque y cada celda muestra su etiqueta. */
  .apilable thead { display: none; }
  .apilable, .apilable tbody, .apilable tr, .apilable td { display: block; width: auto !important; }
  .apilable tr { padding: 12px 0; border-bottom: 1px solid var(--linea); }
  .apilable td { border: 0; padding: 3px 0; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .apilable td[data-etiqueta]::before { content: attr(data-etiqueta); color: var(--gris); font-size: 12.5px; font-weight: 600; flex: none; }
  .apilable td.principal-celda { display: block; font-size: 15px; padding-bottom: 6px; }
  .apilable td .roles-form, .apilable td .acciones-fila { justify-content: flex-end; }
  /* En el teléfono, el enlace principal de cada fila (que ya abarca toda la fila) mide lo que un dedo. */
  .apilable td.principal-celda a.fila { display: inline-flex; align-items: center; min-height: 44px; }
  .lateral .logo { display: flex; align-items: center; min-height: 44px; }
  .migas a { min-height: 44px; }
  .tabla-usuarios td[data-etiqueta="Roles"] { display: block; }
  .tabla-usuarios td[data-etiqueta="Roles"]::before { display: block; margin-bottom: 6px; }
  .tabla-usuarios td[data-etiqueta="Roles"] .roles-form { justify-content: flex-start; }
  .lateral { flex-wrap: nowrap; gap: 2px; }
  .lateral .usuario .etq { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lateral .usuario a, .lateral .usuario form .btn { min-height: 44px; min-width: 44px; justify-content: center; padding: 0 10px; }
  .lateral a { min-height: 44px; }
  .roles-form label { min-height: 44px; }
  /* Catálogo y reporte: cada fila es una tarjeta compacta, con el nombre arriba y sus datos en una línea. */
  .tabla-catalogo tr, .tabla-filas tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 0; }
  .tabla-catalogo td, .tabla-filas td { display: inline-flex; padding: 0; gap: 5px; font-size: 13px; color: var(--gris); }
  .tabla-catalogo td.principal-celda, .tabla-filas td.principal-celda { display: block; flex-basis: 100%; order: -1; padding: 0; font-size: 15px; color: var(--tinta); }
  .tabla-catalogo td.cod::before, .tabla-catalogo td[data-etiqueta="Unidad"]::before, .tabla-catalogo td[data-etiqueta="Categoría"]::before,
  .tabla-filas td[data-etiqueta="Código"]::before, .tabla-filas td[data-etiqueta="Resultado"]::before, .tabla-filas td.motivo::before { display: none; }
  .tabla-catalogo td[data-etiqueta="Categoría"] .sutil { display: inline; margin: 0; }
  .tabla-catalogo td[data-etiqueta="Categoría"] .sutil::before { content: " · "; }
  .tabla-catalogo td[data-etiqueta="Precio de venta"] { flex-basis: 100%; justify-content: space-between; color: var(--tinta); font-size: 14px; }
  .tabla-filas td.cod::before { font-weight: 500; }
  .tabla-filas td.motivo { display: block; flex-basis: 100%; max-width: none; }
  .btn.chico { min-height: 44px; }
}
@media (max-width: 420px) {
  .fila-campos, .alta-campos { grid-template-columns: 1fr; }
  .panel { padding: 22px 18px 20px; }
}
@media (max-width: 480px) {
  /* Con tres secciones no caben las etiquetas de la barra: quedan los íconos; el título dice dónde estás. */
  .lateral > a .etq { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lateral > a { padding: 0 11px; min-width: 44px; justify-content: center; }
  .lateral .logo { margin-right: 2px; }
  .lateral .logo img { height: 22px; }
}

/* --- Armar la cotización (S13): servicios, conceptos, presentación y lista de precios --- */
.js [data-sin-js] { display: none; }
.seccion-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 20px 0 8px; }
.seccion-cab .seccion-tit { margin: 0; }
.vacio-seccion { margin: 4px 0 8px; }
.origen-concepto { display: block; margin-top: 4px; font-size: 12.5px; color: var(--gris-2); }
.chip.admin { background: var(--azul-tinte); color: var(--azul); margin: 6px 6px 0 0; }
.chip.incluido { background: var(--tinte); color: var(--verde-osc); margin: 6px 6px 0 0; }
.totales .fila.parcial { padding: 3px 0; font-size: 13px; }
.presentacion { margin-top: 8px; }
.presentacion .opciones { margin-bottom: 12px; }
#servicios, #materiales, #presentacion { scroll-margin-top: 16px; }
.form-presentacion { max-width: 560px; }
.presentacion .lineas-cliente { max-width: 560px; }
.presentacion .nota { font-size: 12.5px; color: var(--gris-2); margin: 10px 0 0; }
.form-presentacion:has(input[value="desglosada"]:checked) .global-campos { display: none; }
.form-presentacion .campo { margin-bottom: 10px; }
.lineas-cliente { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--linea); }
.lineas-cliente li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linea); font-size: 13.5px; }
.lineas-cliente li small { display: block; color: var(--gris-2); font-size: 12px; margin-top: 2px; }
.lineas-cliente b { font-weight: 600; white-space: nowrap; }
.lista-servicios { display: grid; gap: 6px; margin: 12px 0 14px; max-width: 760px; }
.resultado-servicio { display: block; padding: 11px 14px; border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; color: var(--tinta); text-decoration: none; transition: border-color 160ms ease, transform 160ms var(--ease-out); }
.resultado-servicio b { display: block; font-weight: 600; }
.resultado-servicio small { color: var(--gris); font-size: 12.5px; }
.resultado-servicio:active { transform: scale(.99); }
.otro-servicio { margin: 0 0 6px -10px; }
.serv-elegido { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px 14px; margin-bottom: 14px; }
.serv-elegido b { display: block; font-weight: 650; }
.serv-elegido small { color: var(--gris); }
.rangos { border-collapse: collapse; margin: -4px 0 16px; font-size: 13.5px; min-width: 280px; }
.rangos th, .rangos td { padding: 6px 12px 6px 0; text-align: left; border-bottom: 1px solid var(--linea); }
.rangos .r { text-align: right; padding-right: 0; }
.rangos th { font-size: 12px; color: var(--gris); font-weight: 600; }
.rangos tr.actual td { color: var(--verde-osc); font-weight: 650; }
.calculo { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px 14px; margin: 4px 0 16px; }
.calculo div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.calculo div b { font-weight: 650; }
.calculo small { display: block; color: var(--gris-2); font-size: 12.5px; margin-top: 6px; }
.calculo p { margin: 0; }
.error-calculo { color: var(--rojo); display: flex; gap: 6px; align-items: center; }
.recientes { margin: 0 0 14px; max-width: 680px; }
.recientes .etiqueta { display: block; font-size: 13px; font-weight: 600; color: var(--gris); margin-bottom: 6px; }
.opciones-enlace { display: flex; flex-wrap: wrap; gap: 6px; }
.opciones-enlace a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px dashed var(--linea-fuerte); color: var(--tinta); text-decoration: none; font-size: 13.5px; }
.opciones-enlace a:active { transform: scale(.97); }
.quitar-concepto { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linea); max-width: 680px; }
.form-servicio:has(input[name="tipo_precio"][value="fijo"]:checked) .precio-rangos,
.form-servicio:has(input[name="tipo_precio"][value="rangos"]:checked) .precio-fijo { display: none; }
.editor-rangos { max-width: 520px; margin-bottom: 16px; }
.editor-rangos th { font-size: 12px; }
.editor-rangos input { width: 100%; min-height: 40px; border: 1px solid var(--borde-campo); border-radius: 8px; padding: 6px 9px; font-size: 15px; }
.editor-rangos td { padding: 4px 8px 4px 0; }
.rangos-compactos { list-style: none; margin: 0; padding: 0; font-size: 12.5px; color: var(--gris); }
.barra-lista { margin: 0 0 14px; }
.quitados-lista { margin-top: 18px; }
.quitados-lista summary { cursor: pointer; display: inline-flex; gap: 6px; align-items: center; min-height: 44px; color: var(--gris); }
.quitados-lista ul { list-style: none; padding: 0; margin: 4px 0 0; }
.quitados-lista li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--linea); }
.crear-lista { margin: 18px auto 0; text-align: left; }
@media (hover: hover) and (pointer: fine) {
  .resultado-servicio:hover { border-color: var(--verde-osc); }
  .opciones-enlace a:hover { border-color: var(--verde-osc); }
}

/* --- Revisar y emitir, cancelar (S14) --- */
.resumen-emision { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; max-width: 900px; margin: 0 0 18px; }
.resumen-emision > div { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px 14px; }
.resumen-emision span { display: block; font-size: 12.5px; color: var(--gris); }
.resumen-emision b { display: block; font-weight: 650; margin-top: 2px; }
.resumen-emision small { color: var(--gris-2); font-size: 12px; }
.resumen-emision .grande b { font-size: 24px; color: var(--verde-osc); letter-spacing: -.02em; }
.sub-cajon { font-size: 15px; font-weight: 650; margin: 22px 0 10px; }
.texto-peligro { color: var(--rojo); }
.chip.emision-pendiente, .chip.emision-generando { background: var(--violeta-tinte); color: var(--violeta); }
.chip.emision-completa { background: var(--tinte); color: var(--verde-osc); }
.chip.emision-fallida { background: var(--rojo-tinte); color: var(--rojo); }
.estado-emision { margin: 0 0 4px; font-size: 13.5px; color: var(--gris); }
.enlace-cancelar { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; color: var(--rojo); font-size: 14px; }
.tarjeta.cancelada { border-left: 4px solid var(--rojo); padding: 14px 16px; }
.tarjeta.cancelada p { margin: 4px 0; }
.tarjeta.cancelada small { color: var(--gris); }
.form-cancelar { display: grid; gap: 10px; }

/* --- Documentos de la emisión (S15) --- */
.boton-enlace { background: none; border: 0; padding: 0; margin-top: 4px; min-height: 32px; font: inherit; font-weight: 600; color: var(--verde-osc);
                text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.boton-enlace:focus-visible { outline: 2px solid var(--verde-osc); outline-offset: 2px; border-radius: 4px; }
.documentos-emision { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 6px; }
.documentos-emision li { display: flex; align-items: stretch; gap: 6px; }
.documentos-emision a { display: inline-flex; align-items: center; min-height: 44px; border: 1px solid var(--linea); border-radius: 10px;
                        color: var(--tinta); text-decoration: none; background: #fff; transition: border-color 120ms ease, transform 160ms var(--ease-out); }
.documentos-emision a:active { transform: scale(.97); }
.documentos-emision .abrir { flex: 1; gap: 8px; padding: 6px 12px; font-size: 14px; font-weight: 600; }
.documentos-emision .abrir small { display: block; font-size: 12px; font-weight: 500; color: var(--rojo); }
.documentos-emision .bajar { justify-content: center; width: 44px; flex: none; }
.documentos-emision .icono { width: 18px; height: 18px; flex: none; }
.entrega-hecha { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: 13.5px; color: var(--verde-osc); }
.entrega-hecha .icono { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.entrega-hecha small { display: block; color: var(--gris); }
.generar-estado:empty { display: none; }
@media (hover: hover) and (pointer: fine) {
  .documentos-emision a:hover { border-color: var(--verde-osc); }
}

/* --- Ayuda: guías breves (S19) ---
   Se leen, no se operan: una columna de lectura, pasos numerados unidos por la línea del seguimiento de la lista (la
   misma que el operativo ya conoce) y casos «si pasa esto». En campo, bloques blancos sobre el fondo, como sus
   tarjetas; en oficina, filas con línea fina, como sus tablas. Las etiquetas de la pantalla van entre comillas. */
.m-cuenta .cuenta-acciones { display: flex; align-items: center; gap: 2px; }
.guia { max-width: 68ch; font-size: 15px; line-height: 1.55; }
.guia-cab h2 { font-size: 20px; font-weight: 650; margin: 4px 0 6px; line-height: 1.25; }
.guia-cab p { color: var(--gris); margin: 0; }
.guia-parte { margin-top: 30px; }
.guia-parte > h3 { font-size: 16px; font-weight: 650; margin: 0 0 12px; }
.guia-parte > p { margin: 0; }
.guia .ref { font-weight: 600; color: var(--tinta); }
.guia-nota { margin: 14px 0 0; font-size: 14px; color: var(--gris); }
.pasos { counter-reset: paso; list-style: none; margin: 0; padding: 0; }
.pasos li { counter-increment: paso; position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding-bottom: 18px; }
.pasos li::before { content: counter(paso); width: 28px; height: 28px; border-radius: 50%; background: var(--verde-osc); color: #fff;
                    font-weight: 700; font-size: 13.5px; display: flex; align-items: center; justify-content: center; }
.pasos li::after { content: ""; position: absolute; left: 13px; top: 32px; bottom: 4px; width: 2px; background: var(--linea); }
.pasos li:last-child { padding-bottom: 0; }
.pasos li:last-child::after { display: none; }
.pasos b { font-weight: 650; }
.casos { margin: 0; }
.casos dt { font-weight: 650; margin-bottom: 3px; }
.casos dd { margin: 0; color: var(--gris); }
.casos dd .ref { color: var(--tinta); }
.app-campo .guia-parte:first-of-type .pasos { background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 16px 14px; }
.app-campo .casos { display: grid; gap: 8px; }
.app-campo .casos > div { background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; }
.app-oficina .guia { margin-top: 6px; }
.app-oficina .casos > div { padding: 12px 0; border-bottom: 1px solid var(--linea); }
.app-oficina .casos > div:first-child { border-top: 1px solid var(--linea); }
@media print {
  @page { margin: 16mm 15mm; }
  body:has(.guia) { background: #fff; font-size: 11pt; }
  body:has(.guia) :is(.lateral, .m-barra, .m-pie, .m-cuenta, .avisos, .filtros, [data-imprimir]) { display: none !important; }
  body:has(.guia) :is(.app-oficina, .app-campo) { display: block; max-width: none; background: #fff; }
  body:has(.guia) :is(.principal, .m-cuerpo) { padding: 0; }
  .guia { max-width: none; }
  .guia a { color: inherit; text-decoration: none; }
  .pasos li, .casos > div { break-inside: avoid; }
  .guia-parte > h3 { break-after: avoid; }
  .app-campo .guia-parte:first-of-type .pasos, .app-campo .casos > div { border-color: var(--linea-fuerte); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-property: opacity, background-color, border-color, color !important; }
  .btn:active, .tarjeta:active, .filtros a:active, .toast button:active, .m-barra .atras:active, .ejemplos a:active { transform: none; }
  .zona-resultados.llego > * { animation: none; }
  .opciones label:active span, .chip-seccion:active { transform: none; }
  .opcion-grande:active, .m-nav a:active .icono { transform: none; }
  .resultado-servicio:active, .opciones-enlace a:active, .documentos-emision a:active { transform: none; }
  dialog.hoja, dialog.hoja[open] { transform: none; }
  @starting-style { dialog.hoja[open] { transform: none; opacity: 0; } }
  .renglon.entra { transition: opacity 150ms ease; }
  @starting-style { .renglon.entra { transform: none; } }
}