/* Inventario de Hardware TECNOMAX */

/* ---------------------------------------------------------------------------
   TIPOGRAFIA: Public Sans (2026-09-21, opcion 3 de cuatro propuestas que
   eligio el usuario). Antes el sistema no tenia letra propia: usaba Segoe UI
   (la de Windows) y Consolas para los numeros, o sea que en un Android o un
   Mac se veia con otra letra. Public Sans es la del gobierno de EE.UU.
   (USWDS, licencia OFL, copia en static/fuentes/LICENSE-PublicSans.txt),
   pensada para formularios y tablas. Se sirve desde static/fuentes/ -- el
   sistema tiene que correr aislado en la LAN, sin CDN. Solo los tres pesos
   de la identidad (400/600/700) mas la cursiva: 135 KB en total.
   Los numeros (.mono, codigos, seriales, cuentas) van en la MISMA letra con
   cifras tabulares: se alinean en columna sin necesitar una monoespaciada.
   Vuelta atras: estilo_antes_publicsans_20260921.css. */
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fuentes/PublicSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fuentes/PublicSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fuentes/PublicSans-Bold.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fuentes/PublicSans-Italic.woff2") format("woff2"); }


/* ---------------------------------------------------------------------------
   IDENTIDAD VISUAL TECNOMAX (2026-08-12)
   ---------------------------------------------------------------------------
   Se conserva el azul institucional de siempre; lo que cambia es lo que lo
   rodea. Todo el sistema (esta hoja, catalogo.css, ficha.css, ticket.css y
   etiquetas.css) toma los colores de aqui: cambiando un valor en este bloque
   se cambia en las 115 pantallas de una vez.

   La copia anterior quedo guardada en estilo_anterior_respaldo.css. Para
   volver atras basta reemplazar este archivo por esa copia y reiniciar.

   Los grises NO son grises de fabrica: llevan una pizca de azul, que es lo
   que hace que una pantalla se vea de marca y no de plantilla.
--------------------------------------------------------------------------- */
:root {
  /* --- Marca. El azul se usa con avaricia (2026-08-14) -----------------
     #1f4e79 NO cambia: esta en el logo, en la franja de los PDF
     (pdf_utils.py), en las etiquetas impresas y en los 3 manuales.
     Cambiarlo desalinearia la pantalla con todo lo impreso.
     Lo que cambio es DONDE aparece: antes estaba en titulos, precios,
     codigos, flechas y numeros; ahora queda para tres cosas -- la accion
     primaria, los enlaces y el foco. Los titulos van en tinta. */
  --azul: #1f4e79;          /* accion primaria, enlaces, foco */
  --azul-claro: #2a6291;    /* hover y foco -- desaturado */
  --azul-fuerte: #0b2338;   /* barra superior: mas tinta que azul */
  /* Bug corregido el 2026-08-14: esta variable se definia a si misma
     (`var(--azul-tenue)`), lo que en CSS la deja INVALIDA -- no es un valor,
     es "sin valor". Las 7 reglas que la usaban (hover de fila de equipo, de
     familia, boton de comentar, foco) quedaban sin fondo, o sea que el
     resaltado al pasar el mouse no se veia. Se le pone el tinte azul claro
     que el comentario original describia. */
  --azul-tenue: #e8f0f8;    /* fondo de lo seleccionado */

  /* Colores de estado. Se reservan para lo que SIGNIFICA algo: nunca
     decorativos. Mas profundos y menos saturados que antes -- un sistema
     serio es sobrio en la decoracion y agresivo en la alerta. */
  --rojo: #99201a;
  --verde: #14663a;
  --ambar: #8a5600;

  /* Escala de grises azulada. Los grises NO son de fabrica: llevan una
     pizca de azul, que es lo que hace que se vean de marca. */
  --texto: #0f1720;         /* tinta */
  --suave: #5b6673;         /* texto secundario */
  --tenue: #8b96a2;         /* terciario: rotulos de columna, metadatos */
  --borde: #dde3e9;         /* linea de caja */
  --borde-suave: #eceff3;   /* separacion entre filas */
  --borde-fuerte: #c7cfd8;  /* separador estructural (bajo un th) */
  --fondo: #f4f6f8;         /* fondo de pagina */
  --superficie: #ffffff;    /* toda caja de contenido */
  --superficie-2: #fafbfc;  /* cabecera de tabla, bloque embebido, hover */

  /* Fondos semanticos: apenas tenidos, NO pasteles. Con 40 filas en
     pantalla, un pastel saturado pinta la pagina entera de color. */
  --verde-fondo: #f2f7f4;
  --ambar-fondo: #fdf8ef;
  --rojo-fondo: #fcf3f2;
  --azul-fondo: #f1f5f9;
  --naranja-fondo: #fdf4ec;

  /* Una superficie fija NO flota: se delimita con una linea. La sombra
     queda solo para lo que de verdad esta por encima del contenido
     (menus, dialogos, barras pegajosas). */
  --sombra: none;
  --sombra-flotante: 0 8px 24px rgba(11,35,56,.14);

  /* Tres radios, no trece. Las pildoras de 999px eran el marcador visual
     mas fuerte de "app moderna" y el mas lejano de "sistema serio". */
  --radio: 4px;             /* panel, tabla, input, boton */
  --radio-chico: 3px;       /* chapas, pastillas, chips */
  --radio-grande: 6px;      /* dialogos y desplegables */

  /* Tipografia: Public Sans en todo (ver el bloque @font-face de arriba);
     Segoe UI/system-ui solo mientras carga o si faltara el archivo. Seis
     tamanos, sin medios puntos. --fuente-mono ya NO es monoespaciada: es la
     misma Public Sans, y .mono le pone cifras tabulares y peso 600. */
  --fuente: "Public Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --fuente-titulo: "Public Sans", "Segoe UI", system-ui, Arial, sans-serif;
  --fuente-mono: "Public Sans", "Segoe UI", system-ui, Arial, sans-serif;
  --t-xs: 11px;             /* th, miga, rotulos */
  --t-sm: 12px;             /* chapas, pastillas, notas */
  --t-base: 13px;           /* tablas, formularios, botones */
  --t-md: 14px;             /* cuerpo de pagina */
  --t-lg: 16px;             /* h2 */
  --t-xl: 20px;             /* h1 */
  --t-dato: 24px;           /* numero de KPI */

  --ancho: 1280px;          /* las tablas de este sistema llegan a 10 columnas */
}

/* Numeros que se comparan columna a columna, sin bailar de fila en fila.
   Es lo que hace que una tabla de precios se lea como un estado de cuenta.
   Regla unica: no hace falta tocar ninguna plantilla. */
td, th.num, .mono, .num, .tarjeta-numero, .tarjeta-repuesto-numero,
.precio-final, .precio-fijo, .cuota-numero, .tabla-desglose td,
dl.datos dd, .kpi-valor, .dias b,
input[type="number"], input[inputmode="decimal"] {
  font-variant-numeric: tabular-nums;
}

* { box-sizing: border-box; }

/* Un elemento con "hidden" tiene que quedar oculto SIEMPRE. Sin esto,
   cualquier clase con "display: flex" o "grid" le gana al atributo y el
   elemento se ve igual -- pasaba con el formulario de "Nueva conversacion"
   del CRM, que nacia desplegado (encontrado el 2026-08-12 al mirar la
   pantalla; por HTTP no se nota). */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: var(--t-md);
  line-height: 1.5;
}

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }

/* ---------- Barra superior: seis modulos con desplegable ---------- */

/* Color plano en vez de degradado, y sin sombra: la barra se separa del
   contenido por su propio color, no por un efecto. */
.barra {
  background: var(--azul-fuerte);
  color: #fff; position: relative; z-index: 50;
}

.barra-interior {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap; min-height: 52px;
}

.marca {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  color: #fff; text-decoration: none;
}
.marca img { height: 32px; width: auto; }

.modulos { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.modulo { position: relative; }
.modulo > a {
  display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px;
  color: #c3d3e2; text-decoration: none; font-size: var(--t-base); font-weight: 600;
  border-radius: var(--radio); white-space: nowrap;
  transition: background .15s, color .15s;
}
.modulo > a:hover, .modulo:hover > a { background: rgba(255,255,255,.08); color: #fff; }
/* Modulo activo (2026-09-09, pedido de simplificar el menu): que se sepa
   siempre en que parte del sistema se esta parado. Se marca por JS (ver
   base.html) comparando la ruta actual contra los enlaces reales de cada
   modulo -- no una lista de rutas a mano, para que nunca se desactualice
   al agregar una pantalla nueva a un desplegable existente. Mas fuerte que
   el hover (que es pasajero) con una linea inferior blanca, ya que el
   fondo de la barra es oscuro y --azul no se lee ahi (ver CLAUDE.md,
   "los colores de estado NO funcionan sobre azul"). */
.modulo-activo > a {
  background: rgba(255,255,255,.14); color: #fff;
  box-shadow: inset 0 -2px 0 #fff;
}
/* Sin emojis en la navegacion (decision del usuario, 2026-08-14): ningun
   sistema serio pone un emoji en su menu. Se apagan desde aqui, sin tocar
   base.html -- los <span class="icono"> siguen en el HTML por si algun dia
   se quieren volver a encender o reemplazar por iconos de verdad. */
.modulo .icono { display: none; }
/* El punto azul de cada opcion del desplegable tampoco aporta. */
.desplegable .punto { display: none; }
.modulo .icono { font-size: 15px; line-height: 1; }
.flecha {
  width: 0; height: 0; margin-left: 2px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 4.5px solid currentColor; opacity: .7;
}

/* El desplegable se abre al pasar el mouse y tambien con el teclado (focus),
   para que se pueda navegar sin raton. */
.desplegable {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 232px;
  background: #fff; border-radius: var(--radio-grande); padding: 7px;
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-flotante);
  display: none;
}
.modulo:hover .desplegable, .modulo:focus-within .desplegable { display: block; }
/* Puente invisible: evita que el menu se cierre al bajar el mouse hacia el. */
.modulo:hover .desplegable::after {
  content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px;
}
.desplegable::before {
  content: ""; position: absolute; top: -6px; left: 22px; width: 12px; height: 12px;
  background: #fff; border-left: 1px solid var(--borde); border-top: 1px solid var(--borde);
  transform: rotate(45deg); border-radius: var(--radio-chico) 0 0 0;
}
.desplegable-titulo {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.3px;
  color: #9aa8b8; font-weight: 700; padding: 8px 12px 6px;
}
.desplegable a {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  color: var(--texto); text-decoration: none; font-size: 14px;
  border-radius: var(--radio); transition: background .12s;
}
.desplegable a:hover { background: #e8f0f8; color: var(--azul); }
.desplegable .punto {
  width: 7px; height: 7px; border-radius: 50%; background: var(--azul-claro);
  flex-shrink: 0; opacity: .55;
}
/* Separador visual dentro de un desplegable con varias secciones (ej. menu
   "Inventario" reorganizado el 2026-08-11: agrupa modulos ya existentes,
   solo cambia donde se ven, no que hacen). */
.desplegable-separador { height: 1px; background: var(--borde); margin: 6px 4px; }

.barra-derecha { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.barra-derecha .quien { color: #b9cde0; font-size: 13px; }
.barra-derecha .salir {
  color: #e8eef5; text-decoration: none; padding: 6px 12px;
  border-radius: var(--radio); font-size: 13.5px; border: 1px solid rgba(255,255,255,.35);
}
.barra-derecha .salir:hover { background: rgba(255,255,255,.15); color: #fff; }
/* Manuales de procedimientos (2026-09-13): el enlace de la barra derecha
   reusa el aspecto de "Salir"; solo suma el contador de pendientes al lado. */
.barra-derecha .manuales-enlace { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Barra: menu de tablet (2026-08-13) ---------- */
/* Oculto en escritorio -- solo aparece por debajo de 900px (ver el
   @media mas abajo), que es donde la barra de 8 modulos ya no entra en
   una sola fila (caso real: Bodega usa tablet para Recepcion de Cargas). */
.menu-boton {
  display: none; flex-direction: column; justify-content: center; align-items: center;
  gap: 4px; width: 38px; height: 38px; margin-left: auto;
  background: transparent; border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--radio); cursor: pointer; padding: 0;
}
.menu-boton-barra { display: block; width: 18px; height: 2px; background: #fff; border-radius: var(--radio-chico); }

@media (max-width: 900px) {
  .menu-boton { display: flex; }
  .marca { order: 1; }
  .menu-boton { order: 2; }
  .barra-derecha { order: 3; margin-left: 0; }

  /* La barra de modulos se colapsa entera detras del boton... */
  .modulos { display: none; order: 4; width: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px 0 14px; }
  .barra-interior.menu-abierto .modulos { display: flex; }
  .modulo { width: 100%; }
  .modulo > a { width: 100%; justify-content: space-between; }

  /* ...y cada desplegable se abre en modo acordeon (con la flecha), no al
     pasar el mouse -- en touch no existe el hover. */
  .modulo:hover .desplegable, .modulo:focus-within .desplegable { display: none; }
  .modulo.abierto .desplegable { display: block; }
  .desplegable {
    position: static; width: 100%; margin: 2px 0 6px; box-shadow: none;
    border: none; background: rgba(255,255,255,.08); border-radius: var(--radio);
  }
  .desplegable::before { display: none; }
  .desplegable-titulo { color: #b9cde0; }
  .desplegable a { color: #e8eef5; }
  .desplegable a:hover { background: rgba(255,255,255,.14); color: #fff; }
}

/* ---------- Estructura ---------- */

main { padding-top: 24px; padding-bottom: 40px; min-height: 60vh; }

/* Titulos algo mas grandes y ajustados, para que la jerarquia se lea sin
   depender del color. */
/* Titulos en TINTA, no en azul (2026-08-14): el azul queda para la accion,
   los enlaces y el foco. Tres pesos en todo el sistema: 400 / 600 / 700. */
h1 {
  font-family: var(--fuente-titulo);
  font-size: var(--t-xl); margin: 0; letter-spacing: -.01em;
  color: var(--texto); font-weight: 600;
}
h2 {
  font-family: var(--fuente-titulo);
  font-size: var(--t-lg); margin: 0 0 12px; color: var(--texto); font-weight: 600;
}
h2 small { font-weight: 400; color: var(--suave); margin-left: 8px; font-size: var(--t-base); }

.titulo-fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 4px;
}
/* Titulo con icono azul, calcado de .puerta-titulo (2026-09-22). */
.titulo-con-icono { display: flex; align-items: center; gap: 10px; }
/* Estado con punto y comentarios como enlace en /equipos (2026-09-22, opcion B). */
.estado-punto { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.estado-punto::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.estado-punto.verde { color: var(--verde); }
.estado-punto.ambar { color: var(--ambar); }
.estado-punto.rojo { color: var(--rojo); }
.enlace-comentarios { color: var(--azul); text-decoration: none; }
.enlace-comentarios:hover { text-decoration: underline; }
.enlace-comentarios.vacio { color: var(--suave); }
/* La miga en mayusculas chicas espaciadas es, junto con la tabla, lo que
   hace que una pantalla se lea como "modulo de un sistema" y no como
   "pagina web". */
.miga {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--tenue); font-weight: 600; margin: 0 0 6px;
}
.subtitulo { color: var(--suave); font-size: var(--t-base); margin: 0 0 16px; }

/* ---------- LA TARJETA (2026-08-14) ----------
   .panel es EL contenedor de contenido del sistema y el patron oficial de
   organizacion visual: cada bloque de informacion vive en su propia
   tarjeta con su titulo. El usuario lo eligio como estandar viendo la
   ficha del equipo (Resumen comercial / Costos y repuestos /
   Identificacion) -- toda pantalla nueva se arma asi.

   Una tarjeta NO flota: se delimita con una linea. La jerarquia la dan el
   espacio y el borde, no la sombra. */
.panel {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--sombra);
}
/* La cabecera de la tarjeta lleva regla. Se aplica a las 120 plantillas de
   una vez porque todas ya usan <section class="panel"><h2>. */
.panel > h2:first-child {
  padding-bottom: 10px; margin: 0 0 14px;
  border-bottom: 1px solid var(--borde-suave);
}
/* Una tabla dentro de una tarjeta angosta se corta (caso real: "Costos y
   repuestos" en media pantalla, con la columna Tecnico cortada). La
   tarjeta la deja desplazarse en vez de recortarla. */
.panel > .tabla-scroll { margin-left: -18px; margin-right: -18px; width: auto;
  border-left: 0; border-right: 0; border-radius: 0; }
.panel > .tabla-scroll:last-child { margin-bottom: -16px; border-bottom: 0; }

.pie { color: var(--suave); font-size: 13px; padding-bottom: 24px; }

/* Formulario modal (ej. "+ Nuevo Vendedor" en el punto de venta): el
   elemento nativo <dialog> ya trae centrado y bloqueo de la pagina de atras,
   solo se le da el mismo aspecto que .panel. */
.modal-panel {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-grande);
  padding: 20px 24px; max-width: 480px; width: 90%;
}
.modal-panel::backdrop { background: rgba(15, 23, 42, .45); }
.modal-panel form { display: flex; flex-direction: column; gap: 12px; }
.modal-panel label { display: block; font-size: 13px; color: var(--suave); }
.modal-panel label input, .modal-panel label textarea { margin-top: 5px; }

/* Cuentas bancarias (tablero y punto de venta): minimalista a proposito, sin
   recuadro ni fondo por cuenta -- solo tipografia y una linea fina abajo
   para separar, como una lista. */
.cuentas-banco {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px 28px;
}
.cuenta-tarjeta {
  display: flex; flex-direction: column; gap: 3px;
  padding-bottom: 14px; border-bottom: 1px solid var(--borde);
}
.cuenta-tarjeta-cabecera { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.cuenta-logo {
  width: 22px; height: 22px; border-radius: var(--radio); object-fit: contain;
  flex-shrink: 0;
}
.cuenta-logo-texto {
  display: flex; align-items: center; justify-content: center;
  background: none; color: var(--suave); font-size: 10px; font-weight: 700;
  border: 1px solid var(--borde);
}
.cuenta-tipo { color: var(--suave); font-size: 13px; }
.cuenta-numero { font-size: 17px; font-weight: 700; letter-spacing: .3px; }
.cuenta-titular { font-size: 13px; color: var(--suave); }
.cuenta-titular b { color: var(--texto); font-weight: 600; }
.cuenta-detalle { font-size: 12px; color: var(--suave); }
.cuenta-tarjeta .boton-mini {
  margin-top: 8px; align-self: flex-start;
  background: none; border: none; padding: 0; color: var(--azul);
  font-weight: 600;
}
.cuenta-tarjeta .boton-mini:hover { text-decoration: underline; }

/* ---------- Avisos y pastillas ---------- */

/* Aviso con una barra de color a la izquierda en vez de todo el fondo
   teñido: informa igual y no grita. */
.aviso {
  padding: 11px 15px; border-radius: var(--radio); margin: 0 0 16px;
  border: 1px solid var(--borde); border-left: 3px solid var(--suave);
  background: #fff; color: var(--texto);
}
.aviso.ok { background: #f4faf6; border-color: #cfe6d8; border-left-color: var(--verde); color: #14512c; }
.aviso.error { background: #fdf6f5; border-color: #eecfcc; border-left-color: var(--rojo); color: #7d1a15; }
/* Ni bien ni error: algo que conviene corregir pero no rompe nada
   (ej. un ID del sistema que quedo con el nombre de Windows, 2026-08-12). */
.aviso.atencion { background: #fefaf3; border-color: #eeddb9; border-left-color: var(--ambar); color: #6e4611; }
/* Informativo, no alarma: se usa para citar una regla legal que conviene
   tener a la vista (ej. el art. 97 en el decimo tercer mes). Va en el azul de
   la marca porque NO es una advertencia -- el ambar y el rojo se reservan
   para lo que de verdad pide atencion. */
.aviso.azul { background: var(--azul-tenue); border-color: #cddff0; border-left-color: var(--azul); color: var(--azul-fuerte); }
/* Sin color: un estado normal del trabajo que hay que tener a la vista, pero
   que no es ni alarma ni novedad (2026-09-22, propuesta A de cuatro sobre la
   banda "Trabajo terminado, sigue en el taller": el crema del ambar se leia
   como una advertencia y ahi no hay nada mal, solo falta que bodega la
   guarde). El ancho lo eligio el usuario moviendo la banda en la propuesta:
   no llega al borde derecho de la tarjeta. Va como margen y no como ancho
   tope para que el hueco sea el mismo en cualquier pantalla -- un
   "max-width" fijo deja un vacio enorme en un monitor ancho. */
.aviso.neutro {
  background: var(--fondo); border-color: var(--borde);
  border-left-color: var(--suave); color: var(--texto); margin-right: 36px;
}

/* La orden de taller resuelta en el formulario de Cotizacion (2026-09-10):
   numero + equipo + "Quitar" en una sola fila, el problema debajo. */
.ot-resuelta-fila1 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ot-resuelta-fila1 .boton-mini { margin-left: auto; }
.ot-resuelta-fila1 + .vacio-mini { margin: 4px 0 0; }

/* Franja de comentarios de la FAMILIA arriba de los de un equipo
   (comentarios_equipo.html, 2026-09-16): solo lectura, una fila por
   comentario con fecha y autor a la izquierda, sin tabla. */
.franja-familia { margin-bottom: 14px; }
.franja-familia-cabecera { display: flex; justify-content: space-between;
  align-items: center; gap: 12px; flex-wrap: wrap; }
.franja-familia-cabecera .sub-celda { margin-left: 8px; color: var(--suave); }
.franja-familia-lista { display: flex; flex-direction: column; gap: 6px;
  margin-top: 10px; font-size: var(--t-base); color: var(--texto); }
.franja-familia-fila { display: flex; gap: 14px; align-items: baseline; }
.franja-familia-quien { flex: 0 0 200px; font-size: var(--t-sm);
  color: var(--suave); white-space: nowrap; }
.franja-familia-vacio { margin: 8px 0 0; font-size: var(--t-base); }
@media (max-width: 700px) {
  .franja-familia-fila { flex-direction: column; gap: 2px; }
  .franja-familia-quien { flex-basis: auto; }
}

.contadores { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Un <form>/<button> que necesita verse como un boton mas en una fila de
   pastillas y enlaces (ej. "Imprimir etiquetas de <ubicacion>"). */
.form-en-linea { display: contents; }
/* De burbuja a control de sistema: el cambio real es el radio (999 -> 4). */
.pastilla {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 3px 10px; font-size: var(--t-sm); color: var(--suave); text-decoration: none;
}
.pastilla b { color: var(--texto); font-weight: 700; }
.pastilla.roja { border-color: #e6cac7; background: var(--rojo-fondo); color: var(--rojo); font-weight: 600; }
.pastilla.roja b { color: var(--rojo); }
/* Para una cifra que no es mala pero pide atencion (2026-08-14): el dinero
   comprometido en pedidos que todavia no llegaron. */
.pastilla.ambar { border-color: #ebdcc0; background: var(--ambar-fondo); color: var(--ambar); font-weight: 600; }
.pastilla.ambar b { color: var(--ambar); }
a.pastilla { text-decoration: none; }
.pastilla.activa { background: var(--azul); border-color: var(--azul); color: #fff; }

/* Chip de confianza para la razon extraida de comentarios (Reporte de
   Equipos Fuera de Venta) -- verde: el comentario lo explica directo;
   amarillo: se detecto por palabra clave; rojo: no se encontro nada
   claro, hay que revisar a mano. */
.chip-razon {
  display: inline-block; padding: 3px 10px; border-radius: var(--radio-chico);
  font-size: 12px; font-weight: 600; margin-bottom: 4px;
}
.chip-razon.verde { background: #e7f5ec; color: var(--verde); }
.chip-razon.amarillo { background: #fff4e0; color: #8a5a00; }
.chip-razon.rojo { background: #fdecea; color: var(--rojo); }

/* La salud de la bateria pasa de texto de color a pastilla con punto: se
   distingue de un vistazo en una tabla larga sin tener que leer el numero.
   Se hace solo con CSS -- ninguna plantilla cambia. */
.salud {
  font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border-radius: var(--radio-chico); font-size: 12.5px;
  border: 1px solid transparent; white-space: nowrap;
}
.salud::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.salud.buena { color: var(--verde); background: #e9f4ed; border-color: #c3e0cd; }
.salud.mala { color: var(--rojo); background: #fbeceb; border-color: #eec7c4; }

/* En una TABLA LARGA la pastilla de arriba no alcanza: con 40 filas en
   pantalla hay que leer numero por numero para saber cual esta mejor. La
   cifra sigue mandando y debajo va una barra de 4px cuyo ancho ES el
   porcentaje (2026-09-22, propuesta elegida por el usuario entre 6).
   La pastilla .salud NO se toca: la siguen usando la ficha del equipo, el
   POS, el catalogo y la ficha de venta, donde se muestra UNA sola bateria y
   una barra no compara con nada. Dibujo en templates/barra_bateria.html. */
.bat { display: inline-block; white-space: nowrap; }
.bat-cifra { font-size: var(--t-sm); }
.bat-cifra.mala { color: var(--rojo); }
.bat-pista {
  display: block; width: 58px; height: 4px; margin-top: 3px; overflow: hidden;
  border-radius: var(--radio-chico); background: var(--borde);
}
.bat-nivel { display: block; height: 100%; border-radius: var(--radio-chico); }
.bat-nivel.buena { background: var(--verde); }
.bat-nivel.mala { background: var(--rojo); }

/* Estado de un equipo dentro de una tabla. La clase se venia usando en
   lista_agrupada.html y captura_excel_mapear.html desde antes, pero NUNCA
   tuvo estilo: salia como texto suelto. Encontrado el 2026-08-12. */
/* La base de .chapa-estado la da ahora el selector agrupado de las cinco
   familias (2026-08-14); aqui quedan solo sus modificadores. */
.chapa-estado.vigente { color: var(--verde); background: var(--verde-fondo); border-color: #cfe0d6; }
.chapa-estado.vence { color: var(--ambar); background: var(--ambar-fondo); border-color: #ebdcc0; }
.chapa-estado.vencida { color: var(--rojo); background: #fbeceb; border-color: #eec7c4; }
.nota-roja { color: var(--rojo); font-size: 13px; margin-left: 8px; }

/* ---------- Buscador, botones y formularios ---------- */

.buscador { display: flex; gap: 8px; margin: 0 0 18px; flex-wrap: wrap; }
.buscador input { flex: 1; min-width: 240px; }

/* ---------- BUSQUEDA EN VIVO Y AUTOCOMPLETADO (2026-08-14) ----------
   Dos componentes reutilizables, con el mismo criterio que las PESTANAS: el
   JavaScript vive una sola vez en base.html y una pantalla solo declara
   atributos "data-". Si manana hay que cambiar como se busca, se cambia en
   un solo lugar. Ver el bloque de base.html para el contrato completo.

   1) .buscador-vivo   -> filtra al escribir lo que YA esta en la pagina.
   2) .autocompletar   -> lista desplegable de sugerencias del servidor.

   Lo que NO cambia: el formulario GET sigue debajo. Sin JavaScript, o si
   algo falla, todo se comporta como antes (Enter -> el servidor busca). */

/* Aviso de "no hay coincidencias": lo crea el JS, no las plantillas. */
.filtro-sin-resultados { color: var(--suave); margin: 12px 0 18px; }

/* La caja envuelve al input para poder colgar la lista justo debajo, del
   mismo ancho. La crea el JS alrededor del input, asi ninguna plantilla
   tiene que cambiar su marcado. */
.autocompletar-caja { position: relative; flex: 1; min-width: 240px; }
.autocompletar-caja > input { width: 100%; }

.autocompletar-lista {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 2px);
  margin: 0; padding: 4px; list-style: none;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-grande);
  box-shadow: var(--sombra-flotante);
  max-height: 280px; overflow-y: auto;
}
.autocompletar-lista[hidden] { display: none; }

.autocompletar-opcion {
  padding: 6px 9px; border-radius: var(--radio); cursor: pointer;
  font-size: var(--t-base); line-height: 1.35;
}
/* El estado activo se marca con FONDO, no solo con color de texto: tiene que
   verse de un vistazo cual va a entrar si se presiona Enter. Es la misma
   marca para el teclado y para el mouse -- una sola clase, no dos. */
.autocompletar-opcion.activa { background: var(--azul-tenue); }
.autocompletar-opcion .detalle { color: var(--suave); font-size: var(--t-sm); }
.autocompletar-vacio { padding: 6px 9px; color: var(--suave); font-size: var(--t-base); }

@media print { .autocompletar-lista { display: none !important; } }

input, select, textarea {
  font: inherit; font-size: var(--t-base); color: inherit; background: var(--superficie);
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio);
  padding: 6px 10px; width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--azul-claro); outline-offset: -1px; border-color: var(--azul-claro);
}
textarea { resize: vertical; }
select[multiple] { resize: vertical; overflow-y: auto; }

/* Ojito para mostrar/ocultar contrasena (2026-08-25). El boton se agrega
   siempre como el ultimo hijo de .campo-clave, por eso el JS lo encuentra
   con previousElementSibling en vez de necesitar un id por campo. */
.campo-clave { position: relative; }
.campo-clave input { padding-right: 34px; }
.campo-clave .btn-ojo {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; padding: 0; border: none; background: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--suave); cursor: pointer; border-radius: var(--radio-chico);
}
.campo-clave .btn-ojo:hover { color: var(--azul); background: var(--azul-tenue); }
.campo-clave .btn-ojo svg { width: 18px; height: 18px; }

/* Un solo boton lleno por pantalla (la accion principal); el resto en claro,
   para que siempre se sepa cual es la accion esperada. */
button, .boton, .boton-claro {
  font: inherit; font-size: var(--t-base); cursor: pointer;
  border-radius: var(--radio); padding: 7px 14px;
  border: 1px solid var(--azul); background: var(--azul); color: #fff;
  font-weight: 600;
  text-decoration: none; display: inline-block; white-space: nowrap;
}
/* .boton es el mismo boton lleno, pero para un <a> que lleva a otra pantalla
   (2026-09-18, "Confirmar entrega y cobrar" del delivery salia como enlace
   subrayado porque la clase nunca existio). */
button:hover, .boton:hover { background: var(--azul-fuerte); border-color: var(--azul-fuerte); color: #fff; }
.boton-claro {
  background: #fff; color: var(--texto); border-color: var(--borde);
  font-weight: 600;
}
.boton-claro:hover { background: #fff; border-color: var(--azul-claro); color: var(--azul); }
/* Un boton claro que marca el filtro donde uno esta parado (2026-09-12,
   Solicitudes de Repuestos): se pinta lleno, igual que .pastilla.activa. */
.boton-claro.activo { background: var(--azul); border-color: var(--azul); color: #fff; }
.boton-claro.activo:hover { background: var(--azul-fuerte); border-color: var(--azul-fuerte); color: #fff; }
.boton-rojo { background: #fff; color: var(--rojo); border-color: #e0b4b0; }
.boton-rojo:hover { background: var(--rojo); color: #fff; }

/* Boton solido para acciones que no se pueden deshacer (limpiar bitacora). */
.boton-peligro { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.boton-peligro:hover { background: #8f1c15; }
.boton-peligro:disabled {
  background: #e7c9c6; border-color: #e7c9c6; color: #fff; cursor: not-allowed;
}

.acciones { display: flex; gap: 8px; flex-wrap: wrap; }

.formulario { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.formulario label { display: block; width: 100%; font-size: var(--t-sm); color: var(--suave); }
.formulario label input, .formulario label select, .formulario label textarea { margin-top: 5px; }
.dos-columnas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; width: 100%;
}
.fila-form { display: flex; gap: 6px; align-items: center; }
.fila-form input { min-width: 150px; }
.fila-form .campo-clave { flex: 1; min-width: 150px; }
.fila-form .campo-clave input { min-width: 0; width: 100%; }

.zona-peligro { margin-top: 26px; }

/* ---------- Tablas ---------- */

.tabla-scroll { overflow-x: auto; background: #fff;
  border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); }
.panel .tabla-scroll { border: none; border-radius: 0; box-shadow: none; }

/* Barra fantasma arriba de una tabla ancha (2026-08-18): mismo ancho de
   scroll que la tabla real, puesta con JS (base.html) solo cuando hace
   falta. No es una tabla ni la duplica -- es un div vacio con la barra del
   navegador encima. Altura fija chica: solo tiene que existir la barra, no
   verse contenido adentro. */
.tabla-scroll-arriba { overflow-x: auto; overflow-y: hidden; height: 16px; }
.panel > .tabla-scroll-arriba { margin-left: -18px; margin-right: -18px; width: auto; }

table { border-collapse: collapse; width: 100%; font-size: var(--t-base); }
th, td { text-align: left; }
/* Encabezados sin franja de color: mayusculas chicas y grises sobre un
   fondo apenas distinto. La atencion queda en los datos, no en el marco. */
th {
  background: var(--superficie-2); color: var(--tenue); font-weight: 600;
  font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; border-bottom: 1px solid var(--borde-fuerte);
  padding: 7px 12px;
}
/* Las filas se separan con una linea muy tenue, no con el borde fuerte.
   Alto resultante ~33px (antes ~41px): entran 6 u 8 filas mas por pantalla. */
td { border-bottom: 1px solid var(--borde-suave); padding: 8px 12px; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--superficie-2); }
.num, td.num, th.num { text-align: right; }
/* El enlace de tabla en peso normal: antes cada fila tenia dos o tres
   palabras en negrita azul y la pantalla entera pesaba igual. */
td a { color: var(--azul); font-weight: 400; text-decoration: none; }
td a:hover { text-decoration: underline; }
.mono { font-family: var(--fuente-mono); font-size: var(--t-sm); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .2px; white-space: nowrap; }
/* Una fila que se puede tocar tiene que parecer tocable. */
tr[onclick] { cursor: pointer; }
.destacado { font-weight: 700; font-size: 15px; letter-spacing: .5px; color: var(--azul); }
/* Un dato que hay que leer de un vistazo desde el otro lado del mostrador
   (2026-08-28, Compras por Encargo: Tipo y Part Number de la pieza) --
   combinar con .destacado para el mismo peso/color, solo mas grande. */
.dato-grande { font-size: var(--t-dato); line-height: 1.2; }

/* ---------- Listas de datos ---------- */

dl.datos {
  display: grid; grid-template-columns: minmax(150px, 210px) 1fr;
  gap: 8px 18px; margin: 0;
}
dl.datos dt { color: var(--suave); font-size: 13px; }
dl.datos dd { margin: 0; }

/* Editor de los 3 textos de la factura -- garantia, mantenimiento,
   paqueteria (2026-09-09). El resumen (dl.datos) y el boton "Editar
   textos" van en una fila que se parte en pantalla angosta; el bloque
   editable de abajo usa .formulario, que ya apila labels a ancho completo. */
.fila-editor-textos {
  display: flex; gap: 14px; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; margin-top: 4px;
}
.fila-editor-textos dl.datos { flex: 1 1 320px; }
.editor-textos-factura { max-width: 480px; margin-top: 4px; }

/* Simulador de Factura -- vista previa de como se acomoda el texto en el
   papel real, antes de imprimir (2026-09-09). */
.lienzo-factura-envoltura { overflow-x: auto; }
#lienzo-factura { display: block; background: #fff; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); max-width: 100%; }
.estado-campo-factura { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--suave); }
.estado-campo-factura.ambar { color: var(--ambar); font-weight: 600; }
.estado-campo-factura.rojo { color: var(--rojo); font-weight: 600; }
.punto-estado-factura { width: 8px; height: 8px; border-radius: 50%; background: var(--borde-fuerte); flex-shrink: 0; }
.punto-estado-factura.ok { background: var(--verde); }
.punto-estado-factura.ambar { background: var(--ambar); }
.punto-estado-factura.rojo { background: var(--rojo); }

/* Elegir a que impresora va un trabajo (2026-09-02, la segunda BT320).
   El selector acompana al boton, no lo empuja a otra linea: es un ajuste
   ocasional, el caso normal es apretar el boton y ya. */
.fila-impresion { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
select.selector-impresion { font-size: var(--t-sm); padding: 3px 6px; max-width: 190px; }

/* "Enviar el PDF a imprimir" en UNA linea (2026-09-22, propuesta A de 3).
   El <form> de esas 6 pantallas no tenia ninguna clase, asi que sus dos
   <select> caian en el `width: 100%` general de los formularios y el bloque
   ocupaba tres renglones. Aqui van chicos y al lado del boton, igual que el
   selector de impresora del POS. Reemplaza al `style="margin-bottom:14px"`
   que cada una traia suelto. */
.fila-imprimir { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.fila-imprimir select { width: auto; max-width: 220px; font-size: var(--t-sm); padding: 4px 8px; }

/* Lista de dinero con su equivalente en cordobas debajo (2026-09-02).
   En pantalla angosta, dl.datos le da hasta 210px a la etiqueta y al monto
   le quedan ~64px: "C$ 179,797.06" se parte en dos lineas justo por el
   medio del numero. Aqui la fila se apila, en vez de tocar el dl.datos
   global que usan decenas de pantallas. */
@media (max-width: 700px) {
  dl.datos.datos-dinero { grid-template-columns: 1fr; gap: 2px; }
  dl.datos.datos-dinero dt { margin-top: 8px; }
}
dl.datos.datos-dinero dd { white-space: nowrap; }

/* Codigo de barras dentro de la ficha del equipo */

.panel-con-barras {
  display: flex; gap: 26px; align-items: flex-start;
  justify-content: space-between; flex-wrap: wrap;
}
.panel-con-barras .datos { flex: 1 1 420px; }

.barras-ficha {
  flex: 0 0 auto; text-align: center;
  border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 12px 14px 10px; background: #fff;
}
.barras-ficha svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.barras-ficha-codigo {
  font-family: var(--fuente-mono); font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 15px; letter-spacing: 1.5px; margin-top: 2px;
}
.barras-ficha-enlace {
  display: inline-block; margin-top: 7px;
  font-size: 12px; color: var(--azul-claro); text-decoration: none;
}
.barras-ficha-enlace:hover { text-decoration: underline; }
.barras-ficha-enlace-boton {
  display: inline-block; margin-top: 7px; margin-right: 10px;
  font-size: 12px; color: var(--azul-claro); text-decoration: none;
  background: none; border: none; padding: 0; cursor: pointer; font-weight: 700;
}
.barras-ficha-enlace-boton:hover { text-decoration: underline; }

/* Resumen Comercial en TRES columnas (2026-09-24): datos con icono |
   caracteristicas en texto azul con vineta | estado (taller y bloqueo).
   Sin estado quedan dos columnas; por debajo de 900px, una sola y el estado
   al final. */
/* CUATRO columnas desde el mismo dia (pedido del usuario): datos | caracteristicas
   | estado | etiqueta, con la MISMA distancia entre las cuatro (space-between).
   Los tres recuadros ocupan las dos filas y miden lo mismo de alto; el titulo
   y los datos van en la primera columna. Sin estado quedan tres. */
.resumen-tres {
  display: grid; grid-template-columns: max-content 270px 270px 248px;
  grid-template-rows: auto 1fr; justify-content: space-between;
  column-gap: 32px; row-gap: 18px; margin-bottom: 4px;
}
.resumen-tres.sin-estado { grid-template-columns: max-content 270px 248px; }
.resumen-tres-titulo { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* "Familia 1531-L" a la derecha del titulo del panel, en texto (2026-09-24). */
h2.resumen-h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.resumen-familia { font-size: var(--t-base); font-weight: 600; color: var(--suave); white-space: nowrap; }
.resumen-tres-nombre { font-size: var(--t-xl); font-weight: 700; color: var(--texto); line-height: 1.25; }
/* Mismo celeste tenue que el de caracteristicas, sin borde (2026-09-26). */
.resumen-estado { grid-column: 3; grid-row: 1 / 3; border-radius: var(--radio); background: #f3f7fb; }
.resumen-tres .resumen-etiqueta {
  grid-column: 4; grid-row: 1 / 3; width: auto;
  display: flex; flex-direction: column; justify-content: center;
}
.resumen-tres.sin-estado .resumen-etiqueta { grid-column: 3; }
.resumen-estado-bloque { padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; font-size: var(--t-base); }
.resumen-estado-bloque + .resumen-estado-bloque { border-top: 1px solid #dde7f2; }
.resumen-estado-bloque .aviso { margin: 0; }
/* "No se puede entregar" sin rojo (2026-09-24, opcion 8 elegida por el
   usuario): blanco, raya azul tinta y el punto azul vivo de la barra del menu. */
.resumen-estado-bloque .aviso.error {
  background: #fff; border-color: var(--borde); border-left-color: var(--azul-fuerte); color: #3a4552;
}
.resumen-estado-bloque .aviso.error > b { color: var(--azul-fuerte); }
.resumen-estado-bloque .aviso.error::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px;
  border-radius: 50%; background: #1b6fd6; vertical-align: 1px;
}
.resumen-estado-bloque .aviso + .aviso { margin-top: 6px; }
.resumen-estado-bloque .aviso .fila-form { margin-top: 8px; }
.resumen-estado-rotulo {
  display: flex; align-items: center; gap: 6px; margin: 0;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--suave);
}
.resumen-estado-rotulo .resumen-icono { width: 14px; height: 14px; color: var(--suave); }
.resumen-estado-ot { font-size: 15px; font-weight: 700; color: var(--azul); }
.resumen-estado-form { gap: 7px; }
.resumen-estado-form select, .resumen-estado-form input { width: 100%; background: #fff; }
.resumen-estado-form button { width: 100%; }
.resumen-specs {
  grid-column: 1; grid-row: 2; align-self: start; margin: 0; display: grid;
  grid-template-columns: max-content minmax(0, 1fr); gap: 10px 22px;
}
.resumen-specs dt { color: var(--suave); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.resumen-specs dd { margin: 0; }
.resumen-icono { width: 16px; height: 16px; flex: 0 0 auto; color: var(--azul-claro); }
.resumen-specs-parte { font-size: var(--t-sm); color: var(--suave); }
/* Recuadro celeste tenue, del mismo tamano que el del taller. */
.resumen-caracteristicas {
  grid-column: 2; grid-row: 1 / 3; box-sizing: border-box; margin: 0; padding: 12px 18px;
  list-style: none; display: flex; flex-direction: column; justify-content: center; gap: 12px;
  background: #f3f7fb; border-radius: var(--radio); color: var(--azul);
}
.resumen-caracteristicas li { display: flex; align-items: center; gap: 10px; }
.resumen-caract-icono {
  width: 18px; height: 18px; flex: 0 0 18px; color: var(--azul-claro);
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.resumen-caract-vacio { color: var(--suave); }
/* La tarjeta de video al pie del recuadro, con el logo del catalogo. */
.resumen-caracteristicas li.resumen-gpu { padding-top: 12px; border-top: 1px solid #e1ebf5; font-weight: 600; }
.resumen-gpu-logo { height: 14px; width: auto; flex: 0 0 auto; }
.resumen-gpu-logo[src$="intel_iris_xe.svg"] { height: 22px; }
/* Laptop chica: dos columnas (datos | caracteristicas arriba, estado |
   etiqueta abajo). Telefono: una sola. */
@media (max-width: 1150px) {
  .resumen-tres, .resumen-tres.sin-estado {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto;
    justify-content: stretch; column-gap: 24px;
  }
  .resumen-tres-titulo { grid-column: 1 / 3; grid-row: auto; }
  .resumen-specs { grid-column: 1; grid-row: auto; }
  .resumen-caracteristicas { grid-column: 2; grid-row: auto; }
  .resumen-estado { grid-column: 1; grid-row: auto; order: 3; }
  .resumen-tres .resumen-etiqueta, .resumen-tres.sin-estado .resumen-etiqueta { grid-column: 2; grid-row: auto; order: 4; }
}
@media (max-width: 700px) {
  .resumen-tres, .resumen-tres.sin-estado { grid-template-columns: minmax(0, 1fr); }
  .resumen-tres-titulo, .resumen-specs, .resumen-caracteristicas, .resumen-estado,
  .resumen-tres .resumen-etiqueta, .resumen-tres.sin-estado .resumen-etiqueta { grid-column: 1; }
}

/* Ubicacion fisica en la fila del Resumen Comercial (2026-09-24): el chip con
   icono de /equipos, del tamano de "Ultimo tecnico" y la carga. */
.resumen-ubicacion .ubi-chip { font-size: var(--t-lg); font-weight: 700; }
.resumen-ubicacion .ubi-chip svg { width: 18px; height: 18px; }
.resumen-ubicacion .ubi-custodio { font-size: var(--t-xs); color: var(--suave); }
/* Bateria en la lista de datos: la cifra del tamano del resto y la barra al
   lado, no debajo, para no hacer mas alta esa fila. */
.resumen-specs .bat { display: inline-flex; align-items: center; gap: 10px; }
.resumen-specs .bat-cifra { font-size: inherit; }
.resumen-specs .bat-pista { margin-top: 0; width: 80px; height: 5px; }

/* Tarjeta de la etiqueta en la ficha del equipo (2026-09-24, propuesta A):
   boton lleno de ancho completo y debajo "Sale en <impresora>" y "Vista
   previa". El selector va sin caja, como texto azul, porque es un ajuste
   del boton y no un dato del equipo. taller_orden.html sigue con las clases
   .barras-ficha-enlace* de arriba. */
.etiqueta-ficha { width: 248px; box-sizing: border-box; padding: 14px 16px 12px; }
.etiqueta-ficha-form { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
button.etiqueta-ficha-imprimir {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 8px 12px; font-size: var(--t-base);
}
/* margin 0: .barras-ficha svg lo centra con "margin: 0 auto", que dentro
   del boton flex se comia el espacio y separaba el icono del texto. */
.etiqueta-ficha-imprimir svg { width: 16px; height: 16px; flex: 0 0 auto; margin: 0; }
.etiqueta-ficha-pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px;
  font-size: var(--t-sm); color: var(--suave);
}
.etiqueta-sale-en { display: flex; align-items: center; gap: 2px; margin: 0; font-size: var(--t-sm); font-weight: 400; color: var(--suave); white-space: nowrap; }
.etiqueta-sale-en select.selector-impresion {
  width: auto; field-sizing: content; max-width: 130px; margin: 0; padding: 0 2px;
  border: none; background: transparent; box-shadow: none;
  font-size: var(--t-sm); font-weight: 600; color: var(--azul-claro); cursor: pointer;
}
.etiqueta-sale-en select.selector-impresion:focus { outline: 2px solid var(--azul-claro); outline-offset: 1px; }
/* Vista previa = el ojo solo, sin recuadro, a la derecha de "Sale en"
   (2026-09-24). El area de clic es mas grande que el dibujo. */
.etiqueta-vista-previa {
  margin-left: auto; margin-right: -6px; width: 32px; height: 28px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  color: var(--azul-claro); border-radius: var(--radio);
}
.etiqueta-vista-previa svg { width: 20px; height: 20px; margin: 0; display: block; }
.etiqueta-vista-previa:hover { color: var(--azul); background: var(--azul-tenue); }

/* ---------- Comentarios ---------- */

.comentario-nuevo { margin-bottom: 20px; }

ol.comentarios {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--borde);
}
ol.comentarios li { padding: 12px 0 13px; border-bottom: 1px solid var(--borde); }
ol.comentarios li:last-child { border-bottom: none; padding-bottom: 0; }

.comentario-cabecera {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; color: var(--suave); margin-bottom: 4px;
}
.comentario-fecha {
  font-family: var(--fuente-mono); font-variant-numeric: tabular-nums;
  font-weight: 700; color: var(--azul); font-size: 14px;
}
.comentario-hora { font-family: var(--fuente-mono); font-variant-numeric: tabular-nums; font-size: 12px; }
.comentario-autor {
  background: var(--superficie-2); border-radius: var(--radio-chico); padding: 1px 10px; font-size: 12px;
}
.comentario-etiqueta {
  color: var(--suave); font-size: 12px; font-style: italic;
}

/* Ultimo comentario asomado en la ficha del equipo */
.ultimo-comentario {
  border-left: 3px solid var(--borde); padding-left: 12px; margin-bottom: 14px;
}
.boton-comentarios { display: inline-block; }

/* Boton de comentarios en cada fila de la lista de equipos */
.boton-comentar {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 3px 11px;
  font-size: 13px; font-weight: 600; color: var(--azul);
  text-decoration: none; background: #fff;
}
.boton-comentar:hover { background: var(--azul-tenue); border-color: var(--azul-claro); }
.boton-comentar .cuenta {
  background: var(--azul); color: #fff; border-radius: var(--radio-chico);
  padding: 0 7px; font-size: 12px;
}

.comentario-borrar { margin-left: auto; }
.comentario-borrar button {
  background: none; border: none; color: var(--suave);
  font-size: 18px; line-height: 1; padding: 0 5px; border-radius: var(--radio);
}
.comentario-borrar button:hover { background: #fdecea; color: var(--rojo); }

/* El texto se muestra tal como se escribio, respetando los renglones. */
.comentario-texto { white-space: pre-wrap; }

.filtro-comentarios { align-items: flex-end; }
.filtro-comentarios .filtro-fecha {
  flex: 0 0 auto; font-size: 13px; color: var(--suave);
}
.filtro-comentarios .filtro-fecha input { margin-top: 4px; width: auto; }

.celda-comentario { white-space: pre-wrap; min-width: 260px; }
.sub-celda { color: var(--suave); font-size: 12px; }
.nowrap { white-space: nowrap; }

/* Descripcion de una linea de cotizacion: titulo + specs en renglones
   separados, tal como se guarda (ver descripcion_de_producto() en app.py). */
.descripcion-linea { white-space: pre-line; }

/* ---------- Roles y permisos ---------- */

.rol-chapa {
  background: rgba(255,255,255,.18); border-radius: var(--radio-chico);
  padding: 1px 9px; margin-left: 6px; font-size: 11.5px; font-weight: 600;
  color: #fff;
}

.celda-permisos { max-width: 520px; }
.permiso {
  display: inline-block; background: var(--superficie-2); border-radius: var(--radio);
  padding: 1px 7px; margin: 2px 3px 2px 0; font-size: 11.5px;
  font-family: var(--fuente-mono); color: var(--suave);
}
.permiso.todo { background: #e7f5ec; color: var(--verde); font-weight: 700; }

/* Nota explicativa dentro de un panel */
.nota-panel { color: var(--suave); font-size: 13px; margin: -4px 0 16px; }
/* Cuando la nota va SUELTA debajo de una tabla/panel, no dentro de uno
   (ej. la leyenda de Disponibles/En proceso/En garantia bajo la tabla de
   familias en /equipos, 2026-08-13): separacion extra arriba para que no
   se lea pegada al bloque de encima. */
.nota-panel-separada { margin-top: 18px; }

/* Corregir un comentario desde la propia tabla (solo administrador) */
.editar-comentario { display: flex; gap: 6px; align-items: flex-start; }
.editar-comentario textarea { min-width: 240px; font-size: 13px; }
.boton-mini { padding: 3px 10px; font-size: 12px; }
.solo-imprimir-bloque { display: none; }
@media print { .solo-imprimir-bloque { display: block; } }

.vacio { color: var(--suave); }
.solo-imprimir { display: none; }

/* ---------- Venta y garantia ---------- */

/* El boton de vender es verde a proposito: es la accion que cierra el trato
   y tiene que distinguirse de un vistazo del resto de botones claros. */
.boton-vender {
  display: inline-block;
  background: var(--verde); color: #fff; border: 1px solid var(--verde);
  border-radius: var(--radio); padding: 5px 14px; font-size: 13px;
  font-weight: 600; text-decoration: none; cursor: pointer;
}
.boton-vender:hover { background: #17632f; color: #fff; }

.boton-vender-grande {
  background: var(--verde); border-color: var(--verde);
  padding: 11px 26px; font-size: 16px; font-weight: 600;
}
.boton-vender-grande:hover { background: #17632f; }

.menu-venta { background: rgba(255,255,255,.18); font-weight: 600; }

/* Como esta la garantia de un equipo, de un vistazo */
/* Base unificada arriba; aqui solo los modificadores. */
.chapa-garantia.vigente { background: var(--verde-fondo); border-color: #cfe0d6; color: var(--verde); }
.chapa-garantia.proxima-a-vencer { background: var(--ambar-fondo); border-color: #ebdcc0; color: var(--ambar); }
.chapa-garantia.vencida { background: var(--rojo-fondo); border-color: #e6cac7; color: var(--rojo); }

/* Estado de una solicitud de repuestos */
/* ---------- Chapas de estado (rediseno 2026-08-14) ----------
   De pildora pastel a etiqueta rectangular con punto de color. El punto lo
   pinta currentColor, asi que NO hay que declararlo en cada modificador.
   Un selector agrupado cubre las cinco familias sin tocar plantillas. */
.chapa-solicitud, .chapa-ot, .chapa-garantia, .chapa-capital, .chapa-estado,
.chapa-ingreso, .chapa-meta, .chapa-prioridad, .chapa-reserva, .chapa-origen {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--radio-chico); padding: 2px 8px;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .01em;
  white-space: nowrap;
  border: 1px solid var(--borde); background: var(--superficie); color: var(--suave);
}
.chapa-solicitud::before, .chapa-ot::before, .chapa-garantia::before,
.chapa-capital::before, .chapa-estado::before, .chapa-ingreso::before,
.chapa-meta::before, .chapa-prioridad::before, .chapa-reserva::before,
.chapa-origen::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
/* Origen de trabajo en el Taller (2026-08-27, vista combinada de OT +
   Garantias): 4 colores distintos para distinguir de un vistazo Nuevo
   Ingreso / Bodega-Inventario / Devolucion de Garantia / Cliente-Taller.
   El azul queda fuera a proposito (--azul es solo accion primaria/enlaces/
   foco desde el rediseno "serio como un banco", 2026-08-14). */
.chapa-origen.naranja { background: var(--naranja-fondo); border-color: #e8cdb4; color: #a1490a; }
.chapa-origen.neutro { background: var(--superficie-2); border-color: var(--borde); color: var(--suave); }
.chapa-origen.ambar { background: var(--ambar-fondo); border-color: #ebdcc0; color: var(--ambar); }
.chapa-origen.verde { background: var(--verde-fondo); border-color: #cfe0d6; color: var(--verde); }
/* Reservas de Equipos (2026-08-26): mismos tres colores que ya usa
   .chapa-solicitud para disponible/finalizada/rechazada -- vigente en azul,
   convertida en gris neutral, cancelada o vencida en rojo. */
.chapa-reserva.disponible { background: var(--azul-fondo); border-color: #ccd9e6; color: var(--azul); }
.chapa-reserva.finalizada { background: var(--superficie-2); border-color: var(--borde); color: var(--suave); }
.chapa-reserva.rechazada { background: var(--rojo-fondo); border-color: #e6cac7; color: var(--rojo); }
/* Prioridad de la Sugerencia de Traslado a Tienda (2026-08-21): alta = vale
   la pena traerla (verde), media = aporta algo (ambar), baja = ya hay algo
   muy parecido en el destino (gris neutral -- no es un error, solo no hace
   falta). */
.chapa-prioridad.alta { background: var(--verde-fondo); border-color: #cfe0d6; color: var(--verde); }
.chapa-prioridad.media { background: var(--ambar-fondo); border-color: #ebdcc0; color: var(--ambar); }
.chapa-prioridad.baja { background: var(--superficie-2); border-color: var(--borde); color: var(--suave); }

/* Lista de unidades dentro del <details> de "N disponibles" (Sugerencia de
   Traslado a Tienda, 2026-08-21) -- una por linea, con su casilla. */
.opcion-unidad { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
/* Chapa en tamano grande, para la cabecera de un expediente. Antes se
   hacia con estilo suelto repetido en varias plantillas. */
.chapa-grande { font-size: var(--t-sm); padding: 4px 11px; }

.chapa-solicitud.pendiente { background: var(--ambar-fondo); border-color: #ebdcc0; color: var(--ambar); }
.chapa-solicitud.aprobada { background: var(--verde-fondo); border-color: #cfe0d6; color: var(--verde); }
.chapa-solicitud.rechazada { background: var(--rojo-fondo); border-color: #e6cac7; color: var(--rojo); }
/* Recepcion de traslados (2026-08-24): mismos colores que aprobada/rechazada,
   con el nombre de clase que usa ItemTraslado.estado ("aceptado"/"rechazado",
   distinto del genero de "aprobada"/"rechazada" de arriba). */
.chapa-solicitud.aceptado { background: var(--verde-fondo); border-color: #cfe0d6; color: var(--verde); }
.chapa-solicitud.rechazado { background: var(--rojo-fondo); border-color: #e6cac7; color: var(--rojo); }
.chapa-solicitud.en-compra { background: var(--naranja-fondo); border-color: #e8cdb4; color: #a1490a; }
.chapa-solicitud.disponible { background: var(--azul-fondo); border-color: #ccd9e6; color: var(--azul); }
.chapa-solicitud.entregada { background: var(--verde-fondo); border-color: #cfe0d6; color: var(--verde); }
.chapa-solicitud.finalizada { background: var(--superficie-2); border-color: var(--borde); color: var(--suave); }

/* Verificador de Familias (2026-08-17): completa / insuficiente / inexistente.
   Mismos tres colores y las mismas variables que las demas chapas -- verde lo
   que ya esta, ambar lo que falta completar, rojo lo que ni se ha empezado. */
.chapa-meta.completa { background: var(--verde-fondo); border-color: #cfe0d6; color: var(--verde); }
.chapa-meta.insuficiente { background: var(--ambar-fondo); border-color: #ebdcc0; color: var(--ambar); }
.chapa-meta.inexistente { background: var(--rojo-fondo); border-color: #e6cac7; color: var(--rojo); }

/* Estado de una orden de trabajo del Taller. Mismos colores que
   .chapa-solicitud, en una clase propia para que quede claro de que
   entidad es cada etiqueta. */
/* Base unificada arriba; aqui solo los modificadores. */
.chapa-ot.pendiente { background: var(--ambar-fondo); border-color: #ebdcc0; color: var(--ambar); }
.chapa-ot.aprobada { background: var(--verde-fondo); border-color: #cfe0d6; color: var(--verde); }
.chapa-ot.rechazada { background: var(--rojo-fondo); border-color: #e6cac7; color: var(--rojo); }
.chapa-ot.en-compra { background: var(--naranja-fondo); border-color: #e8cdb4; color: #a1490a; }
.chapa-ot.disponible { background: var(--azul-fondo); border-color: #ccd9e6; color: var(--azul); }
.chapa-ot.entregada { background: var(--verde-fondo); border-color: #cfe0d6; color: var(--verde); }

/* Semaforo de capital utilizado por socio (Control de Capital, 2026-08-10).
   Mismos 4 colores que ya usan .chapa-garantia/.chapa-solicitud, en una
   clase propia con sus 4 umbrales (verde/amarillo/naranja/rojo). Tecnomax
   no usa esta clase: no tiene limite. */
/* Base unificada arriba; aqui solo los 4 umbrales. Es un SEMAFORO: se
   desatura con el resto, pero nunca se le quita el color -- es la unica
   forma de leer el capital de un socio de un vistazo. */
.chapa-capital.verde { background: var(--verde-fondo); border-color: #cfe0d6; color: var(--verde); }
.chapa-capital.amarillo { background: var(--ambar-fondo); border-color: #ebdcc0; color: var(--ambar); }
.chapa-capital.naranja { background: var(--naranja-fondo); border-color: #e8cdb4; color: #a1490a; }
.chapa-capital.rojo { background: var(--rojo-fondo); border-color: #e6cac7; color: var(--rojo); }

/* Indicadores del dashboard de Solicitudes de Repuestos: version minimalista,
   sin iconos ni recuadros de color (a diferencia de .tarjeta del tablero de
   inicio, que se dejo intacta). Un punto de color es toda la señal. */
/* auto-fit y no repeat(6): el tablero de Cargas pone SIETE tarjetas y la
   septima caia sola en una segunda fila, descolgada (2026-08-16). Con
   auto-fit, seis siguen entrando en una fila y siete tambien. */
.tarjetas-repuestos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 22px;
}
.tarjeta-repuesto {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 14px 16px;
  transition: border-color .12s, background .12s;
}
/* Solo la que de verdad lleva a algun lado se ilumina: una tarjeta que se ve
   igual y no responde al clic es una promesa rota (2026-08-16). */
a.tarjeta-repuesto:hover { border-color: var(--azul-claro); background: var(--superficie-2); }
.tarjeta-repuesto-etiqueta {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .6px; color: var(--suave); margin-bottom: 10px;
}
.tarjeta-repuesto-punto {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-punto, var(--suave));
}
.tarjeta-repuesto-numero {
  font-size: 26px; font-weight: 700; color: var(--texto);
  letter-spacing: -.5px; line-height: 1;
}
/* La franja de cifras de Ventas (2026-09-18): una linea de aclaracion bajo
   el numero, y la unica tarjeta que se pinta -- la Diferencia cuando lo
   cobrado no calza con lo vendido. Sobrio en la decoracion, agresivo en la
   alerta: el color va con la palabra, nunca solo. */
.tarjeta-repuesto .nota-menor { margin-top: 8px; line-height: 1.35; }
/* Un monto no se parte ("$" en un renglon y el numero en otro, visto a
   375px): a dos columnas la cifra baja de tamano y se queda en una linea. */
.cifras-ventas .tarjeta-repuesto-numero { white-space: nowrap; }
@media (max-width: 640px) {
  .cifras-ventas .tarjeta-repuesto-numero { font-size: 21px; }
}
.tarjeta-repuesto.roja { background: var(--rojo-fondo); border-color: #e6cac7; }
.tarjeta-repuesto.roja .tarjeta-repuesto-etiqueta,
.tarjeta-repuesto.roja .tarjeta-repuesto-numero,
.tarjeta-repuesto.roja .nota-menor { color: var(--rojo); }
/* Dentro de un plegado, la nota y el "sin datos" necesitan aire respecto
   del <summary>, igual que ya lo tiene dl.datos. */
details.detalle > .nota-panel, details.detalle > .vacio { margin-top: 10px; }

@media (max-width: 1100px) {
  .tarjetas-repuestos { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .tarjetas-repuestos { grid-template-columns: repeat(2, 1fr); }
}

.texto-rojo { color: var(--rojo); }
.texto-verde { color: var(--verde); }

/* Grafico mensual de Gestion de Cargas: barras simples en CSS puro, sin
   depender de ninguna libreria externa (el sistema no usa ninguna). */
.grafico-barras-css {
  display: flex; align-items: flex-end; gap: 6px;
  height: 160px; padding-top: 20px;
}
.grafico-barras-css-columna {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  height: 100%; justify-content: flex-end;
}
.grafico-barras-css-valor { font-size: 11px; color: var(--suave); margin-bottom: 3px; }
.grafico-barras-css-barra {
  width: 100%; max-width: 26px; border-radius: var(--radio-chico) 4px 0 0;
  background: var(--azul-claro, var(--azul));
  height: var(--altura, 0%); min-height: 2px;
  transition: height .2s;
}
.grafico-barras-css-etiqueta {
  font-size: 10px; color: var(--suave); margin-top: 6px; white-space: nowrap;
}

/* Aviso de tracking duplicado, debajo del campo (Gestion de Cargas). */
.aviso-tracking { padding: 4px 8px; margin: 4px 0 0; font-size: 11.5px; }

/* Una venta anulada sigue en la lista, pero apagada */
.fila-anulada td { color: var(--suave); text-decoration: line-through; }
.fila-anulada td:last-child { text-decoration: none; }

.precio-final { font-size: 17px; margin: 4px 0 0; }
.precio-final b { color: var(--azul); font-size: 22px; }

/* Pantalla de venta en dos columnas (propuesta A, 2026-09-22): campos a la
   izquierda; resumen con el equipo, el cargador, el total y Confirmar a la
   derecha, fijo al bajar. Bajo 1000px vuelve a una sola columna. */
.venta-dos-col { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.venta-col-resumen { position: sticky; top: 12px; }
/* Resumen sin borde, fondo blanco (2026-09-22): se separa del gris solo por el color. */
.venta-resumen { border-color: transparent; }
.venta-resumen dl.datos { grid-template-columns: auto 1fr; gap: 6px 12px; font-size: var(--t-base); }
.venta-resumen-sub { font-size: var(--t-base); font-weight: 600; margin: 14px 0 4px; padding-top: 12px; border-top: 1px solid var(--borde); }
.venta-cargador-nombre { margin: 2px 0 6px; color: var(--azul); }
.venta-resumen .precio-final { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borde); text-align: right; }
.venta-resumen .boton-vender-grande { width: 100%; margin-top: 12px; }
.venta-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 14px; align-items: start; }
@media (max-width: 1000px) {
  .venta-dos-col { grid-template-columns: 1fr; }
  .venta-col-resumen { position: static; }
}

/* En el mostrador el precio se lee, no se escribe: se muestra como un dato
   fijo y no como una casilla, para que nadie intente cambiarlo ahi. */
.precio-fijo {
  margin-top: 5px;
  padding: 8px 12px;
  background: var(--azul-tenue);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-size: 20px;
  font-weight: 700;
  color: var(--azul);
  font-variant-numeric: tabular-nums;
}

.sub-titulo {
  font-size: 14px; color: var(--suave); font-weight: 600;
  margin: 18px 0 8px; padding-top: 12px; border-top: 1px solid var(--borde);
}

/* Checklist de accesorios que deja el cliente */
.checklist { display: flex; flex-direction: column; gap: 8px; }
.checklist-fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.checklist-casilla {
  display: flex; align-items: center; gap: 7px;
  min-width: 150px; font-size: 14px; cursor: pointer;
}
.checklist-casilla input { width: auto; margin: 0; }
.checklist-nota { flex: 1; min-width: 180px; font-size: 13px; }

/* Chip con icono para cada accesorio (2026-08-11): mismo lenguaje visual
   que ".chip-especial" de la ficha tecnica (icono + pastilla que se
   resalta al marcarla), pero definido aqui porque estas pantallas
   (garantia, taller) no cargan ficha.css. */
.chip-accesorio {
  display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
  border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 7px 14px 7px 10px;
  min-width: 150px; font-size: 14px; color: var(--texto);
  transition: background .12s, border-color .12s, color .12s;
}
.chip-accesorio input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip-accesorio svg { width: 20px; height: 20px; flex: 0 0 auto; }
.chip-accesorio:hover { border-color: var(--azul-claro); }
.chip-accesorio.elegida { background: #e6f0fb; border-color: #b9d3f0; color: var(--azul); }
.chip-accesorio.deshabilitado { cursor: default; opacity: .75; }
.chip-accesorio input:focus-visible ~ svg { outline: 2px solid var(--azul-claro); outline-offset: 2px; }

/* ---------- Tablero de inicio ---------- */

/* .miga se definia aqui por segunda vez y, por venir despues, le ganaba a
   la de arriba. Eliminada el 2026-08-14: la definicion unica esta con los
   titulos, cerca de h1/h2, que es donde se busca. */

.tarjetas {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; margin-bottom: 22px;
}
/* Tarjeta de resumen del tablero: mas sobria. Sin sombra grande, sin
   levantarse al pasar el mouse y sin la barra de color a la izquierda -- el
   dato manda, no el adorno. */
.tarjeta {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 15px 17px; position: relative; overflow: hidden;
  box-shadow: var(--sombra);
  transition: border-color .12s;
}
.tarjeta:hover { border-color: var(--azul-claro); }
.tarjeta-alto {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.tarjeta-etiqueta {
  font-size: 12.5px; color: var(--suave); font-weight: 600;
  text-transform: uppercase; letter-spacing: .7px;
}
.tarjeta-icono {
  width: 42px; height: 42px; border-radius: var(--radio-grande); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  background: var(--fondo-icono, #e8f0f8);
}
.tarjeta-numero {
  font-size: var(--t-dato); font-weight: 600; letter-spacing: -.02em;
  color: var(--azul-fuerte); margin: 6px 0 2px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tarjeta-pie { font-size: 12.5px; color: var(--suave); }
.delta { font-weight: 700; padding: 1px 7px; border-radius: var(--radio-chico); font-size: 11.5px; }
.delta.sube { background: #e8f5ec; color: var(--verde); }
.delta.avisa { background: #fdf3e3; color: #a1600a; }

.filas-inicio { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Las dos columnas de la hoja "Hoy" del tablero (2026-09-21): 7/5 y no 1/1
   como .filas-inicio, porque a la izquierda van tablas (fichas por aprobar,
   la lista doble de Pendientes) y a la derecha listas cortas. Sin gap: cada
   panel ya trae su margen inferior de 18px, igual que los includes de avisos
   (_tareas_panel, _precios_panel...), asi que un gap aqui lo duplicaria. */
.inicio-columnas {
  display: grid; grid-template-columns: 7fr 5fr; column-gap: 16px;
  align-items: start;
}
.inicio-columnas > div { min-width: 0; }
@media (max-width: 1000px) {
  .inicio-columnas { grid-template-columns: 1fr; }
}

.lista-avisos { display: flex; flex-direction: column; gap: 2px; }

/* Panel que ocupa las dos columnas del tablero (2026-09-03). Lo pidio el panel
   de Pendientes: junta avisos de seis modulos distintos y en media pantalla
   cada texto se parte en tres lineas, mientras al lado queda la mitad de la
   pantalla vacia. Es una clase aparte y no un cambio a ".panel" porque solo
   este panel la necesita. */
.filas-inicio .panel.ancho-total { grid-column: 1 / -1; }

/* La lista en dos columnas. Va con la clase "doble" y no en ".lista-avisos"
   suelto porque esa clase la usan tambien Garantias por vencer y el tablero
   del taller, donde una sola columna esta bien.

   Es "columns" (columnas de texto) y no un grid a proposito. Con grid los
   avisos se acomodan de izquierda a derecha, y como uno de ellos ocupa seis
   lineas y los otros dos, quedaba un hueco grande en la segunda fila. Con
   columns el navegador reparte para que las dos columnas queden parejas, y de
   paso se leen hacia abajo primero -- que es como se lee una lista de
   pendientes ordenada por urgencia. */
.lista-avisos.doble {
  display: block;
  columns: 2;
  column-gap: 24px;
}
/* Sin esto un aviso se puede partir a la mitad y seguir en la otra columna. */
.lista-avisos.doble .item-aviso { break-inside: avoid; }

/* En pantalla angosta vuelve a una sola columna: dos columnas de menos de
   ~380px parten cada titulo en dos lineas y se lee peor que en una. */
@media (max-width: 820px) {
  .lista-avisos.doble { columns: 1; }
}

/* ---------- Avisos sin recuadro de color (2026-09-03) ----------
   El recuadro ambar/rojo detras del numero se saca y el numero queda en gris.
   Con diez avisos juntos, diez recuadros de color hacian que ninguno
   resaltara; ahora lo unico con color en la fila es el icono, y se ve de
   entrada cual es cual.
   Va con la clase "limpia" porque el panel de Garantias por vencer usa la
   misma ".lista-avisos" y ahi el recuadro sigue teniendo sentido: son dias que
   faltan, y el rojo es el aviso de que se vence. */
.lista-avisos.limpia .item-aviso {
  align-items: flex-start;   /* el numero se alinea con la primera linea del
                                titulo, no con el centro de un texto de tres */
  padding-top: 9px;
}
.lista-avisos.limpia .dias {
  background: none; height: auto; width: 54px; padding-top: 1px;
}
/* Un gris mas oscuro que --suave para el numero y uno mas claro para su
   etiqueta: sin el recuadro, lo que separa "88" de "EQUIPOS" es el contraste.
   Van escritos y no como variable porque son los dos unicos lugares del
   sistema que los usan. */
.lista-avisos.limpia .dias b { color: #3f4854; font-size: 19px; }
.lista-avisos.limpia .dias span { color: #97a1ad; }

/* El icono del aviso. El color NO se decide en la plantilla: sale de la clase
   ".urgente" que el aviso ya traia, con el combinador de hermanos -- el bloque
   del numero viene antes que el texto en el HTML. Asi el dia que un aviso
   cambie de urgente a normal, cambia solo. */
.ico-aviso {
  width: 17px; height: 17px; flex-shrink: 0;
  vertical-align: -3px; margin-right: 7px;
  color: var(--ambar);
}
.lista-avisos .dias.urgente ~ .item-datos .ico-aviso { color: var(--rojo); }

/* El detalle de cada aviso, a UNA sola linea (2026-09-03).
   Es lo que hace que el panel quede parejo: con diez avisos de dos modulos
   distintos, uno con doce nombres de cargador y otro con dos palabras, las
   filas quedaban de alturas distintas y las dos columnas terminaban
   descuadradas. Con una linea fija, toda fila mide lo mismo.
   Lo que no entra se corta con puntos suspensivos, no se pierde: el aviso
   entero es un enlace a la pantalla que tiene el detalle completo.
   El "> span" es a proposito: adentro del detalle hay <span class="mono"> con
   el tracking, y ese no se debe recortar por su cuenta. */
.lista-avisos.limpia .item-datos > span {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.item-aviso {
  display: flex; align-items: center; gap: 13px; padding: 11px;
  border-radius: var(--radio-grande); text-decoration: none; color: inherit;
}
.item-aviso:hover { background: var(--fondo); }
.dias {
  width: 50px; height: 48px; border-radius: var(--radio-grande); flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; line-height: 1;
  background: #fdf3e3; color: #a1600a;
}
.dias b { font-size: 17px; font-weight: 700; }
.dias span {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; margin-top: 2px;
}
.dias.urgente { background: #fdecea; color: var(--rojo); }
.item-datos { min-width: 0; }
.item-datos b { display: block; font-size: 14px; font-weight: 600; }
.item-datos span { font-size: 12.5px; color: var(--suave); }

/* ---------- Inventario agrupado por familias ---------- */

.barra-vista {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 0 0 14px;
}
.conmutador {
  display: inline-flex; background: #fff; border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 2px; gap: 2px;
}
.conmutador a {
  padding: 5px 12px; border-radius: var(--radio); font-size: 13px; font-weight: 600;
  color: var(--suave); text-decoration: none;
}
.conmutador a:hover { background: var(--fondo); color: var(--azul); }
.conmutador a.activa { background: var(--azul); color: #fff; font-weight: 600; }

/* El conmutador de los dos mundos del inventario (Laptops / Otro
   Inventario, 2026-08-13). Reutiliza .conmutador entero; solo se le da aire
   propio porque va suelto arriba de la pantalla y no dentro de
   .barra-vista. */
.conmutador-mundos { margin: 0 0 14px; }

.tabla-familias { width: 100%; border-collapse: collapse; }
.tabla-familias > thead th { white-space: nowrap; }
.tabla-familias .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Grupos de marca (2026-08-13) ----------
   Un nivel por encima de las familias. Cada grupo es un <tbody> con una
   sola fila de cabecera; sus familias son los <tbody class="familia"> que
   vienen despues, marcados con el mismo data-marca (no se pueden anidar
   <tbody>, ver el JS de lista_agrupada.html). */
.fila-marca { cursor: pointer; }
.fila-marca > td {
  background: #eaf0f7; border-top: 1px solid var(--borde);
  padding: 10px 14px; font-size: 14px;
}
.fila-marca:hover > td { background: #e1eaf4; }
.nombre-marca {
  color: var(--azul); text-transform: uppercase; letter-spacing: .6px;
}
/* Estilo 2 "nombre propio" (2026-09-30): la marca como se escribe, en
   negrita y en tinta, sin mayusculas forzadas ni espaciado. */
.eq-tabla .nombre-marca { color: var(--texto); text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 700; }
/* Codigo de familia (2026-09-30, opcion C): Public Sans con numeros
   naturales (no de ancho fijo), sin separacion extra, semi negrita y un poco
   mas chico, en azul. Asi no parece otra letra ni compite con la marca. */
.eq-tabla .codigo-familia { font-size: 14px; font-weight: 600; letter-spacing: 0; font-variant-numeric: normal; color: var(--azul); }
.cuenta-marca { color: var(--suave); font-size: 12.5px; margin-left: 10px; }

/* Logo de la marca en vez del nombre (propuesta B, 2026-09-22): PNG ya
   pintado en el azul del sistema, sin color de la marca. Mismo alto para
   los tres; Lenovo es apaisado y sale mas ancho. */
.logo-marca { height: 24px; width: auto; vertical-align: middle; }
.logo-marca-lenovo { height: 22px; }

/* Chevron fino (propuesta A, 2026-09-22): dos bordes de un cuadrito
   girado. Apunta a la derecha cerrado y hacia abajo abierto. Se dibuja con
   CSS, sin fuente de iconos (el sistema corre sin CDN). */
.flecha-marca {
  display: inline-block; width: 7px; height: 7px; margin: 0 13px 2px 3px;
  vertical-align: middle;
  border-right: 2px solid var(--azul); border-bottom: 2px solid var(--azul);
  transform: rotate(-45deg); transition: transform .15s;
}
.grupo-marca.abierta .flecha-marca { transform: rotate(45deg); }

/* Familia escondida porque su grupo de marca esta cerrado. Es distinto de
   que la familia este cerrada: eso solo esconde sus equipos. */
.familia.marca-cerrada { display: none; }

/* Cada familia es un <tbody>. Abierta o cerrada se decide con la clase. */
.fila-familia { cursor: pointer; }
.fila-familia:hover > td { background: var(--azul-tenue); }
.fila-familia > td {
  border-top: 1px solid var(--borde);
  padding-top: 9px; padding-bottom: 9px;
}
.familia.abierta .fila-familia > td { background: var(--azul-tenue); }

/* Chevron fino, igual al de los grupos de marca (2026-09-22) pero mas
   chico y en azul claro: el nivel de abajo se nota mas liviano. Apunta a la
   derecha cerrado y hacia abajo abierto. CSS puro, sin fuente ni imagen. */
.flecha-familia {
  display: inline-block; width: 6px; height: 6px; margin: 0 11px 2px 2px;
  vertical-align: middle;
  border-right: 2px solid var(--azul-claro); border-bottom: 2px solid var(--azul-claro);
  transform: rotate(-45deg); transition: transform .15s;
}
.familia.abierta .flecha-familia { transform: rotate(45deg); }

.codigo-familia { font-size: 15px; color: var(--azul); letter-spacing: .5px; }

/* Alineacion unica de los botones de accion (2026-08-13, pedido del usuario):
   antes .acciones-familia venia justo despues del texto del codigo en el
   flujo normal, asi que familias con codigo mas largo (ej. "1507-LB" vs
   "1308") empujaban sus botones mas a la derecha que las demas filas. Ahora
   el bloque codigo+flecha tiene ancho fijo y la celda es flex, asi los
   botones siempre arrancan en la misma columna sin importar el largo del
   codigo. */
.celda-familia { display: flex; align-items: center; }
.codigo-familia-bloque { display: inline-block; width: 92px; flex: 0 0 auto; }

/* Menu de tres puntos de cada familia (2026-08-20): reemplaza los 6
   botones apilados (Editar/Precios/Imprimir/Accion/Existencias/Renombrar),
   que estiraban la fila a lo alto sin necesidad -- ver
   alternarMenuFamilia() en base.html. */
.menu-familia { position: relative; display: inline-block; vertical-align: middle; margin-left: 10px; }
.menu-familia-boton {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--borde); border-radius: var(--radio); background: #fff;
  color: var(--suave); font-size: 16px; line-height: 1; cursor: pointer;
}
.menu-familia-boton:hover { background: #f2f6fa; color: var(--texto); }
.menu-familia-lista {
  position: absolute; top: calc(100% + 4px); right: 0; min-width: 150px;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-grande);
  box-shadow: var(--sombra-flotante); padding: 6px; display: none; z-index: 5;
}
.menu-familia.abierta .menu-familia-lista { display: block; }
.menu-familia-lista a {
  display: block; padding: 8px 10px; color: var(--texto); text-decoration: none;
  font-size: var(--t-base); border-radius: var(--radio); white-space: nowrap;
}
.menu-familia-lista a:hover { background: #e8f0f8; color: var(--azul); }
/* El item "Imprimir" es un <form>/<button> (manda un POST que imprime
   directo, no un enlace de descarga) pero se ve identico a los demas. */
.menu-familia-lista form { margin: 0; }
.menu-familia-lista .boton-menu-familia {
  display: block; width: 100%; text-align: left; padding: 8px 10px;
  color: var(--texto); font-size: var(--t-base); font-family: inherit;
  border: none; background: none; border-radius: var(--radio); cursor: pointer;
}
.menu-familia-lista .boton-menu-familia:hover { background: #e8f0f8; color: var(--azul); }

/* Revision de precios por familia (2026-09-12): el indicador junto al codigo
   es a la vez la accion (un POST que cambia solo la marca). Es una chapa de
   estado, no un boton primario: gris para "pendiente" (todavia no se sabe
   nada, no es una alerta) y verde para "revisado". El color nunca va solo:
   siempre lleva la palabra. */
.form-revision-precio { display: inline-block; margin: 0 0 0 10px; }
.revision-precio {
  font: inherit; font-size: var(--t-xs); font-weight: 600; line-height: 1;
  padding: 4px 8px; border-radius: var(--radio-chico); cursor: pointer;
  white-space: nowrap; border: 1px solid var(--borde);
  background: var(--superficie); color: var(--suave);
}
.revision-precio.pendiente:hover { border-color: var(--borde-fuerte); color: var(--texto); }
.revision-precio.revisada { color: var(--verde); background: var(--verde-fondo); border-color: #cfe0d6; }
.revision-precio.revisada:hover { border-color: var(--verde); }
dd .form-revision-precio { margin-left: 0; }
dd .revision-precio { font-size: var(--t-sm); padding: 5px 10px; margin-right: 8px; }

/* Acciones de la familia en /equipos (2026-09-26): franja de icono +
   nombre, sin recuadro, al abrir la familia. Reemplaza al menu de tres
   puntos (.menu-familia, sin uso desde hoy), que .tabla-scroll recortaba.
   El boton de Imprimir es un <form>/<button> y se ve igual que los enlaces:
   por eso el selector del boton lleva la clase, para ganarle al
   button:hover azul de todo el sistema. */
.acciones-familia {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px;
  padding: 8px 12px 8px 26px; border-bottom: 1px solid var(--borde);
}
.acciones-familia-titulo {
  font-size: var(--t-sm); font-weight: 600; color: var(--suave); margin-right: 6px;
}
.acciones-familia form { margin: 0; display: inline-flex; }
.acciones-familia a,
.acciones-familia button.accion-familia-boton {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px;
  border: 0; background: none; border-radius: var(--radio);
  color: var(--azul); font-family: inherit; font-size: var(--t-base);
  font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
}
.acciones-familia a:hover, .acciones-familia a:focus-visible,
.acciones-familia button.accion-familia-boton:hover,
.acciones-familia button.accion-familia-boton:focus-visible {
  background: var(--azul-tenue); color: var(--azul); border: 0;
}
.acciones-familia svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Propuesta C (2026-10-01, pedido "darle mas protagonismo"): el panel es el
   encabezado de la familia abierta. Nombre del modelo a la izquierda, acciones
   a la derecha y la regla azul de 2px del diseno D, sobre blanco para
   separarse de la tabla gris de abajo. */
.acciones-familia.af-c {
  align-items: flex-end; justify-content: space-between; gap: 10px 24px;
  padding: 14px 12px 10px 26px; background: var(--superficie);
  border-bottom: 2px solid var(--azul);
}
.af-c .acciones-familia-titulo {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  margin-right: 0; font-size: inherit; font-weight: 400; color: var(--texto);
}
.af-c .af-ceja {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--suave);
}
.af-c .af-nombre { font-size: var(--t-lg); font-weight: 700; color: var(--texto); }
.af-c .af-resumen { font-size: var(--t-sm); color: var(--suave); }
.af-c .af-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }

/* Los equipos de la familia viven en una fila que ocupa todo el ancho. */
.fila-equipos > td { padding: 0; background: var(--superficie-2); }
.familia:not(.abierta) .fila-equipos { display: none; }

.tabla-equipos { width: 100%; border-collapse: collapse; }
.tabla-equipos th {
  background: #f2f6fa; color: var(--suave); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .7px; padding: 7px 12px;
  border-bottom: 1px solid var(--borde);
}
.tabla-equipos th:first-child, .tabla-equipos td:first-child { padding-left: 34px; }
.tabla-equipos td {
  padding: 9px 12px; font-size: 13.5px; border-bottom: 1px solid var(--superficie-2);
}
.tabla-equipos tr:last-child td { border-bottom: none; }
.tabla-equipos tbody tr { cursor: pointer; }
.tabla-equipos tbody tr:hover td { background: var(--azul-tenue); }
/* El equipo cuyo nombre coincide con lo buscado, marcado para encontrarlo
   de un vistazo cuando la familia trae muchos. */
.tabla-equipos tr.resaltado td { background: #fff8e1; }
.tabla-equipos tr.resaltado td:first-child { box-shadow: inset 4px 0 0 #e0a800; }
/* La ultima laptop agregada (2026-08-13): recordatorio personal, se apaga
   solo -- ver mostrar_marca_reciente() en app.py. Selector sin
   ".tabla-equipos" porque "Lista completa" (lista.html) usa una tabla sin
   esa clase. */
tr.reciente td { background: #e8f2fb; }
tr.reciente td:first-child { box-shadow: inset 4px 0 0 var(--azul-claro); }

/* La fila a la que se llega por ancla (#venta-general-N desde la cotizacion,
   2026-09-09) -- mismo tratamiento visual que tr.reciente, generico para
   cualquier tabla del sistema que algun dia enlace a una fila puntual. */
tr:target td { background: #e8f2fb; }
tr:target td:first-child { box-shadow: inset 4px 0 0 var(--azul-claro); }

@media print {
  .familia .fila-equipos { display: table-row !important; }
  .barra-vista { display: none !important; }
  /* Al imprimir sale el inventario COMPLETO, sin importar que grupos de
     marca quedaran cerrados en pantalla (2026-08-13) -- mismo criterio que
     la linea de arriba con las familias. */
  .familia.marca-cerrada { display: table-row-group !important; }
}

/* ---------- Centro de Captura ---------- */

.puertas {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-bottom: 22px;
}
.puerta {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-grande);
  padding: 22px; box-shadow: none;
  transition: transform .12s, box-shadow .12s;
}
.puerta[href$="#scanner"] { cursor: default; opacity: .92; }
.puerta:not([href$="#scanner"]):hover {
  box-shadow: none;
}
.puerta-icono {
  width: 52px; height: 52px; border-radius: var(--radio-grande);
  display: flex; align-items: center; justify-content: center; font-size: 25px;
  background: var(--fondo-icono, #e8f0f8); margin-bottom: 14px;
}
.puerta h2 { font-size: 17px; margin: 0 0 8px; }
.puerta p { font-size: 13.5px; color: var(--texto); margin: 0 0 8px; }
.puerta .puerta-nota { color: var(--suave); font-size: 12.5px; }
.puerta-cuenta {
  display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600;
  color: var(--suave); background: var(--fondo); border-radius: var(--radio-chico);
  padding: 3px 11px;
}

/* Elegir entre dar de alta uno o varios equipos */
.modos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modo {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: 14px 16px;
  background: #fff; transition: border-color .12s, background .12s;
}
.modo:hover { border-color: var(--azul-claro); }
.modo input { width: auto; margin: 2px 0 0; flex-shrink: 0; }
.modo span { font-size: 13px; color: var(--suave); line-height: 1.45; }
.modo span b {
  display: block; font-size: 14.5px; color: var(--texto);
  font-weight: 600; margin-bottom: 3px;
}
.modo:has(input:checked) { border-color: var(--azul); background: #f4f8fc; }

.tres-columnas {
  display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 14px; width: 100%;
}
.previo { font-size: 13.5px; color: var(--suave); margin: 12px 0 0; }
.previo b { color: var(--azul); font-family: var(--fuente-mono); font-variant-numeric: tabular-nums; }

.ids-nuevos {
  list-style: none; padding: 0; margin: 0 0 14px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.ids-nuevos li {
  background: #e8f0f8; color: var(--azul); border-radius: var(--radio);
  padding: 6px 13px; font-weight: 700; font-size: 14px;
}

@media (max-width: 700px) {
  .modos { grid-template-columns: 1fr; }
  .tres-columnas { grid-template-columns: 1fr; }
}

ol.pasos, ol.pasos-asistente { margin: 0; }
ol.pasos { padding-left: 20px; color: var(--texto); font-size: 14px; }
ol.pasos li { margin-bottom: 5px; }

/* Los tres pasos del asistente de importacion */
.pasos-asistente {
  display: flex; gap: 8px; flex-wrap: wrap;
  list-style: none; padding: 0; margin: 0 0 20px;
}
.pasos-asistente li {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 8px 16px; font-size: 13.5px; color: var(--suave);
}
.pasos-asistente li b {
  width: 21px; height: 21px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--fondo); color: var(--suave); font-size: 12px;
}
.pasos-asistente li.activo {
  border-color: var(--azul); color: var(--azul); font-weight: 600;
}
.pasos-asistente li.activo b { background: var(--azul); color: #fff; }
.pasos-asistente li.hecho { color: var(--verde); border-color: #bcdfc9; }
.pasos-asistente li.hecho b { background: var(--verde); color: #fff; }

/* Relacionar columna del archivo con campo del sistema */
.mapeo { display: flex; flex-direction: column; }
.mapeo-fila {
  display: grid; grid-template-columns: 1fr 280px; gap: 14px;
  align-items: center; padding: 11px 0; border-bottom: 1px solid var(--borde);
}
.mapeo-fila:last-child { border-bottom: none; }
.mapeo-fila label b { display: block; font-weight: 600; font-size: 14.5px; }
.mapeo-donde {
  font-size: 11.5px; color: var(--suave); text-transform: uppercase;
  letter-spacing: .6px;
}
.mapeo-fila select { width: 100%; }

@media (max-width: 1000px) {
  .puertas { grid-template-columns: 1fr; }
  .mapeo-fila { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- Configuracion ---------- */

.ajustes { display: flex; flex-direction: column; }
.ajuste {
  display: grid; grid-template-columns: 1fr 210px; gap: 6px 20px;
  padding: 16px 0; border-bottom: 1px solid var(--borde); align-items: start;
}
.ajuste:first-child { padding-top: 0; }
.ajuste:last-child { border-bottom: none; }
.ajuste label { font-size: 15px; }
.ajuste label b { display: block; font-weight: 600; }
.ajuste-ayuda {
  display: block; font-size: 13px; color: var(--suave); margin-top: 3px;
  max-width: 62ch;
}
.ajuste-campo { grid-row: span 2; }
.ajuste-campo input { width: 100%; font-size: 17px; font-weight: 600; }
.ajuste-defecto {
  display: block; font-size: 11.5px; color: var(--suave); margin-top: 5px;
}
.ajuste-rastro { font-size: 12px; color: var(--suave); }

@media (max-width: 1100px) {
  .tarjetas { grid-template-columns: repeat(2, 1fr); }
  .filas-inicio { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tarjetas { grid-template-columns: 1fr; }
  .ajuste { grid-template-columns: 1fr; }
  .ajuste-campo { grid-row: auto; }
}

/* ---------- Pantalla de entrada ---------- */

/* Rediseno del login (2026-09-27, propuesta C3 de nueve, pedida el mismo dia
   como PANEL FLOTANTE): una tarjeta centrada sobre el fondo azul de la marca.
   Adentro, un panel angosto en azul tinta a la izquierda (logo, nombre del
   sistema y la lista de modulos) y el formulario a la derecha, con los campos
   subrayados en vez de encajonados. Los colores son los de siempre:
   --azul para el fondo, --azul-fuerte para el panel, --azul para la accion,
   #7fb0de (azul accion sobre oscuro, Manual de Marca) para los acentos del
   panel y #bdd4e8 para su texto secundario. */
.pantalla-login {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; margin: 0; padding: 32px; box-sizing: border-box;
  background: linear-gradient(135deg, var(--azul) 0%, #163e63 100%);
  position: relative;
}
/* Dos formas suaves de fondo, como en la referencia que mando el usuario.
   Van "fixed" y no "absolute" a proposito: una caja absoluta que se sale
   del borde agranda el area de scroll (medido: 1701px de ancho en una
   pantalla de 1440), y con "overflow: hidden" en el body se perderia el
   scroll en una pantalla baja. Lo fijo no cuenta para el scroll. */
.pantalla-login::before, .pantalla-login::after {
  content: ""; position: fixed; width: 560px; height: 420px;
  border-radius: 48px; background: rgba(255,255,255,.05);
  transform: rotate(-24deg); pointer-events: none;
}
.pantalla-login::before { left: -180px; bottom: -120px; }
.pantalla-login::after { right: -200px; top: -160px; }
.login-caja {
  position: relative; width: 100%; max-width: 1040px; min-height: 620px;
  display: flex; background: var(--superficie); border-radius: 12px;
  overflow: hidden; box-shadow: 0 24px 60px rgba(11,35,56,.45);
}
.login-panel {
  flex: 0 0 400px; box-sizing: border-box; padding: 40px 36px 30px;
  background: linear-gradient(160deg, var(--azul) 0%, var(--azul-fuerte) 100%);
  color: #fff; display: flex; flex-direction: column;
}
.login-panel img { width: 220px; height: auto; }
.login-panel-titulo {
  margin-top: 36px; font-size: 28px; font-weight: 700; line-height: 1.1;
  letter-spacing: -.01em;
}
.login-panel-lema { margin-top: 8px; font-size: var(--t-md); color: #bdd4e8; }
.login-panel-rotulo {
  margin-top: 34px; font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #7fb0de;
}
.login-modulos {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.login-modulos li { display: flex; gap: 12px; align-items: flex-start; }
.login-modulos strong { display: block; font-size: var(--t-md); font-weight: 600; color: #fff; }
.login-modulos small { display: block; margin-top: 2px; font-size: var(--t-sm); line-height: 1.4; color: #bdd4e8; }
.login-modulo-icono {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: var(--radio);
  background: rgba(127,176,222,.14); border: 1px solid rgba(127,176,222,.35);
  display: flex; align-items: center; justify-content: center; color: #7fb0de;
}
.login-modulo-icono svg { width: 18px; height: 18px; }
.login-panel-pie { margin-top: auto; padding-top: 24px; font-size: var(--t-sm); color: #7fb0de; }

.login-zona {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  padding: 40px 48px; box-sizing: border-box;
}
.login-form {
  width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 0;
}
.login-sobre {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--suave);
}
.login-form h1 { margin: 8px 0 0; font-size: 34px; font-weight: 700; color: var(--texto); letter-spacing: -.01em; }
.login-ayuda { margin: 6px 0 0; font-size: var(--t-md); color: var(--suave); }
.login-form .aviso { margin: 22px 0 0; }
.login-form label {
  display: flex; flex-direction: column; gap: 2px; margin-top: 26px;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--suave);
}
.login-form input {
  border: none; border-bottom: 2px solid var(--borde-fuerte); border-radius: 0;
  background: transparent; padding: 10px 0; font-size: 17px; color: var(--texto);
  text-transform: none; letter-spacing: 0;
}
.login-form input:focus { outline: none; border-bottom-color: var(--azul); }
.login-form .campo-clave input { padding-right: 34px; }
.login-form .campo-clave .btn-ojo { right: 0; color: var(--azul); }
.login-form button[type="submit"] {
  margin-top: 28px; padding: 14px 16px; font-size: var(--t-lg); font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.login-form button[type="submit"] svg { width: 20px; height: 20px; }
.login-seguro {
  margin-top: 30px; display: flex; align-items: center; gap: 8px;
  font-size: var(--t-base); color: var(--suave);
}
.login-seguro svg { width: 18px; height: 18px; color: var(--azul); flex: 0 0 auto; }

/* Telefono y pantallas angostas: la tarjeta ocupa toda la pantalla, el panel
   pasa a ser una franja arriba sin la lista de modulos (lo que importa ahi
   es entrar) y el formulario ocupa todo el ancho debajo. */
@media (max-width: 900px) {
  .pantalla-login { padding: 0; align-items: stretch; }
  .pantalla-login::before, .pantalla-login::after { display: none; }
  .login-caja { flex-direction: column; max-width: none; min-height: 100vh; border-radius: 0; box-shadow: none; }
  .login-panel { flex: 0 0 auto; padding: 28px 24px 24px; }
  .login-panel img { width: 180px; }
  .login-panel-titulo { margin-top: 18px; font-size: 24px; }
  .login-panel-rotulo, .login-modulos, .login-panel-pie { display: none; }
  .login-zona { align-items: flex-start; padding: 28px 24px 40px; }
  .login-form h1 { font-size: 28px; }
}

/* ---------- Ubicaciones y traslados ---------- */

.barra-traslado {
  position: sticky; bottom: 0; margin-top: 14px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-grande);
  padding: 12px 16px; box-shadow: var(--sombra-flotante);
}
.barra-traslado label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--suave); }
.barra-traslado select { width: auto; }
.barra-traslado #cuenta-traslado { font-weight: 600; color: var(--azul); }

/* Cantidad a trasladar, Sugerencia de Traslado a Tienda (2026-08-21). */
.barra-cantidad {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--borde);
}
.barra-cantidad label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--suave); }

/* ---------- CRM de conversaciones (Fase 1, 2026-08-12) ---------- */

/* Tres zonas: lista, hilo y ficha. En pantallas angostas se apilan, con la
   lista primero (es por donde se entra). */
.crm-cuerpo {
  display: grid; gap: 14px; align-items: start;
  grid-template-columns: minmax(240px, 320px) minmax(320px, 1fr) minmax(230px, 300px);
}
@media (max-width: 1100px) { .crm-cuerpo { grid-template-columns: 1fr; } }

.crm-lista { padding: 6px; max-height: 70vh; overflow-y: auto; }
.crm-fila {
  display: block; text-decoration: none; color: inherit;
  padding: 9px 11px; border-radius: var(--radio); border: 1px solid transparent;
}
.crm-fila:hover { background: var(--fondo); }
.crm-fila.activa { background: #eef4fa; border-color: var(--azul-claro); }
.crm-fila + .crm-fila { border-top: 1px solid var(--borde); border-radius: 0; }
.crm-fila-alto { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.crm-fecha { font-size: 11.5px; color: var(--suave); white-space: nowrap; }
.crm-fila-medio { display: flex; gap: 8px; font-size: 12px; color: var(--suave); }
.crm-canal { font-weight: 600; }
.crm-ultimo {
  font-size: 12.5px; color: var(--suave); margin: 3px 0 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm-fila-chips { display: flex; flex-wrap: wrap; gap: 5px; }

.chip-crm {
  font-size: 11px; padding: 2px 8px; border-radius: var(--radio-chico);
  border: 1px solid var(--borde); background: #fff; color: var(--suave);
}
.chip-crm.pendiente { background: #fdecea; border-color: #f3c4c0; color: var(--rojo); }
.chip-crm.archivada { background: #eef0f3; }
.chip-crm.estado-ganada { background: #e7f5ec; border-color: #bcdfc9; color: var(--verde); }
.chip-crm.estado-perdida { background: #fdecea; border-color: #f3c4c0; color: var(--rojo); }
.chip-crm.estado-cotizada { background: #fff4e0; border-color: #f0d3a0; color: #8a5a00; }

.crm-hilo { display: flex; flex-direction: column; min-height: 320px; }
.crm-hilo-cabecera {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--borde); padding-bottom: 9px; margin-bottom: 10px;
}
.crm-hilo-cabecera .acciones { display: flex; gap: 6px; }
.crm-numero { font-size: 12px; color: var(--suave); margin-left: 6px; }
.crm-sub { font-size: 12.5px; color: var(--suave); margin-top: 2px; }

.crm-mensajes { display: flex; flex-direction: column; gap: 9px; max-height: 44vh; overflow-y: auto; }
.crm-mensaje { max-width: 82%; padding: 8px 11px; border-radius: var(--radio-grande); border: 1px solid var(--borde); }
.crm-mensaje.entrante { align-self: flex-start; background: var(--fondo); }
.crm-mensaje.saliente { align-self: flex-end; background: #eef4fa; border-color: #cfe0ee; }
.crm-mensaje.nota { align-self: stretch; background: #fffbe9; border-color: #f0e2b0; max-width: none; }
.crm-mensaje-texto { white-space: pre-wrap; font-size: 14px; }
.crm-mensaje-pie { font-size: 11px; color: var(--suave); margin-top: 4px; }

.crm-responder { margin-top: 12px; }
.crm-aviso-canal {
  font-size: 12.5px; color: #8a5a00; background: #fff4e0;
  border: 1px solid #f0d3a0; border-radius: var(--radio); padding: 7px 10px; margin-bottom: 6px;
}
.crm-responder textarea { width: 100%; background: #f2f4f7; color: var(--suave); }
.crm-nota-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.crm-nota-form textarea { flex: 1; }

.crm-lateral h3 { font-size: 13px; color: var(--azul); margin: 14px 0 5px; }
.crm-lateral h3:first-child { margin-top: 0; }
.crm-datos { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 13px; }
.crm-datos dt { color: var(--suave); }
.crm-datos dd { margin: 0; }
.crm-mini-lista { list-style: none; padding: 0; margin: 6px 0 0; font-size: 12.5px; }
.crm-mini-lista li { padding: 2px 0; border-bottom: 1px solid var(--borde); }
.crm-form-mini { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.crm-form-mini label { font-size: 12px; color: var(--suave); }
.crm-form-mini button { align-self: flex-start; }
.crm-familia { font-weight: 600; margin: 0; }
.vacio-mini { font-size: 12.5px; color: var(--suave); margin: 4px 0; }
/* Los filtros de la bandeja van en una sola linea que se parte sola. Sin
   esto, cada select ocupaba el ancho completo (input/select nacen con
   width:100%) y quedaban uno debajo del otro. */
.filtro-crm { flex-wrap: wrap; align-items: center; }
.filtro-crm select { width: auto; min-width: 160px; flex: 0 0 auto; }
.filtro-crm .filtro-fecha { width: auto; flex: 0 0 auto; }
.filtro-crm .filtro-fecha input { width: auto; }
.filtro-crm input[name="buscar"] { flex: 1 1 240px; min-width: 200px; }
/* .filtro-linea es el mismo filtro de una linea, con nombre generico, para
   las pantallas que no son del CRM (Ventas, 2026-09-18). Se declara aparte
   en vez de reusar el nombre "crm" fuera del CRM. */
.filtro-linea { flex-wrap: wrap; align-items: center; }
.filtro-linea select { width: auto; min-width: 160px; flex: 0 0 auto; }
.filtro-linea .filtro-fecha { width: auto; flex: 0 0 auto; color: var(--suave); font-size: var(--t-sm); }
/* La fecha en 156px (el navegador la deja en ~230 sola): asi los seis
   controles entran en una linea a 1280 de ancho. */
.filtro-linea .filtro-fecha input { width: 156px; min-width: 0; margin-left: 4px; }
.filtro-linea input[name="buscar"] { flex: 1 1 240px; min-width: 200px; }

/* ---------- Financiamiento (calculadora de cuotas, 2026-08-12) ---------- */

/* La cuota es el dato que el vendedor le dice al cliente: se muestra grande
   y sola, como el numero de una tarjeta del tablero. */
.panel-cuota { text-align: center; }
.cuota-etiqueta {
  margin: 0; font-size: 13px; color: var(--suave);
  text-transform: uppercase; letter-spacing: .04em;
}
.cuota-numero {
  margin: 6px 0; font-size: 40px; font-weight: 700; color: var(--azul);
  line-height: 1.1;
}
.cuota-pie { margin: 0; font-size: 13px; color: var(--suave); }
/* El logo del banco elegido, arriba de la cuota (2026-09-15). Altura fija
   para que un logo apaisado y uno cuadrado ocupen el mismo renglon. */
.cuota-logo-banco {
  display: block; margin: 0 auto 8px; max-height: 44px; max-width: 160px;
  object-fit: contain;
}
/* Un <td> no puede ser flex sin dejar de ser celda: el logo va en linea. */
.celda-banco-logo .cuenta-logo {
  display: inline-block; vertical-align: middle; margin-right: 8px;
}

/* El desglose paso a paso (monto, comision, subtotal, intereses, total):
   la misma lectura de arriba hacia abajo que tenia la hoja de Excel. */
.tabla-desglose { width: 100%; max-width: 460px; border-collapse: collapse; }
.tabla-desglose td { padding: 7px 0; border-bottom: 1px solid var(--borde); }
.tabla-desglose td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-desglose .fila-subtotal td { font-weight: 600; }
.tabla-desglose .fila-total td {
  font-weight: 700; color: var(--azul); border-bottom: none;
}

/* Fila de total generica para cualquier tabla de datos (2026-08-21):
   pensada para un <tfoot>, asi no se cuenta como fila del cuerpo. */
tfoot .fila-total td {
  font-weight: 700; color: var(--azul); border-top: 2px solid var(--azul);
}

/* El plazo elegido, dentro de la tabla de todos los plazos del banco. */
tr.fila-elegida td { background: #fff8e1; }
tr.fila-elegida td:first-child { box-shadow: inset 4px 0 0 #e0a800; }

/* Cambios de precio: la laptop esta HOY en Tienda, donde el precio va impreso
   en un acrilico, asi que hay que ir a cambiarlo (2026-09-04, pedido de
   Nathaly). Mismo amarillo que el resaltado de /equipos y el de la
   calculadora: no entra ningun color nuevo a la paleta. Solo se dibuja para
   quien tenga "precios.cambios.tienda", y siempre acompanado de la chapa
   "En tienda" -- el color por si solo no es informacion. */
tr.fila-en-tienda td { background: #fff8e1; }
tr.fila-en-tienda td:first-child { box-shadow: inset 4px 0 0 #e0a800; }
.chapa-solicitud.en-tienda {
  background: var(--ambar-fondo); border-color: #ebdcc0; color: var(--ambar);
}

/* ---------- Casillas (mudadas desde ficha.css el 2026-08-14) ----------
   Componente generico: una casilla con su texto al lado. Vivia en ficha.css,
   que base.html no carga, asi que fuera de la Ficha Tecnica salia sin
   estilo. La ficha las sigue viendo igual. */

.casillas { display: flex; flex-direction: column; gap: 10px; }
.casilla {
  display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14px;
}
.casilla input { width: 17px; height: 17px; margin: 0; flex: 0 0 auto; }

/* ---------- Repuestos en transito (2026-08-14) ----------
   Indicador de atraso para dentro de una tabla. Es distinto de ".dias" del
   tablero de inicio a proposito: aquel es una caja de 50x48 pensada para
   una lista de avisos, y dentro de una celda se come la fila. Aqui hace
   falta algo que quepa en linea con el texto.
   El color NO reemplaza al numero: "9 dias tarde" se lee igual en blanco y
   negro o si alguien no distingue rojo de verde. */

.atraso {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.atraso::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--verde); flex-shrink: 0;
}
.atraso.tibio::before { background: var(--ambar); }
.atraso.tarde::before { background: var(--rojo); }
.atraso.tarde { color: var(--rojo); font-weight: 600; }
.atraso.sin-fecha { color: var(--suave); }
.atraso.sin-fecha::before { background: var(--borde); }

/* Fila de una orden atrasada. Tono muy suave: la fila sigue siendo
   legible, el que grita es el indicador de arriba. */
tr.fila-atrasada td { background: #fdf6f5; }
tr.fila-proxima td { background: #fffcf5; }

/* Celda de existencias del catalogo de repuestos: el numero grande es lo
   LIBRE (lo que de verdad se puede tomar hoy) y debajo, chiquito, lo que
   esta apartado y lo que viene en camino. Los tres van juntos siempre. */
.existencias b { font-size: 15px; }
.existencias .sub-celda { margin-top: 2px; }

/* ---------- Campos opcionales plegados (2026-08-14) ----------
   Para que un formulario largo se abra corto. El sistema no usaba <details>
   en ninguna pantalla; este es el primero. Se usa en las dos pantallas de
   compra de repuestos. */

details.opcionales {
  border-top: 1px dashed var(--borde);
  margin-top: 14px; padding-top: 12px;
}
details.opcionales > summary {
  cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 600; color: var(--azul);
  display: flex; align-items: center; gap: 7px;
}
details.opcionales > summary::-webkit-details-marker { display: none; }
details.opcionales > summary::before {
  content: "+"; font-weight: 700; font-size: 15px; line-height: 1;
  width: 16px; text-align: center;
}
details.opcionales[open] > summary::before { content: "\2212"; }
details.opcionales > summary:focus-visible {
  outline: 2px solid var(--azul-claro); outline-offset: 2px; border-radius: var(--radio-chico);
}
details.opcionales > *:not(summary) { margin-top: 12px; }

/* El total del lote, calculado en vivo debajo del formulario de compra. */
.total-lote {
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline;
  background: var(--azul-tenue); border-radius: var(--radio);
  padding: 11px 14px; margin-top: 14px; font-size: 13.5px;
}
.total-lote b { font-size: 16px; color: var(--azul-fuerte);
  font-variant-numeric: tabular-nums; }
.total-lote .rotulo { color: var(--suave); }

/* ---------- Arreglos de clases que se usaban sin existir (2026-08-14) ----------
   Encontrados al revisar el modulo de repuestos. Son el mismo tipo de error
   que ".chapa-estado" del 2026-08-12: la clase esta en el HTML pero no en
   ninguna hoja, asi que no hacia nada. */

/* Se usa en 7 plantillas (catalogo e inventario de repuestos, categorias,
   tipos y compatibilidades de cargadores, socios, prefijos TMX, cuentas
   bancarias) y no existia: los botones de accion quedaban pegados. */
.celda-acciones {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.celda-acciones form { display: inline; margin: 0; }

/* Los dias trabajados de una persona en un periodo de nomina (2026-09-04):
   un campo corto y su boton, en la misma linea dentro de la celda. */
.form-dias { display: flex; align-items: center; gap: 6px; margin: 0; }
.form-dias input { width: 58px; text-align: right; padding: 4px 6px; }

/* Boton de SOLO ICONO (2026-09-04). Para acciones que se repiten fila por
   fila, donde la palabra escrita pesa mas que la accion. Siempre con "title"
   y "aria-label": un icono sin nombre no lo lee ni quien pasa el mouse ni un
   lector de pantalla. */
.boton-icono {
  padding: 5px; line-height: 0; border-radius: var(--radio-chico);
  background: #fff; color: var(--suave); border: 1px solid var(--borde);
}
.boton-icono svg { width: 16px; height: 16px; display: block; }
.boton-icono:hover {
  background: #fff; color: var(--azul); border-color: var(--azul-claro);
}
.boton-icono.peligro:hover {
  background: var(--rojo); border-color: var(--rojo); color: #fff;
}

/* La celda que los contiene. NO usa .celda-acciones a proposito: esa es
   display:flex y en una fila alta (un comentario de cuatro lineas) los
   botones quedaban pegados arriba en vez de centrados. */
.celda-iconos {
  white-space: nowrap; vertical-align: middle; text-align: right;
}
.celda-iconos .boton-icono { display: inline-block; vertical-align: middle; }
.celda-iconos .boton-icono + .boton-icono { margin-left: 4px; }

/* "Autorizo N de M" en la bandeja de aprobacion (2026-09-04). Va en linea
   dentro de .celda-acciones: sin esto el <label> ocupa el ancho entero de la
   celda y empuja el boton Aprobar a la linea de abajo. */
.autoriza-cantidad {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--t-xs); color: var(--suave); margin-right: 6px;
}
.autoriza-cantidad input {
  width: 52px; padding: 3px 5px; font-size: var(--t-xs); text-align: center;
}

/* (tr[onclick] se movio arriba, junto a las reglas de tabla.) */

/* Chapa de estado en tamano grande, para la cabecera de un expediente.
   Se venia haciendo con estilo suelto repetido en varias pantallas. */
.chapa-grande { font-size: 14px; padding: 5px 14px; }

/* Fila de una pieza dentro del formulario de solicitud. Antes reutilizaba
   .mapeo-fila (la rejilla de 2 columnas del asistente de importacion de
   Excel), asi que el boton "Quitar" que agrega el JS entraba como tercer
   hijo de un grid de dos y caia fuera de sitio. */
.fila-pieza {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 10px;
}
.fila-pieza > label { flex: 1 1 220px; margin: 0; }
.fila-pieza > label.cantidad-pieza { flex: 0 0 110px; }

/* Pago Mixto (2026-08-25): una fila por forma de pago en el cobro de una
   venta. En caja propia (a diferencia de .fila-pieza) porque cada fila
   puede compartir su propio bloque de cuentas bancarias debajo, sumado por
   el JS de pos_venta.html junto con las demas filas transferencia. */
.fila-pago-mixto {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end;
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie-2); padding: 10px 12px; margin-bottom: 8px;
}
.fila-pago-mixto > label { flex: 1 1 160px; margin: 0; }
.fila-pago-mixto > label.campo-monto-pago { flex: 0 0 130px; }
.fila-pago-mixto .quitar-pago { flex: 0 0 auto; }

/* Recibo de pago de la OT (2026-09-09, Propuesta 2 de Max: "Tabla de
   recibo"): tabla de verdad en vez de renglones .fila-pieza, mismo formato
   que va a salir en el ticket termico. Las columnas angostas (cantidad,
   monto, subtotal, quitar) no deben estirarse con el ancho de Concepto/
   Descripcion. */
.col-cant-pago, .col-monto-pago { width: 90px; }
.col-quitar-pago { width: 30px; }
.fila-linea-pago input { width: 100%; }
.fila-linea-pago .campo-cantidad-recibo,
.fila-linea-pago .campo-monto-recibo { text-align: right; }
.valor-subtotal-pago, .valor-total-pago {
  text-align: right; font-variant-numeric: tabular-nums;
}
.valor-total-pago { font-weight: 700; color: var(--azul); }
.boton-quitar-pago {
  background: none; border: none; color: var(--suave); cursor: pointer;
  font-size: 17px; line-height: 1; padding: 2px 6px; border-radius: var(--radio-chico);
}
.boton-quitar-pago:hover { background: var(--rojo-fondo); color: var(--rojo); }

/* Conteo de conceptos + botones de moneda en una sola barra, arriba de la
   tabla (antes el total solo se veia despues de guardar el recibo). */
.barra-superior-recibo {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
}

/* Aviso en vivo de si la pieza ya esta en bodega, mientras se escribe la
   solicitud. Verde = no hace falta comprar; ambar = habra que comprarla. */
.aviso-existencia {
  font-size: 13px; border-radius: var(--radio); padding: 9px 12px; margin: 4px 0 0;
  border: 1px solid var(--borde); background: var(--fondo);
}
.aviso-existencia.hay { border-color: #bcdfc9; background: #e7f5ec; color: var(--verde); }
.aviso-existencia.no-hay { border-color: #f0d3a0; background: #fff4e0; color: var(--ambar); }

/* Tarjeta de una pieza dentro del expediente de la solicitud. Antes era un
   .panel dentro de otro .panel con estilo suelto, apoyado en una variable
   (--fondo-suave) que no existe en :root -- se veia por el color de
   respaldo, de casualidad. */
.tarjeta-pieza {
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: var(--radio-grande); padding: 14px 16px; margin-top: 12px;
}

/* ---------- Detalle plegable dentro de una tarjeta (2026-08-14) ----------
   Para una tabla que repite lo mismo muchas veces. Caso que lo motivo: una
   laptop con 8 modulos de RAM identicos gastaba ocho filas para decir
   "16 GB". Arriba queda una linea que resume, y el detalle se abre si de
   verdad hace falta.

   Se abre solo (atributo "open" desde la plantilla) cuando hay pocas filas:
   con una o dos, plegarlo seria pedir un clic para nada. */

details.detalle > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: var(--t-base); color: var(--suave);
  padding: 4px 0;
}
details.detalle > summary::-webkit-details-marker { display: none; }
details.detalle > summary::before {
  content: "\25B8"; color: var(--tenue); font-size: 11px;
  width: 10px; flex: 0 0 auto; transition: transform .12s;
}
details.detalle[open] > summary::before { transform: rotate(90deg); }
details.detalle > summary:hover { color: var(--azul); }
details.detalle > summary:focus-visible {
  outline: 2px solid var(--azul-claro); outline-offset: 2px; border-radius: var(--radio-chico);
}
/* El "Ver los 8 modulos" a la derecha: es la accion, y se lee como enlace. */
details.detalle > summary .ver {
  margin-left: auto; color: var(--azul); font-weight: 600; font-size: var(--t-sm);
}
/* Variante "simple": el detalle no tiene una linea que lo resuma, asi que el
   texto va pegado a la flecha en vez de empujado a la derecha (si no, queda
   solo y desconectado al otro extremo del panel). La usa Bateria, donde lo
   unico que se muestra arriba es la salud. */
details.detalle.simple > summary .ver { margin-left: 0; }
/* Segunda linea del resumen, debajo del numero grande (2026-09-02). Va DENTRO
   del <summary> -- es lo unico que sigue a la vista con el detalle plegado --
   y se lleva todo el ancho para caer bajo el numero, no al lado del "Ver el
   detalle". La usa el equivalente en cordobas del total cobrado. */
details.detalle > summary .resumen-segunda-linea {
  flex: 1 0 100%; margin-top: -2px;
  font-size: var(--t-xs); color: var(--suave);
  /* Sangria = el ancho de la flecha (10px) + su gap (8px). Sin esto la linea
     cae bajo la flecha y no bajo el numero, y se lee corrida. */
  padding-left: 18px;
}
/* El detalle puede ser una tabla o una lista de datos: las dos respiran igual. */
details.detalle > .datos { margin-top: 10px; }
details.detalle[open] > summary .ver-abrir,
details.detalle:not([open]) > summary .ver-cerrar { display: none; }
details.detalle > .tabla-scroll { margin-top: 10px; }
/* Al imprimir sale todo abierto, pero eso NO se puede hacer desde CSS: el
   navegador esconde el contenido de <details> por su cuenta, no con display.
   Lo abre un script de base.html en "beforeprint". Aqui solo se esconde la
   flecha y el "Ver los N", que en papel no significan nada. */
@media print {
  details.detalle > summary::before,
  details.detalle > summary .ver { display: none; }
}

/* ---------- PESTANAS (mudadas desde ficha.css el 2026-08-14) ----------
   Componente reutilizable: separan grandes categorias de informacion en una
   pantalla que si no seria larguisima. Dentro de cada hoja van las tarjetas
   (.panel) de siempre.

   Vivian en ficha.css, que base.html no carga, asi que solo servian en la
   Ficha Tecnica y en la Orden de Trabajo. Ahora funcionan en cualquier
   pantalla, y el JavaScript que las mueve esta una sola vez en base.html.

   Cuando usarlas: la pantalla pasa de dos pantallas de alto, son bloques
   distintos (no filas repetidas) y normalmente se mira uno a la vez. Si
   alguna respuesta es no, no llevan pestanas. */

.pestanas {
  display: flex; gap: 2px; flex-wrap: wrap;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--borde);
}
.pestanas .pestana {
  background: none; border: 0; border-bottom: 2px solid transparent;
  border-radius: var(--radio-chico) var(--radio-chico) 0 0;
  color: var(--suave); font-weight: 600; font-size: var(--t-base);
  padding: 9px 14px; margin-bottom: -1px; white-space: nowrap; cursor: pointer;
}
.pestanas .pestana:hover { background: var(--superficie-2); color: var(--azul); }
.pestanas .pestana.activa { color: var(--azul); border-bottom-color: var(--azul); }
.pestanas .pestana:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: -2px; }
/* Contador al lado del nombre ("Costos y repuestos 3"): dice cuanto hay
   adentro sin obligar a entrar. */
.pestanas .pestana .cuenta {
  font-weight: 400; font-size: var(--t-xs); color: var(--tenue); margin-left: 5px;
}
/* El contador que dice "hay trabajo esperando" (2026-09-21, pestana "Hoy" del
   tablero): chapa ambar en vez del gris de "cuantas cosas hay adentro". El
   color no va solo -- el nombre de la pestana ya dice que es lo pendiente. */
.pestanas .pestana .cuenta.pendiente {
  display: inline-block; padding: 1px 7px; font-weight: 700;
  border-radius: var(--radio-chico); border: 1px solid #e8cdb4;
  background: var(--ambar-fondo); color: var(--ambar);
}

/* La hoja de cada pestana. ".panel-ficha" y ".panel-ot" son los nombres que
   ya usaban la Ficha Tecnica y el Taller: se conservan para no tocar esas
   dos plantillas, y ".hoja" es el nombre para lo que venga de ahora en mas. */
.hoja.oculto, .panel-ficha.oculto, .panel-ot.oculto { display: none; }

/* Pie de una hoja que es un PASO de un formulario partido en pestanas
   (2026-09-22, Recepcion del Taller): Anterior a la izquierda, Siguiente o
   la accion final a la derecha. El texto de ayuda del medio empuja a los
   dos botones a sus extremos. */
.pie-paso {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-top: 16px;
}
.pie-paso .nota-menor { flex: 1 1 200px; }
/* Lo escrito en las otras pestanas, junto al boton que crea el registro:
   es lo que evita crear una orden con una pestana olvidada. */
.resumen-recepcion {
  margin-top: 18px; padding: 12px 14px; background: var(--superficie-2);
  border: 1px solid var(--borde); border-radius: var(--radio);
}
.resumen-recepcion h3 {
  font-size: var(--t-xs); font-weight: 700; margin: 0 0 6px;
  color: var(--suave); text-transform: uppercase; letter-spacing: .6px;
}

/* ---------- Linea de tiempo del ciclo (2026-08-14) ----------
   Distinta de la Bitacora (que es una tabla): la bitacora cuenta TODO lo que
   paso y crece sin limite; esto muestra los hitos del ciclo, incluidos los
   que todavia NO ocurrieron. Ese es su valor: se ve lo que falta.
   Los pendientes van al 55% en vez de esconderse, para que la pantalla
   ensene el proceso completo sin manual. */

.linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 24px; position: relative; }
.linea-tiempo::before {
  content: ""; position: absolute; left: 4px; top: 7px; bottom: 7px;
  width: 2px; background: var(--borde);
}
.lt-item { position: relative; padding-bottom: 18px; }
.lt-item:last-child { padding-bottom: 0; }
.lt-item::before {
  content: ""; position: absolute; left: -24px; top: 4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; border: 2px solid var(--borde); box-sizing: border-box;
}
.lt-item.hecho::before { background: var(--verde); border-color: var(--verde); }
.lt-item.aqui::before {
  background: var(--azul); border-color: var(--azul);
  box-shadow: 0 0 0 3px var(--azul-tenue);
}
.lt-item.pendiente { opacity: .55; }
.lt-titulo { font-size: 14px; font-weight: 600; }
.lt-item.aqui .lt-titulo { color: var(--azul); }
.lt-meta { font-size: 12.5px; color: var(--suave); font-variant-numeric: tabular-nums; }
.lt-nota { font-size: 13px; margin-top: 2px; }

/* ---------- Editor de etiqueta personalizada (2026-08-15) ----------
   Un mini disenador de etiquetas 3x1 para la BT320. La regla de oro esta en
   el JS de la plantilla: TODO se guarda en milimetros sobre la etiqueta
   real, nunca en pixeles de pantalla. El pixel cambia con el monitor y con
   el zoom; el milimetro es el mismo en la pantalla y en el papel. */

.eti-barra { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.eti-sep { width: 1px; height: 22px; background: var(--borde); margin: 0 3px; }
.eti-grupo { display: inline-flex; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.eti-grupo .boton-mini { border: 0; border-right: 1px solid var(--borde); border-radius: 0; }
.eti-grupo .boton-mini:last-child { border-right: 0; }
.eti-barra .boton-mini.activa {
  background: var(--azul); border-color: var(--azul); color: #fff;
}

/* Dos columnas: la etiqueta manda, las propiedades acompanan. */
.eti-cols { grid-template-columns: 1fr 300px; align-items: start; }
@media (max-width: 900px) { .eti-cols { grid-template-columns: 1fr; } }

.eti-zona {
  display: flex; justify-content: center;
  padding: 22px 22px 30px; background: var(--superficie-2);
  border: 1px solid var(--borde); border-radius: var(--radio); overflow: auto;
}
.eti-marco { position: relative; flex: 0 0 auto; }
/* El lienzo es la etiqueta fisica: blanco, con su borde real. */
.eti-lienzo {
  position: relative; background: #fff; border: 1px solid var(--borde-fuerte);
  overflow: hidden;
}
/* Lo que la impresora no garantiza en el borde. */
.eti-segura { position: absolute; border: 1px dashed var(--borde-fuerte); pointer-events: none; }
.eti-regla {
  position: absolute; font-size: var(--t-xs); color: var(--tenue);
  font-family: var(--fuente-mono);
}
.eti-regla.ancho { left: 0; right: 0; bottom: -18px; text-align: center; }
.eti-regla.alto { top: 0; bottom: 0; right: -46px; display: flex; align-items: center; }

/* Cada texto de la etiqueta. Arial y negro puro: es lo que dibuja GDI del
   otro lado (ver impresora_etiquetas.py). */
.eti-texto {
  position: absolute; white-space: pre; cursor: move; user-select: none;
  font-family: Arial, Helvetica, sans-serif; color: #000; line-height: 1;
  padding: 1px 2px; border: 1px solid transparent;
}
.eti-texto:hover { border-color: var(--azul-borde, #b9d3f0); }
.eti-texto.elegido { border-color: var(--azul); background: rgba(31, 78, 121, .05); }
.eti-texto.fuera { border-color: var(--rojo); background: rgba(153, 32, 26, .08); }
/* En la vista previa no se dibuja ningun marco: solo el resultado. */
.eti-texto.sin-marco { border-color: transparent !important; background: none !important; cursor: default; }

.eti-aviso-zona { font-size: var(--t-base); margin: 12px 0 0; }
.eti-aviso-zona.bien { color: var(--verde); }
.eti-aviso-zona.mal { color: var(--rojo); font-weight: 600; }

.eti-previa { max-width: 90vw; }

/* ---------- Impresion ---------- */

@media print {
  body { background: #fff; font-size: 11pt; }
  .barra, .pie, .no-imprimir, .buscador, .contadores { display: none !important; }
  .solo-imprimir { display: grid; }
  main { padding: 0; }
  .contenedor { max-width: none; padding: 0; }
  .panel { border: 1px solid #bbb; border-radius: 0; padding: 10px 12px;
    margin-bottom: 12px; break-inside: avoid; }
  .tabla-scroll { border: none; overflow: visible; }
  th { background: #e6e6e6 !important; -webkit-print-color-adjust: exact; }
  a { color: #000; text-decoration: none; }
  /* Al imprimir salen TODAS las pestanas, no solo la que estaba abierta: en
     papel no hay donde hacer clic. */
  .hoja.oculto, .panel-ficha.oculto, .panel-ot.oculto { display: block !important; }
}

/* ---------- Documentos de un caso de garantia (2026-08-15) ----------
   Los tres papeles del caso (recepcion, etiqueta, reporte) viven dentro del
   panel "Estado del caso", separados del resto por una regla: son
   consecuencia del estado, no un bloque suelto encima del boton de guardar. */
.documentos-caso {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borde-suave);
}
.documentos-caso h3 {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .5px;
  color: var(--tenue); font-weight: 700; margin: 0 0 8px;
}
.documentos-caso form { margin: 0; }

/* ---------- Trabajo tecnico: panel del tecnico y reparto (2026-08-15) ----------
   Filas-tarjeta en vez de tabla a proposito: el tecnico abre "Mi taller" en el
   telefono con las manos ocupadas, y una tabla ahi deja los botones fuera de
   pantalla. Reutiliza .item-aviso / .dias; esto solo agrega el contenedor y la
   fila de acciones. */
.fila-trabajo {
  padding: 4px 0 10px;
}
.fila-trabajo + .fila-trabajo {
  border-top: 1px solid var(--borde-suave);
}
.fila-trabajo.detenida .item-datos b { color: var(--suave); }
.acciones-trabajo {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 0 11px 0 74px;   /* alineado con .item-datos, salvando el bloque de dias */
}
.acciones-trabajo form { margin: 0; }
.acciones-trabajo .detalle { margin: 0; }
.fila-trabajo .aviso { margin: 4px 11px 8px 74px; }

/* Barra de "asignar los marcados": queda pegada al pie de la tabla. */
.barra-asignar {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--borde-suave);
}

@media (max-width: 700px) {
  /* En telefono los botones vuelven al margen: ya no hay lugar para
     alinearlos con el texto. */
  .acciones-trabajo, .fila-trabajo .aviso { padding-left: 11px; margin-left: 11px; }
}

/* ---------- Identificacion y fotos de la PIEZA (2026-08-15, Fase 2) ----------
   Antes una solicitud decia "solicito pantalla" y compras tenia que adivinar
   cual. Estos campos no son obligatorios: lo que empuja a llenarlos es el
   medidor, que ven tanto el que pide como el que compra. */
.bloque-pieza + .bloque-pieza {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borde-suave);
}
.rejilla-pieza {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 8px 0 10px;
}
.rejilla-pieza .ancho-completo { grid-column: 1 / -1; }
.rejilla-pieza label { font-size: var(--t-sm); color: var(--suave); }
.rejilla-pieza input, .rejilla-pieza select { width: 100%; margin-top: 4px; }

.identificacion-pieza {
  margin: 10px 0; padding: 10px 0; border-top: 1px solid var(--borde-suave);
}

/* Cuantos de los datos que sirven para comprar trae la pieza. Ambar mientras
   falte algo, verde cuando ya se puede comprar sin preguntar. */
.medidor-compra {
  margin: 6px 0 10px; padding: 7px 11px; font-size: var(--t-sm);
  border-radius: var(--radio); border: 1px solid #eeddb9;
  background: var(--ambar-fondo); color: #6e4611;
}
.medidor-compra.completo {
  border-color: #cfe0d6; background: var(--verde-fondo); color: var(--verde);
}

/* Galeria de la pieza, separada de la del equipo a proposito: la etiqueta de
   una pantalla no dice nada sobre la laptop. Va en estilo.css y NO en
   ficha.css, que base.html no carga (mismo caso de .casillas el 2026-08-14). */
.galeria-pieza {
  display: flex; gap: 12px; flex-wrap: wrap; margin: 10px 0;
}
.foto-pieza {
  margin: 0; width: 190px; border: 1px solid var(--borde);
  border-radius: var(--radio); overflow: hidden; background: var(--superficie);
}
.foto-pieza img { width: 100%; height: 130px; object-fit: cover; display: block; }
.foto-pieza figcaption {
  padding: 7px 9px; font-size: var(--t-sm); line-height: 1.4;
}
.foto-pieza figcaption .vacio { display: block; font-size: var(--t-xs); margin-top: 3px; }
/* Las dos categorias que llevan un numero que compras va a LEER se marcan en
   azul; el resto en gris. Una miniatura no deja leer un Part Number, asi que
   el rotulo tiene que decir que hay adentro. */
.marca-foto {
  display: inline-block; padding: 1px 7px; border-radius: var(--radio-chico);
  font-size: var(--t-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: .4px; background: var(--superficie-2); color: var(--suave);
  border: 1px solid var(--borde);
}
.marca-foto.identifica {
  background: var(--azul); color: #fff; border-color: var(--azul);
}

/* Botones que abren la camara directo, con la categoria ya decidida. */
.botones-foto { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.botones-foto form { margin: 0; }
.boton-foto { cursor: pointer; display: inline-block; }

@media (max-width: 700px) {
  .rejilla-pieza { grid-template-columns: 1fr; }
  .foto-pieza { width: 100%; }
}

/* ---------- Expediente tecnico de la laptop (2026-08-15, Fase 3) ----------
   Reutiliza .linea-tiempo / .lt-* de la historia de una pieza. Lo unico propio
   es esconder las lineas que no son hitos: ".oculto" a secas solo estaba
   definido para .hoja/.panel-ficha/.panel-ot, asi que aqui hace falta la
   regla. Sin el conmutador, el expediente son 300 lineas de "cambio
   ram_instalada" y nadie lo abre dos veces. */
.lt-item.solo-todo.oculto { display: none; }
.lt-item.solo-todo { opacity: .75; }
@media print {
  /* En papel sale TODO: no hay donde hacer clic, mismo criterio que las
     pestanas y los detalles plegables. */
  .lt-item.solo-todo.oculto { display: list-item !important; }
}

/* ---------- Lo que falta para cerrar una orden (2026-08-15, Fase 4) ----------
   No alcanza con negarle el boton al tecnico: hay que decirle QUE le falta y
   llevarlo a donde se resuelve. Ambar, no rojo: no es un error, es trabajo
   que todavia no termino. */
.falta-cerrar {
  margin: 4px 11px 8px 74px; padding: 8px 11px;
  border: 1px solid #eeddb9; border-left: 3px solid var(--ambar);
  background: var(--ambar-fondo); border-radius: var(--radio);
  font-size: var(--t-sm); color: #6e4611;
}
.falta-cerrar ul { margin: 4px 0 0; padding-left: 18px; }
.falta-cerrar li { margin: 2px 0; }
.falta-cerrar a { color: inherit; }

@media (max-width: 700px) {
  .falta-cerrar { margin-left: 11px; }
}

/* ---------- Sugerencias del analisis de comentarios (2026-08-15, Fase 5) ----
   Van SIEMPRE pegadas al comentario del que salieron: una sugerencia sola se
   lee como diagnostico, y esto lo hace una heuristica de palabras clave que
   puede fallar. */
.sugerencia { margin-bottom: 6px; line-height: 1.35; }
.sugerencia:last-child { margin-bottom: 0; }
.sugerencia .sub-celda { display: block; }

/* Propuesta del reparto automatico (2026-08-15): se distingue del resto
   porque todavia NO esta guardada. */
.panel-propuesta { border-left: 3px solid var(--azul); }

/* ---------- Carga de importacion: la tabla de lineas (2026-08-16) ----------
   .tabla-carga-lineas y .fila-linea-carga se usaban en cargas_form.html
   desde que nacio el modulo y NO existian en ninguna hoja: los anchos de
   columna vivian como style="width:Npx" repetidos en los <th> y no habia
   nada mas. Mismo caso que .celda-acciones (2026-08-14).

   Es la pantalla donde el agente de aduanas pasa casi todo su tiempo y una
   carga real llega a 20+ trackings, asi que la tabla tiene encabezado
   pegajoso, numero de fila y las lineas de tipo "Laptop" marcadas: son las
   unicas que entran al inventario y las unicas que reparten flete. */

/* La tarifa por Kg es la misma en casi todas las lineas de una carga real:
   se escribe una vez arriba y se copia sola. La columna sigue existiendo
   porque una linea puede tener otra. */
.control-tarifa {
  display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 14px;
}
.control-tarifa label {
  flex: 0 0 240px; font-size: var(--t-sm); color: var(--suave);
}
.control-tarifa label input,
.control-tarifa label select { margin-top: 5px; width: 100%; }

/* Forma de envio: DOS BOTONES excluyentes, no un desplegable (2026-08-16).
   Elegir es un clic en vez de dos, y el activo dice con que tarifa esta
   calculada la carga sin abrir nada. El activo va en azul porque es el
   ESTADO de la carga, no una accion pendiente. */
.campo-envio { flex: 0 0 auto; }
.rotulo-envio {
  display: block; font-size: var(--t-sm); color: var(--suave);
}
.botones-envio { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 5px; }
.boton-envio { display: inline-flex; align-items: baseline; gap: 7px; }
.boton-envio .precio-envio {
  font-weight: 400; font-size: var(--t-sm); color: var(--suave);
  font-variant-numeric: tabular-nums;
}
.boton-envio.activa {
  background: var(--azul); border-color: var(--azul); color: #fff;
}
.boton-envio.activa:hover { background: var(--azul-claro); border-color: var(--azul-claro); color: #fff; }
.boton-envio.activa .precio-envio { color: #fff; opacity: .85; }
/* Pago unico / Pago mixto (2026-09-22, opcion A sin recuadros): solo icono
   y texto. El elegido va en azul y en negrita; el otro en gris. */
.botones-envio.solo-texto { gap: 22px; margin-bottom: 8px; }
.botones-envio.solo-texto .boton-envio,
.botones-envio.solo-texto .boton-envio:hover {
  background: none; border: 0; box-shadow: none; padding: 4px 0;
  align-items: center; gap: 6px; color: var(--suave); font-weight: 400;
}
.botones-envio.solo-texto .boton-envio:hover { color: var(--texto); }
.botones-envio.solo-texto .boton-envio svg { width: 18px; height: 18px; flex: 0 0 auto; }
.botones-envio.solo-texto .boton-envio.activa,
.botones-envio.solo-texto .boton-envio.activa:hover {
  background: none; border: 0; color: var(--azul); font-weight: 600;
}
.control-tarifa p {
  flex: 1 1 260px; margin: 0 0 5px; color: var(--suave); font-size: var(--t-base);
}

/* Pie de la tabla: el boton y su ayuda en la misma linea. */
.pie-lineas-carga {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-top: 10px;
}
.pie-lineas-carga span { color: var(--suave); font-size: var(--t-base); }

.tabla-carga-lineas { counter-reset: linea-carga; }
.tabla-carga-lineas th { position: sticky; top: 0; z-index: 2; }
/* La altura la limita el contenedor, no la tabla: asi el encabezado se queda
   arriba y la barra de totales (pegajosa abajo) siempre se ve. */
.caja-lineas-carga { max-height: 56vh; overflow: auto; }

.tabla-carga-lineas th.col-num,
.tabla-carga-lineas td.col-num { width: 34px; text-align: right; color: var(--tenue); }
.tabla-carga-lineas td.col-num::before {
  counter-increment: linea-carga; content: counter(linea-carga);
  font-size: var(--t-sm); font-variant-numeric: tabular-nums;
}
.tabla-carga-lineas th.col-cantidad, .tabla-carga-lineas td.col-cantidad { width: 88px; }
/* Cargadores declarados por el agente de aduanas (2026-08-17). */
.tabla-carga-lineas th.col-tipo, .tabla-carga-lineas td.col-tipo { width: 140px; }
.tabla-carga-lineas th.col-cargadores,
.tabla-carga-lineas td.col-cargadores { width: 96px; }
.tabla-carga-lineas th.col-peso, .tabla-carga-lineas td.col-peso { width: 96px; }
.tabla-carga-lineas th.col-forma, .tabla-carga-lineas td.col-forma { width: 152px; }
/* Un campo bloqueado por no aplicar (cargadores en una fila que no es Laptop):
   se ve apagado pero SIGUE viajando en el envio -- es readonly, no disabled,
   porque el servidor lee las columnas por posicion. */
.campo-apagado { background: var(--azul-fondo); color: var(--tenue); }
.tabla-carga-lineas th.col-total, .tabla-carga-lineas td.col-total { width: 96px; text-align: right; }
.tabla-carga-lineas th.col-quitar, .tabla-carga-lineas td.col-quitar { width: 74px; }
.tabla-carga-lineas td { padding: 5px 8px; vertical-align: top; }
.tabla-carga-lineas input, .tabla-carga-lineas select { margin: 0; }

/* Filete azul en la fila que SI entra al inventario -- mismo recurso que
   .campo-familia usa para "esto pertenece a algo mayor". Se pinta sobre la
   primera celda porque un <tr> no admite borde con border-collapse. */
.fila-linea-carga td:first-child { border-left: 3px solid transparent; }
.fila-linea-carga.es-laptop td:first-child { border-left-color: var(--azul); }
/* Una fila a la que le falta un dato que cuesta plata (tracking o peso). */
.fila-linea-carga.incompleta td { background: var(--ambar-fondo); }

/* En el telefono siete columnas de inputs no se usan, y el agente puede
   estar en la aduana. Cada linea pasa a ser una tarjeta, igual que
   .fila-pieza y las filas-tarjeta de /mi-taller. */
@media (max-width: 900px) {
  .caja-lineas-carga { max-height: none; }
  .tabla-carga-lineas thead { display: none; }
  .tabla-carga-lineas, .tabla-carga-lineas tbody { display: block; width: auto; }
  /* Va con "tr.fila-linea-carga" y las celdas con ".col-*": las reglas de
     ancho de arriba llevan clase + tipo, y una clase sola perdia contra
     ellas -- la tarjeta nunca se armaba y las celdas conservaban sus anchos
     de escritorio (encontrado midiendo a 375px, no leyendo el CSS). */
  .tabla-carga-lineas tr.fila-linea-carga {
    border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 8px; margin-bottom: 10px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px;
  }
  .tabla-carga-lineas tr.fila-linea-carga.es-laptop { border-left: 3px solid var(--azul); }
  .tabla-carga-lineas td { border: none; padding: 0; width: auto; }
  .tabla-carga-lineas td:first-child { border-left: none; }
  .tabla-carga-lineas td::before {
    content: attr(data-rotulo); display: block;
    font-size: var(--t-xs); color: var(--tenue); text-transform: uppercase;
    letter-spacing: .06em; margin-bottom: 2px;
  }
  /* El tracking es el dato largo: ocupa la fila entera, arriba. */
  .tabla-carga-lineas td.col-tracking { grid-column: 1 / -1; order: 1; width: auto; }
  .tabla-carga-lineas td.col-num { display: none; }
  .tabla-carga-lineas td.col-cantidad { order: 2; width: auto; }
  .tabla-carga-lineas td.col-tipo { order: 4; width: auto; }
  .tabla-carga-lineas td.col-cargadores { order: 5; width: auto; }
  .tabla-carga-lineas td.col-peso { order: 6; width: auto; }
  .tabla-carga-lineas td.col-forma { order: 7; width: auto; }
  .tabla-carga-lineas td.col-total {
    order: 8; width: auto; text-align: left; align-self: end;
  }
  .tabla-carga-lineas td.col-quitar {
    order: 9; width: auto; text-align: right; align-self: end;
  }
  .tabla-carga-lineas td.col-quitar::before { content: none; }
}

/* La barra de totales no puede quedar fuera de pantalla mientras se escribe
   la fila 15: se queda pegada abajo de la tarjeta. Reutiliza .total-lote
   (el mismo componente de la compra de repuestos) y por eso lleva sombra:
   es de las pocas cosas que de verdad flotan sobre el contenido. */
.total-lote.pegajoso {
  position: sticky; bottom: 0; z-index: 3;
  box-shadow: var(--sombra-flotante);
}
/* El flete por laptop es la consecuencia de lo que se escribe arriba, no un
   total mas: va separado del resto de la barra. */
.total-lote .consecuencia {
  flex-basis: 100%; margin: 0; padding-top: 7px;
  border-top: 1px solid #cfdcea; color: var(--suave); font-size: var(--t-base);
}
.total-lote .consecuencia b { font-size: var(--t-md); }

/* ---------- Sugerencias de familia al dar de alta (2026-08-16) ----------
   El sistema recomienda; la persona decide. Por eso son OPCIONES elegibles y
   no un aviso que solo se lee: cada una es una salida distinta y ninguna
   viene impuesta. */
.panel-sugerencias { border-left: 3px solid var(--azul); }

.opcion-familia {
  display: flex; gap: 9px; align-items: flex-start;
  border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 10px 12px; margin-bottom: 8px; cursor: pointer;
}
.opcion-familia:hover { border-color: var(--azul-claro); background: var(--superficie-2); }
.opcion-familia input { width: auto; margin: 3px 0 0; flex-shrink: 0; }
.opcion-cuerpo { display: flex; flex-direction: column; gap: 3px; }
/* El color dice de que TIPO de coincidencia se trata, con el mismo criterio
   del resto del sistema: verde lo que calza, ambar lo que espera un dato,
   rojo lo que de verdad se contradice. */
.opcion-familia.clara { border-left: 3px solid var(--verde); }
.opcion-familia.posible { border-left: 3px solid var(--ambar); }
.opcion-familia.diferente { border-left: 3px solid var(--rojo); }
.opcion-familia .dif-confirmada { font-size: var(--t-base); color: var(--rojo); }
.opcion-familia .sin-determinar { font-size: var(--t-base); color: var(--ambar); }

/* Fila que necesita que una persona la mire antes de darla por buena
   (Catalogo de Componentes y "Completar familias", 2026-08-16). Ambar, no
   rojo: no esta mal, esta sin avalar. */
tr.revisar td { background: var(--ambar-fondo); }

/* ---------- Entregar la carga a Bodega (2026-08-16) ----------
   La accion es irreversible PARA EL AGENTE (pierde la edicion), asi que no
   puede vivir en la fila de acciones junto a "Volver". Va en su propia
   tarjeta al pie, con los numeros que se congelan a la vista.
   NO lleva rojo a proposito: no es destructivo, es el paso normal del
   trabajo -- un rojo aqui enseñaria a ignorar el rojo donde si importa. */
.panel-entrega { border-left: 3px solid var(--azul); }
.panel-entrega .resumen-entrega {
  background: var(--azul-tenue); border-radius: var(--radio);
  padding: 10px 13px; margin: 12px 0; font-size: var(--t-base);
}
.panel-entrega .resumen-entrega b { font-variant-numeric: tabular-nums; }
.panel-entrega .confirmar-entrega {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 12px 0; font-size: var(--t-md);
}
.panel-entrega .confirmar-entrega input { width: auto; margin: 2px 0 0; }

/* ---------- Nuevo Ingreso: la hoja de costos de una carga (2026-08-17) ----
   Pantalla de trabajo de quien lleva la contabilidad. La decision de diseno
   es que el COSTO REAL (compra + flete) sea lo mas grande de cada bloque:
   es el unico numero que se copia a Sage, y el que Hugo venia calculando a
   mano. Lo que escribe es chico; lo que se lleva es grande. */
.chapa-ingreso.gris { background: var(--superficie-2); border-color: var(--borde); color: var(--suave); }
.chapa-ingreso.ambar { background: var(--ambar-fondo); border-color: #ebdcc0; color: var(--ambar); }
.chapa-ingreso.azul { background: var(--azul-fondo); border-color: #ccd9e6; color: var(--azul); }
.chapa-ingreso.verde { background: var(--verde-fondo); border-color: #cfe0d6; color: var(--verde); }

/* "Que falta" en la lista: varias faltas apiladas, no una frase larga. */
.celda-falta { display: flex; flex-direction: column; gap: 3px; }
.celda-falta .falta { font-size: var(--t-xs); color: var(--ambar); font-weight: 600; }
.celda-falta .falta.suave { color: var(--suave); font-weight: 500; }

/* Encabezado de la importacion: datos de solo lectura, en rejilla. */
.datos-ingreso {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.datos-ingreso > div {
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 9px 12px;
}
.datos-ingreso span { display: block; font-size: var(--t-xs); color: var(--suave); margin-bottom: 2px; }
.datos-ingreso b { font-size: var(--t-md); font-variant-numeric: tabular-nums; }
/* El flete por laptop es el numero que entra en cada costo: se destaca. */
.datos-ingreso .destacado { background: var(--azul-tenue); border-color: #ccd9e6; }
.datos-ingreso .destacado b { color: var(--azul); }

.campo-ebay { font-family: var(--fuente-mono); font-size: var(--t-sm); margin: 0; }

/* Un bloque por modelo: es la unidad con la que llega la factura. */
.modelo-ingreso {
  border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 13px 15px; margin-bottom: 13px;
}
/* Barra izquierda como semaforo silencioso: ambar si le falta costo, borde
   normal si ya lo tiene. Sin rojo: que falte un costo no es un error. */
.modelo-ingreso.pendiente { border-left: 3px solid var(--ambar); }
.modelo-ingreso.listo { border-left: 3px solid var(--verde); }
.modelo-ingreso-cabeza {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.modelo-ingreso-cabeza .suave { color: var(--suave); font-size: var(--t-sm); margin-left: 8px; }
.modelo-ingreso-cuenta { font-size: var(--t-sm); color: var(--suave); }
.modelo-ingreso-cuenta .falta { color: var(--ambar); font-weight: 600; margin-left: 8px; }
.aviso-modelo {
  background: var(--ambar-fondo); border: 1px solid #ebdcc0;
  border-radius: var(--radio-chico); padding: 7px 11px;
  font-size: var(--t-sm); color: var(--ambar); margin: 0 0 10px;
}
.modelo-ingreso-cuerpo {
  display: grid; grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 18px; align-items: start;
}
.modelo-ingreso-cuerpo label { margin: 0; }
.modelo-ingreso-cuenta-real {
  display: flex; gap: 24px; flex-wrap: wrap;
  background: var(--azul-tenue); border-radius: var(--radio);
  padding: 10px 14px; align-self: stretch; align-items: center;
}
.modelo-ingreso-cuenta-real span { display: block; font-size: var(--t-xs); color: var(--suave); }
.modelo-ingreso-cuenta-real b { font-variant-numeric: tabular-nums; }
.modelo-ingreso-cuenta-real small { display: block; font-size: var(--t-xs); color: var(--suave); }
.numero-grande { font-size: 22px; color: var(--azul); line-height: 1.2; }
.modelo-ingreso-detalle { margin-top: 11px; }
.modelo-ingreso-detalle summary {
  cursor: pointer; font-size: var(--t-sm); color: var(--azul);
}
.modelo-ingreso-detalle .tabla-scroll { margin-top: 9px; }

.barra-guardar {
  display: flex; align-items: center; gap: 13px;
  margin: 16px 0 22px;
}
.barra-guardar .suave { color: var(--suave); font-size: var(--t-sm); }

.panel-listo { border-left: 3px solid var(--azul); }

/* Modelo de una oportunidad de eBay ya abierta (marcado en el navegador,
   ver ebay_oportunidades.html) -- sigue siendo el mismo enlace, solo cambia
   de color para recordar que ya se reviso. */
.enlace-modelo-oport.visto,
.enlace-modelo-oport.visto b { color: var(--suave); }

@media (max-width: 700px) {
  .modelo-ingreso-cuerpo { grid-template-columns: 1fr; gap: 11px; }
}

/* Detector de Familias Similares (2026-08-17). Tres clases chicas, todas con
   variables ya existentes: ni un hexadecimal suelto ni un radio literal. */
.nota-menor {
  display: block; font-size: var(--t-xs); color: var(--suave);
  font-weight: 400; letter-spacing: 0;
}
.grupo-similar {
  border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 10px 12px; margin-top: 10px;
}
.grupo-similar h3 {
  margin: 0 0 6px; font-size: var(--t-md); display: flex;
  align-items: center; gap: 8px; flex-wrap: wrap;
}
.lista-simple { margin: 0; padding-left: 18px; }
.lista-simple li { margin-bottom: 4px; }

/* Redes sociales con QR en la factura (2026-09-12): la vista previa de la
   pantalla de configuracion. El QR va sobre blanco puro a proposito -- es lo
   que el telefono tiene que poder escanear. */
.qr-redes-previa { display: flex; gap: 28px; flex-wrap: wrap; }
.qr-redes-previa figure { margin: 0; text-align: center; max-width: 220px; }
.qr-redes-previa svg { display: block; margin: 0 auto 8px; border: 1px solid var(--borde); background: #fff; }
.qr-redes-previa figcaption { font-size: var(--t-sm); word-break: break-all; }

/* ---------- Detalle de una tarea (2026-09-14) ----------
   Rediseno "flujo y pestanas": el camino de la tarea dibujado como pasos con
   el boton del siguiente paso al lado, la informacion en una rejilla en vez
   de una tabla vertical, y el progreso como barra con marcas. Todo con las
   variables de siempre: ningun color ni radio suelto. */

/* La barra de estado: pasos + prioridad + plazo a la izquierda, botones a
   la derecha. Es una tarjeta como .panel, sin h2, para que el flujo quede
   arriba de todo sin competir con el titulo. */
.barra-tarea {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 12px 18px; margin-bottom: 14px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px 24px; flex-wrap: wrap;
}
.barra-tarea-estado {
  display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap;
  min-width: 0;
}
.barra-tarea-plazo { font-size: var(--t-base); color: var(--suave); white-space: nowrap; }
.barra-tarea-plazo b { color: var(--texto); }
.barra-tarea-plazo.vencida b { color: var(--rojo); }

/* Los pasos del camino. "hecho" es el punto lleno, "actual" el punto con
   aro, y el resto queda vacio: se ve lo que falta sin leer nada.
   El desvio ("En espera") va en ambar, como toda espera del sistema. */
.flujo-pasos {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 0; flex-wrap: wrap;
}
.flujo-pasos li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t-base); color: var(--suave); white-space: nowrap;
}
.flujo-pasos li + li::before {
  content: ""; width: 26px; height: 1px; background: var(--borde-fuerte);
  margin: 0 8px;
}
.flujo-pasos li i {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--borde-fuerte); background: var(--superficie);
}
.flujo-pasos li.hecho { color: var(--texto); }
.flujo-pasos li.hecho i { background: var(--azul); border-color: var(--azul); }
.flujo-pasos li.actual { color: var(--texto); font-weight: 600; }
.flujo-pasos li.actual i {
  border-color: var(--azul); background: var(--azul);
  box-shadow: inset 0 0 0 3px var(--superficie);
}
.flujo-pasos li.desvio { color: var(--ambar); }
.flujo-pasos li.desvio i {
  border-color: var(--ambar); background: var(--ambar);
  box-shadow: inset 0 0 0 3px var(--superficie);
}

/* La descripcion es lo mas importante de la tarjeta: va primero y a tamano
   de cuerpo, no como nota al pie. pre-wrap respeta los renglones escritos. */
.tarea-descripcion {
  font-size: var(--t-md); margin: 0 0 16px; white-space: pre-wrap;
  max-width: 78ch;
}

/* Rejilla de datos (asignada, creada, limite...): rotulo chico arriba,
   valor abajo. Cabe en una linea a 1280px y se apila sola en el telefono. */
.datos-tarea {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px 20px;
}
.datos-tarea b {
  display: block; font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .4px; color: var(--tenue); font-weight: 600; margin-bottom: 2px;
}
.datos-tarea span { font-size: var(--t-base); }

/* El progreso: un control de rango con marcas de 25 en 25. El valor sale
   en el <output> al lado, el boton guarda. */
.progreso-tarea { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--borde-suave); }
.progreso-tarea > b {
  display: block; font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .4px; color: var(--tenue); font-weight: 600; margin-bottom: 8px;
}
.rango-progreso { display: flex; align-items: center; gap: 12px; max-width: 520px; }
.rango-progreso input[type="range"] {
  flex: 1; margin: 0; padding: 0; border: 0; background: none; accent-color: var(--azul);
  cursor: pointer;
}
.rango-progreso output {
  min-width: 44px; text-align: right; font-weight: 600; font-size: var(--t-base);
}
.rango-marcas {
  display: flex; justify-content: space-between; max-width: 520px;
  /* mismo ancho que el rango menos el output y el boton, para que las
     marcas caigan debajo de la pista */
  padding-right: 138px; margin-top: 2px;
  font-size: var(--t-xs); color: var(--tenue);
}
/* La barra de solo lectura: para quien no puede mover la tarea, y para el
   papel (el control de rango no se imprime bien). */
.barra-progreso {
  display: flex; align-items: center; gap: 10px; max-width: 520px;
  font-size: var(--t-base);
}
.barra-progreso .pista {
  flex: 1; height: 6px; border-radius: var(--radio-chico);
  background: var(--borde-suave); overflow: hidden;
}
.barra-progreso .pista i { display: block; height: 100%; background: var(--azul); }
.barra-progreso.solo-papel { display: none; }
@media print {
  .barra-progreso.solo-papel { display: flex; }
  .barra-tarea { border: 1px solid #bbb; border-radius: 0; }
}
@media (max-width: 700px) {
  .barra-tarea { flex-direction: column; align-items: stretch; }
  .barra-tarea .acciones { justify-content: flex-end; }
  .flujo-pasos li { font-size: var(--t-sm); }
  .flujo-pasos li + li::before { width: 12px; margin: 0 5px; }
  /* La pista ocupa todo el ancho y el valor con el boton bajan a una
     segunda linea; asi las marcas siguen cayendo debajo de la pista. */
  .rango-progreso { flex-wrap: wrap; }
  .rango-progreso input[type="range"] { flex: 1 1 100%; }
  /* Las marcas escritas se esconden: con el valor y el boton en la segunda
     linea ya no caen debajo de la pista, y la pista trae sus propias
     muescas del datalist. */
  .rango-marcas { display: none; }
}
/* ---------- Las cuatro puertas del menu (2026-09-18) ----------
   Operaciones / Ventas / Compras / Administracion, calcado del tablero
   "Dentro de Operaciones" que eligio el usuario. En la barra: casa y campana
   como iconos, cada puerta con un punto de su color y la ACTIVA pintada
   entera de ese color (--puerta viaja en linea desde base.html, asi los
   cuatro colores viven solo en menu_modulos.py). La pagina de cada puerta
   (/modulo/<clave>) abre con una banda a todo el ancho y debajo una
   tarjeta por area: titulo en mayusculas, pastilla con el dato vivo a la
   derecha, y los enlaces en dos columnas, en azul. */
.icono-barra { display: block; flex-shrink: 0; }
.modulo-inicio > a, .modulo-avisos > a { padding: 0 9px; }
.modulo-avisos > a { position: relative; }
.campana-cuenta {
  position: absolute; top: 2px; right: 4px;
  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  border-radius: 9px; background: #e5484d; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.campana-cuenta.vencida { background: var(--rojo); }
.solo-movil { display: none; }

.modulo-puerta > a { padding: 0 13px; }
/* Solo azul en la barra (pedido del usuario 2026-09-18): el punto y la
   puerta activa van en el mismo azul para las cuatro; los colores por
   puerta quedaron solo en menu_modulos.py, por si se retoman. */
.modulo-punto {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: #1b6fd6;
}
.modulo-puerta .flecha { display: none; }
.modulo-puerta.modulo-activo > a {
  background: #1b6fd6; color: #fff; box-shadow: none;
}
.modulo-puerta.modulo-activo > a .modulo-punto { background: #fff; }
.modulo-puerta:hover > a { color: #fff; }
.desplegable-cuenta {
  margin-left: auto; font-size: var(--t-xs); color: var(--tenue);
  font-variant-numeric: tabular-nums;
}

.barra-derecha .quien { display: inline-flex; align-items: center; gap: 9px; }
.barra-derecha .avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--azul-claro); color: #fff; font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.barra-derecha .quien-texto { display: inline-flex; flex-direction: column; line-height: 1.25; }
.barra-derecha .quien-texto .rol-chapa { margin-left: 0; }

@media (max-width: 900px) {
  .solo-movil { display: inline; }
  .campana-cuenta { position: static; margin-left: 6px; }
  .modulo-puerta .flecha { display: block; }
  /* En el acordeon del telefono .modulo > a reparte sus hijos a los
     extremos: el punto va junto al nombre y solo la flecha a la derecha. */
  .modulo-puerta > a, .modulo-inicio > a, .modulo-avisos > a { justify-content: flex-start; }
  .modulo-puerta > a .flecha { margin-left: auto; }
  .desplegable-cuenta { color: #b9cde0; }
  .barra-derecha .quien-texto { display: none; }
}

/* La banda: fuera de main.contenedor (bloque "banda" de base.html), a todo
   el ancho, con el contenido alineado al mismo ancho que el resto. */
.puerta-banda {
  --puerta: var(--azul); background: var(--puerta); color: #fff;
  border-radius: var(--radio-grande); margin-bottom: 22px;
}
.puerta-banda-interior {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 30px 40px;
}
.puerta-icono { flex-shrink: 0; }
.puerta-banda-texto { flex: 1 1 320px; }
.puerta-banda h1 { color: #fff; font-size: 28px; font-weight: 700; letter-spacing: -.01em; }
.puerta-descripcion { margin: 5px 0 0; color: rgba(255,255,255,.88); font-size: var(--t-md); }
.puerta-banda-acciones { display: flex; gap: 12px; flex-wrap: wrap; }
.puerta-accion-principal, .puerta-accion-secundaria {
  display: inline-flex; align-items: center; height: 44px; padding: 0 20px;
  border-radius: var(--radio-grande); font-weight: 700; font-size: var(--t-md);
  text-decoration: none; white-space: nowrap;
}
.puerta-accion-principal { background: #fff; color: var(--texto); }
.puerta-accion-principal:hover { background: #f1f5f9; color: var(--texto); }
.puerta-accion-secundaria { border: 1.5px solid rgba(255,255,255,.9); color: #fff; }
.puerta-accion-secundaria:hover { background: rgba(255,255,255,.14); color: #fff; }

/* El titulo de la pagina del modulo (la banda de color se quito el mismo dia). */
.puerta-titulo {
  display: flex; align-items: center; gap: 12px; margin: 14px 0 20px;
  font-family: var(--fuente-titulo); font-size: 24px; font-weight: 600;
}
/* El icono del titulo va siempre en azul, no en el color de la puerta
   (pedido del usuario 2026-09-18: "todos los iconos en azul"). */
.puerta-titulo-icono { flex-shrink: 0; color: #1b6fd6; }

/* Las tarjetas: tres por fila, cada una del alto de su contenido (la fila
   se alinea arriba). Combinacion elegida por el usuario el 2026-09-18:
   icono chico junto al titulo del area + enlaces de 15px con punto azul y
   regla bajo el titulo. */
/* Propuesta A (2026-09-18): tres columnas que se RELLENAN. Las tarjetas se
   apilan de arriba abajo en cada columna (CSS columns), asi una tarjeta
   alta al lado de una chica no deja hueco. El orden de lectura pasa a ser
   por columna. */
.puerta-areas { columns: 3; column-gap: 22px; }
.puerta-area {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-grande); padding: 20px 22px;
  break-inside: avoid; margin-bottom: 22px;
}
.puerta-area-cabecera {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid var(--borde-suave);
}
.puerta-area h2 {
  display: flex; align-items: center; gap: 9px;
  margin: 0; font-size: var(--t-md); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texto); line-height: 1.3;
}
.puerta-area-icono { flex-shrink: 0; color: #1b6fd6; }
/* Tarjetas de area sin borde, fondo blanco (2026-09-22): igual que el Resumen de la venta. */
.puerta-area { border-color: transparent; }
.puerta-pastilla {
  flex-shrink: 0; padding: 3px 9px; border-radius: var(--radio);
  font-size: var(--t-sm); font-weight: 600; line-height: 1.3; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.puerta-pastilla.azul { background: var(--azul-tenue); color: var(--azul); }
.puerta-pastilla.ambar { background: #fdeee0; color: var(--ambar); }
/* Los enlaces como lista con separadores (tomado de la propuesta A el
   2026-09-18): una columna, cada enlace en su renglon con linea fina y una
   flecha a la derecha. Se lee como un menu y es facil de tocar en tablet. */
.puerta-enlaces { list-style: none; margin: 0; padding: 0; }
.puerta-enlaces li + li { border-top: 1px solid var(--borde-suave); }
.puerta-enlaces a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; font-size: 15px; line-height: 1.35;
  color: var(--azul); text-decoration: none;
}
.puerta-enlaces a::after {
  content: "›"; color: var(--tenue); font-size: 18px; line-height: 1; flex-shrink: 0;
}
.puerta-enlaces a:hover { color: #1b6fd6; }
.puerta-enlaces a:hover::after { color: #1b6fd6; }
.puerta-nota { margin: 14px 0 0; }
@media (max-width: 1000px) { .puerta-areas { columns: 2; } }
@media (max-width: 620px) {
  .puerta-areas { columns: 1; }
  .puerta-banda-interior { padding: 20px 18px; }
  .puerta-banda h1 { font-size: 24px; }
}

/* ---------- Punto de venta: "el escaner manda" (2026-09-18) ----------
   Propuesta visual elegida por el usuario. La caja de escaneo arriba y
   grande, los filtros en una sola linea dentro de la misma tarjeta, columna
   Ubicacion con chip, el ID como enlace, acciones fijas Vender / Reservar /
   Mas (un <details> nativo), y la barra de venta multiple con el total. El
   Vender va en el azul de la marca (.boton), no en verde: el usuario
   eligio la variante C entre seis. */
.pos-subtitulo { margin: 0; }
.pos-escaner { padding: 14px 18px 12px; }
.pos-buscador { margin: 0 0 12px; flex-wrap: nowrap; }
.pos-campo {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 12px; box-sizing: border-box;
  border: 2px solid var(--azul); border-radius: var(--radio);
  background: var(--superficie); color: var(--azul); cursor: text;
}
.pos-campo svg { flex-shrink: 0; }
.pos-campo input {
  flex: 1; min-width: 0; height: auto; padding: 0; border: 0; box-shadow: none;
  font-size: var(--t-lg); color: var(--texto); background: transparent;
}
.pos-campo input:focus { outline: none; }
.pos-campo:focus-within { border-color: var(--azul-claro); }
.pos-buscador button, .pos-buscador .boton-claro {
  height: 46px; padding: 0 22px; display: inline-flex; align-items: center;
}
.pos-filtros { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pos-separador { width: 1px; height: 22px; background: var(--borde); }
.pos-rotulo {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--tenue); font-weight: 600;
}
.conmutador-ubicacion a { padding: 5px 9px; white-space: nowrap; }
/* En pantallas angostas los chips de ubicacion se acomodan en varias lineas
   dentro de su caja, en vez de salirse de la tarjeta. */
.pos-filtros .conmutador { flex-wrap: wrap; }

/* La tabla en su tarjeta. El contador va dentro del h2 para que la regla
   de .panel > h2:first-child siga aplicando. */
/* .panel > .tabla-scroll ya sangra la tabla hasta los bordes de la tarjeta. */
.pos-tabla { padding-bottom: 6px; }
.pos-tabla > h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pos-cuenta { font-size: var(--t-sm); color: var(--tenue); font-weight: 400; }
/* Sin recorte vertical: el desplegable "Mas" de la ultima fila tiene que
   poder salirse de la tarjeta. En pantallas angostas vuelve el scroll. */
.pos-tabla .tabla-scroll { overflow: visible; }
/* 1340 y no 1100 desde Public Sans (2026-09-21): la letra es ~4% mas ancha
   que Segoe y la tabla del POS paso de 1225 a 1280 px; a 1290 de ancho se
   salia de la tarjeta. Por debajo de 1340 la tabla se desplaza dentro de la
   tarjeta, como ya hacia en tablet. */
@media (max-width: 1340px) { .pos-tabla .tabla-scroll { overflow-x: auto; } }
.tabla-pos td { vertical-align: middle; padding: 6px 8px; }
.tabla-pos th { padding: 7px 8px; }
.tabla-pos .pos-col-marca { width: 32px; padding-right: 0; }
.tabla-pos .pos-col-marca input { width: 15px; height: 15px; margin: 0; }
/* Seleccion por fila (2026-09-22, propuesta B): la casilla existe pero no se
   ve; la fila entera se toca y la elegida lleva barra azul y un visto. */
.tabla-pos .pos-col-marca { position: relative; width: 24px; }
/* Titulo del POS separado de la franja y con icono (2026-09-22, opcion 4). */
.titulo-fila.pos-titulo { margin-top: 16px; }
.pos-titulo-marca { display: flex; align-items: center; gap: 14px; }
.pos-titulo-icono { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radio-grande); background: var(--azul-tenue); color: var(--azul); display: inline-flex; align-items: center; justify-content: center; }
.tabla-pos .pos-col-marca .chk-venta-multiple { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tabla-pos .pos-visto { display: none; color: var(--azul); }
.tabla-pos tr.fila-marcada .pos-visto { display: inline-flex; vertical-align: middle; }
.tabla-pos tr.pos-fila-elegible { cursor: pointer; }
.tabla-pos tr.pos-fila-elegible:hover td { background: #f5f8fb; }
.tabla-pos tr.fila-marcada td:first-child { box-shadow: inset 3px 0 0 var(--azul); }
.tabla-pos tr:has(.chk-venta-multiple:focus-visible) td:first-child { outline: 2px solid var(--azul); outline-offset: -2px; }
.tabla-pos .celda-equipo a { font-weight: 700; font-size: var(--t-md); }
.tabla-pos .celda-equipo .sub-celda { display: block; margin-top: 1px; color: var(--tenue); }
.tabla-pos .pos-precio { text-align: right; font-weight: 700; font-size: var(--t-md); }
.tabla-pos th.pos-precio { font-weight: 600; font-size: var(--t-xs); }
.tabla-pos tr.fila-marcada td,
.tabla-pos tr.fila-marcada.pos-fila-elegible:hover td { background: var(--azul-tenue); }
/* El chip con icono de /ubicaciones es inline-flex, y su linea base es el
   borde de abajo del icono: sin esto el custodio queda ~3px caido al lado. */
.tabla-pos .ubi-chip, .pos-custodio { vertical-align: middle; }
.pos-custodio { margin-left: 6px; }
.pos-sin-ficha { margin-left: 0; }

/* Chip de ubicacion: Tienda en azul tenue, Taller en ambar (hay que saber
   quien la tiene), el resto en gris. El color nunca va solo: lleva el nombre. */
.chip-ubi {
  display: inline-block; padding: 2px 8px; border-radius: var(--radio-chico);
  font-size: var(--t-sm); font-weight: 600; white-space: nowrap;
  background: var(--azul-fondo); color: var(--suave);
}
.chip-ubi.tienda { background: var(--azul-tenue); color: var(--azul); }
.chip-ubi.taller { background: var(--ambar-fondo); color: var(--ambar); }

/* Ubicacion fisica en /ubicaciones (2026-09-21, propuesta E elegida entre 6):
   icono de trazo + nombre en tinta. Reemplaza a la .pastilla.activa azul
   llena, que en cada fila se leia como un boton. El color va SOLO en el
   icono, por lo que significa el lugar: Tienda azul, bodegas gris, Taller
   ambar (hay que saber quien la tiene), Mal estado rojo, y "no esta aca"
   (Fuera de Tienda / Fuera de Bodega / En delivery) en el naranja de las
   chapas de origen. Una ubicacion nueva cae al marcador gris. El macro esta
   en templates/chip_ubicacion.html. */
.ubi-chip { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--texto); }
.ubi-chip svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--suave); }
.ubi-chip.tienda svg { color: var(--azul); }
.ubi-chip.taller svg { color: var(--ambar); }
.ubi-chip.mal-estado svg { color: var(--rojo); }
.ubi-chip.fuera-de-tienda svg, .ubi-chip.fuera-de-bodega svg, .ubi-chip.en-delivery svg { color: #a1490a; }
.ubi-custodio { margin: 3px 0 0 22px; font-size: var(--t-sm); color: var(--suave); }

/* Punto de estado de la ficha, delante del texto. */
.punto-ficha {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle; background: var(--verde);
}
.punto-ficha.atencion { background: var(--ambar); }
.punto-ficha.mal { background: var(--rojo); }

/* Acciones: siempre a la derecha, mismo alto, y el "Mas" es un <details>. */
.tabla-pos .pos-col-acciones { text-align: right; }
.pos-acciones { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; }
.pos-acciones .boton, .pos-acciones .boton-claro, .pos-acciones summary.boton-claro {
  padding: 5px 9px; font-size: var(--t-base);
}
.pos-acciones .boton { padding: 5px 14px; }
/* Botones de solo icono en la fila del POS (propuesta C, 2026-09-22): el
   nombre va en title y aria-label. Mismo alto que antes, cuadrados. */
.pos-acciones .boton-icono-pos, .pos-acciones summary.boton-icono-pos { width: 34px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.mas-acciones { position: relative; display: inline-block; }
.mas-acciones summary { list-style: none; cursor: pointer; }
.mas-acciones summary::-webkit-details-marker { display: none; }
.mas-acciones[open] summary { border-color: var(--azul-claro); color: var(--azul); }
.mas-acciones-lista {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
  min-width: 200px; padding: 4px; display: flex; flex-direction: column;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-grande); box-shadow: var(--sombra-flotante);
  text-align: left;
}
.mas-acciones-lista a {
  display: block; padding: 7px 10px; border-radius: var(--radio);
  color: var(--texto); text-decoration: none; font-size: var(--t-base); white-space: nowrap;
}
.mas-acciones-lista a:hover { background: var(--fondo); color: var(--azul); }

/* ---------- PENDIENTES DE /equipos (2026-09-22, propuesta D) ----------
   Las cuatro alertas que vivian sueltas en la fila del titulo (bateria baja,
   sin precio, precio sin revisar, nombres a revisar) se juntaron detras de un
   solo boton con su numero, en la linea de herramientas de la tabla. Reutiliza
   entero el desplegable del Punto de Venta (.mas-acciones / .mas-acciones-lista,
   2026-09-18): lo unico propio es como se ve el boton y como se alinea cada
   fila -- nombre a la izquierda, cifra a la derecha. Ver templates/_pendientes_equipos.html. */
.boton-pendientes {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; font-weight: 600; font-size: var(--t-base);
  border: 1px solid var(--borde); border-radius: var(--radio); padding: 5px 11px;
}
/* El tono lo decide el pendiente mas grave que haya adentro, y el numero va
   escrito: el color nunca es la unica señal. */
.boton-pendientes.roja { border-color: #e6cac7; color: var(--rojo); }
.boton-pendientes.ambar { border-color: #ebdcc0; color: var(--ambar); }
.boton-pendientes .globo {
  border-radius: 999px; padding: 0 7px; font-size: var(--t-xs); line-height: 17px;
  background: var(--suave); color: #fff;
}
.boton-pendientes.roja .globo { background: var(--rojo); }
.boton-pendientes.ambar .globo { background: var(--ambar); }
.pendientes-equipos[open] summary.boton-pendientes.roja { border-color: var(--rojo); color: var(--rojo); }
.pendientes-equipos[open] summary.boton-pendientes.ambar { border-color: var(--ambar); color: var(--ambar); }
/* Cada fila es "que es" + "cuantos hay". El <span> es la fila que no lleva a
   ningun lado (Nombres a revisar no tiene filtro propio): mismo dibujo, sin
   cursor de enlace ni hover. */
.lista-pendientes { min-width: 250px; }
.lista-pendientes a, .lista-pendientes .fila-pendiente {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 7px 10px; border-radius: var(--radio);
  font-size: var(--t-base); color: var(--texto); white-space: nowrap;
}
.lista-pendientes .cifra { font-weight: 700; }
.lista-pendientes .cifra.roja { color: var(--rojo); }
.lista-pendientes .cifra.ambar { color: var(--ambar); }
.lista-pendientes a:hover .cifra { color: inherit; }
/* En una pantalla angosta el boton NO esta pegado al borde derecho (la barra
   de herramientas se parte en varias lineas y queda a la izquierda), asi que
   el "right: 0" heredado del desplegable del POS -- que alla si vive en la
   ultima columna de la tabla -- tiraba el panel 69px FUERA de la pantalla y
   cortaba "Bateria baja" a "aja" (medido a 375px, no leido). Anclado a la
   izquierda del boton y con tope de ancho, entra siempre. */
@media (max-width: 700px) {
  .lista-pendientes { right: auto; left: 0; max-width: calc(100vw - 36px); }
}

/* La barra de venta multiple, oscura y flotando sobre la tabla. */
.barra-pos {
  background: var(--azul-fuerte); border-color: var(--azul-fuerte); color: #fff;
  gap: 16px; margin-top: 0;
}
.barra-pos-cuenta { font-weight: 600; font-size: var(--t-md); }
.barra-pos-lista { color: #bdd4e8; font-size: var(--t-base); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-pos-total { color: #bdd4e8; font-size: var(--t-base); white-space: nowrap; }
.barra-pos-total b { color: #fff; font-size: var(--t-lg); margin-left: 4px; }
.barra-pos .boton-claro { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
.barra-pos .boton-claro:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }
.barra-pos button[type="submit"] { background: #7fb0de; border-color: #7fb0de; color: var(--azul-fuerte); font-weight: 700; }
.barra-pos button[type="submit"]:hover { background: #bdd4e8; border-color: #bdd4e8; color: var(--azul-fuerte); }
@media (max-width: 700px) {
  .pos-buscador { flex-wrap: wrap; }
  .pos-campo { height: 44px; }
  .pos-campo input { font-size: var(--t-md); }
  .barra-pos-lista { display: none; }
  .pos-separador { display: none; }
}

/* Calendario de vacaciones (2026-09-19): una celda por dia, cada vacacion
   vigente como una pastilla con el nombre, en el color de su estado (los
   mismos de .chapa-solicitud). Sin libreria: es una tabla. */
.cal-vac-cabecera { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cal-vac-cabecera h2 { margin: 0 4px; border: 0; padding: 0; }
.cal-vac-salto { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.cal-vac-salto input { width: auto; }
.cal-vac { table-layout: fixed; min-width: 700px; }
.cal-vac th { text-align: center; }
.cal-vac td { vertical-align: top; height: 84px; padding: 4px 5px; border: 1px solid var(--borde); }
.cal-vac td.fuera { background: var(--fondo); color: var(--suave); }
.cal-vac td.hoy .cal-vac-dia { color: var(--azul); font-weight: 700; }
.cal-vac-dia { font-size: var(--t-sm); color: var(--suave); margin-bottom: 3px; }
.cal-vac-item { display: block; font-size: var(--t-xs); line-height: 1.3; padding: 1px 5px; margin-bottom: 2px;
  border-radius: var(--radio-chico); border: 1px solid var(--borde); background: var(--azul-tenue); color: var(--texto);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.cal-vac-item:hover { border-color: var(--azul); }
.cal-vac-item.pendiente { background: var(--ambar-fondo); border-color: #ebdcc0; color: var(--ambar); }
.cal-vac-item.en-compra { background: var(--naranja-fondo); border-color: #e8cdb4; color: #a1490a; }
.cal-vac-item.entregada { background: var(--verde-fondo); border-color: #cfe0d6; color: var(--verde); }
/* La tarjeta-resumen de vacaciones del expediente reusa .tarjetas-repuestos. */
.cifras-vac .tarjeta-repuesto-numero { white-space: nowrap; }

/* ---------- Buscador de pantallas: la lupa y la paleta (2026-09-19) ----------
   Opcion B de las tres propuestas del canvas "Buscador del menu". La barra
   solo gana una lupa junto a la campana (no un campo que le coma ancho);
   al tocarla, o con Ctrl+K, se abre una paleta centrada sobre la pagina que
   filtra las pantallas del menu (ver el bloque de base.html). Mismos
   colores y radios que .desplegable: es el mismo tipo de superficie. */
.buscar-boton {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0 9px; color: #c3d3e2;
  background: transparent; border: 0; border-radius: var(--radio);
  cursor: pointer; font: inherit; font-size: var(--t-base); font-weight: 600;
  transition: background .15s, color .15s;
}
.buscar-boton:hover, .buscar-boton:focus-visible { background: rgba(255,255,255,.08); color: #fff; }
/* La lupa del telefono (junto al boton del menu) no existe en escritorio. */
.buscar-boton-movil { display: none; }

.paleta-fondo {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(11,35,56,.38);
  display: flex; justify-content: center; align-items: flex-start;
  padding: 96px 16px 16px;
}
.paleta-fondo[hidden] { display: none; }
.paleta {
  width: 640px; max-width: 100%; max-height: calc(100vh - 112px);
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-grande); box-shadow: 0 8px 24px rgba(11,35,56,.22);
  display: flex; flex-direction: column; overflow: hidden;
}
.paleta-campo {
  display: flex; align-items: center; gap: 12px; margin: 0;
  padding: 12px 18px; border-bottom: 1px solid var(--borde); cursor: text;
  color: var(--azul);
}
.paleta-campo svg { flex-shrink: 0; }
/* El campo es la paleta entera: sin el borde ni el foco de los inputs
   normales, porque la caja que lo envuelve ya es el borde. */
.paleta-campo input, .paleta-campo input:focus {
  flex: 1; min-width: 0; width: auto; border: 0; outline: 0; box-shadow: none;
  padding: 0; background: transparent; font-size: 17px; color: var(--texto);
}
.paleta-cerrar { background: transparent; border: 0; padding: 0; cursor: pointer; }
.paleta kbd {
  display: inline-block; font-family: inherit; font-weight: 600; font-size: 10.5px; line-height: 1;
  color: var(--suave); border: 1px solid var(--borde); border-radius: var(--radio-chico);
  padding: 3px 5px;
}
.paleta-lista { padding: 7px; overflow-y: auto; display: flex; flex-direction: column; }
.paleta-titulo {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.3px;
  color: #9aa8b8; font-weight: 700; padding: 10px 12px 6px;
}
.paleta-fila {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: var(--radio); color: var(--texto); text-decoration: none;
  font-size: var(--t-md);
}
.paleta-fila b { font-weight: 700; }
.paleta-fila .paleta-ruta { margin-left: auto; font-size: var(--t-sm); color: var(--tenue); white-space: nowrap; }
/* La fila marcada con las flechas o el mouse: el mismo azul tenue del
   hover de los desplegables. Nunca se navega sin verla marcada. */
.paleta-fila.activa { background: #e8f0f8; color: var(--azul); }
.paleta-fila.activa .paleta-ruta { color: var(--suave); }
.paleta-vacio { padding: 22px 12px; color: var(--suave); font-size: var(--t-base); text-align: center; }
.paleta-pie {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 9px 19px; border-top: 1px solid var(--borde-suave);
  font-size: var(--t-xs); color: var(--tenue);
}
.paleta-pie .paleta-cuenta { margin-left: auto; }
/* Mientras la paleta esta abierta la pagina de atras no se desplaza. */
body.paleta-abierta { overflow: hidden; }

@media (max-width: 900px) {
  /* En el telefono manda la lupa de arriba; la de la barra de modulos se va
     con el acordeon. Va entre la marca y el boton del menu, con su mismo
     aspecto de boton cuadrado. */
  .modulo-buscar { display: none; }
  .buscar-boton-movil {
    display: flex; order: 2; width: 38px; height: 38px; margin-left: auto;
    border: 1px solid rgba(255,255,255,.35); padding: 0;
  }
  .menu-boton { margin-left: 0; }
  /* La paleta ocupa todo el ancho, pegada a la barra, y cada fila pone la
     ruta debajo del nombre porque al lado no cabe. */
  .paleta-fondo { padding: 52px 0 0; align-items: stretch; }
  .paleta { width: 100%; max-height: none; border-radius: 0; border-left: 0; border-right: 0; }
  .paleta-fila { flex-direction: column; align-items: flex-start; gap: 3px; }
  .paleta-fila .paleta-ruta { margin-left: 0; white-space: normal; }
  .paleta-pie span:not(.paleta-cuenta) { display: none; }
  .paleta-pie .paleta-cuenta { margin-left: 0; }
}

/* ---------- La campana de Avisos en bloques (2026-09-21) ----------
   La campana es una puerta mas de menu_modulos.py (clave "avisos"): en la
   barra se pinta activa igual que las otras cuatro cuando se esta en
   /modulo/avisos o en una de sus pantallas, y en la pagina del modulo cada
   enlace lleva su chapa con el numero de avisos (la misma .chapa-solicitud
   del desplegable viejo). La pastilla del area gana el tono "rojo" para
   cuando hay una tarea vencida -- el color va siempre con la palabra. */
.modulo-avisos.modulo-activo > a { background: #1b6fd6; color: #fff; box-shadow: none; }
.modulo-avisos:hover > a { color: #fff; }
.puerta-pastilla.rojo { background: var(--rojo-fondo); color: var(--rojo); }
.puerta-enlace-texto { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.puerta-enlaces .chapa-solicitud { margin-left: 0; }

/* ---------- Cuentas Bancarias en el tablero, opcion D (2026-09-21) ----------
   Pestana Referencia: a la izquierda (8/12) una tarjeta por BANCO con sus
   cuentas adentro, a la derecha (4/12) el panel "Compartir con el cliente"
   (QR, PDF, impresion, administrar). Reemplaza a .cuentas-banco/
   .cuenta-tarjeta (una columna de 7 tarjetas), que siguen en el CSS por
   si otra pantalla las usa. */
.cuentas-tablero { display: grid; grid-template-columns: 8fr 4fr; gap: 16px; align-items: start; }
.cuentas-tablero > div { min-width: 0; }
.cuentas-titulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cuentas-titulo svg { color: var(--azul); flex-shrink: 0; }
.cuentas-bancos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cuenta-banco { border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: 12px 14px 4px; }
.cuenta-banco-cabecera { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cuenta-banco-cabecera b { font-size: var(--t-md); }
.cuenta-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--borde-suave);
}
.cuenta-fila-datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Numero en gris medio y sin negrita (2026-09-21, opcion 2 de cuatro tonos
   de gris que eligio el usuario): el nombre del banco queda como lo unico
   en tinta de la tarjeta; el numero se lee por tamano (18 px, aire entre
   cifras), no por grosor. El rotulo baja un tono mas (--tenue). */
.cuenta-fila .cuenta-tipo { font-size: var(--t-xs); color: var(--tenue); }
.cuenta-fila .cuenta-numero { font-size: 18px; font-weight: 400; color: var(--suave); letter-spacing: .5px; white-space: nowrap; }
.cuenta-copiar { white-space: nowrap; flex-shrink: 0; }
.cuenta-banco .cuenta-titular { padding: 8px 0 8px; border-top: 1px solid var(--borde-suave); font-size: var(--t-xs); color: var(--suave); }
.cuentas-compartir { display: flex; flex-direction: column; gap: 12px; }
.cuentas-qr { display: flex; gap: 14px; align-items: center; }
.cuentas-qr svg { border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; flex-shrink: 0; }
.cuentas-qr-texto { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-sm); color: var(--suave); }
.cuentas-qr-texto b { color: var(--texto); }
.cuentas-bloque { border-top: 1px solid var(--borde-suave); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cuentas-bloque .cuentas-imprimir, .cuentas-bloque .acciones-linea { align-self: stretch; }
.cuentas-bloque-titulo { font-size: var(--t-xs); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--suave); }
.acciones-linea { display: flex; gap: 8px; flex-wrap: wrap; }
.cuentas-imprimir { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cuentas-imprimir-selectores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
.cuentas-imprimir-selectores select { width: 100%; min-width: 0; }
@media (max-width: 1000px) {
  .cuentas-tablero { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .cuentas-bancos { grid-template-columns: 1fr; }
  .cuentas-imprimir-selectores { grid-template-columns: 1fr; }
}

/* ---------- Mis notas (2026-09-21) ----------
   El bloc personal de cada usuario. Reusa .panel, .buscador, .boton-icono,
   .celda-iconos, .modal-panel y .datos; aqui solo la rejilla de tarjetas,
   la hoja del editor y el [+] fijo del celular. Ningun color nuevo. */
.solo-lectores { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.barra-derecha .notas-enlace { display: inline-flex; align-items: center; gap: 6px; }
.barra-derecha .notas-enlace svg { width: 14px; height: 14px; }
/* Sin recuadro (pedido del usuario 2026-09-21): Manuales y Mis notas son
   enlaces de la barra, no botones; el marco de .salir queda solo en Salir.
   La pantalla activa se marca en negrita y blanco, sin fondo ni borde. */
.barra-derecha .manuales-enlace, .barra-derecha .notas-enlace { border-color: transparent; padding: 6px 10px; }
.barra-derecha .manuales-enlace svg { width: 15px; height: 15px; }
.barra-derecha .notas-enlace.activo { font-weight: 600; color: #fff; }

/* "Lo mio" a la derecha (2026-09-21, opcion 3 del canvas con icono y
   palabra): campana, lupa, Manuales y Mis notas forman un grupo al lado
   derecho, y una linea fina los separa del usuario y de Salir. La campana
   y la lupa NO se mueven en el HTML (su desplegable, el globo y el
   acordeon del celular siguen igual): solo se ordenan con flex al final de
   la barra de modulos, que crece para pegarlos a la derecha. */
.modulos { flex-grow: 1; }
.modulo-avisos { order: 10; margin-left: auto; }
.modulo-buscar { order: 11; }
.barra-derecha { gap: 4px; }
.barra-derecha .quien {
  border-left: 1px solid rgba(255,255,255,.22); padding-left: 14px; margin-left: 8px;
}
.barra-derecha .salir:last-child { margin-left: 6px; }
@media (max-width: 900px) {
  .modulos { flex-grow: 0; }
  .modulo-avisos, .modulo-buscar { order: 0; margin-left: 0; }
  .barra-derecha .quien { border-left: 0; padding-left: 0; margin-left: 0; }
}
.notas-titulo { display: flex; align-items: center; gap: 10px; }
.notas-titulo svg { width: 20px; height: 20px; color: var(--azul); }
.notas-conteo { font-size: var(--t-sm); color: var(--tenue); }
.notas-barra { align-items: center; justify-content: space-between; }
.notas-buscar { display: flex; gap: 8px; flex-grow: 1; max-width: 560px; }
.notas-buscar input { flex-grow: 1; min-width: 0; }
.notas-nueva { display: inline-flex; align-items: center; gap: 8px; }
.notas-nueva svg { width: 14px; height: 14px; stroke-width: 2.4; }
.notas-seccion { margin-bottom: 18px; }
.notas-rotulo {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--tenue); font-weight: 600;
}
.notas-rotulo span { display: inline-flex; align-items: center; gap: 6px; }
.notas-rotulo svg { width: 12px; height: 12px; color: var(--ambar); }
.notas-rotulo i { flex-grow: 1; height: 1px; background: var(--borde-suave); }
.notas-rotulo small { font-size: var(--t-sm); text-transform: none; letter-spacing: 0; font-weight: 400; }
/* Desde 2026-09-22 las tarjetas van en fila y no en rejilla: cada una puede
   tener su propio tamano (arrastrando el borde) y una rejilla de columnas
   iguales lo pisaria. Sin tamano guardado miden 320px de ancho. */
.notas-rejilla { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.nota-tarjeta {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 8px; min-height: 150px;
  transition: border-color .12s; position: relative; box-sizing: border-box;
  flex: none; width: 320px; max-width: 100%;
}
.nota-tarjeta:hover { border-color: var(--azul-claro); }
.nota-tarjeta.fijada { border-color: var(--borde-fuerte); background: #fdfcf8; }
.nota-abrir { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 6px; flex-grow: 1; }
.nota-abrir h3 { margin: 0; font-size: var(--t-md); font-weight: 600; line-height: 1.3; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nota-abrir p {
  margin: 0; font-size: var(--t-base); color: var(--suave); line-height: 1.45;
  white-space: pre-line; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.nota-sin-titulo { color: var(--tenue); font-style: italic; font-weight: 400; }
.chapa-nota {
  font-size: var(--t-xs); font-weight: 600; padding: 1px 7px; border-radius: var(--radio-chico);
  border: 1px solid #ebdcc0; background: var(--ambar-fondo); color: var(--ambar);
}
.nota-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--t-sm); color: var(--tenue); }
.nota-form-inline { display: inline-block; margin: 0; }
.nota-form-inline .boton-icono, .celda-iconos a.boton-icono { display: inline-block; vertical-align: middle; }
.celda-iconos .nota-form-inline + a, .celda-iconos a + .nota-form-inline { margin-left: 4px; }
.boton-icono.activo { color: var(--ambar); border-color: #ebdcc0; background: var(--ambar-fondo); }
.boton-icono.activo svg { fill: currentColor; }
.notas-privacidad { display: flex; align-items: center; gap: 6px; font-size: var(--t-sm); color: var(--tenue); margin: 8px 0 0; }
.notas-privacidad svg { width: 13px; height: 13px; flex-shrink: 0; }
.notas-dialogo-acciones { justify-content: flex-end; }

/* Casillas de pendientes en la tarjeta (2026-09-21, propuesta B) */
.nota-abrir.con-casillas { flex-grow: 0; }
.nota-casillas { display: flex; flex-direction: column; gap: 5px; flex-grow: 1; }
.nota-casilla { display: flex; align-items: flex-start; gap: 8px; font-size: var(--t-base); line-height: 1.4; color: var(--texto); cursor: pointer; }
.nota-casilla input { margin: 3px 0 0; width: 15px; height: 15px; flex-shrink: 0; accent-color: var(--azul); cursor: pointer; }
.nota-casilla.hecha span { color: var(--tenue); text-decoration: line-through; }
.nota-casillas-mas { font-size: var(--t-sm); color: var(--tenue); padding-left: 23px; }
.nota-progreso { height: 4px; background: var(--borde-suave); border-radius: var(--radio-chico); overflow: hidden; margin-top: 4px; }
.nota-progreso i { display: block; height: 100%; background: var(--azul); transition: width .2s; }
.nota-progreso-texto { font-size: var(--t-xs); color: var(--tenue); }
.nota-progreso-texto b { color: var(--suave); font-weight: 600; }
.nota-casillas-lista { display: flex; flex-direction: column; gap: 5px; }
.nota-tarjeta:not(.con-tamano) .nota-casilla.extra { display: none; }

/* Tamano propio (2026-09-22): la tarjeta mide lo que se le dio y lo que no
   entra se corta; el texto deja de limitarse a 3 lineas y las casillas
   muestran todas las que quepan. */
/* La tarjeta misma NO lleva overflow:hidden: cortaria el menu de colores,
   que se abre hacia arriba desde el pie. Se cortan las partes de adentro. */
.nota-tarjeta.con-tamano { min-height: 0; }
.nota-tarjeta.con-tamano .nota-pie { flex-shrink: 0; }
.nota-tarjeta.con-tamano .nota-abrir { min-height: 0; overflow: hidden; }
.nota-tarjeta.con-tamano .nota-abrir p { display: block; -webkit-line-clamp: unset; }
.nota-tarjeta.con-tamano .nota-casillas { min-height: 0; overflow: hidden; }
.nota-tarjeta.con-tamano .nota-casillas-lista { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.nota-tarjeta.con-tamano .nota-casillas-mas { display: none; }
.nota-tarjeta.redimensionando { user-select: none; border-color: var(--azul); transition: none; }
.nota-asa { position: absolute; z-index: 2; }
.nota-asa-der { top: 0; right: -3px; width: 8px; height: 100%; cursor: ew-resize; }
.nota-asa-abajo { left: 0; bottom: -3px; width: 100%; height: 8px; cursor: ns-resize; }
.nota-asa-esquina { right: -3px; bottom: -3px; width: 16px; height: 16px; cursor: nwse-resize; z-index: 3; }
.nota-asa-esquina::after {
  content: ""; position: absolute; right: 6px; bottom: 6px; width: 7px; height: 7px;
  border-right: 2px solid var(--tenue); border-bottom: 2px solid var(--tenue); opacity: .5;
}
.nota-tarjeta:hover .nota-asa-esquina::after { opacity: 1; }

/* Colores pasteles (2026-09-22). Los elige la persona, nota por nota; la
   clave se guarda en la base y el tono vive solo aqui. Van DESPUES de
   .fijada para ganarle al fondo de la fijada. */
/* Amarillo, rosa, celeste y menta: el tono de los post-it que mando el
   usuario (2026-09-22, "ajusta a estos colores"). */
.nota-color-amarillo { --nota-fondo: #f7f29c; --nota-borde: #d9d25e; }
.nota-color-durazno  { --nota-fondo: #ffe5d1; --nota-borde: #efc09c; }
.nota-color-rosa     { --nota-fondo: #f6bcb6; --nota-borde: #df948c; }
.nota-color-lila     { --nota-fondo: #ece3fb; --nota-borde: #c9b6ec; }
.nota-color-celeste  { --nota-fondo: #acdaf0; --nota-borde: #7fbddc; }
.nota-color-menta    { --nota-fondo: #bde8ae; --nota-borde: #8fcb7c; }
.nota-color-gris     { --nota-fondo: #eef0f3; --nota-borde: #c8ced6; }
.nota-tarjeta[class*="nota-color-"], .nota-hoja[class*="nota-color-"] {
  background: var(--nota-fondo); border-color: var(--nota-borde);
}
.nota-tarjeta[class*="nota-color-"]:hover { border-color: var(--azul-claro); }
.nota-tarjeta[class*="nota-color-"] .boton-icono { background: rgba(255,255,255,.65); }
.nota-tarjeta[class*="nota-color-"] .nota-progreso { background: rgba(0,0,0,.08); }

/* El menu de colores */
.nota-color-menu { display: inline-block; position: relative; vertical-align: middle; margin-right: 4px; }
.nota-color-menu > summary { list-style: none; cursor: pointer; display: inline-block; }
.nota-color-menu > summary::-webkit-details-marker { display: none; }
.nota-color-menu > summary svg { width: 15px; height: 15px; }
.nota-colores {
  position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 20; margin: 0;
  display: grid; grid-template-columns: repeat(4, 26px); gap: 8px; padding: 10px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra-flotante);
}
.nota-muestra {
  width: 26px; height: 26px; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--nota-fondo, #fff); border: 1px solid var(--nota-borde, var(--borde-fuerte));
}
.nota-muestra.nota-color-ninguno { background: #fff linear-gradient(135deg, transparent 46%, var(--rojo) 46%, var(--rojo) 54%, transparent 54%); }
.nota-muestra:hover { transform: scale(1.1); }
.nota-muestra.elegida { outline: 2px solid var(--azul); outline-offset: 2px; }

.notas-herr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.notas-herr .boton-mini { display: inline-flex; align-items: center; gap: 6px; }
.notas-herr .boton-mini svg { width: 13px; height: 13px; }
.notas-herr code { background: var(--fondo); padding: 0 4px; border-radius: var(--radio-chico); font-family: var(--fuente-mono); font-size: var(--t-xs); }

/* El panel del tablero (2026-09-21, propuesta C) */
.notas-tablero-titulo { display: inline-flex; align-items: center; gap: 8px; }
.notas-tablero-titulo svg { width: 16px; height: 16px; color: var(--azul); }
.notas-tablero-lista { display: flex; flex-direction: column; margin-bottom: 12px; }
.notas-tablero-fila { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--borde-suave); text-decoration: none; color: inherit; }
.notas-tablero-fila:last-child { border-bottom: 0; }
.notas-tablero-fila:hover .notas-tablero-t { color: var(--azul); }
.notas-tablero-t { font-size: var(--t-base); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.notas-tablero-t svg { width: 12px; height: 12px; color: var(--ambar); fill: currentColor; flex-shrink: 0; }
.notas-tablero-p { font-size: var(--t-sm); color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notas-tablero-p b { color: var(--texto); font-weight: 600; }
.notas-rapida { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--borde-suave); padding-top: 10px; }
.notas-rapida-rotulo { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); font-weight: 600; }
.notas-rapida textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 56px; }
.notas-rapida-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.modal-panel h2 svg { width: 18px; height: 18px; color: var(--rojo); vertical-align: -3px; margin-right: 6px; }
.notas-mas-movil { display: none; }

/* El editor */
.nota-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.nota-volver { text-decoration: none; font-size: var(--t-base); display: inline-flex; align-items: center; gap: 6px; }
.nota-volver svg { width: 14px; height: 14px; }
.nota-estado { font-size: var(--t-sm); color: var(--verde); display: inline-flex; align-items: center; gap: 6px; }
.nota-estado svg { width: 13px; height: 13px; stroke-width: 2.4; }
.nota-estado.guardando { color: var(--tenue); }
.nota-estado.error { color: var(--rojo); }
.nota-editor { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.nota-hoja { display: flex; flex-direction: column; gap: 12px; min-height: 560px; }
.nota-titulo-campo {
  border: 0; border-bottom: 1px solid var(--borde-suave); border-radius: 0; padding: 4px 0 10px;
  font: inherit; font-family: var(--fuente-titulo); font-size: var(--t-xl); font-weight: 700;
  color: var(--texto); background: transparent; width: 100%; box-sizing: border-box;
}
.nota-titulo-campo:focus { outline: 0; border-bottom-color: var(--azul); box-shadow: none; }
.nota-contenido-campo {
  flex-grow: 1; border: 0; border-radius: 0; resize: vertical; padding: 0; min-height: 440px;
  font: inherit; font-size: var(--t-md); line-height: 1.6; color: var(--texto); background: transparent;
  width: 100%; box-sizing: border-box;
}
.nota-contenido-campo:focus { outline: 0; box-shadow: none; }
.nota-hoja-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--borde-suave); padding-top: 10px; }
.nota-ayuda { font-size: var(--t-sm); color: var(--tenue); line-height: 1.45; }
.nota-suave { color: var(--suave); }
.nota-lateral { display: flex; flex-direction: column; gap: 14px; }
.nota-lateral .panel { margin-bottom: 0; }
.nota-acciones form { margin: 0; }
.nota-acciones form + form { margin-top: 8px; }
.nota-acciones .boton-claro, .nota-acciones .boton-rojo { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; }
.nota-acciones .nota-ayuda { display: block; margin-top: 8px; }
.nota-acciones svg { width: 14px; height: 14px; }

@media (max-width: 1000px) {
  .nota-editor { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  /* En el celular la tarjeta ocupa todo el ancho y no se redimensiona:
     el tamano guardado desde la PC se ignora aqui (sigue guardado). */
  .nota-tarjeta, .nota-tarjeta.con-tamano { min-height: 0; width: 100% !important; height: auto !important; overflow: visible; }
  .nota-asa { display: none; }
  .notas-barra .notas-nueva { display: none; }
  .notas-buscar { max-width: none; }
  .notas-buscar input { height: 44px; font-size: 15px; }
  .notas-mas-movil {
    display: block; position: fixed; right: 16px; bottom: 22px; z-index: 40; margin: 0;
  }
  .notas-mas-movil button {
    width: 52px; height: 52px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    box-shadow: var(--sombra-flotante);
  }
  .notas-mas-movil svg { width: 22px; height: 22px; stroke-width: 2.4; }
  .nota-hoja { min-height: 0; padding: 14px 16px; }
  .nota-contenido-campo { min-height: 320px; font-size: 16px; }
  .nota-hoja-pie { flex-direction: column; align-items: stretch; }
  .nota-hoja-pie button { width: 100%; }
}

/* ---------- /equipos en pestañas sobre el azul de la marca (2026-09-21) ----------
   Propuesta C de tres (canvas de Design), elegida por el usuario viendo la
   captura con 5 conmutadores de botones apilados: Laptops/Otro Inventario,
   Por familias/Lista completa, ubicacion, estado y revision de precios.
   Ahora la pantalla son DOS tarjetas con una barra de pestañas encima, como
   la referencia que mando: la barra en el azul de la marca, la pestaña
   activa blanca que se funde con la tarjeta. Dentro de la segunda, la franja
   celeste lleva el estado y la revision de precios.
   Solo lo usan lista_agrupada.html y lista.html; .conmutador sigue intacto
   para el POS, el catalogo, /ubicaciones y los demas. */
.tarjeta-pestanas {
  background: var(--superficie); border: 1px solid var(--borde); border-top: 0;
  border-radius: var(--radio); margin: 0 0 14px;
}
.pestanas-azul {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 3px;
  padding: 6px 10px 0; margin: 0 -1px;
  background: var(--azul); border-radius: var(--radio) var(--radio) 0 0;
}
.pestanas-azul a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px; font-size: var(--t-base); font-weight: 600; white-space: nowrap;
  color: #fff; background: var(--azul-claro); text-decoration: none;
  border-radius: var(--radio) var(--radio) 0 0;
}
.pestanas-azul a:hover { background: #3a74a8; color: #fff; }
.pestanas-azul a.activa { background: var(--superficie); color: var(--texto); padding-top: 10px; }
.pestanas-azul a:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.pestanas-azul svg { width: 14px; height: 14px; flex: 0 0 auto; }
/* Empuja lo que sigue al extremo derecho de la barra (la vista, la revision). */
.pestanas-espacio { flex: 1 1 auto; }
/* La franja clara de adentro: estado a la izquierda, revision de precios a
   la derecha. Mismo dibujo de carpeta, en tinte. */
.pestanas-franja {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 3px;
  padding: 6px 10px 0; background: var(--azul-tenue);
  border-bottom: 1px solid #c9d8e8;
}
.pestanas-franja a {
  padding: 7px 13px; font-size: var(--t-sm); font-weight: 600; white-space: nowrap;
  color: var(--azul); background: #d3e0ee; text-decoration: none;
  border-radius: var(--radio) var(--radio) 0 0;
}
.pestanas-franja a:hover { background: #c4d5e8; color: var(--azul); }
.pestanas-franja a.activa { background: var(--superficie); color: var(--texto); padding-top: 9px; }
.pestanas-rotulo { font-size: var(--t-xs); color: var(--azul); padding: 0 6px 9px 0; white-space: nowrap; }
/* Cuerpo de la primera tarjeta (buscador + aviso de comentarios). */
.tarjeta-pestanas-cuerpo { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.tarjeta-pestanas-cuerpo .buscador { margin: 0; }
.tarjeta-pestanas-cuerpo .detalle.aviso { margin: 0; }
/* Renglon de herramientas sobre la tabla (cuantas familias, Expandir/Contraer). */
.pestanas-herr {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--borde-suave);
}
.pestanas-cuenta { font-size: var(--t-base); color: var(--suave); }
.pestanas-herr .acciones { margin-left: auto; }
/* La tabla y los mensajes viven dentro de la tarjeta: sin doble borde. */
.tarjeta-pestanas > .tabla-scroll { border: 0; border-radius: 0; box-shadow: none; }
/* /ubicaciones (2026-09-21): la tabla va dentro del <form> de traslado, y la
   barra pegajosa de "Trasladar" necesita aire dentro de la tarjeta. */
.tarjeta-pestanas > form > .tabla-scroll { border: 0; border-radius: 0; box-shadow: none; }
.tarjeta-pestanas .barra-traslado { margin: 14px 12px 12px; }
.tarjeta-pestanas > .nota-panel { margin: 12px 16px 14px; }
.tarjeta-pestanas > .vacio, .tarjeta-pestanas > .aviso { margin: 14px 16px; }
/* Variante con las pestanas DEBAJO del cuerpo (POS, 2026-09-21: la caja de
   escaneo es lo primero que se usa y va arriba). La barra azul deja de ser el
   borde superior de la tarjeta, asi que la tarjeta recupera su linea de
   arriba y la barra pierde el redondeo; la franja cierra la tarjeta por
   abajo, y como ya no hay nada blanco debajo de ella, la pestana activa va
   redondeada entera en vez de fundirse. */
.tarjeta-pestanas.pestanas-abajo { border-top: 1px solid var(--borde); }
.pestanas-abajo .pestanas-azul { border-radius: 0; margin-top: 0; }
.pestanas-abajo .pestanas-franja {
  border-bottom: 0; padding-bottom: 6px; margin: 0 -1px -1px;
  border-radius: 0 0 var(--radio) var(--radio);
}
.pestanas-abajo .pestanas-franja a { border-radius: var(--radio); }
.pestanas-abajo .pestanas-franja a.activa { padding-top: 7px; }
@media (max-width: 700px) {
  .pestanas-azul a { padding: 7px 11px; font-size: var(--t-sm); }
  .pestanas-espacio { flex-basis: 100%; }
}
@media print {
  .tarjeta-pestanas { border: 0; }
  .pestanas-azul, .pestanas-franja, .pestanas-herr { display: none !important; }
}

/* ---------- La ficha del equipo en pestanas azules (2026-09-22) ------------
   Propuesta C de tres (canvas de Design), elegida por el usuario viendo la
   captura de /equipo/<id>: las cuatro pestanas (Resumen, Hardware, Costos y
   repuestos, Historial) pasan del subrayado de siempre a la barra azul que
   ya usan /equipos, /ubicaciones y el POS, y debajo va una franja clara con
   las herramientas del equipo -- los nueve botones que se amontonaban junto
   al titulo. Arriba quedan solo el nombre, Resumen Tecnico y Volver.

   ⚠ El componente .pestanas NO se toca: lo comparten la Ficha Tecnica, la
   Orden de Trabajo, Garantias, el Tablero y la Recepcion del Taller, y
   cambiarlo ahi cambiaria esas pantallas de golpe. Esto es una VARIANTE que
   se pide con las dos clases juntas (`class="pestanas pestanas-azul"`), asi
   el JavaScript de base.html -- que busca nav.pestanas y .pestana -- sigue
   moviendo las hojas sin enterarse, y el dibujo azul sale de .pestanas-azul,
   que ya existia (2026-09-21). Ahi las pestanas son enlaces <a> (navegacion)
   y aqui son <button> (esconden y muestran una hoja): de eso son las reglas
   de abajo, que pintan el .pestana igual que aquellos <a>. */
.corona-pestanas {
  background: var(--superficie); border: 1px solid var(--borde); border-top: 0;
  border-radius: var(--radio); margin: 0 0 14px;
  /* Sin overflow:hidden (2026-09-22): cortaba el menu "Mover la laptop",
     que se abre hacia abajo. Las esquinas redondas las ponen la barra azul
     (arriba) y la franja (abajo). */
  position: relative; z-index: 5;
}
.corona-pestanas > .pestanas-azul { border-radius: var(--radio) var(--radio) 0 0; }
/* Papelera unica de la ficha del equipo (2026-09-24): arriba a la derecha de
   la barra azul, fuera del <nav> para no tocar el JS de las pestanas. */
.corona-pestanas.con-borrar > .pestanas-azul { padding-right: 52px; }
.borrar-menu { position: absolute; top: 6px; right: 10px; z-index: 6; }
.borrar-menu > summary {
  list-style: none; cursor: pointer; width: 34px; height: 30px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  color: #cfe0f0; border: 1px solid transparent; border-radius: var(--radio);
}
.borrar-menu > summary::-webkit-details-marker { display: none; }
.borrar-menu > summary:hover, .borrar-menu[open] > summary { color: var(--rojo); background: #fff; border-color: #fff; }
.borrar-menu svg, .dialogo-borrar svg {
  width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.borrar-lista {
  position: absolute; top: calc(100% + 6px); right: 0; width: 330px; padding: 6px 0;
  display: flex; flex-direction: column; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--radio-grande); box-shadow: var(--sombra-flotante);
}
.borrar-titulo {
  padding: 6px 14px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--suave);
}
button.borrar-item {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; box-sizing: border-box;
  padding: 10px 14px; border: 0; border-radius: 0; background: transparent;
  color: var(--rojo); text-align: left; white-space: normal; font-weight: 400;
}
button.borrar-item + button.borrar-item { border-top: 1px solid var(--borde); }
button.borrar-item:hover { background: #fdf6f5; color: var(--rojo); border-color: var(--borde); }
.borrar-item svg { margin-top: 1px; }
.borrar-item span { display: flex; flex-direction: column; gap: 2px; }
.borrar-item b { font-size: var(--t-base); font-weight: 600; color: #7d1a15; }
.borrar-item small { font-size: 11.5px; color: var(--suave); }
.borrar-nota { padding: 6px 14px 4px; font-size: var(--t-xs); color: var(--suave); }
.dialogo-borrar {
  width: min(440px, calc(100vw - 32px)); box-sizing: border-box; padding: 20px 22px;
  border: 0; border-radius: var(--radio-grande); box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
}
.dialogo-borrar::backdrop { background: rgba(15, 25, 40, .45); }
.dialogo-borrar-titulo { display: flex; align-items: center; gap: 10px; color: var(--rojo); }
.dialogo-borrar-titulo svg { width: 22px; height: 22px; }
.dialogo-borrar-titulo b { font-size: 16px; color: var(--texto); }
.dialogo-borrar p { margin: 12px 0 16px; font-size: var(--t-base); line-height: 1.5; }
.dialogo-borrar-botones { display: flex; justify-content: flex-end; gap: 8px; }
.boton-rojo-lleno { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.boton-rojo-lleno:hover { background: #7d1a15; border-color: #7d1a15; color: #fff; }
.corona-pestanas > .franja-herramientas { border-radius: 0 0 var(--radio) var(--radio); }
.pestanas.pestanas-azul {
  gap: 3px; align-items: flex-end; margin: 0;
  padding: 6px 10px 0; border-bottom: 0;
}
.pestanas.pestanas-azul .pestana {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; margin: 0;
  border: 0; border-radius: var(--radio) var(--radio) 0 0;
  color: #fff; background: var(--azul-claro);
  font-size: var(--t-base); font-weight: 600; white-space: nowrap;
}
.pestanas.pestanas-azul .pestana:hover { background: #3a74a8; color: #fff; }
.pestanas.pestanas-azul .pestana.activa {
  background: var(--superficie); color: var(--texto); padding-top: 10px;
}
.pestanas.pestanas-azul .pestana:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
/* El contador ("Costos y repuestos 3") sobre el azul: el gris tenue de
   .pestanas .cuenta no se lee ahi. Chapa clara en la pestana cerrada y la
   de siempre en la abierta, que ya esta sobre blanco. */
.pestanas.pestanas-azul .pestana .cuenta {
  margin-left: 0; font-weight: 700; font-size: var(--t-xs);
  padding: 1px 7px; border-radius: var(--radio);
  background: rgba(11, 35, 56, .38); color: #fff;
}
.pestanas.pestanas-azul .pestana.activa .cuenta {
  background: var(--superficie-2); color: var(--suave); border: 1px solid var(--borde);
}
/* La franja clara de abajo: las herramientas del equipo (ficha, comentarios,
   etiqueta, imprimir y el envio a la impresora). Es el mismo tinte que la
   .pestanas-franja de /equipos, pero ahi las pastillas son pestanas con
   dibujo de carpeta y aqui son botones sueltos, asi que van en blanco con
   borde -- se leen como lo que son, acciones y no secciones. */
.franja-herramientas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 10px; background: var(--azul-tenue); border-top: 1px solid #c9d8e8;
}
.franja-herramientas form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.franja-herramientas a,
.franja-herramientas button,
.franja-herramientas select {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; font-size: var(--t-sm); font-weight: 600; white-space: nowrap;
  color: var(--azul); background: var(--superficie);
  border: 1px solid #cddced; border-radius: var(--radio);
  text-decoration: none; cursor: pointer;
}
.franja-herramientas select { font-weight: 400; padding: 5px 8px; }
.franja-herramientas a:hover,
.franja-herramientas button:hover { background: var(--superficie-2); border-color: #b8cce4; }
.franja-herramientas .cuenta { font-weight: 400; color: var(--suave); }
/* Ficha tecnica / Comentarios / Etiqueta / Imprimir: icono + palabra, sin
   recuadro (2026-09-24, propuesta C). La cuenta de comentarios va en chapita. */
.franja-herramientas .franja-link { background: transparent; border-color: transparent; padding: 5px 9px; }
.franja-herramientas .franja-link:hover { background: var(--superficie); border-color: #cddced; }
/* 17px y los iconos de la opcion A (2026-10-02): portapapeles, conversacion, etiqueta, impresora.
   Subido a 20px el mismo dia (pedido: 20% mas grandes). */
.franja-link svg {
  width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: var(--azul-claro);
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.franja-link .cuenta {
  padding: 0 6px; border-radius: var(--radio-chico); background: #fff;
  font-size: 11px; font-weight: 600; color: var(--azul);
}
/* Empuja lo que sigue al extremo derecho (el envio a imprimir, que es la
   unica herramienta con formulario). */
.franja-espacio { flex: 1 1 auto; }
@media (max-width: 700px) {
  .pestanas.pestanas-azul .pestana { padding: 7px 11px; font-size: var(--t-sm); }
  .franja-espacio { flex-basis: 100%; }
}

/* "Mover la laptop" en la franja del equipo (2026-09-22, propuesta B + D):
   en la PC un boton azul lleno con menu; en el celular los mismos
   movimientos grandes, arriba de todo en la franja. */
.mover-menu { position: relative; display: inline-block; }
.franja-herramientas .mover-menu > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 5px 11px; font-size: var(--t-sm); font-weight: 600; white-space: nowrap;
  color: #fff; background: var(--azul); border: 1px solid var(--azul); border-radius: var(--radio);
}
.mover-menu > summary::-webkit-details-marker { display: none; }
.mover-menu > summary:hover { background: var(--azul-claro); border-color: var(--azul-claro); }
.mover-menu svg, .mover-movil svg {
  width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.mover-lista {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 300px;
  display: flex; flex-direction: column; padding: 6px 0;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande);
  box-shadow: var(--sombra-flotante);
}
.mover-lista .mover-form { display: block; margin: 0; }
.franja-herramientas .mover-item {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; box-sizing: border-box;
  padding: 9px 14px; border: 0; border-radius: 0; background: transparent;
  color: var(--texto); text-align: left; white-space: normal; font-weight: 400;
}
.franja-herramientas .mover-item:hover { background: var(--azul-tenue); }
.mover-item svg { margin-top: 2px; color: var(--azul); }
.mover-item span, .mover-grande span { display: flex; flex-direction: column; gap: 1px; }
.mover-item b { font-size: var(--t-base); font-weight: 600; }
.mover-item small { font-size: var(--t-xs); color: var(--tenue); }
/* Todas las opciones (2026-09-24): secciones "Registrar que volvio" / "Sacar
   o mover", y dos entradas que se abren en el mismo menu con su formulario
   (Trasladar con destino y nota; Recibir del taller). */
.mover-lista { width: 340px; }
.mover-seccion {
  padding: 8px 14px 3px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--suave);
}
.mover-lista .mover-seccion + .mover-seccion, .mover-lista a + .mover-seccion,
.mover-lista details + .mover-seccion, .mover-lista form + .mover-seccion {
  margin-top: 4px; border-top: 1px solid var(--borde); padding-top: 10px;
}
.mover-sub > summary { list-style: none; cursor: pointer; }
.mover-sub > summary::-webkit-details-marker { display: none; }
.mover-sub[open] > summary { background: var(--azul-tenue); }
.franja-herramientas .mover-subform {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  margin: 0 10px 8px; padding: 12px; background: var(--fondo);
  border: 1px solid var(--borde); border-radius: var(--radio);
}
.mover-subform label { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-sm); color: var(--suave); }
.franja-herramientas .mover-subform select,
.mover-subform input[type=text], .mover-subform input:not([type]), .mover-subform textarea {
  width: 100%; box-sizing: border-box; font-size: var(--t-base); color: var(--texto); background: #fff;
}
.mover-subform textarea { resize: vertical; min-height: 52px; }
.mover-sub-texto { font-size: var(--t-sm); color: var(--suave); }
.mover-sub-texto b { color: var(--texto); }
.mover-sub-aviso {
  font-size: 11.5px; color: #6e4611; background: #fefaf3; border: 1px solid #eeddb9;
  border-radius: var(--radio-chico); padding: 6px 8px;
}
.mover-destinos { display: flex; flex-wrap: wrap; gap: 6px; }
.mover-destino { cursor: pointer; }
.mover-destino input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mover-destino span {
  display: inline-block; padding: 6px 11px; font-size: 12.5px; color: var(--texto);
  background: #fff; border: 1px solid var(--borde-fuerte); border-radius: var(--radio);
}
.mover-destino input:checked + span { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 700; }
.mover-destino input:focus-visible + span { outline: 2px solid var(--azul-claro); outline-offset: 1px; }
.franja-herramientas button.mover-subboton {
  justify-content: center; align-self: flex-end; padding: 7px 16px; font-size: var(--t-base);
  color: #fff; background: var(--azul); border-color: var(--azul);
}
.franja-herramientas button.mover-subboton:hover { background: var(--azul-claro); border-color: var(--azul-claro); }
.mover-movil { display: none; }
@media (max-width: 700px) {
  .mover-menu { display: none; }
  .mover-movil .mover-seccion { grid-column: 1 / -1; padding: 4px 0 0; }
  .mover-movil .mover-sub[open] { grid-column: 1 / -1; }
  .mover-movil .mover-sub { display: flex; flex-direction: column; }
  .mover-movil .mover-sub > summary { display: flex; align-items: center; gap: 6px; }
  .mover-movil .mover-subform { margin: 8px 0 0; }
  .mover-movil {
    order: -1; flex-basis: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  }
  .mover-movil .mover-form { display: block; margin: 0; }
  .franja-herramientas .mover-grande {
    width: 100%; min-height: 46px; box-sizing: border-box; justify-content: center;
    font-size: var(--t-base); white-space: normal; text-align: center;
    color: var(--azul); background: var(--superficie); border: 1px solid var(--azul);
  }
  .franja-herramientas .mover-grande.mover-principal { color: #fff; background: var(--azul); }
  .mover-grande small { display: none; }
  .mover-grande svg { width: 16px; height: 16px; }
}

/* Fila de "Recibir en bodega" en el panel En el Taller (2026-09-22, pedido
   del usuario con la captura: las tres casillas terminaban cada una a una
   altura distinta -- medido, las bases caian en 621, 612 y 607px).

   Dos cosas lo causaban: la fila centraba verticalmente (align-items:center)
   un rotulo que es mas alto que sus vecinos, porque "Queda en" va ARRIBA del
   desplegable; y los tres controles tenian alturas distintas de fabrica (el
   select 31px por como el navegador lo dibuja, el campo 34 y el boton 24 por
   ser mini). Se alinean por ABAJO, que es la linea que se ve, y se les da la
   misma altura -- la del campo de texto del sistema. Mismo criterio que
   .fila-pieza y .fila-pago-mixto, que ya alinean al pie. */
.fila-recibir {
  display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap;
  margin-top: 10px;
}
.fila-recibir > label { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.fila-recibir select,
.fila-recibir input,
.fila-recibir button { height: 34px; box-sizing: border-box; }
.fila-recibir button { display: inline-flex; align-items: center; }
/* --- Conceptos adicionales de la venta (2026-09-22, propuesta A) --------
   Dentro de la tarjeta Cobro de pos_venta.html: lo que el cliente paga ademas
   de la laptop (una ampliacion de disco...). Bloque azul tenue para que se
   lea como parte del cobro y no como otro panel. */
.conceptos-venta {
  margin-top: 14px; padding: 12px 14px;
  background: var(--azul-tenue); border: 1px solid #c9dbee; border-radius: var(--radio);
  display: flex; flex-direction: column; gap: 10px;
}
.conceptos-venta-cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.conceptos-venta-titulo { font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--azul); }
#filas-concepto { display: flex; flex-direction: column; gap: 8px; }
#filas-concepto:empty { display: none; }
.fila-concepto { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; }
.fila-concepto > label { flex: 1 1 280px; margin: 0; }
.fila-concepto > label:nth-child(2) { flex: 0 0 140px; }
.fila-concepto input { background: var(--superficie); }
.fila-concepto input[name="concepto_monto"] { text-align: right; }
.fila-concepto .quitar-concepto { flex: 0 0 auto; }
.boton-concepto { align-self: flex-start; border-style: dashed; border-color: var(--azul); color: var(--azul); font-weight: 600; }
.resumen-conceptos { margin: 12px 0 0 auto; max-width: 420px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--suave); }
.resumen-conceptos > div { display: flex; justify-content: space-between; gap: 16px; }
.resumen-conceptos + .precio-final { text-align: right; border-top: 1px solid var(--borde); padding-top: 6px; max-width: 420px; margin-left: auto; }
@media (max-width: 700px) { .fila-concepto > label:nth-child(2) { flex: 1 1 120px; } }

/* pos-iconos-solo-azul (2026-09-22, opcion 5): Vender/Reservar/Mas del POS
   como icono azul sin caja; al pasar el mouse, un fondo suave. */
.pos-acciones a.boton-icono-pos, .pos-acciones summary.boton-icono-pos {
  background: transparent; border: 1px solid transparent; box-shadow: none; color: var(--azul);
}
.pos-acciones a.boton-icono-pos:hover, .pos-acciones summary.boton-icono-pos:hover,
.pos-acciones .mas-acciones[open] summary.boton-icono-pos {
  background: #eaf1f8; border-color: transparent; color: var(--azul);
}

/* pos-precio-junto-acciones (2026-09-22): la columna de iconos mide solo lo
   que ocupan; asi quedan pegados al precio y el espacio sobrante se reparte
   entre las demas columnas. */
.tabla-pos th.pos-col-acciones, .tabla-pos td.pos-col-acciones { width: 1%; white-space: nowrap; padding-left: 6px; }
.tabla-pos td.pos-precio, .tabla-pos th.pos-precio { padding-right: 6px; }

/* pos-acciones-izquierda (2026-09-22): la columna mide lo que ocupa la fila
   mas ancha (una reservada o en delivery lleva chapa y boton con texto), y
   con los iconos a la derecha quedaban lejos del precio en las demas. A la
   izquierda quedan pegados al precio en todas las filas. */
.tabla-pos .pos-col-acciones { text-align: left; }
.tabla-pos .pos-acciones { justify-content: flex-start; }

/* Identificacion y Especificaciones en un solo panel (2026-09-22, ficha del
   equipo que ve el vendedor). Dos columnas con una linea fina en medio; la
   etiqueta de cada dl se achica a 150px porque ya no tiene todo el ancho.
   En el celular se apilan con una linea arriba en vez de al costado. */
.datos-dos-columnas {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 28px; align-items: start;
}
.datos-dos-columnas > :last-child { border-left: 1px solid var(--borde-suave); padding-left: 24px; }
.datos-dos-columnas dl.datos { grid-template-columns: minmax(110px, 150px) minmax(0, 1fr); }
.datos-dos-columnas dd { overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .datos-dos-columnas { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .datos-dos-columnas > :last-child { border-left: 0; padding-left: 0; border-top: 1px solid var(--borde-suave); padding-top: 14px; }
}

/* Icono azul en el titulo de cada panel de la venta (2026-09-22, propuesta A):
   el mismo azul y trazo que .puerta-titulo-icono, a 20px. */
.panel > h2.titulo-panel-icono { display: flex; align-items: center; gap: 8px; }
.panel-titulo-icono { flex-shrink: 0; color: #1b6fd6; }
/* Panel Cliente del Punto de Venta, propuesta C (2026-09-22): el telefono
   primero; si ya es de un cliente registrado sale su tarjeta. */
.etiqueta-tel-cliente { display: block; font-weight: 600; }
.fila-tel-cliente { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; }
.panel-cliente-pos #cliente_telefono {
  width: 260px; max-width: 100%; height: 46px; font-size: 20px; font-weight: 600; letter-spacing: .02em;
}
.cliente-estado {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; background: #eef1f4; color: var(--suave);
}
.cliente-estado.encontrado { background: #e3f1e7; color: #1d5e33; }
.cliente-coincidencias { border: 1px solid var(--borde); border-radius: var(--radio); margin: 0 0 12px; overflow: hidden; }
.cliente-coincidencias button {
  display: flex; width: 100%; justify-content: space-between; gap: 12px; padding: 9px 12px;
  border: 0; border-top: 1px solid var(--borde); background: #fff; font: inherit; text-align: left; cursor: pointer; color: var(--texto);
}
.cliente-coincidencias button:first-child { border-top: 0; }
.cliente-coincidencias button:hover, .cliente-coincidencias button:focus { background: #eaf1f8; }
.cliente-tarjeta {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; margin: 0 0 12px;
  border: 1px solid #c8d8e8; border-radius: var(--radio-grande); background: #f3f7fb;
}
.cliente-iniciales {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; background: var(--azul); color: #fff;
  font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.cliente-tarjeta-datos { flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: 13px; min-width: 0; }
.cliente-tarjeta-datos b { font-size: 17px; }
.panel-cliente-pos .suave { color: var(--suave); }
.cliente-otras { margin: 0 0 12px; }
/* Panel Cliente, propuesta D (2026-09-22): un buscador (telefono o nombre) y campos de linea, sin recuadros. */
.buscador-cliente {
  display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; padding: 2px 14px;
  background: #f1f3f6; border: 1px solid transparent; border-radius: var(--radio-grande); color: var(--suave);
}
.buscador-cliente:focus-within { background: var(--superficie); border-color: var(--azul); }
.panel-cliente-pos .buscador-cliente #cliente_telefono {
  flex: 1; width: auto; min-width: 0; height: 48px; padding: 0; border: 0; background: transparent;
  outline: none; color: var(--texto);
}
.cliente-estado.pista { background: transparent; padding: 0; font-weight: 400; white-space: nowrap; }
.cliente-aviso { margin: 0 0 14px; padding: 8px 12px; border-radius: var(--radio); background: #eef4fa; font-size: 13px; }
.campos-linea { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; }
.campos-linea[hidden] { display: none; }
.campos-linea label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--suave); }
.campos-linea input {
  padding: 6px 0; border: 0; border-bottom: 1px solid var(--borde-fuerte); border-radius: 0; background: transparent;
}
.campos-linea input:focus { outline: none; border-bottom-color: var(--azul); box-shadow: 0 1px 0 var(--azul); }
@media (max-width: 700px) { .campos-linea { grid-template-columns: minmax(0, 1fr); } }
/* Metodo de pago sin desplegable (2026-09-22, B + E): barra de forma y pestanas subrayadas para el banco. */
.pago-unico { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.pago-unico #referencia-pago-bloque { max-width: 420px; }
.metodo-pago { display: flex; flex-direction: column; gap: 8px; }
.etiqueta-metodo { font-size: 13px; color: var(--suave); }
.barra-metodo { display: flex; gap: 4px; padding: 4px; background: #f1f3f6; border-radius: var(--radio-grande); }
.metodo-forma {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px;
  border: 0; border-radius: var(--radio); background: transparent; color: var(--texto); font: inherit; cursor: pointer;
}
.metodo-forma svg { color: var(--suave); flex: 0 0 auto; }
.metodo-forma:hover { background: #e7eaef; color: var(--texto); }
.metodo-forma.activa { background: var(--superficie); color: var(--azul); font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.metodo-forma.activa svg { color: var(--azul); }
.metodo-opciones { display: flex; flex-direction: column; gap: 2px; }
.metodo-opciones[hidden] { display: none; }
/* "¿Cual?" / "¿A que banco?" (2026-09-22, propuesta C): mismo riel gris que
   .barra-metodo, la elegida sale blanca en relieve. El :hover pone fondo Y
   color a proposito: si no, `button:hover` (azul oscuro, 0,1,1) le ganaba el
   fondo y quedaba letra azul sobre azul, ilegible. */
.pestanas-metodo { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: #f1f3f6; border-radius: var(--radio-grande); }
.metodo-opcion {
  flex: 1 1 auto; min-height: 40px; padding: 8px 16px; border: 0; border-radius: var(--radio);
  background: transparent; color: var(--texto); font: inherit; font-size: 15px; cursor: pointer;
}
.metodo-opcion:hover { background: #e7eaef; color: var(--texto); }
.metodo-opcion.activa { background: var(--superficie); color: var(--azul); font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
@media (max-width: 700px) {
  .barra-metodo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Cotizaciones: bandeja de seguimiento (2026-09-23, opcion D) ----------
   A la izquierda "que hago hoy" (aprobadas por vender, por vencer, vencidas
   agrupadas por cliente); a la derecha la lista con los filtros en una linea.
   Por debajo de 1100 px la bandeja pasa arriba de la lista. */
.cot-seguimiento { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
.cot-bandeja { display: flex; flex-direction: column; gap: 12px; }
.cot-bandeja .panel { margin: 0; }
.cot-bloque h2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cot-bloque-azul { border-color: #bcd0e4; }
.cot-bloque-rojo { border-color: #e9c9c6; }
.cot-item { border-top: 1px solid var(--borde-suave); padding: 10px 0; display: flex; flex-direction: column; gap: 5px; }
.cot-item:first-of-type { border-top: 0; padding-top: 2px; }
.cot-item-fila { display: flex; justify-content: space-between; gap: 8px; font-size: var(--t-base); }
.cot-item-acciones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cot-form-mini { display: inline-flex; gap: 6px; margin: 0; }
.cot-perdida { color: var(--rojo); }
.cot-lista { margin: 0; }
.cot-lista .filtro-linea { margin-bottom: 8px; }
.cot-lista .filtro-linea select { min-width: 0; max-width: 190px; }
.cot-conteo { margin: 0 0 6px; }
.cot-tabla td { vertical-align: middle; }
.cot-tabla td:first-child { min-width: 150px; max-width: 220px; }
@media (max-width: 1100px) {
  .cot-seguimiento { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Nueva / editar cotizacion: pasos + resumen fijo (2026-09-23, fusion B+C) ----------
   Izquierda: pasos 1 Cliente · 2 Productos · 3 Condiciones, uno abierto a la
   vez (los demas se pliegan en una linea de resumen). Derecha: resumen que no
   se mueve al bajar. Por debajo de 1100 px el resumen pasa abajo. */
.cot-form { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start;
  width: 100%; align-self: stretch; }
.cot-form .formulario label, .cot-form label { display: block; }
.cot-total-fila label { display: inline; width: auto; }
.cot-pasos-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cot-pasos-col .panel, .cot-resumen { margin: 0; }
.cot-pasos { display: flex; align-items: center; gap: 10px; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 16px; }
.cot-paso-boton { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0;
  padding: 4px 2px; font: inherit; font-size: var(--t-base); font-weight: 600; color: var(--tenue); cursor: pointer; }
.cot-bola { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--borde-fuerte);
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--t-sm); }
.cot-paso-linea { flex: 1 1 auto; height: 2px; background: var(--borde); }
.cot-paso-boton.activo { color: var(--azul); }
.cot-paso-boton.activo .cot-bola { border-color: var(--azul); }
.cot-paso-boton.hecho { color: var(--verde); }
.cot-paso-boton.hecho .cot-bola { border-color: var(--verde); background: var(--verde); color: #fff; }
.cot-paso-cabeza { display: flex; align-items: center; gap: 12px; }
.cot-paso-cabeza h2 { margin: 0; padding: 0; border: 0; white-space: nowrap; }
.cot-paso-resumen { flex: 1 1 auto; min-width: 0; color: var(--suave); font-size: var(--t-base);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cot-paso-cuerpo { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borde-suave); }
.cot-paso.abierto .cot-paso-cuerpo { display: block; }
.cot-paso.abierto .cot-paso-resumen, .cot-paso.abierto .cot-editar { display: none; }
.cot-paso.abierto { border-color: #bcd0e4; }
.cot-paso-pie { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }
.cot-paso-pie .boton:only-child { margin-left: auto; }
.cot-sugeridos { border: 1px solid var(--borde); border-radius: var(--radio); margin: -4px 0 8px;
  box-shadow: var(--sombra-flotante); background: var(--superficie); overflow: hidden; }
/* Son <button>: la regla general les pone letra BLANCA, asi que el color va
   escrito aqui en los tres estados (visto en pantalla: nombres invisibles). */
.cot-sugerido { display: block; width: 100%; text-align: left; background: var(--superficie);
  color: var(--texto); border: 0; border-radius: 0; border-top: 1px solid var(--borde-suave);
  padding: 9px 12px; font: inherit; font-size: var(--t-base); font-weight: 400; cursor: pointer; }
.cot-sugerido:first-child { border-top: 0; }
.cot-sugerido b { color: var(--texto); font-weight: 700; }
.cot-sugerido .nota-menor { color: var(--suave); }
.cot-sugerido:hover, .cot-sugerido:focus { background: var(--azul-tenue); color: var(--texto);
  border-color: var(--borde-suave); box-shadow: inset 3px 0 0 var(--azul); outline: none; }
.cot-sugerido:hover b, .cot-sugerido:focus b { color: var(--azul); }
.cot-sugerido-nuevo, .cot-sugerido-nuevo:hover, .cot-sugerido-nuevo:focus { color: var(--azul); font-weight: 600; }
.cot-resumen { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 10px; }
.cot-resumen-cabeza { display: flex; justify-content: space-between; align-items: center; font-size: var(--t-md); }
.cot-moneda { display: flex; }
.cot-moneda .boton-envio { flex: 1 1 0; }
.cot-totales { border-top: 1px solid var(--borde-suave); padding-top: 8px; }
.cot-total-fila { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 4px 0; font-size: var(--t-base); font-variant-numeric: tabular-nums; }
.cot-total-fila label { font-weight: 400; color: var(--suave); margin: 0; }
.cot-mini-input { width: 96px !important; min-width: 0 !important; text-align: right; }
.cot-total-grande { border-top: 1px solid var(--borde-fuerte); margin-top: 6px; padding-top: 10px;
  font-size: var(--t-lg); font-weight: 700; }
.cot-total-grande > span:last-child { font-size: var(--t-dato); }
.cot-equivalente { text-align: right; min-height: 1em; }
.cot-aviso-descuento { background: var(--fondo); border-radius: var(--radio); padding: 8px 10px; margin: 0; }
.cot-crear { width: 100%; text-align: center; padding: 11px; font-weight: 700; }
.cot-cancelar { text-align: center; }
@media (max-width: 1100px) {
  .cot-form { grid-template-columns: minmax(0, 1fr); }
  .cot-resumen { position: static; }
}
@media (max-width: 600px) {
  .cot-paso-boton { font-size: 0; gap: 0; }
  .cot-paso-boton .cot-bola { font-size: var(--t-sm); }
}

/* Resultados de "Buscar producto" en la cotizacion: la fila entera agrega
   (2026-09-23, sin boton "Agregar"). El "+" de la derecha y el resaltado
   dicen que se puede hacer clic. */
.cot-resultados tr.cot-resultado { cursor: pointer; }
.cot-resultados tr.cot-resultado:hover td, .cot-resultados tr.cot-resultado:focus td { background: var(--azul-tenue); }
.cot-resultados tr.cot-resultado:focus { outline: 2px solid var(--azul); outline-offset: -2px; }
.cot-resultado-mas { width: 32px; text-align: center; font-size: 20px; font-weight: 700; color: var(--azul); }
.cot-resultados tr.cot-resultado-ya td { color: var(--tenue); }
.cot-resultados tr.cot-resultado-ya .cot-resultado-mas { color: var(--verde); font-size: 16px; }

/* Detalle de la cotizacion: la nota "Interno, no sale en el PDF" separada de
   la banda celeste de totales (2026-09-23, pedido del usuario). */
.nota-panel.cot-nota-interna { margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--borde-fuerte); }


/* ---------- Ordenes de Trabajo: pestanas + bandeja por etapa (2026-09-23) ---
   Fusion A+B de tres propuestas en canvas, elegida por el usuario. Los
   origenes van en la barra azul de /equipos y las etapas en su franja
   celeste; cada pestana lleva su cuenta (.pc). Abajo la tabla se agrupa por
   etapa con una fila de cabecera por grupo (tr.grupo-ot), sin tablas
   separadas para que las columnas sigan alineadas. */
.pestanas-azul a .pc {
  font-size: var(--t-xs); font-weight: 700; padding: 1px 7px;
  border-radius: var(--radio); background: rgba(11, 35, 56, .38); color: #fff;
}
.pestanas-azul a.activa .pc { background: var(--superficie-2); color: var(--suave); border: 1px solid var(--borde); }
.pestanas-franja a .pc { margin-left: 6px; font-size: var(--t-xs); font-weight: 700; opacity: .75; }
.pestanas-franja a.activa .pc { color: var(--suave); opacity: 1; }
.ot-buscador { flex: 1 1 auto; margin: 0; align-items: center; }
.ot-ordenar { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); color: var(--suave); white-space: nowrap; }
.ot-ordenar select { width: auto; }
.tabla-ot td { vertical-align: middle; }
.tabla-ot tr.fila-ot { cursor: pointer; }
.ot-ico { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--texto); }
.ot-ico svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--tenue); }
.ot-ico.naranja svg { color: #a1490a; }
.ot-ico.neutro svg { color: var(--suave); }
.ot-ico.ambar svg { color: var(--ambar); }
.ot-ico.verde svg { color: var(--verde); }
a.ot-ico { color: var(--azul); text-decoration: none; }
a.ot-ico svg { color: var(--azul); }
.ot-urgente { margin-left: 6px; font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; }
.tabla-ot .ot-dias { text-align: right; white-space: nowrap; font-weight: 700; color: var(--suave); }
.tabla-ot tr.grupo-ot td {
  background: var(--superficie-2); padding: 9px 16px; font-size: var(--t-base);
  font-weight: 700; color: var(--texto); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
}
.tabla-ot tr.grupo-ot td svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 6px; }
.tabla-ot tr.grupo-ot.atencion td { background: var(--ambar-fondo); color: var(--ambar); border-color: #ebdcc0; }
.tabla-ot tr.grupo-ot.cerradas td { color: var(--suave); }
.tabla-ot tr.grupo-ot a { color: inherit; text-decoration: none; }
.grupo-punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; background: var(--tenue); }
.grupo-punto.trabajo { background: var(--azul); }
.grupo-punto.esperando { background: var(--ambar); }
.grupo-punto.listas { background: var(--verde); }
.grupo-cuenta {
  margin-left: 6px; font-size: var(--t-xs); font-weight: 700; padding: 1px 8px;
  border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--borde); color: var(--suave);
}
.grupo-ayuda { margin-left: 10px; font-weight: 400; font-size: var(--t-sm); color: var(--suave); }
.tabla-ot td.grupo-vacio { color: var(--tenue); font-size: var(--t-sm); padding: 8px 16px; }
.ot-cerradas summary { cursor: pointer; list-style: none; }
.ot-cerradas summary::-webkit-details-marker { display: none; }
.ot-cerradas summary::before { content: "\25B8"; margin-right: 8px; }
.ot-cerradas[open] summary::before { content: "\25BE"; }
.ot-cerradas-filas.oculto { display: none; }
@media print { .ot-cerradas-filas.oculto { display: table-row-group !important; } }
@media (max-width: 700px) {
  .grupo-ayuda { display: none; }
}

/* Estado sin recuadro en Ordenes de Trabajo (2026-09-23, pedido del usuario:
   "sin recuadros"): en esta tabla la chapa queda como punto + texto de
   color, igual que el estado de /equipos. Solo aqui; las chapas del resto
   del sistema no cambian. */
.tabla-ot .chapa-ot, .tabla-ot .chapa-garantia {
  background: transparent; border-color: transparent; padding: 0; font-size: var(--t-sm);
}

/* Recepcion del Taller con pestanas azules e iconos (2026-09-23). La corona
   solo lleva la barra (sin franja de herramientas): se cierra abajo. La
   chapa "falta" se lee en ambar sobre el azul, no en el gris translucido
   de las cuentas. */
.corona-recepcion > .pestanas-azul { border-radius: var(--radio); }
.corona-recepcion { border: 0; background: transparent; }
.pestanas.pestanas-azul .pestana .cuenta.pendiente,
.pestanas.pestanas-azul .pestana.activa .cuenta.pendiente {
  background: var(--ambar-fondo); color: var(--ambar); border: 1px solid #ebdcc0;
}

/* /garantias en pestanas azules (2026-09-23): usa .tabla-ot de Ordenes de
   Trabajo. El problema en dos renglones como maximo; el estado como punto
   de color, sin recuadro. */
.tabla-garantias .gar-problema { max-width: 340px; color: var(--suave); font-size: var(--t-sm);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tabla-garantias .gar-estado { font-size: var(--t-sm); color: var(--texto); }
.tabla-garantias .gar-estado::before { background: var(--azul); }
.tabla-garantias .ot-ico { white-space: normal; align-items: flex-start; }
.tabla-garantias .ot-ico svg { margin-top: 2px; }
.pestanas-azul a .pc.pc-alerta { background: var(--ambar-fondo); color: var(--ambar); border: 1px solid #ebdcc0; }

/* Barra azul de las areas de Repuestos (2026-09-23): va sola, sin tarjeta
   debajo, asi que se redondea entera y la pestana activa es un boton blanco
   completo (mismo criterio que .pestanas-abajo del POS). */
.pestanas-azul.barra-repuestos { margin: 0 0 14px; padding: 6px; border-radius: var(--radio); }
.pestanas-azul.barra-repuestos a { border-radius: var(--radio); }
.pestanas-azul.barra-repuestos a.activa { padding-top: 8px; }

/* ---------- Ventas: resumen al costado (2026-09-23, propuesta B) ----------
   La tabla ocupa el ancho grande a la izquierda y el resumen (periodo,
   cifras, diferencia, reparto por vendedor y por metodo) una columna de
   300px a la DERECHA, pedido del usuario. En pantalla angosta el resumen
   pasa arriba de la tabla. */
.ventas-titulo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ventas-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.ventas-principal { min-width: 0; }
.ventas-resumen .panel { padding: 14px 16px; margin-bottom: 12px; }
.ventas-resumen .panel > h2:first-child { font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .06em; color: var(--suave); padding-bottom: 8px; margin-bottom: 10px; }
.ventas-resumen .conmutador-lleno { display: flex; width: 100%; box-sizing: border-box; }
.ventas-resumen .conmutador-lleno a { flex: 1 1 auto; text-align: center; padding: 5px 6px; font-size: var(--t-sm); }
.ventas-fechas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.ventas-fechas .filtro-fecha { display: flex; flex-direction: column; gap: 3px; font-size: var(--t-sm); color: var(--suave); }
.ventas-fechas input { width: 100%; min-width: 0; box-sizing: border-box; }
.resumen-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 4px 0; }
.resumen-fila > span { color: var(--suave); min-width: 0; }
.resumen-fila > b { font-size: var(--t-lg); white-space: nowrap; font-variant-numeric: tabular-nums; }
.resumen-nota { font-size: var(--t-sm); color: var(--tenue); text-align: right; margin: 0 0 4px; }
.resumen-diferencia { margin: 8px 0 6px; padding: 8px 10px; border-radius: var(--radio-chico);
  display: flex; flex-direction: column; gap: 2px; font-size: var(--t-sm); }
.resumen-diferencia b { font-size: var(--t-md); }
.resumen-diferencia.verde { background: var(--verde-fondo); color: var(--verde); }
.resumen-diferencia.ambar { background: var(--ambar-fondo); color: var(--ambar); }
.resumen-diferencia.rojo { background: var(--rojo-fondo); color: var(--rojo); border: 1px solid #e6cac7; }
.barra-reparto { height: 6px; background: var(--borde-suave); border-radius: 3px; margin: 0 0 6px; overflow: hidden; }
.barra-reparto > div { height: 100%; background: var(--azul); border-radius: 3px; }
.tabla-ventas th.derecha, .tabla-ventas td.derecha { text-align: right; }
.tabla-ventas td.precio-venta { font-weight: 700; }
.tabla-ventas tbody tr { cursor: pointer; }
.filtro-linea .enlace-limpiar { font-size: var(--t-sm); }
@media (max-width: 1000px) {
  .ventas-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .ventas-titulo .conmutador, .ventas-resumen .conmutador-lleno { flex-wrap: wrap; max-width: 100%; }
  .ventas-resumen { order: -1; }
}

/* ---- Historial de traslados agrupado (2026-09-24, propuesta A + PDF) ----
   Arriba los pendientes de aprobar en Tienda (recuadro ambar); abajo un
   traslado de varias laptops sale en una fila que se abre con la flecha. */
.panel-pendientes-traslado { border-color: #ebdcc0; padding-top: 0; overflow: hidden; }
.cabecera-pendientes-traslado { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 -18px 0; padding: 12px 18px; background: var(--ambar-fondo); border-bottom: 1px solid #ebdcc0; }
.cabecera-pendientes-traslado h2 { margin: 0; font-size: var(--t-md); border: 0; padding: 0; }
.cabecera-pendientes-traslado .nota-cabecera { margin-left: auto; font-size: var(--t-sm); color: var(--ambar); }
.avance-traslado { display: flex; align-items: center; gap: 8px; }
.barra-avance-traslado { width: 110px; height: 6px; flex-shrink: 0; background: var(--borde-suave); border-radius: var(--radio-chico); overflow: hidden; display: flex; }
.barra-avance-traslado .ok { background: var(--verde); }
.barra-avance-traslado .no { background: var(--rojo); }
.boton-pdf-traslado { display: inline-flex; align-items: center; gap: 4px; }
.cabecera-realizados-traslado { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cabecera-realizados-traslado h2 { margin: 0; }
.tabla-historial-traslados .col-flecha { width: 28px; padding-right: 0; }
.tabla-historial-traslados .col-pdf { text-align: right; white-space: nowrap; }
.flecha-grupo { background: none; border: 0; padding: 4px; cursor: pointer; color: var(--azul); display: inline-flex; border-radius: var(--radio-chico); }
.flecha-grupo:hover { background: var(--azul-tenue); }
.flecha-grupo svg { transition: transform .15s; }
.flecha-grupo[aria-expanded="true"] svg { transform: rotate(90deg); }
tr.fila-grupo-traslado td { background: var(--azul-fondo); }
tr.fila-sub-traslado td { background: var(--superficie-2); padding-top: 6px; padding-bottom: 6px; }
tr.fila-sub-traslado.oculto { display: none; }
.tabla-historial-traslados .sangria-sub { padding-left: 26px; }
/* De, A y Quien no se parten: al abrir un grupo, el modelo largo de una
   subfila apretaba esas columnas hasta partir "Bodega Dolores" en dos. */
.tabla-historial-traslados td:nth-child(4), .tabla-historial-traslados td:nth-child(5), .tabla-historial-traslados td:nth-child(6) { white-space: nowrap; }
.chapa-solicitud.aplicado-traslado, .chapa-solicitud.cuenta-traslado { background: var(--superficie-2); border-color: var(--borde); color: var(--suave); }
.chapa-solicitud.cuenta-traslado { margin-left: 6px; }
@media print { tr.fila-sub-traslado.oculto { display: table-row !important; } .flecha-grupo, .boton-pdf-traslado { display: none; } }

/* Anular una venta sin bajar (2026-09-24, propuesta A): icono rojo en la
   esquina del panel "La venta" y un globo con el motivo. */
.panel-venta { position: relative; }
.anular-venta { position: absolute; top: 10px; right: 16px; z-index: 5; }
.anular-venta summary {
  list-style: none; cursor: pointer; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--superficie); color: var(--rojo);
  border: 1px solid #e0b4b0; border-radius: var(--radio);
}
.anular-venta summary::-webkit-details-marker { display: none; }
.anular-venta summary:hover, .anular-venta[open] summary { background: var(--rojo-fondo); border-color: var(--rojo); }
.anular-venta summary svg { display: block; }
.anular-venta-globo {
  position: absolute; top: 42px; right: 0; width: 340px; box-sizing: border-box;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande);
  box-shadow: var(--sombra-flotante); padding: 16px; display: flex; flex-direction: column; gap: 10px;
  font-size: var(--t-base); font-weight: 400; color: var(--texto);
}
.anular-venta-titulo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--t-md); color: var(--rojo); }
.anular-venta-nota { margin: 0; color: var(--suave); font-size: var(--t-sm); line-height: 1.45; }
.anular-venta-globo label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; margin: 0; }
.anular-venta-globo input { width: 100%; box-sizing: border-box; min-width: 0; }
.anular-venta-botones { display: flex; justify-content: flex-end; gap: 8px; }
.boton-rojo-lleno { background: var(--rojo); color: #fff; border: 1px solid var(--rojo); }
.boton-rojo-lleno:hover { background: #7d1a15; border-color: #7d1a15; color: #fff; }
@media (max-width: 480px) { .anular-venta-globo { width: calc(100vw - 48px); } }
/* /venta/<id> (2026-09-24): Cliente, La venta y Garantia en un solo panel de
   tres columnas, sin lineas entre ellas; La venta al medio y mas ancha. El
   boton de anular sube al final de los botones del encabezado. */
.venta-tres-columnas {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px; align-items: start;
}
.venta-col-titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.venta-col dl.datos { grid-template-columns: minmax(90px, 150px) minmax(0, 1fr); gap: 8px 14px; }
.venta-col dl.datos dd { overflow-wrap: anywhere; }
.venta-col-nota { margin: 12px 0 0; }
/* 2026-09-24: la columna Cliente va sobre celeste suave y baja hasta el
   final de La venta, para no dejar el hueco blanco debajo (propuesta A). */
.venta-col-cliente {
  align-self: stretch; background: var(--azul-fondo);
  border-radius: var(--radio); padding: 14px 16px;
}
/* 2026-09-24: La venta se parte en tres grupos (datos / Pago / Entregado)
   con una linea fina y un rotulo gris, como la propuesta A. */
.venta-grupo {
  margin: 14px 0 8px; padding-top: 10px; border-top: 1px solid var(--borde-suave);
  color: var(--tenue); font-size: var(--t-sm); font-weight: 600;
}
.venta-unida > .sub-titulo { margin-top: 18px; }
@media (max-width: 900px) {
  .venta-tres-columnas { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
.anular-venta.anular-venta-arriba { position: relative; top: auto; right: auto; align-self: center; }
.anular-venta-arriba summary { background: #fff; }
/* 2026-09-24 (propuesta B1): los botones de arriba de /venta/<id> son
   iconos sueltos, sin recuadro, separados por una rayita; anular tambien
   pierde el recuadro y queda un poco mas apartado. */
.venta-iconos { gap: 2px; align-items: center; }
.venta-icono {
  width: 34px; height: 34px; display: inline-flex; align-items: center;
  justify-content: center; color: var(--azul); border-radius: var(--radio);
  text-decoration: none;
}
.venta-icono:hover, .venta-icono:focus-visible { background: var(--azul-tenue); color: var(--azul-claro); }
.venta-icono svg { display: block; }
.venta-icono-sep { width: 1px; height: 18px; background: var(--borde); margin: 0 2px; }
.venta-icono-sep-ancho { margin: 0 8px; }
/* venta-iconos-bajos (2026-09-24): los iconos bajan a la linea del
   subtitulo (codigo, modelo, fecha); el subtitulo les deja su lugar a la
   derecha. En pantalla angosta quedan donde caigan, sin desplazar. */
@media (min-width: 700px) {
  .venta-iconos { position: relative; top: 30px; }
  .titulo-fila:has(.venta-iconos) + .subtitulo { padding-right: 240px; }
}
.venta-iconos .anular-venta-arriba summary { background: transparent; border-color: transparent; }
.venta-iconos .anular-venta-arriba summary:hover,
.venta-iconos .anular-venta-arriba[open] summary { background: var(--rojo-fondo); border-color: transparent; }

/* Tareas de la laptop en la barra azul de la ficha del equipo (2026-09-26,
   propuesta C). Va a la izquierda de la papelera; si no hay papelera, ocupa
   su lugar. Mismo tamano y trazo que .borrar-menu, pero en azul: no destruye. */
.corona-pestanas.con-tareas > .pestanas-azul { padding-right: 52px; }
.corona-pestanas.con-tareas.con-borrar > .pestanas-azul { padding-right: 90px; }
.tareas-menu { position: absolute; top: 6px; right: 10px; z-index: 6; }
.corona-pestanas.con-borrar > .tareas-menu { right: 48px; }
.tareas-menu > summary {
  list-style: none; cursor: pointer; width: 34px; height: 30px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; position: relative;
  color: #fff; border: 1px solid transparent; border-radius: var(--radio);
}
.tareas-menu > summary::-webkit-details-marker { display: none; }
.tareas-menu > summary:hover, .tareas-menu[open] > summary { color: var(--azul); background: #fff; border-color: #fff; }
.tareas-menu > summary svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.tareas-cuenta {
  position: absolute; top: -4px; right: -3px; min-width: 16px; height: 16px; box-sizing: border-box;
  padding: 0 4px; border-radius: 8px; background: #fff; color: var(--azul);
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.tareas-menu[open] .tareas-cuenta { background: var(--azul); color: #fff; }
.tareas-lista {
  position: absolute; top: calc(100% + 6px); right: 0; width: 360px; padding: 6px 0;
  display: flex; flex-direction: column; background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--radio-grande); box-shadow: var(--sombra-flotante);
}
.tareas-titulo {
  padding: 6px 14px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--suave);
}
a.tareas-item {
  display: flex; flex-direction: column; gap: 3px; padding: 9px 14px;
  border-top: 1px solid var(--borde); color: var(--texto); text-decoration: none;
}
a.tareas-item:hover { background: var(--superficie-2); color: var(--texto); }
.tareas-item-fila { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.tareas-item-fila b { font-size: var(--t-base); font-weight: 600; }
.tareas-item-fila .chapa-solicitud { flex-shrink: 0; }
.tareas-item small { font-size: 11.5px; color: var(--suave); }
.tareas-vencida { color: var(--rojo); font-weight: 600; }
.tareas-vacio { padding: 10px 14px; border-top: 1px solid var(--borde); font-size: var(--t-sm); color: var(--suave); }
.tareas-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px 6px; border-top: 1px solid var(--borde); font-size: var(--t-sm);
}
@media (max-width: 700px) { .tareas-lista { width: min(360px, calc(100vw - 32px)); } }

/* Descargas de /ventas (2026-09-26): PDF y Excel de lo que se esta mirando,
   a la derecha del titulo de la tabla. */
.descargas-ventas { float: right; display: inline-flex; gap: 14px; }
/* Sin recuadro y en azul (2026-09-26, pedido del usuario): son enlaces. */
.descargas-ventas .boton-claro { display: inline-flex; align-items: center; gap: 5px;
  background: none; border-color: transparent; color: var(--azul); padding: 3px 4px; }
.descargas-ventas .boton-claro:hover { background: none; border-color: transparent;
  color: var(--azul-fuerte); text-decoration: underline; }
.descargas-ventas svg { width: 15px; height: 15px; }

/* ---------- Ampliar el plazo de una tarea (2026-09-26) ----------
   El progreso a la izquierda y el plazo a la derecha, en la misma franja
   del panel Informacion. Solo el administrador ve el bloque del plazo. */
.progreso-y-plazo { display: flex; flex-wrap: wrap; gap: 16px 40px; justify-content: space-between; align-items: flex-start; }
.progreso-lado { flex: 1 1 340px; max-width: 560px; }
.progreso-lado > b, .plazo-tarea > b {
  display: block; font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .4px; color: var(--tenue); font-weight: 600; margin-bottom: 8px;
}
.plazo-tarea { flex: 0 1 360px; }
.plazo-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.plazo-form input[type="date"] { width: 150px; }
.plazo-form input[type="text"] { flex: 1 1 140px; min-width: 0; }

/* /ubicaciones: resumen al costado (2026-09-26, propuesta A+C). Mismo
   esqueleto que .ventas-cuerpo: tabla a la izquierda, dos paneles de 300px
   a la derecha; bajo 1000px el costado sube arriba de la tabla. */
.ubic-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.ubic-principal { min-width: 0; }
.ubic-lado .panel { padding: 14px 14px 12px; margin-bottom: 12px; }
.ubic-lado .panel > h2:first-child { font-size: var(--t-md); margin-bottom: 8px; }
.ubic-fila { display: block; padding: 7px 8px; border-radius: var(--radio); color: var(--texto); text-decoration: none; }
.ubic-fila:hover { background: var(--superficie-2); color: var(--texto); }
.ubic-fila.activa { background: var(--azul-tenue); }
.ubic-fila.activa .ubi-chip { font-weight: 700; }
.ubic-fila.activa b { color: var(--azul); }
.ubic-fila-dato { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ubic-fila-dato .ubi-chip svg { width: 17px; height: 17px; }
.ubic-fila-dato b { font-size: var(--t-md); font-weight: 700; font-variant-numeric: tabular-nums; }
.ubic-barra { display: block; height: 4px; margin-top: 6px; background: var(--borde-suave); border-radius: 2px; overflow: hidden; }
.ubic-barra span { display: block; height: 4px; background: var(--suave); opacity: .6; }
.ubic-fila.tienda .ubic-barra span { background: var(--azul); }
.ubic-fila.bodega-proceso .ubic-barra span { background: var(--tenue); }
.ubic-fila.mal-estado .ubic-barra span { background: var(--rojo); }
.ubic-fila.taller .ubic-barra span { background: var(--ambar); }
.ubic-fila.fuera-de-tienda .ubic-barra span, .ubic-fila.fuera-de-bodega .ubic-barra span,
.ubic-fila.en-delivery .ubic-barra span { background: #a1490a; }
.ubic-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px;
  padding: 10px 8px 2px; border-top: 1px solid var(--borde); color: var(--suave); text-decoration: none; font-weight: 600; }
.ubic-total b { font-size: var(--t-xl); color: var(--texto); font-variant-numeric: tabular-nums; }
.ubic-total:hover { color: var(--azul); }
.ubic-movimientos { display: flex; flex-direction: column; gap: 8px; }
.ubic-mov { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px;
  padding: 6px 12px; box-sizing: border-box; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); font-weight: 600; color: var(--texto); text-decoration: none; }
.ubic-mov:hover { border-color: var(--azul-claro); color: var(--azul); }
.ubic-cuenta { font-size: var(--t-xs); font-weight: 700; color: var(--suave); background: var(--fondo);
  border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 1px 7px; }
.ubic-cuenta.ambar { color: var(--ambar); background: var(--ambar-fondo); border-color: #efdcb8; }
.ubic-flecha { color: var(--tenue); font-size: var(--t-lg); line-height: 1; }
@media (max-width: 1000px) {
  .ubic-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .ubic-lado { order: -1; }
}

/* /ubicaciones: PDF, Excel e Imprimir junto a la tabla (2026-09-26,
   propuesta B). Reusa .descargas-ventas (enlaces azules sin recuadro);
   Imprimir es un <details class="mas-acciones"> con la caja flotante. */
.ubic-cabecera-tabla { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin: 2px 0 10px; }
.ubic-cabecera-tabla h2 { margin: 0; font-size: var(--t-lg); }
.ubic-cabecera-tabla h2 small { font-size: var(--t-sm); font-weight: 400; color: var(--suave); }
.ubic-acciones { float: none; align-items: center; }
.ubic-imprimir > summary.boton-claro { display: inline-flex; align-items: center; gap: 5px; background: none;
  border-color: transparent; color: var(--azul); padding: 3px 4px; }
.ubic-imprimir > summary.boton-claro:hover, .ubic-imprimir[open] > summary.boton-claro { background: none;
  border-color: transparent; color: var(--azul-fuerte); text-decoration: underline; }
.ubic-imprimir > summary svg { width: 15px; height: 15px; }
.ubic-imprimir-caja { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 290px;
  box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 12px;
  background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-grande);
  box-shadow: var(--sombra-flotante); }
.ubic-imprimir-caja p { margin: 0; font-size: var(--t-sm); color: var(--suave); }
.ubic-imprimir-caja p b { color: var(--texto); }
.ubic-imprimir-caja select { width: 100%; }
@media (max-width: 600px) { .ubic-imprimir-caja { right: auto; left: 0; } }

/* ------------------------------------------------------------------------
   Envio por paqueteria externa (2026-09-26, envios_paqueteria.py): panel
   Entrega del Punto de Venta, panel del envio en la venta y la bandeja.
   ------------------------------------------------------------------------ */
.panel-forma-entrega [hidden], .panel-envio [hidden] { display: none !important; }
.panel-forma-entrega .campo-envio { margin-bottom: 4px; }
.bloque-paqueteria { display: flex; flex-direction: column; gap: 10px; margin-top: 10px;
  padding-top: 12px; border-top: 1px solid var(--borde-suave); }
.bloque-paqueteria textarea { resize: vertical; }
.panel-envio { scroll-margin-top: 16px; }
.envio-numero { margin-left: auto; font-size: var(--t-md); color: var(--texto); }
.envio-pasos { list-style: none; margin: 4px 0 14px; padding: 0; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.envio-pasos li { display: flex; gap: 10px; align-items: flex-start; }
.envio-pasos li > div { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-sm); color: var(--suave); line-height: 1.4; }
.envio-pasos li b { font-size: var(--t-md); color: var(--texto); }
.envio-circ { width: 30px; height: 30px; flex-shrink: 0; box-sizing: border-box; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--t-base);
  border: 2px solid var(--borde-fuerte); color: var(--tenue); background: var(--superficie); }
.envio-pasos li.hecho .envio-circ { background: var(--verde); border-color: var(--verde); color: #fff; }
.envio-pasos li.hecho.problema .envio-circ { background: var(--rojo); border-color: var(--rojo); }
.envio-pasos li.actual .envio-circ { border-color: var(--azul); background: var(--azul-tenue); color: var(--azul); }
.envio-pasos li.actual b { color: var(--azul); }
.envio-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px;
  border-top: 1px solid var(--borde-suave); padding-top: 12px; }
.envio-acciones { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.envio-fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.envio-guia { background: var(--ambar-fondo); border: 1px solid #ecd9b5; border-radius: var(--radio);
  padding: 10px 12px; width: 100%; box-sizing: border-box; }
.envio-guia label { flex: 1 1 200px; }
.envio-detalle { width: 100%; }
.envio-detalle summary { cursor: pointer; color: var(--azul); font-size: var(--t-base); font-weight: 600; }
.envio-detalle form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; align-items: flex-start; }
.envio-corregir label { width: 100%; }
.envio-casilla { display: flex; align-items: center; gap: 8px; font-size: var(--t-md); }
.envio-enlace { font-size: var(--t-sm); }
.envio-cuenta { font-weight: 700; margin-left: 4px; }
tr.envio-atrasado td { background: var(--rojo-fondo); }
.pagina-ticket .panel-envio { margin: 0; }
@media (max-width: 900px) {
  .envio-pasos, .envio-cuerpo { grid-template-columns: minmax(0, 1fr); }
}
.panel-envio .texto-ambar { color: var(--ambar); font-weight: 600; }

/* Comentarios del equipo en dos columnas (2026-09-26, propuesta A): la caja
   de escribir angosta y fija a la izquierda, el historial a lo ancho. */
.coment-cols { display: grid; grid-template-columns: 380px minmax(0, 1fr);
  gap: 16px; align-items: start; }
.coment-cols > div > .panel { margin-top: 0; margin-bottom: 0; }
.coment-escribir { position: sticky; top: 12px; }
.coment-cols.solo-leer { grid-template-columns: minmax(0, 1fr); }
.coment-cols.solo-leer .coment-escribir { position: static; }
@media (max-width: 1000px) {
  .coment-cols { grid-template-columns: minmax(0, 1fr); }
  .coment-escribir { position: static; }
}
@media print {
  .coment-cols { display: block; }
}

/* /ubicaciones: "Mover las laptops" en la barra azul (2026-09-26). Reusa el
   menu .mover-menu de la ficha; las reglas de la ficha van con alcance
   .franja-herramientas, asi que aqui se repiten con alcance .ubic-mover, y
   se le gana a ".pestanas-azul a" (los enlaces del menu no son pestanas). */
.ubic-mover { align-self: center; margin: 0 6px 6px 0; }
.ubic-mover > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 6px 12px; font-size: var(--t-sm); font-weight: 600; white-space: nowrap;
  color: var(--azul); background: #fff; border: 1px solid #fff; border-radius: var(--radio);
}
.ubic-mover > summary:hover, .ubic-mover[open] > summary { background: var(--azul-tenue); border-color: var(--azul-tenue); }
.ubic-mover .mover-lista { left: auto; right: 0; }
.ubic-mover-cuenta { padding: 8px 14px 4px; font-size: var(--t-sm); font-weight: 700; color: var(--texto); }
.ubic-mover-nota { padding: 2px 14px 6px; font-size: var(--t-xs); color: var(--tenue); }
.pestanas-azul .ubic-mover a.mover-item, .ubic-mover .mover-item {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; box-sizing: border-box;
  padding: 9px 14px; border: 0; border-radius: 0; background: transparent;
  color: var(--texto); text-align: left; white-space: normal; font-weight: 400; font-size: inherit;
  text-decoration: none; cursor: pointer;
}
.pestanas-azul .ubic-mover a.mover-item:hover, .ubic-mover .mover-item:hover { background: var(--azul-tenue); color: var(--texto); }
.ubic-mover .mover-item svg { width: 15px; height: 15px; }
.ubic-mover .mover-item.ubic-mover-apagado, .ubic-mover .ubic-mover-apagado > summary.mover-item { opacity: .45; cursor: not-allowed; }
.ubic-mover .mover-item.ubic-mover-apagado:hover, .ubic-mover .ubic-mover-apagado > summary.mover-item:hover { background: transparent; }
.ubic-mover .mover-subform {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  margin: 0 10px 8px; padding: 12px; background: var(--fondo);
  border: 1px solid var(--borde); border-radius: var(--radio);
}
.ubic-mover .mover-subform select { width: 100%; box-sizing: border-box; font-size: var(--t-base); color: var(--texto); background: #fff; }
.ubic-mover button.mover-subboton {
  justify-content: center; align-self: flex-end; padding: 7px 16px; font-size: var(--t-base);
  color: #fff; background: var(--azul); border-color: var(--azul);
}
.ubic-mover button.mover-subboton:hover { background: var(--azul-claro); border-color: var(--azul-claro); }
@media (max-width: 700px) {
  .mover-menu.ubic-mover { display: inline-block; }
  .ubic-mover .mover-lista { right: auto; left: 0; width: min(340px, calc(100vw - 32px)); }
}

/* /ubicaciones, propuesta B (2026-09-26): barra azul solo con las
   ubicaciones y con aire; franja clara debajo con Mover y Lista | Catalogo. */
.pestanas-azul.ubic-barra-azul { padding: 14px 16px 0; column-gap: 6px; row-gap: 10px; }
.ubic-franja { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px;
  padding: 10px 16px; background: var(--azul-tenue); border-bottom: 1px solid #c9d8e8; }
.ubic-franja .ubic-mover { margin: 0; align-self: auto; }
.ubic-franja .ubic-mover > summary { color: #fff; background: var(--azul); border-color: var(--azul); padding: 7px 14px; }
.ubic-franja .ubic-mover > summary:hover, .ubic-franja .ubic-mover[open] > summary { background: var(--azul-claro); border-color: var(--azul-claro); }
.ubic-franja .ubic-mover .mover-lista { left: 0; right: auto; }
.ubic-franja-ayuda { font-size: var(--t-sm); color: var(--suave); }
.ubic-vista { display: inline-flex; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); overflow: hidden; background: #fff; }
.ubic-vista a { padding: 6px 14px; font-size: var(--t-sm); font-weight: 600; color: var(--azul); text-decoration: none; }
.ubic-vista a + a { border-left: 1px solid var(--borde-fuerte); }
.ubic-vista a.activa { background: var(--azul); color: #fff; }
.ubic-vista a:not(.activa):hover { background: var(--azul-tenue); }

/* ---------------------------------------------------------------------------
   Catalogo Design (2026-09-28): la rejilla de piezas de anuncio por familia.
   Cada familia es una tarjeta .panel; la miniatura es la pieza dibujada por el
   sistema y se pide al servidor (se cachea por huella de datos).
   --------------------------------------------------------------------------- */
.cd-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; margin: 16px 0; }
.cd-tarjeta h2 small { display: block; font-weight: 400; color: var(--suave); font-size: var(--t-sm); margin-top: 2px; }
.cd-mini { display: block; width: 100%; height: auto; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); }
.cd-mini-estado { max-width: 260px; margin: 0 auto; }
.cd-atenuada { opacity: .55; }
.cd-atenuada:hover { opacity: 1; }
.cd-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 10px; align-items: end; }
.cd-form .casilla { grid-column: 1 / -1; }
.cd-form label { font-size: var(--t-sm); color: var(--suave); }
.cd-form select { width: 100%; }
.cd-acciones { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Opcion C2 (2026-09-28): Guardar como icono + palabra y, a su derecha,
   Descargar y Ver familia como iconos, todo sin recuadro. */
.cd-pieza { position: relative; }
.cd-pieza-estado { max-width: 260px; margin: 0 auto; }
.cd-iconos-fila { margin-left: auto; display: flex; gap: 14px; align-items: center; }
.cd-icono { display: flex; color: var(--azul); }
.cd-icono svg { width: 22px; height: 22px; }
.cd-icono:hover, .cd-icono:focus-visible { color: var(--azul-claro); }
button.cd-guardar, button.cd-guardar:hover { background: none; border: 0; box-shadow: none; }
button.cd-guardar { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; color: var(--azul); font: inherit; font-weight: 600; cursor: pointer; }
button.cd-guardar svg { width: 20px; height: 20px; }
button.cd-guardar:hover { color: var(--azul-claro); text-decoration: underline; }
.cd-foto-mini { grid-column: 1 / -1; max-width: 160px; height: auto; justify-self: end; }
@media (max-width: 700px) { .cd-rejilla { grid-template-columns: 1fr; } }

/* Fotos en los comentarios del equipo (2026-09-29, propuesta B): galeria de
   la laptop arriba del historial, chapa con cuantas fotos en la tabla, boton
   "Adjuntar fotos" en la caja de escribir y visor en grande. */
.coment-historial { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cfoto-adjuntar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cfoto-boton { display: inline-flex; align-items: center; gap: 6px; }
.cfoto-boton svg, .cfoto-chapa svg { width: 16px; height: 16px; flex-shrink: 0; }
.cfoto-cuenta, .cfoto-chapa {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--azul-tenue); color: var(--azul); border: 1px solid #c9d8e6;
  border-radius: var(--radio-chico); padding: 3px 8px;
  font-size: var(--t-sm); font-weight: 600;
}
.cfoto-chapa { cursor: pointer; font-family: inherit; }
.cfoto-chapa:hover { background: #fff; border-color: var(--azul-claro); }
.cfoto-elegidas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cfoto-elegidas li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: var(--t-sm); color: var(--texto); padding: 5px 6px 5px 10px;
  border: 1px solid var(--borde-suave); border-radius: var(--radio-chico); background: var(--superficie);
}
.cfoto-elegidas li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cfoto-quitar {
  background: none; border: 0; padding: 4px; color: var(--suave); cursor: pointer;
  display: inline-flex; flex-shrink: 0;
}
.cfoto-quitar:hover { color: var(--rojo); background: none; }
.cfoto-quitar svg { width: 14px; height: 14px; }

.cfoto-titulo .cfoto-ver-todas {
  margin-left: auto; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--azul); font: inherit; font-size: var(--t-base); font-weight: 400;
}
.cfoto-titulo .cfoto-ver-todas:hover { background: none; color: var(--azul-claro); text-decoration: underline; }
.cfoto-galeria { display: flex; flex-wrap: wrap; gap: 12px; }
.cfoto-item { margin: 0; width: 132px; }
.cfoto-item figcaption { font-size: var(--t-xs); color: var(--suave); margin-top: 5px; line-height: 1.3; }
.cfoto-mini {
  display: block; width: 132px; height: 99px; padding: 0; cursor: zoom-in;
  border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden;
  background: var(--fondo);
}
.cfoto-mini:hover { border-color: var(--azul-claro); background: var(--fondo); }
.cfoto-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cfoto-item.cfoto-marcada .cfoto-mini { outline: 2px solid var(--azul); outline-offset: 1px; }
.cfoto-item.cfoto-extra { display: none; }
.cfoto-galeria.cfoto-todas .cfoto-extra { display: block; }
.cfoto-galeria.cfoto-todas .cfoto-mas { display: none; }
.cfoto-mas {
  width: 132px; height: 99px; border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--borde-suave); color: var(--suave); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: var(--t-xl); font-weight: 700; font-family: inherit;
}
.cfoto-mas span { font-size: var(--t-xs); font-weight: 400; }
.cfoto-mas:hover { background: var(--azul-tenue); color: var(--azul); border-color: var(--azul-claro); }
th.cfoto-col, td.cfoto-col { width: 80px; white-space: nowrap; }
td.cfoto-col .tenue { color: var(--tenue); }
tr.cfoto-fila-marcada > td { background: var(--azul-tenue); }

.cfoto-visor {
  position: fixed; inset: 0; z-index: 1000; background: rgba(11, 35, 56, .92);
  display: flex; flex-direction: column; color: #fff;
}
.cfoto-visor[hidden] { display: none; }
.cfoto-visor-barra {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; font-size: var(--t-base);
}
.cfoto-visor-acciones { display: flex; align-items: center; gap: 14px; }
.cfoto-visor-acciones form { margin: 0; }
.cfoto-visor-enlace {
  color: #bdd4e8; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--t-base); text-decoration: none;
}
.cfoto-visor-enlace:hover { color: #fff; background: none; text-decoration: underline; }
.cfoto-visor-enlace.peligro { color: #f3b5ae; }
.cfoto-visor-x, .cfoto-visor-flecha {
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
  color: #fff; border-radius: var(--radio); cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cfoto-visor-x { width: 36px; height: 36px; }
.cfoto-visor-flecha { width: 44px; height: 44px; }
.cfoto-visor-x:hover, .cfoto-visor-flecha:hover { background: rgba(255, 255, 255, .18); }
.cfoto-visor-x svg { width: 18px; height: 18px; }
.cfoto-visor-flecha svg { width: 24px; height: 24px; }
.cfoto-visor-centro {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 0 12px;
}
.cfoto-visor-centro img {
  max-width: calc(100% - 120px); max-height: 100%; object-fit: contain;
  border-radius: var(--radio); background: #000;
}
.cfoto-visor-pie {
  padding: 12px 16px 18px; font-size: var(--t-md); line-height: 1.45;
  max-width: 900px; width: 100%; margin: 0 auto; text-align: center;
}
.cfoto-visor-pie b { display: block; font-size: var(--t-sm); color: #bdd4e8; font-weight: 600; margin-bottom: 3px; }
.cfoto-visor-pie span { white-space: pre-wrap; }
body.cfoto-sin-scroll { overflow: hidden; }
@media (max-width: 600px) {
  /* En el celular: tres por fila que llenan el ancho, y el titulo en dos
     renglones (el nombre arriba, la cuenta y "Ver todas" abajo). */
  .cfoto-galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .cfoto-item, .cfoto-mini, .cfoto-mas { width: 100%; }
  .cfoto-mini, .cfoto-mas { height: auto; aspect-ratio: 4 / 3; }
  .panel > h2.cfoto-titulo { flex-wrap: wrap; row-gap: 2px; }
  .cfoto-titulo small { margin-left: 28px; }
  .cfoto-visor-centro { padding: 0 4px; gap: 4px; }
  .cfoto-visor-centro img { max-width: calc(100% - 80px); }
  .cfoto-visor-flecha { width: 36px; height: 36px; }
}
@media print {
  .cfoto-item.cfoto-extra { display: block !important; }
  tr.cfoto-fila-marcada > td { background: none; }
}

/* 2026-09-29 mayusculas-cliente */
/* Nombres y empresas de CLIENTES se VEN en mayusculas mientras se escriben
   (pedido de Renaldy). Lo que se guarda lo convierte el servidor
   (@validates en app.py): esto es solo lo que ve quien escribe. */
input[name="cliente_nombre"],
input[name="cliente_empresa"],
input[name="atencion"],
input[name="recibe_nombre"],
input[name="entrega_persona_retira"],
input.campo-mayus {
  text-transform: uppercase;
}
input[name="cliente_nombre"]::placeholder,
input[name="cliente_empresa"]::placeholder,
input[name="atencion"]::placeholder,
input[name="recibe_nombre"]::placeholder,
input[name="entrega_persona_retira"]::placeholder,
input.campo-mayus::placeholder {
  text-transform: none;
}

/* Del taller en los comentarios del equipo (2026-09-30, propuesta B):
   una tarjeta por orden con su diagnostico y su reparacion, lado a lado. */
.ctaller-orden { padding: 14px 0; border-top: 1px solid var(--borde-suave); }
.ctaller-orden:first-of-type { border-top: 0; padding-top: 4px; }
.ctaller-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 10px; }
.ctaller-numero { font-weight: 700; }
.ctaller-tipo { font-size: var(--t-xs); font-weight: 700; padding: 2px 8px; border-radius: var(--radio-chico); background: var(--azul-fondo); color: var(--suave); }
.ctaller-cajas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ctaller-caja { border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.ctaller-rotulo { font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ctaller-diag { color: var(--ambar); }
.ctaller-rep { color: var(--verde); }
.ctaller-trabajo + .ctaller-trabajo { border-top: 1px dashed var(--borde); padding-top: 8px; }
@media (max-width: 700px) { .ctaller-cajas { grid-template-columns: minmax(0, 1fr); } }

/* Pagina de la puerta, diseno "D - sobrio de banco" (2026-09-30). Hoja
   blanca, franja celeste "Pide atencion hoy" y las areas en columnas de
   texto con titulo en mayusculas sobre regla azul. Solo azules, grises y
   celeste; el rojo ("hay vencidas") conserva su color. Plantilla:
   templates/modulo.html. Las reglas .puerta-* de arriba quedan sin uso. */
.pd-hoja {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-grande); padding: 26px 32px 32px; margin-top: 8px;
}
.pd-cabecera {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--borde);
}
.pd-antetitulo {
  margin: 0 0 4px; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--azul);
}
.pd-titulo {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-family: var(--fuente-titulo); font-size: 28px; font-weight: 700; color: var(--azul-fuerte);
}
.pd-titulo svg { flex-shrink: 0; color: var(--azul); }
.pd-buscar {
  display: flex; align-items: center; gap: 10px;
  margin-left: auto; height: 40px; width: 340px; max-width: 100%; padding: 0 12px;
  background: var(--azul-fondo); border: 1px solid var(--borde-fuerte); border-radius: var(--radio);
  color: var(--suave); font: inherit; font-size: var(--t-md); cursor: pointer;
}
.pd-buscar:hover, .pd-buscar:focus-visible {
  background: var(--superficie); border-color: var(--azul); color: var(--texto);
}
.pd-buscar kbd {
  margin-left: auto; font: 600 11px var(--fuente); color: var(--suave);
  background: var(--superficie); border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico); padding: 1px 6px;
}
.pd-atencion {
  display: flex; align-items: stretch; flex-wrap: wrap; margin-bottom: 28px; padding: 14px 0;
  background: linear-gradient(90deg, #e6eff9 0%, #f2f7fc 100%);
  border: 1px solid #d3e0ee; border-radius: var(--radio-grande);
}
.pd-atencion-rotulo {
  display: flex; align-items: center; width: 96px; padding: 0 20px;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; line-height: 1.4;
  text-transform: uppercase; color: var(--azul);
}
.pd-aviso {
  display: flex; align-items: center; gap: 12px; flex: 1 1 200px; padding: 4px 20px;
  border-left: 1px solid #d3e0ee; color: var(--texto); text-decoration: none;
}
.pd-aviso:hover { color: var(--azul); }
.pd-aviso b { font-size: 26px; font-weight: 700; line-height: 1; color: var(--azul-fuerte); white-space: nowrap; }
.pd-aviso.rojo b { color: var(--rojo); }
.pd-aviso span { display: flex; flex-direction: column; font-size: var(--t-md); line-height: 1.3; }
.pd-aviso small { font-size: var(--t-sm); color: var(--suave); }
.pd-columnas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 32px 0; align-items: start;
}
.pd-col { padding: 0 18px; border-left: 1px solid #e3e9f0; scroll-margin-top: 80px; }
/* Con JS (modulo.html) las areas van en pilas, una por columna: la que no
   cabe en la primera fila sube debajo de la de su columna (2026-09-30). */
.pd-columnas.pd-apiladas { display: block; }
.pd-pilas { display: flex; align-items: flex-start; }
/* Area larga de la segunda fila (modulo.html la marca): a todo el ancho,
   al final, con los enlaces en columnas de 230px (2026-09-30, opcion B). */
.pd-col.pd-ancha { margin-top: 32px; border-left: none; }
.pd-ancha .pd-enlaces { columns: 230px; column-gap: 28px; }
.pd-ancha .pd-enlaces > li { break-inside: avoid; }
/* Puerta en franjas horizontales (Administracion, 2026-09-30): cada area a
   todo el ancho, enlaces en columnas de 230px y la regla tenue y fina. */
.pd-columnas.pd-franjas { display: block; }
.pd-franjas .pd-col { padding: 0; border-left: none; margin-bottom: 28px; }
.pd-franjas .pd-col:last-child { margin-bottom: 0; }
.pd-franjas .pd-col-cab { min-height: 0; align-items: center; border-bottom: 1px solid #9dbad6; }
.pd-franjas .pd-enlaces { columns: 230px; column-gap: 28px; }
.pd-franjas .pd-enlaces > li { break-inside: avoid; }
.pd-pila { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.pd-col-cab {
  display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 4px;
  border-bottom: 2px solid var(--azul); color: var(--azul);
}
.pd-col-cab svg { flex-shrink: 0; }
/* Todas las cabeceras del alto de dos renglones y el titulo pegado a la
   regla (2026-09-30, opcion A): asi "Bodega y ubicaciones", que ocupa dos
   renglones, no baja su regla ni su lista respecto de las demas columnas. */
.pd-col-cab { min-height: 50px; align-items: flex-end; }  /* border-box: 2 renglones + 10 de aire + 2 de regla */
.pd-col-cab h2 { line-height: 1.3; }
.pd-col-cab svg, .pd-cuenta { margin-bottom: 2px; }
.pd-col-cab h2 {
  margin: 0; font-size: var(--t-md); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--azul-fuerte);
}
.pd-cuenta {
  margin-left: auto; white-space: nowrap; font-size: var(--t-sm); font-weight: 700;
  color: var(--azul); background: var(--azul-tenue);
  border-radius: var(--radio-chico); padding: 2px 8px;
}
.pd-cuenta.rojo { color: var(--rojo); background: var(--rojo-fondo); }
.pd-enlaces { list-style: none; margin: 0; padding: 0; }
.pd-enlaces a {
  display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 8px; margin: 0 -8px;
  border-bottom: 1px solid var(--borde-suave); border-radius: var(--radio);
  font-size: var(--t-md); color: var(--texto); text-decoration: none;
}
.pd-enlaces a:hover { background: #eef4fa; color: var(--azul-fuerte); }
.pd-chapa { margin-left: auto; font-size: var(--t-sm); font-weight: 700; color: var(--azul); }
.pd-chapa.rechazada { color: var(--rojo); }
.pd-nota { margin: 12px 0 0; font-size: var(--t-base); line-height: 1.45; color: var(--suave); }
@media (max-width: 700px) {
  .pd-hoja { padding: 18px 16px 22px; }
  .pd-buscar { width: 100%; margin-left: 0; }
  .pd-buscar kbd { display: none; }
  .pd-atencion { padding: 6px 0; }
  .pd-atencion-rotulo { width: 100%; padding: 8px 16px; }
  .pd-aviso { flex-basis: 100%; border-left: none; border-top: 1px solid #d3e0ee; padding: 10px 16px; }
  .pd-col { padding: 0; border-left: none; }
  .pd-col-cab { min-height: 0; }
}

/* venta-accesos (2026-09-30, propuesta A): en la columna Garantia de
   /venta/<id>, dos iconos con su nombre debajo -- el historial de la
   maquina y sus comentarios. Azul, sin recuadro, como los del encabezado. */
.venta-accesos { display: flex; gap: 28px; margin-top: 18px; }
.venta-acceso {
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 4px 6px; color: var(--azul); text-decoration: none;
  font-size: var(--t-sm); border-radius: var(--radio);
}
.venta-acceso:hover, .venta-acceso:focus-visible { background: var(--azul-tenue); color: var(--azul-claro); }
.venta-acceso svg { display: block; }
.venta-acceso small { color: var(--tenue); font-size: var(--t-xs); }

/* ---------- Caso de garantia: resumen + relato (2026-09-30, propuesta D) ----------
   "Reporte inicial" y "Estado del caso" en una sola tarjeta: a la izquierda
   el resumen con los tres cambios y un solo boton; a la derecha lo que paso,
   en orden. Los documentos van al pie, de lado a lado. */
.panel.caso-relato { padding: 0; }
.caso-relato-cuerpo { display: grid; grid-template-columns: 340px minmax(0, 1fr); }
.caso-resumen {
  padding: 18px 20px; background: var(--fondo); border-right: 1px solid var(--borde);
  border-radius: var(--radio-grande) 0 0 0; display: flex; flex-direction: column; gap: 12px;
}
.caso-resumen > h2.titulo-panel-icono {
  margin: 0; padding: 0; border: 0; display: flex; align-items: center; gap: 8px;
}
.caso-resumen h2, .caso-historia-cabeza h2 { font-size: var(--t-lg, 17px); }
/* La observacion de "No se presento" solo aparece al elegir ese estado: la
   clase .oculto no tiene regla general en este CSS. */
.caso-controles .oculto { display: none; }
.caso-dias { display: flex; align-items: baseline; gap: 8px; }
.caso-dias b { font-size: 34px; line-height: 1; }
.caso-dias span { color: var(--suave); }
.chapa-caso {
  align-self: flex-start; font-size: var(--t-xs); font-weight: 600;
  padding: 3px 10px; border-radius: var(--radio-chico); border: 1px solid;
}
.chapa-caso.atencion { background: var(--ambar-fondo); border-color: #e2c98f; color: var(--ambar); }
.chapa-caso.ok { background: var(--verde-fondo); border-color: #c3e0cd; color: var(--verde); }
.chapa-caso.error { background: var(--rojo-fondo); border-color: #eec7c4; color: var(--rojo); }
.caso-dato { margin: 0; color: var(--suave); }
.caso-dato b { color: var(--texto); }
.caso-controles { display: flex; flex-direction: column; gap: 10px; }
.caso-controles label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: var(--t-xs); font-weight: 600; color: var(--suave);
}
.caso-controles select, .caso-controles textarea { width: 100%; box-sizing: border-box; }
.caso-controles > button { align-self: stretch; }
.caso-resumen .nota-panel { margin: 0; }

.caso-historia { padding: 18px 24px; min-width: 0; }
.caso-historia-cabeza { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.caso-historia-cabeza h2 { margin: 0; padding: 0; border: 0; display: flex; align-items: center; gap: 8px; }
button.enlace-lapiz, button.enlace-lapiz:hover { background: none; border: 0; box-shadow: none; }
button.enlace-lapiz {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 0;
  color: var(--azul); font: inherit; font-weight: 600; cursor: pointer;
}
button.enlace-lapiz svg { width: 16px; height: 16px; }
button.enlace-lapiz:hover { color: var(--azul-claro); text-decoration: underline; }
.caso-editar-reporte {
  border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px;
  margin-bottom: 16px; background: var(--fondo);
}

.relato { list-style: none; margin: 0; padding: 0; }
.relato-paso { position: relative; padding: 0 0 20px 30px; }
.relato-paso::before {
  content: ""; position: absolute; left: 4px; top: 5px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff; border: 2px solid var(--azul);
}
.relato-paso::after {
  content: ""; position: absolute; left: 9px; top: 19px; bottom: 2px;
  width: 2px; background: var(--borde);
}
.relato-paso:last-child { padding-bottom: 0; }
.relato-paso:last-child::after { display: none; }
.relato-paso.actual::before { background: var(--azul); }
.relato-paso.pendiente::before { border-style: dashed; border-color: var(--suave); }
.relato-titulo { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.relato-titulo span { color: var(--suave); }
.relato-texto, .relato-vacio, .relato-aviso { margin: 6px 0 0; }
.relato-texto { white-space: pre-line; }
.relato-vacio { color: var(--suave); font-style: italic; }
.relato-aviso { color: var(--ambar); }
.relato-cita {
  margin-top: 8px; padding: 10px 12px; white-space: pre-line; line-height: 1.5;
  background: var(--fondo); border: 1px solid var(--borde-suave); border-radius: var(--radio);
}
.relato-cita span {
  display: block; font-size: var(--t-xs); font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--suave); margin-bottom: 4px;
}
.documentos-caso.caso-documentos { margin: 0; padding: 14px 20px 16px; border-top: 1px solid var(--borde); }
.caso-documentos .acciones { align-items: center; }
.caso-documentos .acciones form { display: inline-flex; gap: 6px; align-items: center; }
@media (max-width: 900px) {
  .caso-relato-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .caso-resumen { border-right: 0; border-bottom: 1px solid var(--borde); border-radius: var(--radio-grande) var(--radio-grande) 0 0; }
  .caso-historia { padding: 16px; }
}

/* caso-barra (2026-09-30): en /garantia/<id>, fila con "Comprometer un
   equipo de reemplazo" a la izquierda y los iconos Historial/Comentarios
   del equipo reportado a la derecha (los mismos .venta-acceso de la venta). */
.caso-barra { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: -4px 0 18px; }
.caso-barra .caso-accesos { margin: 0 0 0 auto; }

/* ---------- Documentos del caso de garantia en tarjetas (2026-09-30, propuesta F) ----------
   Una tarjeta por papel: para que sirve, donde sale, Imprimir; Ver y PDF
   abajo. La que todavia no existe va punteada y gris. */
.docs-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .docs-tarjetas { grid-template-columns: minmax(0, 1fr); } }
.doc-tarjeta {
  margin: 0; border: 1px solid var(--borde); border-radius: var(--radio-grande);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; background: #fff;
}
.doc-tarjeta.pendiente { border-style: dashed; background: var(--fondo); color: var(--suave); }
.doc-tarjeta-titulo { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.doc-tarjeta-titulo svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--azul); }
.doc-tarjeta.pendiente .doc-tarjeta-titulo svg { color: var(--borde-fuerte); }
.doc-tarjeta-nota { margin: 0; color: var(--suave); font-size: 13px; }
.doc-tarjeta-aviso { margin: 0; color: var(--ambar); font-size: 13px; }
.doc-sale-en { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
.doc-sale-en > span { font-size: var(--t-xs); font-weight: 600; color: var(--suave); }
.doc-selectores { display: flex; gap: 6px; }
.doc-selectores select,
.doc-selectores select.selector-impresion {
  flex: 1 1 0; min-width: 0; max-width: none; height: 36px; font-size: inherit; padding: 0 8px;
}
.doc-tarjeta-principal { width: 100%; justify-content: center; text-align: center; }
.doc-enlaces { display: flex; justify-content: center; gap: 18px; font-weight: 600; }
.doc-enlaces a { text-decoration: none; }
.doc-enlaces.vacio-fila { visibility: hidden; }
.doc-enlaces a:hover { text-decoration: underline; }

/* Sin laptop ligada (2026-09-30): Historial y Comentarios en gris, sin
   enlace; al lado, "Ligar laptop" en azul. */
.venta-acceso.apagado, .venta-acceso.apagado:hover { color: var(--tenue); background: none; cursor: default; }
.ligar-lista td { vertical-align: middle; }
.ligar-lista label { cursor: pointer; }

/* "El trabajo" del caso de garantia como ficha + Editar (2026-09-30,
   opcion B). [data-trabajo][hidden] gana a la regla display de
   .boton-claro y de .tabla-scroll: sin esto, hidden no esconderia nada. */
[data-trabajo][hidden] { display: none !important; }
.trabajo-espacio { flex-grow: 1; }
.panel > h2 .trabajo-editar { font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.trabajo-editar svg { width: 16px; height: 16px; }
.ficha-trabajo { width: 100%; border-collapse: collapse; }
.ficha-trabajo thead th {
  text-align: left; font-size: var(--t-xs); font-weight: 600; color: var(--tenue);
  text-transform: uppercase; letter-spacing: .04em;
  padding: 8px 14px; border-bottom: 1px solid var(--borde-fuerte); background: none;
}
.ficha-trabajo tbody th, .ficha-trabajo tbody td {
  padding: 12px 14px; border-bottom: 1px solid var(--borde-suave);
  vertical-align: top; text-align: left; line-height: 1.5;
}
.ficha-trabajo tbody tr:last-child th, .ficha-trabajo tbody tr:last-child td { border-bottom: 0; }
.ficha-trabajo tbody th {
  width: 220px; background: var(--superficie-2); font-weight: 600; color: var(--texto);
  font-size: 13px; text-transform: none; letter-spacing: 0;
}
.ficha-trabajo td { white-space: pre-line; }
.ficha-trabajo td.ficha-papel { width: 210px; white-space: normal; color: var(--azul); font-size: var(--t-sm); font-weight: 600; }
.ficha-trabajo .chapa-caso { display: inline-block; font-size: 13px; }
.trabajo-nota { margin: 10px 0 0; }
.trabajo-edicion .acciones { margin-top: 4px; }
/* En el celular cada dato se apila: nombre, texto y en que papel sale. */
@media (max-width: 700px) {
  .ficha-trabajo thead { display: none; }
  .ficha-trabajo tbody tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--borde-suave); }
  .ficha-trabajo tbody tr:last-child { border-bottom: 0; }
  .ficha-trabajo tbody th, .ficha-trabajo tbody td {
    display: block; width: auto; padding: 2px 14px; border: 0; background: none;
  }
  .ficha-trabajo td.ficha-papel { width: auto; font-size: var(--t-xs); }
}

/* ---------- Detalle de la venta en tres tarjetas (2026-09-30) ----------
   /venta/<id> igual a la maqueta que mando el usuario: cabecera con flecha,
   estado y Editar/Imprimir/mas; tarjetas Cliente, La venta y Garantia con
   iconos en cada renglon; Pago y Entregado en cajas dentro de La venta.
   Prefijo vd- para no chocar con nada de lo anterior. */
/* Esta pantalla usa todo el ancho (la maqueta va de lado a lado); el
   resto del sistema sigue en --ancho. */
.contenedor:has(> .vd-tarjetas) { max-width: 1760px; }
.vd-cabecera { display: flex; align-items: flex-start; gap: 14px; margin: 4px 0 18px; flex-wrap: wrap; }
.vd-volver {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  margin-top: 2px; border-radius: var(--radio); color: var(--suave); text-decoration: none;
}
.vd-volver:hover { background: var(--azul-tenue); color: var(--azul); }
.vd-cabecera-texto { flex: 1 1 320px; min-width: 0; }
.vd-cabecera-texto h1 { font-size: 26px; font-weight: 700; line-height: 1.2; }
.vd-subtitulo { margin: 4px 0 0; color: var(--suave); font-size: var(--t-md); }
.vd-cabecera-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vd-estado {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px;
  border-radius: var(--radio-grande); font-weight: 700; font-size: var(--t-md);
}
.vd-estado.confirmada { background: var(--verde-fondo); color: var(--verde); }
.vd-estado.anulada { background: var(--rojo-fondo); color: var(--rojo); }
.vd-estado svg { flex-shrink: 0; }
.vd-boton {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px;
  box-sizing: border-box; background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--radio-grande);
  font-weight: 600; font-size: var(--t-base); text-decoration: none; cursor: pointer;
}
.vd-boton svg { color: var(--azul); flex-shrink: 0; }
.vd-boton:hover { border-color: var(--azul-claro); background: var(--azul-tenue); }
.vd-boton-solo { padding: 0; width: 46px; justify-content: center; }
.vd-boton-solo svg { color: var(--texto); }
.vd-mas { position: relative; }
.vd-mas > summary { list-style: none; }
.vd-mas > summary::-webkit-details-marker { display: none; }
.vd-mas[open] > summary { border-color: var(--azul-claro); background: var(--azul-tenue); }
.vd-mas-menu {
  position: absolute; right: 0; top: 50px; z-index: 30; min-width: 230px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande);
  box-shadow: var(--sombra-flotante); padding: 6px; display: flex; flex-direction: column;
}
.vd-mas-menu > a, .vd-anular > summary {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: var(--radio); color: var(--texto); text-decoration: none;
  font-size: var(--t-base); cursor: pointer;
}
.vd-mas-menu > a svg { color: var(--azul); }
.vd-mas-menu > a:hover { background: var(--azul-tenue); }
.vd-mas-menu .anular-venta.vd-anular { position: relative; top: auto; right: auto; z-index: auto; border-top: 1px solid var(--borde-suave); margin-top: 4px; padding-top: 4px; }
.vd-mas-menu .vd-anular > summary {
  width: auto; height: auto; justify-content: flex-start; background: none;
  border: 0; color: var(--rojo); font-weight: 600;
}
.vd-mas-menu .vd-anular > summary:hover, .vd-mas-menu .vd-anular[open] > summary { background: var(--rojo-fondo); }
.vd-mas-menu .vd-anular .anular-venta-globo { top: calc(100% + 6px); right: -6px; }

.vd-tarjetas {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr) minmax(0, 1fr);
  gap: 18px; align-items: stretch; margin-bottom: 14px;
}
.vd-tarjeta {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px;
  padding: 20px 22px; min-width: 0; box-shadow: 0 1px 2px rgba(11, 35, 56, .04);
}
.vd-tarjeta-titulo { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.vd-tarjeta-titulo h2 { margin: 0; font-size: 20px; font-weight: 700; flex: 1 1 auto; border: 0; padding: 0; }
.vd-circulo {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%;
  background: var(--azul); color: #fff; display: inline-flex; align-items: center; justify-content: center;
}
.vd-carrito { color: var(--azul); display: inline-flex; flex-shrink: 0; }
.vd-lapiz {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--borde);
  display: inline-flex; align-items: center; justify-content: center; color: var(--azul); background: var(--superficie);
}
.vd-lapiz:hover { background: var(--azul-tenue); border-color: var(--azul-claro); }

/* Cliente */
.vd-cliente-nombre { margin: 0 0 4px; font-size: 18px; font-weight: 700; text-transform: uppercase; line-height: 1.3; }
.vd-cliente-nombre a { color: var(--texto); text-decoration: none; }
.vd-cliente-nombre a:hover { color: var(--azul); text-decoration: underline; }
.vd-cliente-empresa { margin: 0 0 4px; color: var(--suave); }
.vd-contacto { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 18px; margin: 18px 0 0; align-items: center; }
.vd-contacto dt { display: flex; align-items: center; gap: 12px; color: var(--suave); font-weight: 400; min-width: 112px; }
.vd-contacto dt svg { color: var(--azul); flex-shrink: 0; }
.vd-contacto dt .vd-wa { color: #1f9d55; }
.vd-contacto dd { margin: 0; overflow-wrap: anywhere; }
.vd-contacto dd a { color: var(--azul); text-decoration: underline; }
.vd-linea { border: 0; border-top: 1px solid var(--borde); margin: 22px 0 18px; }
.vd-caja-cliente {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px;
  background: var(--azul-fondo); border-radius: var(--radio-grande); color: var(--texto); text-decoration: none;
}
a.vd-caja-cliente:hover { background: var(--azul-tenue); }
.vd-caja-cliente b { display: block; font-size: var(--t-base); }
.vd-caja-cliente small { display: block; margin-top: 4px; color: var(--suave); font-size: var(--t-sm); }
.vd-caja-icono {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; background: #dfe9f5;
  color: var(--azul); display: inline-flex; align-items: center; justify-content: center;
}

/* La venta */
.vd-ticket { display: inline-flex; align-items: center; gap: 14px; }
.vd-ticket-rotulo {
  background: var(--azul-tenue); color: var(--azul); font-size: var(--t-sm);
  padding: 5px 10px; border-radius: var(--radio);
}
.vd-ticket b { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.vd-venta-datos {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  border-top: 1px solid var(--borde-suave); padding-top: 14px;
}
.vd-venta-lista { display: flex; flex-direction: column; gap: 18px; padding-right: 20px; }
.vd-venta-garantia { display: flex; flex-direction: column; gap: 12px; padding-left: 22px; border-left: 1px solid var(--borde); }
.vd-item { display: flex; align-items: flex-start; gap: 14px; }
.vd-item > svg { color: var(--suave); flex-shrink: 0; margin-top: 2px; }
.vd-item > span { font-size: 17px; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.vd-item small { display: block; color: var(--suave); font-size: var(--t-base); margin-bottom: 3px; }
.vd-item-chico > span { font-size: var(--t-md); }
.vd-item-chico small { font-size: var(--t-sm); margin-bottom: 1px; }
.vd-estado-gar {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  padding: 8px 14px; border-radius: var(--radio-grande); font-weight: 700; font-size: var(--t-md);
  background: var(--verde-fondo); color: var(--verde);
}
.vd-estado-gar small { display: block; font-weight: 400; font-size: var(--t-sm); }
.vd-estado-gar i, .vd-chapa-gar i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.vd-estado-gar.proxima-a-vencer, .vd-chapa-gar.proxima-a-vencer { background: var(--ambar-fondo); color: var(--ambar); }
.vd-estado-gar.vencida, .vd-chapa-gar.vencida { background: var(--rojo-fondo); color: var(--rojo); }
.vd-caja { border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: 14px 18px; margin-top: 18px; }
.vd-caja-titulo { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; font-weight: 700; font-size: var(--t-md); }
.vd-caja-titulo svg { color: var(--azul); }
.vd-pago { background: #f6f9fc; border-color: #e6edf5; }
.vd-pago-fila {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: stretch;
}
.vd-pago-fila > div { padding: 4px 14px; border-left: 1px solid var(--borde); min-width: 0; }
@media (max-width: 1400px) {
  .vd-pago-fila > div { padding: 4px 10px; }
  .vd-pago-fila b, .vd-pago-fila span { font-size: var(--t-base); }
  .vd-pago-final { padding: 10px 12px !important; }
}
.vd-pago-fila > div:first-child { padding-left: 0; border-left: 0; }
.vd-pago-fila small { display: block; color: var(--suave); font-size: var(--t-sm); margin-bottom: 4px; }
.vd-pago-fila b, .vd-pago-fila span { font-size: var(--t-md); }
.vd-pago-fila > div:not(.vd-pago-metodo) b, .vd-pago-fila > div:not(.vd-pago-metodo) > span { white-space: nowrap; }
.vd-pago-fila > div > small + small { margin: 2px 0 0; }
.vd-pago-metodo span { overflow-wrap: anywhere; }
.vd-pagos { margin: 0; padding: 0; list-style: none; font-size: var(--t-base); }
.vd-pago-final { background: var(--azul-tenue); border-radius: var(--radio); border-left: 0 !important; padding: 10px 16px !important; margin: -6px 0 -6px 4px; }
.vd-pago-final small { color: var(--azul); }
.vd-pago-final b { display: block; color: var(--azul); font-size: clamp(15px, 1.25vw, 22px); font-weight: 700; white-space: nowrap; }
.vd-conceptos { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--borde); font-size: var(--t-base); }
.vd-conceptos li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.vd-entregado { display: flex; flex-direction: column; gap: 10px; }
.vd-entregado .vd-caja-titulo { margin-bottom: 2px; }

/* Garantia */
.vd-gar-datos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 22px; margin: 0; align-items: center; }
.vd-gar-datos dt { display: flex; align-items: center; gap: 14px; color: var(--suave); font-weight: 400; min-width: 150px; }
.vd-gar-datos dt svg { color: var(--suave); flex-shrink: 0; }
.vd-gar-datos dd { margin: 0; font-size: 17px; }
.vd-chapa-gar {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px;
  border-radius: var(--radio); font-weight: 700; font-size: var(--t-md);
  background: var(--verde-fondo); color: var(--verde);
}
.vd-nota-verde {
  display: flex; align-items: center; gap: 16px; margin: 22px 0 0; padding: 14px 18px;
  background: var(--verde-fondo); border-radius: var(--radio-grande); color: var(--verde); font-size: var(--t-md);
}
.vd-nota-verde svg { flex-shrink: 0; }
.vd-nota-ambar { margin: 22px 0 0; padding: 12px 16px; background: var(--ambar-fondo); border-radius: var(--radio-grande); color: var(--ambar); }
.vd-botones-gar { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; margin-top: 26px; }
.vd-boton-gar {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 58px;
  padding: 0 14px; border: 1px solid var(--borde); border-radius: var(--radio-grande);
  background: var(--azul-fondo); color: var(--azul); font-weight: 600; text-decoration: none;
}
.vd-boton-gar:hover { border-color: var(--azul-claro); }
.vd-boton-gar.lleno { background: var(--azul); border-color: var(--azul); color: #fff; }
.vd-boton-gar.lleno:hover { background: var(--azul-fuerte); border-color: var(--azul-fuerte); }
.vd-boton-gar small { font-weight: 400; opacity: .85; }

/* Pie: corregir el precio a la izquierda, volver al listado a la derecha */
.vd-pie { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 4px 0 16px; }
.vd-corregir { flex: 1 1 auto; min-width: 0; }
.vd-corregir > summary { list-style: none; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; color: var(--suave); padding: 6px 4px; }
.vd-corregir > summary::-webkit-details-marker { display: none; }
.vd-corregir > summary:hover { color: var(--azul); }
.vd-corregir[open] > summary svg { transform: rotate(-90deg); }
.vd-corregir-cuerpo { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: 14px 18px; margin-top: 8px; max-width: 760px; }
.vd-volver-listado { display: inline-flex; align-items: center; gap: 12px; color: var(--azul); font-weight: 600; text-decoration: none; padding: 6px 4px; white-space: nowrap; }
.vd-volver-listado:hover { text-decoration: underline; }

@media (max-width: 1180px) {
  .vd-tarjetas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vd-venta { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 720px) {
  .vd-tarjetas { grid-template-columns: minmax(0, 1fr); }
  .vd-venta { grid-column: auto; grid-row: auto; }
  .vd-venta-datos { grid-template-columns: minmax(0, 1fr); }
  .vd-venta-lista { padding-right: 0; }
  .vd-venta-garantia { border-left: 0; padding-left: 0; border-top: 1px solid var(--borde-suave); padding-top: 14px; margin-top: 14px; }
  .vd-pago-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 0; }
  .vd-pago-fila > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .vd-pago-final { margin: 0; }
  .vd-pago-fila > div:not(.vd-pago-metodo) b, .vd-pago-fila > div:not(.vd-pago-metodo) > span { white-space: normal; }
  .vd-tarjeta-titulo { flex-wrap: wrap; }
  .vd-ticket b { font-size: 18px; }
  .vd-gar-datos dt { min-width: 0; }
  .vd-pie { flex-direction: column-reverse; }
}
@media print {
  .vd-tarjetas { grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr) minmax(0, 1fr); }
}

/* ---------- /equipos con el diseno D (2026-09-30) ----------
   Hoja blanca, cabecera y franja "Pide atencion hoy" de las puertas (.pd-*),
   y los filtros simplificados (opcion B): una fila con Laptops/Otro
   Inventario, el boton "Filtros" y la vista, y debajo la ubicacion como
   pestanas subrayadas. Plantillas: _equipos_d.html, lista_agrupada.html y
   lista.html. Las .tarjeta-pestanas siguen en uso en POS y /ubicaciones. */
.eq-hoja { padding-bottom: 26px; }
.eq-cab-der { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.eq-cifras { display: flex; gap: 16px; margin-right: 6px; font-size: var(--t-sm); color: var(--suave); }
.eq-cifras b { font-size: var(--t-lg); color: var(--azul-fuerte); margin-right: 2px; }
.eq-cifras a { color: var(--suave); text-decoration: none; }
.eq-cifras a:hover { color: var(--azul); }
.eq-cab-der .form-en-linea { display: inline-flex; gap: 6px; align-items: center; }
.eq-atencion { margin-bottom: 20px; }
/* Sin el recuadro celeste (2026-09-30, pedido de Renaldy): la franja va
   directo sobre la hoja blanca; quedan solo las rayitas entre avisos. */
.pd-atencion.eq-atencion { background: none; border: 0; border-radius: 0; padding: 6px 0; }
.eq-atencion .pd-atencion-rotulo { padding-left: 0; }
.eq-buscador { margin-bottom: 18px; }
.eq-buscador input { height: 42px; background: var(--azul-fondo); }
.eq-buscador input:focus { background: var(--superficie); }
/* Lupa azul sin contorno adentro del campo (2026-09-30): la caja la dibuja
   el label; el input queda transparente adentro. */
.eq-campo-buscar { flex: 1; min-width: 240px; display: flex; align-items: center; height: 42px;
  padding: 0 3px 0 0; background: var(--azul-fondo); border: 1px solid var(--borde-fuerte); border-radius: var(--radio); }
.eq-campo-buscar:focus-within { background: var(--superficie); border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-tenue); }
.eq-buscador .eq-campo-buscar input { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; box-shadow: none; outline: none; }
.eq-buscador .eq-campo-buscar input:focus { background: transparent; box-shadow: none; }
.eq-buscador button.eq-lupa { display: inline-grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 0;
  border: 0; background: transparent; color: var(--azul); border-radius: var(--radio); box-shadow: none; cursor: pointer; }
.eq-buscador button.eq-lupa:hover, .eq-buscador button.eq-lupa:focus-visible { background: var(--azul-tenue); color: var(--azul-fuerte); }

.eq-linea { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--borde); }
.eq-espacio { flex: 1; }
.eq-seg { display: inline-flex; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); overflow: hidden; background: var(--superficie); }
.eq-seg a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: var(--t-base); font-weight: 600;
  color: var(--suave); text-decoration: none; border-right: 1px solid var(--borde-fuerte); white-space: nowrap; }
.eq-seg a:last-child { border-right: 0; }
.eq-seg a:hover { color: var(--azul-fuerte); background: var(--fondo); }
.eq-seg a.activa { background: var(--azul-tenue); color: var(--azul-fuerte); }
.eq-seg a svg { width: 15px; height: 15px; }

.eq-filtros-boton { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: var(--superficie);
  font-size: var(--t-base); font-weight: 600; color: var(--texto); }
.eq-filtros-boton b { color: var(--azul-fuerte); }
.eq-filtros-boton.marcado { border-color: var(--azul); background: var(--azul-tenue); }
.eq-filtros-boton .eq-flecha { font-size: 10px; color: var(--suave); }
.eq-filtros-lista { min-width: 250px; padding: 6px; }
.eq-filtros-titulo { margin: 8px 10px 4px; font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--suave); }
.eq-filtros-titulo:first-child { margin-top: 4px; }
.eq-filtros-lista a.activa { color: var(--azul-fuerte); font-weight: 700; background: var(--azul-tenue); }
.eq-filtros-lista a { display: flex; align-items: center; gap: 8px; }
.eq-filtros-lista a > .eq-op { flex: 1; }
.eq-filtros-lista a.activa::after { content: "\2713"; margin-left: auto; padding-left: 4px; color: var(--azul); }
.eq-filtros-lista a.activa .eq-n { background: var(--superficie); }
/* La ubicacion vive adentro de Filtros (opcion C, 2026-09-30): la lista es
   larga, asi que se desplaza sola si no cabe en la pantalla. */
.eq-filtros-lista { max-height: calc(100vh - 160px); overflow-y: auto; }
.eq-filtros-lista .eq-filtros-quitar { margin-top: 6px; border-top: 1px solid var(--borde-suave); border-radius: 0; color: var(--azul); font-weight: 600; }

.eq-ubicaciones { display: flex; gap: 4px 18px; flex-wrap: wrap; border-bottom: 1px solid var(--borde); margin-bottom: 4px; }
.eq-ubicaciones a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 0 8px; margin-bottom: -1px;
  border-bottom: 2px solid transparent; font-size: var(--t-base); font-weight: 600; color: var(--suave);
  text-decoration: none; white-space: nowrap; }
.eq-ubicaciones a:hover { color: var(--azul-fuerte); }
.eq-ubicaciones a.activa { color: var(--azul-fuerte); border-bottom-color: var(--azul); }
.eq-n { font-size: var(--t-xs); font-weight: 700; color: var(--azul); background: var(--azul-tenue);
  border-radius: var(--radio-chico); padding: 1px 6px; }

.eq-herr { display: flex; align-items: center; gap: 10px; padding: 12px 0 8px; }
.eq-cuenta { font-size: var(--t-md); font-weight: 700; color: var(--azul-fuerte); }
.eq-cuenta small { font-size: var(--t-sm); font-weight: 400; color: var(--suave); }
.eq-herr .acciones { margin-left: auto; display: flex; gap: 8px; }
.eq-hoja .tabla-scroll { border: none; border-radius: 0; box-shadow: none; }
.eq-tabla > thead th { color: var(--azul-fuerte); border-bottom: 2px solid var(--azul); }

@media (max-width: 700px) {
  .eq-cab-der { margin-left: 0; width: 100%; }
  .eq-espacio { display: none; }
  .eq-atencion .pd-atencion-rotulo, .eq-atencion .pd-aviso { padding-left: 0; padding-right: 0; }
  .eq-linea .mas-acciones-lista { right: auto; left: 0; }
  .eq-ubicaciones { gap: 2px 14px; }
}


/* ---------- Ficha del equipo con el diseno D de /equipos (2026-09-30) ----------
   Pedido de Renaldy sobre la maqueta Mockups/ficha_estilo_equipos.html
   ("SUBILO"). Toda la ficha en la hoja blanca (.pd-hoja), cabecera de las
   puertas, franja "Estado hoy" sin recuadro, las pestanas como el conmutador
   Laptops/Otro Inventario, y las tarjetas de adentro sin recuadro con el
   titulo sobre la regla azul. Plantilla: equipo.html. Va con alcance
   .ficha-d porque ficha.css se carga despues y pisa lo de igual peso. */
.ficha-d { padding-bottom: 26px; }
.fd-cabecera { margin-bottom: 14px; }
.fd-cab-izq { min-width: 0; }
.ficha-d .pd-titulo { font-size: 26px; line-height: 1.2; }
.fd-sub { margin: 6px 0 0; font-size: var(--t-sm); color: var(--suave); }
.ficha-d .eq-cifras b { font-variant-numeric: tabular-nums; }
.ficha-d .eq-cifras > span { white-space: nowrap; }
.ficha-d .eq-cifras .fd-cifra-mala b { color: var(--rojo); }
/* Bateria mas grande que el resto de la cabecera (2026-10-01, opcion A).
   baseline: los rotulos chicos (ID, bateria, dias) quedan en la misma linea. */
.ficha-d .eq-cifras { align-items: baseline; }
.ficha-d .eq-cifras .fd-cifra-bat b { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.ficha-d .eq-cab-der .acciones { display: flex; gap: 8px; }

/* Estado hoy: la franja de /equipos, una celda por dato. */
.fd-estado { margin-bottom: 16px; padding: 2px 0 16px; border-bottom: 1px solid var(--borde); }
.fd-celda { display: flex; flex-direction: column; justify-content: center; gap: 3px;
  flex: 1 1 150px; min-width: 0; padding: 4px 20px; border-left: 1px solid #d3e0ee; }
.fd-v { display: inline-flex; align-items: center; gap: 6px; font-size: 24px; font-weight: 700; line-height: 1.15;
  color: var(--azul-fuerte); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fd-v small { font-size: 12px; font-weight: 600; color: var(--suave); letter-spacing: .03em; margin-left: -2px; }
.fd-v.fd-venta { color: var(--azul); }
.fd-v.fd-texto, .fd-texto { font-size: var(--t-lg); color: var(--texto); }
.fd-v a { color: inherit; text-decoration: none; }
.fd-v a:hover { color: var(--azul); }
.fd-v .vacio { font-weight: 400; color: var(--suave); }
.fd-v .boton-icono { margin-left: 2px; }
.fd-t { font-size: var(--t-sm); color: var(--suave); line-height: 1.35; }
.fd-ubicacion .ubi-chip { font-size: var(--t-lg); font-weight: 700; }

/* Pestanas + herramientas en una fila, sin la barra azul ni la franja. */
.ficha-d .corona-pestanas.fd-controles {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  background: none; border: 0; border-bottom: 1px solid var(--borde); border-radius: 0;
  padding: 0 0 12px; margin: 0 0 20px;
}
.ficha-d .pestanas.fd-seg {
  order: 1; display: inline-flex; flex-wrap: nowrap; gap: 0; margin: 0; padding: 0;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio); overflow: hidden; background: var(--superficie);
}
.ficha-d .pestanas.fd-seg .pestana {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 7px 12px;
  border: 0; border-right: 1px solid var(--borde-fuerte); border-radius: 0;
  background: var(--superficie); color: var(--suave); font-size: var(--t-base); font-weight: 600;
}
.ficha-d .pestanas.fd-seg .pestana:last-child { border-right: 0; }
.ficha-d .pestanas.fd-seg .pestana:hover { background: var(--fondo); color: var(--azul-fuerte); }
.ficha-d .pestanas.fd-seg .pestana.activa { background: var(--azul-tenue); color: var(--azul-fuerte); }
.ficha-d .pestanas.fd-seg .pestana .cuenta {
  margin: 0; padding: 0 6px; font-size: var(--t-xs); font-weight: 700; color: var(--azul);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-chico);
}
.ficha-d .fd-controles > .franja-herramientas {
  order: 2; flex: 1 1 auto; justify-content: flex-end;
  background: none; border: 0; border-radius: 0; padding: 0; gap: 2px;
}
.ficha-d .fd-controles .franja-link { color: var(--texto); padding: 5px 7px; }
.ficha-d .fd-controles .franja-link:hover { background: var(--fondo); border-color: var(--borde); color: var(--azul-fuerte); }
.ficha-d .fd-controles .franja-link .cuenta { background: var(--azul-tenue); }
/* Tareas y papelera: en la cabecera, junto a Volver (acciones sobre el
   registro entero), en azul y gris sobre blanco. */
.fd-iconos { display: inline-flex; align-items: center; gap: 2px; margin-left: 2px; }
.ficha-d .fd-iconos .tareas-menu,
.ficha-d .fd-iconos .borrar-menu { position: relative; top: auto; right: auto; z-index: 20; }
.ficha-d .fd-iconos .tareas-menu > summary { color: var(--azul); }
.ficha-d .fd-iconos .borrar-menu > summary { color: var(--suave); }
.ficha-d .fd-iconos .tareas-menu > summary:hover,
.ficha-d .fd-iconos .tareas-menu[open] > summary { background: var(--azul-tenue); border-color: var(--azul-tenue); }
.ficha-d .fd-iconos .borrar-menu > summary:hover,
.ficha-d .fd-iconos .borrar-menu[open] > summary { color: var(--rojo); background: var(--rojo-fondo); border-color: var(--rojo-fondo); }
.ficha-d .fd-iconos .tareas-cuenta { background: var(--azul); color: #fff; }
/* "Mas": el envio a la impresora en una caja flotante. */
.ficha-d .fd-mas > summary.fd-mas-boton {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px;
  font-size: var(--t-sm); font-weight: 600; color: var(--texto);
  border: 1px solid transparent; border-radius: var(--radio);
}
.ficha-d .fd-mas > summary.fd-mas-boton:hover,
.ficha-d .fd-mas[open] > summary.fd-mas-boton { background: var(--fondo); border-color: var(--borde); color: var(--azul-fuerte); }
.ficha-d .fd-mas-boton svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.ficha-d .fd-mas-boton span { font-size: 10px; color: var(--suave); }
.ficha-d .fd-mas-lista { min-width: 290px; padding: 6px 10px 12px; }
.ficha-d .fd-mas-lista form { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.ficha-d .fd-mas-lista select { width: 100%; }
.ficha-d .fd-mas-lista button { justify-content: center; }

/* Las tarjetas de adentro: sin recuadro, titulo sobre la regla azul. */
.ficha-d .panel { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0 0 30px; }
.ficha-d .panel > h2:first-child { padding-bottom: 9px; margin-bottom: 16px; border-bottom: 2px solid var(--azul); }
.ficha-d .panel > .tabla-scroll { margin-left: 0; margin-right: 0; }
.ficha-d .panel > .tabla-scroll:last-child { margin-bottom: 0; }
/* El nombre ya es el titulo de la pagina: en el Resumen no se repite. */
.ficha-d .resumen-tres-titulo { display: none; }
@media (min-width: 1151px) {
  .ficha-d .resumen-specs { grid-row: 1 / 3; align-self: center; }
}

@media (max-width: 700px) {
  .ficha-d .pd-titulo { font-size: 21px; }
  .ficha-d .eq-cab-der { margin-left: 0; width: 100%; }
  .fd-estado { padding-bottom: 10px; }
  .ficha-d .eq-cifras { flex-wrap: wrap; gap: 6px 16px; }
  .fd-celda { flex-basis: 45%; padding: 8px 12px 8px 0; border-left: 0; border-top: 1px solid #d3e0ee; }
  .fd-v { font-size: 21px; }
  .ficha-d .pestanas.fd-seg { max-width: 100%; overflow-x: auto; }
  .ficha-d .fd-controles > .franja-herramientas { justify-content: flex-start; }
}
@media print {
  .ficha-d { border: 0; padding: 0; }
}

/* Resumen de la ficha del equipo = bloque "Equipo" de la Ficha tecnica
   (2026-10-01, opcion A): el hardware a la izquierda (sus reglas .hw-* viven
   en ficha.css, que esta pantalla ya carga) y una columna angosta a la
   derecha con "No se puede entregar" y la etiqueta, donde estaban. */
.fd-equipo-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 290px; column-gap: 34px; align-items: start; }
.fd-equipo-datos { min-width: 0; }
.fd-equipo-lado { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.fd-equipo-lado .resumen-estado { grid-column: auto; grid-row: auto; }
.fd-equipo-lado .resumen-etiqueta { width: auto; box-sizing: border-box; }
.fd-equipo-familia { text-align: right; font-size: var(--t-base); font-weight: 600; color: var(--suave); margin-bottom: -8px; }
.fd-equipo .hw-pie { margin-top: 0; }
@media (max-width: 1000px) {
  .fd-equipo-rejilla { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .fd-equipo-familia { text-align: left; }
}

/* Orden 1-2-3 sin repetidos (2026-10-01): el bloque Equipo sube encima de
   Estado hoy, y el estado y la condicion del lote van bajo el titulo. */
.fd-sub .fd-sub-chapa { margin: 0 6px 0 0; vertical-align: 1px; }
/* El subtitulo crecio: la columna izquierda se angosta y lo parte en vez de
   empujar las cifras a otro renglon. */
.ficha-d .fd-cab-izq { flex: 1 1 320px; }
.ficha-d > .fd-equipo { margin: 22px 0 0; }
.ficha-d > .fd-equipo + .fd-estado { margin-top: 22px; }

/* El ID de la laptop en rojo en la cabecera de la ficha (2026-10-01). */
/* Desde el 2026-10-02 (opcion B) el ID va junto al modelo en el titulo:
   mas chico que el modelo, en rojo, con el rotulo ID en gris. */
.ficha-d .pd-titulo { flex-wrap: wrap; row-gap: 2px; }
.fd-titulo-id { font-size: 19px; font-weight: 700; color: var(--rojo); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fd-titulo-id small { margin-left: 5px; font-size: 12px; font-weight: 600; color: var(--suave); }
@media (max-width: 700px) { .fd-titulo-id { font-size: 16px; } }
.ficha-d .eq-cifras .fd-cifra-id, .ficha-d .eq-cifras .fd-cifra-id b { color: var(--rojo); }

/* Herramientas en la fila del titulo "Equipo" (2026-10-01): la regla azul
   pasa del h2 a la fila entera. */
.ficha-d .fd-equipo-cab {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
  padding-bottom: 9px; margin-bottom: 16px; border-bottom: 2px solid var(--azul);
}
.ficha-d .fd-equipo-cab > h2 { margin: 0; padding: 0; border: 0; white-space: nowrap; }
.ficha-d .fd-equipo-herr { flex: 1 1 auto; display: flex; min-width: 0; }
.ficha-d .fd-equipo-editar { font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ficha-d .fd-equipo-editar svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------------------
   Repuestos: elegir, no escribir (2026-10-01, etapa 1).
   El buscador unico (.br), las piezas de la solicitud (.bp), la fila de
   aprobacion y los numeros equivalentes del catalogo.
   ------------------------------------------------------------------------ */
.bp-rotulo { display: block; font-weight: 600; margin: 0 0 6px; }
.br { position: relative; }
.br-campo { display: flex; align-items: center; gap: 8px; border: 2px solid var(--azul);
  border-radius: var(--radio); padding: 6px 10px; background: var(--superficie); color: var(--azul); }
.br-campo input.br-texto { border: 0; outline: none; padding: 4px 0; flex: 1; min-width: 0;
  font: inherit; background: transparent; color: var(--texto); }
.br-lista { display: flex; flex-direction: column; margin-top: 6px; max-height: 360px; overflow-y: auto; }
.br-lista:empty { display: none; }
.br-titulo { margin: 4px 0; font-size: var(--t-xs); font-weight: 700; color: var(--azul);
  letter-spacing: .03em; text-transform: uppercase; }
.br-item { display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 8px 10px; margin-bottom: 4px; cursor: pointer; font: inherit; }
.br-item:hover, .br-item:focus { border-color: var(--azul); background: var(--azul-fondo); color: var(--texto); }
.br-item-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.br-item-sub { color: var(--suave); font-size: var(--t-xs); }
.br-item-usado { align-self: flex-start; font-size: var(--t-xs); font-weight: 600; color: var(--azul);
  background: var(--azul-fondo); border-radius: var(--radio-chico); padding: 1px 6px; }
.br-stock { white-space: nowrap; font-size: var(--t-xs); font-weight: 600; border-radius: var(--radio-chico);
  padding: 2px 6px; }
.br-stock.hay { background: var(--verde-fondo); color: var(--verde); }
.br-stock.no-hay { background: var(--rojo-fondo); color: var(--rojo); }
.br-vacio { margin: 4px 0; color: var(--suave); }
.br-nueva { align-self: flex-start; background: none; border: 1px dashed var(--azul); color: var(--azul);
  border-radius: var(--radio); padding: 6px 10px; font: inherit; font-weight: 600; cursor: pointer; }
.br-elegido { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--borde); border-left: 3px solid var(--azul); border-radius: var(--radio);
  padding: 8px 10px; background: var(--superficie); }
.br-elegido-texto { display: flex; flex-direction: column; gap: 3px; }
.br-elegido-sub { display: flex; gap: 6px; }

.bp { border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: 14px;
  margin-bottom: 12px; background: var(--fondo); }
.bp-nueva { display: flex; flex-direction: column; gap: 10px; }
.bp-nueva-cabeza { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bp-pie { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 10px; }
.bp-cantidad input { width: 90px; }

.celda-decision { min-width: 320px; }
.celda-decision > label { display: block; margin-top: 8px; }
.br-cambiado { margin: 6px 0 0; }
.br-equiv { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 8px;
  background: var(--ambar-fondo); border-radius: var(--radio); font-size: var(--t-sm); }
.miniatura-pieza { display: block; max-width: 110px; max-height: 80px; margin-top: 6px;
  border: 1px solid var(--borde); border-radius: var(--radio-chico); object-fit: cover; }
.cambiar-repuesto { margin: 8px 0; }

.pastillas-categorias { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.pastilla-cat { display: inline-flex; gap: 6px; align-items: baseline; padding: 5px 12px;
  border: 1px solid var(--borde); border-radius: 999px; background: var(--superficie);
  color: var(--azul); font-weight: 600; text-decoration: none; }
.pastilla-cat b { color: var(--suave); font-weight: 600; }
.pastilla-cat.activa { background: var(--azul); border-color: var(--azul); color: #fff; }
.pastilla-cat.activa b { color: #fff; }
.pastilla-cat.ambar { background: var(--ambar-fondo); color: var(--ambar); border-color: #ebdcc0; }

.equivalentes-form { margin: 4px 0 12px; }
.chips-equivalentes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip-equivalente { display: inline-flex; align-items: center; gap: 2px; padding: 2px 2px 2px 10px;
  background: var(--azul-fondo); color: var(--azul); border: 1px solid var(--borde);
  border-radius: var(--radio); font-weight: 600; }
.chip-quitar { background: none; border: 0; color: var(--suave); width: 26px; height: 26px;
  padding: 0; cursor: pointer; font-size: 16px; line-height: 1; }
.chip-quitar:hover { color: var(--rojo); background: none; }
.campo-equivalente { width: 200px; border: 1px dashed var(--azul) !important; }
#aviso-duplicado { margin-top: 8px; }
.formulario #piezas, .formulario .bp, .formulario .bp-catalogo, .formulario .bp-nueva,
.formulario .br { align-self: stretch; width: 100%; box-sizing: border-box; }

/* ------------------------------------------------------------------------
   Repuestos con el diseno del canvas (2026-10-02, "Flujo de Solicitud de
   Repuestos"). Prefijo rx-: solicitar, aprobar, cambiar despues de aprobar
   y el catalogo (lista y ficha). Los colores son los del canvas.
   ------------------------------------------------------------------------ */
.rx-pagina { display: flex; flex-direction: column; gap: 20px; }
.rx-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin: 14px 0 20px; }
.rx-cabeza h1 { margin: 0; font-size: 20px; font-weight: 700; }
.rx-cabeza-titulo { display: flex; flex-direction: column; gap: 4px; }
.rx-linea { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rx-gris { color: #5b6573; }
.rx-negro { color: #1c2430; }
.rx-rojo { color: #99201a; }
.rx-ambar { color: #8a5a00; }
.rx-azul { color: #1f4e79; }
.rx-chico { font-size: 13px; }
.rx-texto { margin: 0; }
.rx-espacio { flex-grow: 1; }

.rx-seccion { background: #fff; border: 1px solid #d5dbe3; border-radius: 6px; padding: 20px 24px;
  display: flex; flex-direction: column; gap: 14px; margin: 0; }
.rx-seccion > h2 { margin: 0; font-size: 16px; font-weight: 700; padding-bottom: 10px;
  border-bottom: 1px solid #d5dbe3; }
.rx-seccion.destacada { border: 2px solid #1f4e79; gap: 10px; }
.rx-seccion.rx-sin-titulo { padding: 4px 22px 14px; }
.rx-seccion-cabeza { display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px; border-bottom: 1px solid #d5dbe3; }
.rx-seccion-cabeza h2 { margin: 0; font-size: 16px; font-weight: 700; }
.rx-dos-col { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; }
.rx-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rx-campo { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: #1c2430; font-size: 14px; }
.rx-campo input, .rx-campo select, .rx-campo textarea { font: inherit; font-weight: 400; padding: 9px 10px;
  border: 1px solid #c3ccd8; border-radius: 4px; background: #fff; margin: 0; width: 100%; box-sizing: border-box; }
.rx-campo textarea { resize: vertical; }
.rx-rotulo { font-weight: 600; }
.rx-ayuda { font-weight: 400; color: #5b6573; font-size: 13px; }
.rx-ayuda-linea { font-weight: 400; color: #5b6573; font-size: 12px; }
.rx-corto { width: 90px !important; }
.rx-corto-campo { width: 110px; }
.rx-medio { max-width: 260px; }
.rx-etiqueta { font-size: 12px; font-weight: 700; color: #1f4e79; letter-spacing: .03em; }
.rx-grande { font-size: 17px; }
.rx-sub { display: block; color: #5b6573; font-size: 13px; font-weight: 400; }
.rx-vacio { color: #5b6573; margin: 0; }

/* Botones */
.rx-boton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit;
  font-weight: 600; background: #fff; color: #1f4e79; border: 1px solid #1f4e79; border-radius: 4px;
  padding: 8px 16px; min-height: 40px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.rx-boton:hover { background: #eef3f9; color: #1f4e79; }
.rx-boton.lleno { background: #1f4e79; color: #fff; }
.rx-boton.lleno:hover { background: #163a5c; color: #fff; }
.rx-boton.gris { color: #1c2430; border-color: #c3ccd8; }
.rx-boton.gris:hover { background: #f4f6f9; color: #1c2430; }
.rx-boton.rojo { color: #99201a; border-color: #99201a; }
.rx-boton.rojo:hover { background: #f8e1df; color: #99201a; }
.rx-boton.grande { padding: 10px 24px; min-height: 44px; }
.rx-enlace { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: #1f4e79;
  cursor: pointer; text-decoration: none; }
.rx-enlace:hover { text-decoration: underline; background: none; color: #163a5c; }
.rx-enlace.ambar { color: #8a5a00; font-weight: 700; }
.rx-acciones { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.rx-acciones.izq { justify-content: flex-start; }
.rx-quitar { background: none; border: 0; color: #99201a; font: inherit; cursor: pointer; min-height: 40px; }
.rx-quitar:hover { background: none; text-decoration: underline; color: #99201a; }

/* Chips */
.rx-chip { display: inline-block; border-radius: 3px; padding: 3px 8px; font-size: 12px; font-weight: 600;
  white-space: nowrap; background: #eceff3; color: #5b6573; }
.rx-chip.verde { background: #e3f1e7; color: #1e6b3a; }
.rx-chip.rojo { background: #f8e1df; color: #99201a; }
.rx-chip.ambar { background: #fff4d6; color: #8a5a00; }
.rx-chip.ambar-claro { background: #fff4d6; color: #5c3d00; font-weight: 400; white-space: normal; padding: 4px 8px; }
.rx-chip.azul { background: #e8eef6; color: #1f4e79; }
.rx-chip.gris { background: #eceff3; color: #5b6573; }

/* Avisos */
.rx-aviso { border-radius: 4px; padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; }
.rx-aviso.ambar { background: #fff4d6; color: #5c3d00; }
.rx-aviso.ambar svg { color: #8a5a00; flex-shrink: 0; margin-top: 1px; }
.rx-aviso.rx-dup { flex-direction: column; border: 1px solid #e0c27a; }

/* El buscador */
.rx-buscador { display: flex; align-items: center; gap: 10px; border: 2px solid #1f4e79; border-radius: 4px;
  padding: 8px 12px; background: #fff; color: #1f4e79; }
.rx-buscador.grande { padding: 10px 14px; }
.rx-buscador input { border: 0 !important; outline: none; font: inherit; font-size: 15px; flex-grow: 1;
  min-width: 0; color: #1c2430; background: transparent; padding: 2px 0 !important; margin: 0 !important; }
.rx-buscador.grande input { font-size: 16px; }
.rx-lista { display: block; border: 1px solid #d5dbe3; border-radius: 4px; background: #fff; margin-top: 0;
  max-height: 460px; overflow-y: auto; }
.rx-lista[hidden] { display: none; }
.rx-grupo-titulo { background: #f4f6f9; padding: 8px 14px; font-size: 12px; font-weight: 700; color: #5b6573;
  letter-spacing: .03em; }
.rx-grupo-titulo.azul { background: #eef3f9; color: #1f4e79; }
.rx-res { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-top: 1px solid #e6eaf0; }
.rx-res-texto { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rx-res.vacio { color: #5b6573; }
.rx-res.pie { justify-content: space-between; background: #fbfcfd; }

/* Caja de elegir (aprobacion y cambio) */
.br-elegido { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px;
  border: 0; padding: 0; background: none; }
.br-elegido .br-elegido-nombre { font-size: 14px; }
.br-elegido .br-elegido-sub:empty { display: none; }
.br-busca { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.br-busca[hidden], .br-elegido[hidden] { display: none; }

/* Segmentados (prioridad y decision) */
.rx-seg { display: inline-flex; }
.rx-seg label { margin: 0; }
.rx-seg input { position: absolute; opacity: 0; pointer-events: none; }
.rx-seg span { display: inline-flex; align-items: center; font-weight: 600; background: #fff; color: #1f4e79;
  border: 1px solid #1f4e79; border-left-width: 0; padding: 8px 18px; min-height: 44px; box-sizing: border-box;
  cursor: pointer; user-select: none; }
.rx-seg label:first-child span { border-left-width: 1px; border-radius: 4px 0 0 4px; }
.rx-seg label:last-child span { border-radius: 0 4px 4px 0; }
.rx-seg input:checked + span { background: #1f4e79; color: #fff; }
.rx-seg input:focus-visible + span { outline: 2px solid #7fb0de; outline-offset: 1px; }
.rx-seg input:disabled + span { background: #f4f6f9; color: #8b94a1; border-color: #c3ccd8; cursor: not-allowed; }
.rx-seg-decision span { padding: 7px 12px; min-height: 40px; font-size: 13px; }
.rx-motivo { margin-top: 8px; font: inherit; padding: 8px 10px; border: 1px solid #c3ccd8; border-radius: 4px; width: 100%; box-sizing: border-box; }
.rx-motivo[hidden] { display: none; }

/* Tablas */
.rx-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.rx-tabla th { text-align: left; color: #5b6573; font-weight: 600; padding: 8px 6px; background: none;
  text-transform: none; letter-spacing: 0; font-size: 13px; border: 0; }
.rx-tabla td { padding: 12px 6px; border-top: 1px solid #e6eaf0; vertical-align: middle; }
.rx-tabla td strong { font-size: 14px; }
.rx-tabla[hidden] { display: none; }
.rx-col-cant { width: 90px; }
.rx-col-bodega { width: 200px; }
.rx-col-decision { width: 340px; }
.rx-col-costo { width: 110px; }
.rx-col-quitar { width: 80px; }
.rx-col-acc { width: 190px; }
.rx-cant { width: 64px; font: inherit; padding: 6px; border: 1px solid #c3ccd8; border-radius: 3px; }
.rx-aprobar td { vertical-align: top; }
.rx-aprobar tr.fila-nueva td { background: #f7f9fc; }
.rx-nueva { display: flex; gap: 16px; align-items: flex-start; }
.rx-nueva-cuerpo { flex-grow: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rx-foto-mini { width: 96px; height: 72px; border-radius: 4px; background: #dfe5ec; display: flex; align-items: center;
  justify-content: center; color: #5b6573; font-size: 11px; flex-shrink: 0; overflow: hidden; }
.rx-foto-mini img { width: 100%; height: 100%; object-fit: cover; }
.rx-rotulo-linea { font-weight: 600; }
.rx-es { align-items: flex-start; }
.rx-es-caja { min-width: 300px; max-width: 460px; flex-grow: 1; }
.rx-equiv { background: #fff; border: 1px solid #1f4e79; border-radius: 4px; padding: 12px 14px; display: flex;
  align-items: center; gap: 14px; color: #1c2430; margin-top: 8px; }
.rx-equiv[hidden] { display: none; }
.rx-equiv svg { color: #1f4e79; flex-shrink: 0; }
.rx-equiv span { flex-grow: 1; }
.rx-si { display: flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; margin: 0; }
.rx-si input { width: 18px; height: 18px; margin: 0; }
.br-cambiado { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 6px; }
.br-cambiado[hidden] { display: none; }
.br-cambiado .rx-enlace { font-size: 12px; }
.rx-pie { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Pieza nueva (solicitar) */
.rx-fotos { display: flex; gap: 14px; align-items: center; }
.rx-foto-vista { width: 132px; height: 100px; border-radius: 4px; object-fit: cover; background: #dfe5ec; }
.rx-foto-vista[hidden] { display: none; }
.rx-foto-boton { font-weight: 600; background: #fff; color: #1f4e79; border: 1px dashed #1f4e79; border-radius: 4px;
  width: 170px; height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; font-size: 13px; cursor: pointer; }

/* Tarjetas de piezas (cambiar despues de aprobar) */
.rx-pieza { border: 1px solid #d5dbe3; border-radius: 6px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.rx-pieza.abierta { border: 2px solid #1f4e79; padding: 0; gap: 0; overflow: hidden; }
.rx-pieza.abierta > .rx-pieza-fila { padding: 14px 16px; }
.rx-pieza.abierta > .rx-aviso { margin: 0 16px 12px; }
.rx-pieza.apagada { background: #fbfcfd; }
.rx-pieza-fila { display: flex; align-items: center; gap: 14px; }
.rx-pieza-texto { flex-grow: 1; min-width: 0; }
.rx-pieza-texto strong { font-size: 15px; }
.rx-nota { font-size: 13px; max-width: 260px; }
.rx-cambio { background: #f7f9fc; border-top: 1px solid #d5dbe3; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.rx-cambio[hidden] { display: none; }
.rx-cambio .rx-dos-col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rx-pasara { background: #fff; border: 1px solid #d5dbe3; border-radius: 4px; padding: 12px 14px; display: flex;
  flex-direction: column; gap: 6px; }
.rx-pasara[hidden] { display: none; }
.rx-pasara ul { margin: 0; padding-left: 18px; }

/* Catalogo */
.rx-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rx-filtros .pastilla-cat { min-height: 36px; box-sizing: border-box; }
.rx-check { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 0; color: #1c2430; }
.rx-check input { width: 18px; height: 18px; margin: 0; }
.rx-grupo-fila td { padding: 14px 6px 6px; font-size: 12px; font-weight: 700; color: #1f4e79; letter-spacing: .03em;
  border-top: 0; border-bottom: 1px solid #c9d7e8; }
.rx-grupo-fila.ambar td { color: #8a5a00; border-bottom-color: #e0c27a; }
.rx-fila-rep.inactivo { opacity: .6; }
.rx-num { font-size: 18px; }
.rx-num.grande { font-size: 24px; }
.rx-num.verde { color: #1e6b3a; }
.rx-num.rojo { color: #99201a; }
.rx-acc { text-align: right; white-space: nowrap; }
.rx-acc > * { margin-left: 14px; vertical-align: middle; }
.rx-mas { display: inline-block; position: relative; }
.rx-mas summary { list-style: none; cursor: pointer; font-weight: 700; color: #5b6573; padding: 0 4px; }
.rx-mas summary::-webkit-details-marker { display: none; }
.rx-mas-menu { position: absolute; right: 0; top: 22px; z-index: 5; background: #fff; border: 1px solid #d5dbe3;
  border-radius: 4px; padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  box-shadow: var(--sombra-flotante); }
.rx-mas-menu form { margin: 0; }
.rx-ficha { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.rx-columna { display: flex; flex-direction: column; gap: 16px; }
.rx-pastillas-elegir { display: flex; flex-wrap: wrap; gap: 8px; }
.rx-pastillas-elegir label { margin: 0; }
.rx-pastillas-elegir input { position: absolute; opacity: 0; pointer-events: none; }
.rx-pastillas-elegir span { display: inline-block; font-weight: 600; background: #fff; color: #1f4e79;
  border: 1px solid #c3ccd8; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.rx-pastillas-elegir input:checked + span { background: #1f4e79; color: #fff; border-color: #1f4e79; }
.rx-pastillas-elegir input:focus-visible + span { outline: 2px solid #7fb0de; }
.rx-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rx-chip-num { display: inline-flex; align-items: center; gap: 4px; background: #eef3f9; color: #1f4e79;
  border: 1px solid #c9d7e8; border-radius: 4px; padding: 4px 4px 4px 10px; font-weight: 600; }
.rx-chip-num.principal { background: #1f4e79; color: #fff; border-color: #1f4e79; padding: 6px 10px; }
.rx-chip-num.principal[hidden] { display: none; }
.rx-chip-num.principal small { font-weight: 400; color: #dbe7f3; }
.rx-chip-num .chip-quitar { background: none; border: 0; color: #5b6573; width: 28px; height: 28px; padding: 0;
  cursor: pointer; font-size: 16px; }
.rx-chip-nuevo { font: inherit; padding: 7px 10px; border: 1px dashed #1f4e79 !important; border-radius: 4px; width: 150px; }
.rx-detalles { border-top: 1px solid #e6eaf0; padding-top: 12px; }
.rx-detalles summary { font-weight: 600; color: #1f4e79; cursor: pointer; }
.rx-detalles .rx-tres { margin-top: 12px; }
.rx-check-boton { gap: 8px; color: #1c2430; border-color: #c3ccd8; }
.rx-check-boton input { margin: 0; }

.rx-campo .rx-chip-nuevo { width: 160px; padding: 7px 10px; }
.rx-seccion > .rx-chip, .rx-seccion > .rx-enlace { align-self: flex-start; }
.rx-medio { max-width: 340px; }

@media (max-width: 900px) {
  .rx-ficha, .rx-dos-col, .rx-tres, .rx-cambio .rx-dos-col { grid-template-columns: minmax(0, 1fr); }
  .rx-col-decision { width: auto; }
  .rx-nueva { flex-direction: column; }
}
.rx-o { align-self: center; }
.rx-dialogo { width: min(720px, 94vw); max-width: none; box-sizing: border-box; overflow-x: hidden; }
.rx-pie { margin-bottom: 20px; }
.rx-dialogo h2 { margin: 0; font-size: 18px; }

/* v4 (2026-10-02): igual al canvas pixel a pixel. El canvas no tiene el
   interlineado de 1.5 del resto del sistema, usa el negro #1c2430 y deja
   32 px a los lados. Solo en las pantallas de repuestos (las que llevan
   .rx-cabeza). */
.contenedor:has(.rx-cabeza) { padding-left: 32px; padding-right: 32px; line-height: normal; color: #1c2430; }
.contenedor:has(.rx-cabeza) h1, .contenedor:has(.rx-cabeza) h2 { line-height: normal; color: #1c2430; }
.contenedor:has(.rx-cabeza) h1 { letter-spacing: 0; }
.rx-cabeza.base { align-items: baseline; }
.rx-buscador input { padding: 1px 2px !important; line-height: normal; }
.rx-res.pie { font-size: 14px; }
.rx-res .rx-enlace { font-size: 14px; }
.rx-quitar { padding: 1px 6px; }
.rx-corto { width: 112px !important; }
/* Pantallas 1 y 2: el canvas mide en content-box; aqui todo es border-box. */
.rx-sec-piezas { gap: 12px; }
.rx-sec-nueva { gap: 16px; }
.rx-t-sol th:nth-child(2) { width: 102px; }
.rx-t-sol th:nth-child(3) { width: 232px; }
.rx-t-sol th:nth-child(4) { width: 92px; }
.rx-t-sol td { padding: 10px 6px; }
.rx-t-sol .rx-cant { width: 70px; }
.rx-boton.gris.grande { padding: 10px 20px; }
.rx-boton.lleno.grande { font-weight: 700; }
.rx-sec-prioridad textarea { padding: 8px 10px; resize: none; }
.rx-t-sol .rx-chip { font-size: 13px; }
.rx-sec-prioridad .rx-campo { gap: 8px; }
.rx-pagina input:not([type=checkbox]):not([type=radio]), .rx-pagina textarea, .rx-pagina select { color: #000; }
.rx-pagina .rx-buscador input { color: #1c2430; }
.rx-normal { font-weight: 400; }
.rx-campo-foto { gap: 8px; }
/* La caja de elegir: aspecto normal o de desplegable (pantallas 3 y 5). */
.br-elegido { display: block; }
.br-normal { display: flex; flex-direction: column; align-items: flex-start; }
.br-normal .br-elegido-nombre { font-size: 14px; }
.br-elegido-sub { color: #5b6573; }
.br-elegido-sub:empty { display: none; }
.br-normal .br-cambiar { font-size: 12px; font-weight: 600; }
.br-como-select { display: none; align-items: center; gap: 8px; font-weight: 600; }
.br.br-desplegable .br-normal, tr.cambiado .br-normal { display: none; }
.br.br-desplegable .br-como-select, tr.cambiado .br-como-select { display: flex; }
.br-select { font: inherit; font-size: 14px; font-weight: 600; padding: 6px 10px; border: 1px solid #1f4e79;
  border-radius: 4px; background: #fff; color: #000; min-width: 280px; display: inline-flex; align-items: center;
  justify-content: space-between; gap: 10px; cursor: pointer; text-align: left; line-height: normal; }
.br-select:hover { background: #fff; border-color: #163a5c; }
.br-desplegable .br-select { font-size: inherit; font-weight: 400; padding: 7px 10px; min-width: 300px; }
.br-desplegable .rx-buscador { border-width: 1px; padding: 7px 10px; min-width: 300px; }
.br-desplegable .rx-buscador svg { display: none; }
.br-desplegable .rx-buscador input { font-size: inherit; }
.rx-chip strong { font-size: inherit !important; }

/* Pantalla 3: aprobar */
.rx-t-apr th:nth-child(2) { width: 82px; }
.rx-t-apr th:nth-child(3) { width: 142px; }
.rx-t-apr th:nth-child(4) { width: 342px; }
.rx-t-apr td { vertical-align: middle; }
.rx-t-apr .celda-bodega .rx-chip { font-size: 13px; }
.rx-t-apr .rx-cant { border: 1px solid transparent; background: transparent; padding: 0; width: 48px;
  font: inherit; color: inherit; -moz-appearance: textfield; }
.rx-t-apr .rx-cant::-webkit-inner-spin-button { opacity: 0; }
.rx-t-apr .rx-cant:hover, .rx-t-apr .rx-cant:focus { border-color: #c3ccd8; background: #fff; outline: none; }
.fila-nueva .rx-cant { width: 3em; }
.fila-nueva .rx-linea { gap: 10px; }
.fila-nueva .rx-chip.azul { padding: 2px 8px; }
.fila-nueva .celda-bodega { display: none; }
.fila-nueva .rx-es .rx-boton { padding: 7px 12px; }
.fila-nueva .rx-equiv { margin-top: 0; }
.rx-es .rx-rotulo-linea { margin-right: -2px; }
.rx-es-caja { min-width: 0; max-width: none; flex-grow: 0; }
.rx-sec-motivo { padding: 18px 24px; gap: 6px; }
.rx-sec-motivo > h2 { margin-bottom: 6px; }

/* Pantalla 5: cambiar despues de aprobar */
.rx-cambio .br-select { font-size: 14px; padding: 9px 10px; width: 100%; min-width: 0; }
.rx-cambio .br-desplegable .rx-buscador { padding: 9px 10px; min-width: 0; }
.rx-cambio .br-como-select { display: flex; }
.lista-pasara { display: flex; flex-direction: column; gap: 6px; }
.rx-seccion:has(> .rx-t-apr) { gap: 12px; }
.rx-boton.rojo.grande { padding: 10px 20px; }
.br-select { min-height: 32px; gap: 6px; }
.rx-equiv, .rx-equiv span, .rx-equiv .rx-si { font-size: 13px; }
.rx-equiv strong { font-size: 13px !important; }
.br-cambiado { gap: 6px; }
.br-normal .br-cambiar { line-height: 15.3px; }
.rx-si input { margin: 3px 3px 3px 4px; }
/* Historial y detalle plegado (pantalla 5) */
.rx-sec-historial { padding: 18px 24px; gap: 8px; }
.rx-sec-historial > h2 { margin-bottom: 4px; }
.contenedor:has(.rx-cabeza) > .rx-seccion, .contenedor:has(.rx-cabeza) > details.rx-plegable,
.contenedor:has(.rx-cabeza) > .rx-pagina { margin-bottom: 20px; }
.rx-plegable > summary { cursor: pointer; list-style: none; }
.rx-plegable > summary::-webkit-details-marker { display: none; }
.rx-plegable > summary h2 { margin: 0; border-bottom: 0; padding-bottom: 0; }
.rx-plegable > summary h2::after { content: " ▸"; color: #5b6573; font-weight: 400; }
.rx-plegable[open] > summary h2::after { content: " ▾"; }
.rx-plegable[open] > summary { margin-bottom: 12px; }
.rx-cambio .rx-boton.lleno { font-weight: 700; padding: 8px 18px; }
.rx-pieza .abrir-cambio { padding: 8px 14px; }
.rx-cambio .br-select { min-height: 38px; }
/* Pantalla 13: la lista del catalogo */
.contenedor:has(.rx-cabeza-cat) .rx-cabeza { margin-bottom: 18px; }
.contenedor:has(.rx-cabeza-cat) .rx-pagina { gap: 18px; margin-bottom: 18px; }
.rx-boton.rx-nuevo { padding: 10px 18px; min-height: 0; font-weight: 700; }
.rx-buscador.grande:has(input[name=buscar]) { padding: 11px 14px; }
.rx-buscador input[name=buscar] { font-size: 15px; }
.rx-filtros .pastilla-cat { font: inherit; font-weight: 600; background: #fff; color: #1f4e79; border: 1px solid #c3ccd8;
  border-radius: 999px; padding: 6px 14px; min-height: 36px; display: inline-flex; align-items: center;
  text-decoration: none; line-height: normal; }
.rx-filtros .pastilla-cat.activa { background: #1f4e79; color: #fff; border-color: #1f4e79; }
.rx-filtros .pastilla-cat.ambar { background: #fff4d6; color: #8a5a00; border-color: #e0c27a; }
.rx-filtros .pastilla-cat.ambar.activa { background: #8a5a00; color: #fff; border-color: #8a5a00; }
.rx-check input { margin: 3px 3px 3px 4px; }
.rx-catalogo th { padding: 12px 6px; }
.rx-catalogo th:nth-child(2) { width: 162px; }
.rx-catalogo th:nth-child(3) { width: 112px; }
.rx-catalogo th:nth-child(4) { width: 182px; }
.rx-catalogo td { border-top: 0; border-bottom: 1px solid #e6eaf0; }
.rx-catalogo tr.rx-grupo-fila td { border-bottom: 1px solid #c9d7e8; }
.rx-catalogo tr.rx-grupo-fila.ambar td { border-bottom-color: #e0c27a; }
.rx-catalogo tr.rx-grupo-fila ~ tr.rx-grupo-fila td { padding-top: 18px; }
.rx-tabla td strong.rx-num { font-size: 18px; }
.rx-tabla td strong.rx-num.grande, strong.rx-num.grande { font-size: 24px; }
.rx-camino { display: block; color: #1f4e79; font-size: 12px; }
.rx-camino.rx-gris { color: #5b6573; }
.rx-catalogo .rx-acc > * { margin-left: 0; margin-right: 14px; }
.rx-catalogo .rx-acc > *:last-child { margin-right: 0; }

/* Pantallas 14 y 15: nuevo / editar repuesto */
.rx-sec-ficha { padding: 22px 24px; gap: 18px; }
.rx-campo-cat, .rx-campo-equiv { gap: 8px; }
.rx-sec-ficha .rx-tres { gap: 14px; }
.rx-campo-tipo input { margin-top: -4px; }
.rx-chip-nuevo { width: 172px !important; }
.rx-chip-nuevo.ancho { width: 242px !important; padding: 8px 10px; }
.rx-costo { max-width: 282px; }
.rx-cancelar-a { padding: 10px 18px; min-height: 0; color: #1c2430; }
.rx-ficha .rx-acciones { gap: 10px; }
.rx-ficha .rx-boton.lleno.grande { border: 0; }
.rx-sec-vista { padding: 18px 20px; gap: 10px; }
.rx-sec-bodega { padding: 18px 20px; gap: 8px; }
.rx-bodega-linea { gap: 8px; align-items: baseline; }
.rx-sec-unidades { padding: 22px 24px; gap: 14px; }
.rx-h2-nota { font-size: 14px; }
.rx-unidades { gap: 14px; align-items: flex-end; }
.rx-ancho-112 { width: 112px; }
.rx-ancho-182 { width: 182px; }
.rx-dup-campo { border: 2px solid #8a5a00 !important; }
.rx-aviso.rx-dup { border-radius: 6px; padding: 14px 16px; gap: 10px; }
.rx-aviso.rx-dup strong, .rx-aviso.rx-dup span { color: #5c3d00; }
.rx-aviso.rx-dup .rx-acciones { gap: 10px; }
.rx-aviso.rx-dup .rx-boton { padding: 9px 16px; }
.rx-aviso.rx-dup .rx-boton.lleno { font-weight: 700; min-height: 0; }
.rx-mas-acciones { margin-top: 12px; }
.rx-t-eq th:nth-child(1) { width: 172px; }
.rx-t-eq th:nth-child(3) { width: 212px; }
.rx-t-eq td { padding: 10px 6px; }
.rx-pastillas-elegir span { min-height: 36px; display: inline-flex; align-items: center; box-sizing: border-box; line-height: normal; }
.rx-chip-num .chip-quitar { font-size: 14px; }
.rx-costo { max-width: 260px; }
.rx-cancelar-a, .rx-cancelar-a:hover { background: transparent; }
#chip-principal { display: none !important; }
.rx-sec-origen { margin-top: 20px; }
.rx-sec-origen .rx-tabla { font-size: 13px; }
.rx-aviso.rx-dup { margin-top: 0; }
.rx-detalles[hidden] { display: none; }
#aviso-duplicado.rx-dup { margin-top: 0; }
.rx-pagina .rx-buscador input.br-texto, .rx-pagina .rx-buscador input[name=buscar] { color: #1c2430 !important; }
.rx-foto-boton { width: 172px; height: 102px; }
.rx-cambio input:not([type=checkbox]):not([type=radio]) { color: #000; }
.rx-aviso.rx-aviso-texto { display: block; padding: 10px 12px; }
.fila-nueva .rx-cant { color: #5b6573 !important; font-weight: 400; }
.rx-t-apr td > .rx-cant { color: #1c2430 !important; }
.rx-pastillas-elegir input, .rx-seg input { width: 1px !important; height: 1px; margin: 0; padding: 0; overflow: hidden; }
@media (max-width: 760px) {
  .contenedor:has(.rx-cabeza) { padding-left: 16px; padding-right: 16px; }
  .rx-seccion:has(> .rx-tabla) { overflow-x: auto; }
  .rx-pieza-fila { flex-wrap: wrap; }
}

/* Solicitud masiva (canvas "1b. El mismo repuesto para varias laptops") */
.rx-mt8 { margin-top: 8px; }
.rx-mt14 { margin-top: 14px; }
.rx-dos-iguales { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rx-masiva-nueva { display: flex; flex-direction: column; gap: 16px; }
.rx-masiva-nueva[hidden], .rx-pieza-elegida[hidden] { display: none; }
.rx-pieza-elegida { border: 2px solid #1f4e79; border-radius: 6px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; }
.rx-pieza-elegida .rx-res-texto strong { font-size: 15px; }
.rx-t-laptops th:nth-child(1) { width: 172px; }
.rx-t-laptops th:nth-child(3) { width: 232px; }
.rx-t-laptops th:nth-child(4) { width: 92px; }
.rx-t-laptops td { padding: 10px 6px; }
@media (max-width: 760px) { .rx-dos-iguales { grid-template-columns: minmax(0, 1fr); } }
.rx-pagina .rx-buscador input { color: #1c2430 !important; }
.rx-boton:disabled, .rx-boton:disabled:hover { background: #f4f6f9; color: #8b94a1; border-color: #c3ccd8; cursor: not-allowed; }

/* Ajuste 2026-10-02 (comparado con la captura de SOL-000049): "Es el repuesto"
   centrado con el desplegable, todo el desplegable en la misma letra y el
   enlace del equipo en el azul de la marca, como el canvas. */
.rx-es { align-items: center; }
.br-como-select .br-elegido-nombre { font-size: inherit; }
.rx-cabeza a { color: #1f4e79; }
.rx-cabeza a:hover { color: #163a5c; }

/* La pieza nueva con cada dato bajo su encabezado (2026-10-02, canvas corregido) */
.rx-aprobar tr.fila-nueva td.celda-bodega { display: table-cell; }
.rx-aprobar tr.fila-nueva td.rx-arriba { vertical-align: top; }
.rx-aprobar tr.fila-nueva td.rx-alto40 { line-height: 40px; }
.rx-aprobar tr.fila-nueva .rx-cant { color: #1c2430 !important; font-weight: 400; width: 48px; }
.rx-aprobar tr.fila-nueva .rx-nueva { gap: 14px; }
.rx-aprobar tr.fila-nueva .rx-foto-mini { width: 80px; height: 60px; }
.rx-nueva-titulo { display: flex; flex-direction: column; gap: 4px; }
.rx-nueva-titulo .rx-linea { gap: 10px; }
.rx-aprobar tr.fila-nueva .rx-es { flex-wrap: wrap; }
.rx-aprobar tr.fila-nueva .br-desplegable .br-select { min-width: 280px; }
.rx-aprobar tr.fila-nueva .rx-equiv { gap: 12px; }
.rx-aprobar tr.fila-nueva td.rx-alto40 .rx-chip { display: inline; line-height: normal; }
.rx-o-crear { display: flex; align-items: center; gap: 10px; }

/* Cada dato arriba, a la altura de la primera linea, en todas las filas (2026-10-02) */
.rx-t-apr td, .rx-t-sol td { vertical-align: top; }
.rx-t-apr td:nth-child(2), .rx-t-apr td:nth-child(3),
.rx-t-sol td:nth-child(2), .rx-t-sol td:nth-child(3) { line-height: 40px; }
.rx-t-apr td:nth-child(3) .rx-chip, .rx-t-sol td:nth-child(3) .rx-chip { display: inline; line-height: normal; }
/* La tabla de aprobar conserva la forma del dibujo en una ventana angosta. */
.rx-t-apr .rx-nueva { flex-direction: row; }
/* La casilla escondida de cada boton queda amarrada a su boton: si no, se
   escapa de la tarjeta y la pagina se corre de lado. */
.rx-seg label, .rx-pastillas-elegir label { position: relative; }
/* Ventana mas angosta que el dibujo: la caja del contenido gana ancho
   (menos margen a los lados) para que la tabla quepa entera sin deslizarse. */
@media (max-width: 1100px) {
  .contenedor:has(.rx-cabeza) { padding-left: 12px; padding-right: 12px; }
  .rx-seccion:has(> .rx-tabla) { padding-left: 16px; padding-right: 16px; }
  .rx-t-apr th:nth-child(2) { width: 60px; }
  .rx-t-apr th:nth-child(3), .rx-t-apr th:nth-child(4) { width: 1%; white-space: nowrap; }
  .rx-t-apr .rx-seg-decision, .rx-t-apr .rx-seg-decision label { white-space: nowrap; }
}

/* Las pantallas de repuestos al 80% (2026-10-02, pedido de Renaldy: "se mira
   como agrandado"). Letras, botones y espacios bajan un 20%; la caja del
   contenido conserva su ancho (1280 y sus margenes), asi cabe mas por fila.
   Con zoom 0.8 cada medida se divide entre 0.8 para que se vea igual. */
.contenedor:has(.rx-cabeza) { zoom: 0.8; max-width: calc(var(--ancho) / 0.8); padding-left: 40px; padding-right: 40px; }
@media (max-width: 1100px) { .contenedor:has(.rx-cabeza) { padding-left: 15px; padding-right: 15px; } }
@media (max-width: 760px) { .contenedor:has(.rx-cabeza) { padding-left: 20px; padding-right: 20px; } }

/* Foto de la pieza desde el celular (etapa 2, 2026-10-02, canvas "10. Foto
   desde el celular"): el QR, las fotos que llegaron y el codigo vencido.
   Medidas del dibujo; templates/_foto_celular.html + static/foto_celular.js. */
.rx-fc [hidden] { display: none !important; }
.rx-fc-fila { display: flex; gap: 14px; align-items: center; }
.rx-fc-qr { width: 132px; height: 132px; flex-shrink: 0; background: #fff; border: 1px solid #d5dbe3;
  border-radius: 4px; padding: 8px; box-sizing: border-box; display: flex; align-items: center;
  justify-content: center; text-align: center; font-weight: 400; }
.rx-fc-qr svg { width: 100%; height: 100%; display: block; }
.rx-fc-qr.vencido { background: #f4f6f9; border: 1px dashed #c3ccd8; color: #5b6573; font-size: 12px; padding: 0;
  width: 134px; height: 134px; }
.rx-fc-texto { display: flex; flex-direction: column; gap: 6px; font-weight: 400; }
.rx-fc-texto strong { font-weight: 700; color: #1f4e79; }
.rx-fc-texto.vencido { gap: 8px; align-items: flex-start; }
.rx-fc-texto.vencido strong { color: #8a5a00; }
.rx-fc-13 { color: #5b6573; font-size: 13px; font-weight: 400; }
.rx-fc-12 { color: #5b6573; font-size: 12px; font-weight: 400; }
.rx-fc-otro { font: inherit; font-weight: 700; background: #fff; color: #1f4e79; border: 1px solid #1f4e79;
  border-radius: 4px; padding: 8px 16px; min-height: 40px; margin: 0; cursor: pointer;
  white-space: normal; line-height: normal; }
.rx-fc-otro:hover { background: #eef3f9; }
.rx-fc-fotos { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.rx-fc-foto { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.rx-fc-foto img { width: 120px; height: 90px; border-radius: 4px; object-fit: cover; background: #dfe5ec; display: block; }
.rx-fc .rx-enlace.rx-fc-quitar, .rx-fc .rx-enlace.rx-fc-subir { font-size: 13px; font-weight: 600; }
.rx-fc .rx-fc-subir { align-self: flex-start; }
.rx-fc-otra { font: inherit; font-weight: 600; font-size: 13px; background: #fff; color: #1f4e79;
  border: 1px dashed #1f4e79; border-radius: 4px; width: 150px; height: 90px; box-sizing: border-box; margin: 0;
  padding: 0; white-space: normal; line-height: normal;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  text-align: center; cursor: pointer; }
.rx-fc-otra:hover { background: #eef3f9; }
.rx-fc-llego { font-size: 13px; font-weight: 400; color: #5b6573; }
.rx-fc-llego strong { color: #1e6b3a; font-weight: 700; }

/* Entregar en un solo paso (etapa 3, 2026-10-02, canvas 11 "Bodega: entregar",
   12 "Tecnico: mis repuestos" y 11b). Medidas de los dibujos;
   templates/repuestos_para_entregar.html, _mis_repuestos.html,
   _entrega_cajas.html y static/entrega_repuestos.js. */
.rx-seccion[hidden] { display: none !important; }
.rx-entrega-grupo { gap: 12px; }
.rx-entrega-fila, .rx-mis-fila { display: flex; align-items: center; gap: 16px; padding: 6px 0; }
.rx-entrega-fila + .rx-entrega-fila { padding: 10px 0 6px; border-top: 1px solid #e6eaf0; }
.rx-mis-fila { padding: 4px 0; }
.rx-mis-fila + .rx-mis-fila { padding: 10px 0 4px; border-top: 1px solid #e6eaf0; }
.rx-entrega-texto { flex-grow: 1; min-width: 0; }
.rx-entrega-fila .rx-entrega-texto strong { font-size: 15px; }
.rx-entrega-sub { color: #5b6573; font-size: 13px; font-weight: 400; }
.rx-boton.rx-entregar { font-weight: 700; padding: 10px 22px; min-height: 44px; border: 0; }
.rx-entrega-pie { display: flex; justify-content: flex-end; border-top: 1px solid #e6eaf0; padding-top: 12px; }
.rx-boton.rx-entregar-todos { padding: 9px 18px; min-height: 42px; }
.rx-entrega-notas { color: #5b6573; font-size: 13px; display: flex; flex-direction: column; gap: 4px;
  border-top: 1px solid #e6eaf0; padding-top: 10px; }
.rx-entrega-fila form, .rx-mis-fila form { margin: 0; }
.rx-en-linea { display: inline; margin: 0; }
.rx-entrega-ids { display: none; }
.rx-entrega-sub a { color: #1f4e79; }
/* La caja de confirmar */
.rx-seccion.rx-caja { border: 2px solid #1f4e79; padding: 18px 24px; gap: 12px; }
.rx-seccion.rx-caja > h2 { border-bottom: 0; padding-bottom: 0; }
.rx-caja-linea { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0; }
.rx-recibe { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 0; white-space: nowrap; flex-shrink: 0; }
.rx-recibe select { font: inherit; font-weight: 400; padding: 8px 10px; border: 1px solid #c3ccd8; border-radius: 4px;
  background: #fff; min-width: 220px; margin: 0; color: #000; }
.rx-puntos { color: #5b6573; display: flex; flex-direction: column; gap: 4px; }
/* En la solicitud (11b) */
.rx-pieza .rx-boton.rx-entregar { padding: 9px 20px; min-height: 42px; }
.rx-pieza .rx-en-linea .rx-enlace, .rx-pieza .rx-no-sirvio { white-space: nowrap; }
.rx-pieza + .rx-caja { margin-top: 0; }
/* Mis repuestos (12): en Mi Taller, al 80% como las demas pantallas de repuestos */
.rx-mis { zoom: 0.8; display: flex; flex-direction: column; gap: 20px; margin: 0 10px 22px;
  line-height: normal; color: #1c2430; }
.rx-mis h2 { line-height: normal; color: #1c2430; }
/* No sirvio */
.rx-seccion.rx-devolver { padding: 20px 24px; gap: 14px; max-width: 812px; box-sizing: border-box; }
.rx-dev-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.rx-dev-que { display: flex; flex-direction: column; gap: 8px; }
.rx-seg.rx-seg-motivo { flex-wrap: wrap; }
.rx-seg.rx-seg-motivo span { padding: 8px 14px; min-height: 42px; }
.rx-dev-otro { display: flex; align-items: center; gap: 10px; font-weight: 600; margin: 0; }
.rx-dev-otro input { width: 20px; height: 20px; margin: 3px 3px 3px 4px; }
.rx-dev-info { background: #f7f9fc; border: 1px solid #d5dbe3; border-radius: 4px; padding: 12px 14px; color: #5b6573;
  display: flex; flex-direction: column; gap: 4px; }
.rx-dev-info [hidden] { display: none; }
.rx-devolver .rx-acciones { gap: 10px; }
.rx-devolver .rx-dev-cancelar { padding: 9px 18px; min-height: 42px; }
.rx-devolver .rx-dev-enviar { font-weight: 700; padding: 9px 20px; min-height: 42px; border: 0; }
@media (max-width: 700px) {
  .rx-entrega-fila, .rx-mis-fila { flex-wrap: wrap; }
}

/* Comprar repuestos y Anticipos / Compras (etapa 4, 2026-10-02, canvas 6
   "Por Comprar", 7 "Comprar", 8 "Anticipos / Compras" y 16 "Comprar para
   bodega"). Medidas de los dibujos; repuestos_compras.py y
   static/compras_repuestos.js. */
/* Numeros como en el dibujo (el sistema usa numeros de ancho fijo). */
.rx-pc-cabeza, .rx-pc-seccion, .rx-pc-tabla td, .rx-cp, .rx-an-cabeza, .rx-an-cuerpo { font-variant-numeric: normal; }
/* 6. Por Comprar */
.rx-pc-bodega { font-weight: 600; border: 1px solid #1f4e79; border-radius: 4px; padding: 10px 16px;
  text-decoration: none; background: #fff; color: #1f4e79; }
.rx-pc-bodega:hover { background: #eef3f9; color: #1f4e79; }
.rx-seccion.rx-pc-seccion { padding: 8px 24px 16px; gap: 0; }
.rx-pc-tabla th { padding: 12px 6px; }
.rx-pc-tabla th:nth-child(2) { width: 92px; }
.rx-pc-tabla th:nth-child(3) { width: 272px; }
.rx-pc-tabla th:nth-child(4) { width: 142px; }
.rx-pc-tabla th:nth-child(5) { width: 132px; }
.rx-pc-tabla td { padding: 14px 6px; vertical-align: top; }
.rx-pc-faltan { font-size: 16px; font-weight: 700; line-height: 40px; }
.rx-pc-espera { line-height: 40px; }
.rx-pc-dias { border-radius: 3px; padding: 3px 8px; font-weight: 600; line-height: normal; }
.rx-pc-dias.rojo { background: #f8e1df; color: #99201a; }
.rx-pc-dias.ambar { background: #fff4d6; color: #8a5a00; }
.rx-pc-nueva { color: #8a5a00; font-weight: 600; }
.rx-pc-sol { color: inherit; text-decoration: none; }
.rx-pc-sol:hover { color: #1f4e79; text-decoration: underline; }
.rx-pc-comprar { display: inline-block; background: #1f4e79; color: #fff; border-radius: 4px; padding: 9px 18px;
  font-weight: 700; text-decoration: none; }
.rx-pc-comprar:hover { background: #163a5c; color: #fff; }
.rx-pc-vacio { padding: 14px 6px; }
/* 7. Comprar y 16. Comprar para bodega */
.rx-cp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start;
  margin: 14px 0 20px; }
.rx-cp.rx-cb { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.rx-cp-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.rx-cb-izq { gap: 18px; }
.rx-cp-derecha { padding-top: 44px; }
.rx-cb-der { gap: 16px; }
.rx-cabeza.rx-cp-cabeza { margin: 0; flex-wrap: nowrap; }
.rx-cp-volver { font-weight: 600; white-space: nowrap; }
.rx-seccion.rx-cp-quien { gap: 10px; }
.rx-cp-lista { display: flex; flex-direction: column; }
.rx-cp-lista > * + * { border-top: 1px solid #e6eaf0; }
.rx-cp-fila { display: flex; align-items: center; gap: 12px; padding: 6px 0; margin: 0; font-weight: 400; }
.rx-cp-fila input { width: 20px; height: 20px; margin: 3px 3px 3px 4px; flex-shrink: 0; }
.rx-cp-laptop { padding-left: 32px; }
.rx-cp-laptop input { width: 18px; height: 18px; }
.rx-cp-laptop + .rx-cp-laptop { border-top: 1px solid #e6eaf0; }
.rx-cp-fila.apagada { color: #8b94a1; }
.rx-cp-cant { font-weight: 700; }
.rx-cp-dias { font-weight: 600; }
.rx-cp-dias.rojo { color: #99201a; }
.rx-cp-dias.ambar { color: #8a5a00; }
.rx-cp .rx-aviso { padding: 10px 12px; gap: 8px; }
.rx-cp input:not([type=checkbox]):not([type=radio]) { color: #000; }
.rx-cp .rx-aviso[hidden] { display: none; }
.rx-cp .rx-aviso svg { flex-shrink: 0; }
.rx-seccion.rx-cp-orden { gap: 12px; }
.rx-cp-orden-fila { display: flex; gap: 10px; }
.rx-cp .rx-cp-orden-input { font: inherit; font-size: 16px; padding: 10px 12px; border: 2px solid #1f4e79;
  border-radius: 4px; flex-grow: 1; min-width: 0; margin: 0; }
.rx-cp-registrar { font: inherit; font-weight: 700; background: #1f4e79; color: #fff; border: 1px solid #1f4e79;
  border-radius: 4px; padding: 10px 22px; min-height: 44px; margin: 0; cursor: pointer; white-space: nowrap; }
.rx-cp-registrar:hover { background: #163a5c; }
.rx-cp-registrar:disabled { background: #f4f6f9; color: #8b94a1; border-color: #c3ccd8; cursor: not-allowed; }
.rx-cp-otro { font-size: 13px; align-self: flex-start; }
.rx-cp-repetida-a { font-weight: 600; color: #1f4e79; }
.rx-cp-repetida-a:hover { color: #163a5c; }
.rx-cp-volver, .rx-cp-volver:visited { color: #1f4e79; }
.rx-cp-proveedor[hidden] { display: none; }
.rx-seccion.rx-cp-asi { gap: 14px; }
.rx-cp-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; column-gap: 16px; }
.rx-cp-datos > div { display: flex; flex-direction: column; gap: 2px; }
.rx-cp-rot { color: #5b6573; font-size: 13px; }
.rx-cp-num { font-size: 16px; }
.rx-cp-mini { font-size: 12px; color: #5b6573; }
.rx-seccion.rx-cp-nuevo { gap: 14px; }
/* 16 */
.rx-seccion.rx-cb-que { gap: 14px; }
.rx-cb-buscador[hidden], .rx-cb-ninguno[hidden], .rx-cb-nuevo[hidden], .rx-cb-elegido[hidden] { display: none; }
.rx-cb-ninguno { border: 1px solid #d5dbe3; border-radius: 4px; padding: 12px 14px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; background: #fbfcfd; }
.rx-cb-es-nuevo { font: inherit; font-weight: 700; color: #1f4e79; white-space: nowrap; background: none; border: 0;
  padding: 0; margin: 0; cursor: pointer; }
.rx-cb-nuevo { border: 2px solid #1f4e79; border-radius: 6px; padding: 16px; display: flex; flex-direction: column;
  gap: 14px; background: #f7f9fc; }
.rx-cb-campo { display: flex; flex-direction: column; gap: 8px; }
.rx-cb-nuevo .rx-pastillas-elegir span, .rx-cp-nuevo .rx-pastillas-elegir span { padding: 6px 12px; min-height: 34px; }
.rx-cb-tres { gap: 12px; }
.rx-seccion.rx-cb-orden { gap: 12px; }
.rx-cb-orden-fila { display: flex; gap: 10px; align-items: flex-end; }
.rx-cb-numero { flex-grow: 1; min-width: 0; }
.rx-cb-unidades { width: 96px; flex-shrink: 0; }
.rx-cb-unidades input { font-size: 16px; padding: 10px 12px; }
.rx-cp .rx-cp-orden-input { font-weight: 400; }
.rx-cb-buscador input.rx-cb-buscar { font-size: 15px; background: #fff; }
.rx-cb-orden .rx-cp-registrar { border: 0; }
.rx-seccion.rx-cb-vista { border: 2px solid #1f4e79; padding: 18px 20px; gap: 10px; }
.rx-cb-vista-nombre { font-size: 17px; }
.rx-cb-vista-sirve:empty, .rx-cb-vista-nota[hidden] { display: none; }
.rx-seccion.rx-cb-despues { padding: 18px 20px; gap: 10px; }
.rx-cb-elegido .rx-res-texto { gap: 2px; }
/* 8. Anticipos / Compras */
.rx-cabeza.rx-an-cabeza { margin-bottom: 18px; }
.rx-an-botones { display: flex; gap: 10px; }
.rx-an-boton { font-weight: 600; border: 1px solid #1f4e79; padding: 8px 14px; min-height: 40px; box-sizing: border-box;
  background: #fff; color: #1f4e79; border-radius: 4px; display: flex; align-items: center; gap: 6px; text-decoration: none; }
.rx-an-boton:hover { background: #eef3f9; color: #1f4e79; }
.rx-an-cuerpo { display: flex; flex-direction: column; gap: 18px; margin-bottom: 20px; }
.rx-an-filtros { background: #fff; border: 1px solid #d5dbe3; border-radius: 6px; padding: 12px 16px; display: flex;
  align-items: center; gap: 18px; flex-wrap: wrap; margin: 0; }
.rx-an-periodo { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 0; }
.rx-an-select { font: inherit; font-weight: 600; padding: 8px 10px; border: 1px solid #c3ccd8; border-radius: 4px;
  background: #fff; min-width: 210px; margin: 0; color: #1c2430; }
.rx-an-fechas { display: flex; gap: 8px; align-items: center; }
.rx-an-fechas[hidden] { display: none; }
.rx-an-fechas input { font: inherit; padding: 7px 8px; border: 1px solid #c3ccd8; border-radius: 4px; margin: 0; }
.rx-an-ver { font: inherit; font-weight: 600; border: 1px solid #1f4e79; background: #1f4e79; color: #fff;
  border-radius: 4px; padding: 7px 14px; margin: 0; cursor: pointer; }
.rx-an-seg { display: flex; }
.rx-an-seg a, .rx-an-atencion { font-weight: 600; border: 1px solid #1f4e79; padding: 8px 14px; min-height: 40px;
  box-sizing: border-box; background: #fff; color: #1f4e79; display: inline-flex; align-items: center; text-decoration: none; }
.rx-an-seg a + a { border-left: 0; }
.rx-an-seg a:first-child { border-radius: 4px 0 0 4px; }
.rx-an-seg a:last-child { border-radius: 0 4px 4px 0; }
.rx-an-seg a.activo { background: #1f4e79; color: #fff; }
.rx-an-atencion { color: #99201a; border-color: #99201a; border-radius: 4px; }
.rx-an-atencion.activo { background: #99201a; color: #fff; }
.rx-an-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rx-an-cifra { background: #fff; border: 1px solid #d5dbe3; border-radius: 6px; padding: 14px 18px; display: flex;
  flex-direction: column; gap: 4px; }
.rx-an-cifra strong { font-size: 22px; }
.rx-an-mes { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 0; border-bottom: 1px solid #c3ccd8;
  padding-bottom: 6px; }
.rx-an-mes strong { font-size: 15px; }
.rx-an-tarjeta { background: #fff; border: 1px solid #d5dbe3; border-radius: 6px; padding: 16px 20px; display: flex;
  flex-direction: column; gap: 12px; margin: 0; }
.rx-an-tarjeta.atencion { border: 2px solid #99201a; }
.rx-an-tarjeta.recibida, .rx-an-tarjeta.cancelada { background: #fbfcfd; }
.rx-an-arriba { display: flex; align-items: center; gap: 14px; }
.rx-an-titulo { font-size: 15px; font-weight: 700; color: #1c2430; text-decoration: none; }
.rx-an-titulo:hover { color: #1f4e79; text-decoration: underline; }
.rx-an-confirmar { display: inline-block; background: #99201a; color: #fff; border-radius: 4px; padding: 9px 16px;
  font-weight: 700; text-decoration: none; white-space: nowrap; }
.rx-an-confirmar:hover { background: #7a1a15; color: #fff; }
.rx-an-chip { white-space: nowrap; }
.rx-an-pasos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rx-an-paso { display: flex; flex-direction: column; gap: 6px; border-top: 4px solid #d5dbe3; padding-top: 6px; font-size: 12px; }
.rx-an-paso strong { font-size: 12px; color: #8b94a1; }
.rx-an-paso span { color: #5b6573; }
.rx-an-paso.azul { border-top-color: #1f4e79; }
.rx-an-paso.azul strong { color: #1f4e79; }
.rx-an-paso.verde { border-top-color: #1e6b3a; }
.rx-an-paso.verde strong { color: #1e6b3a; }
.rx-an-paso.rojo { border-top-color: #99201a; }
.rx-an-paso.rojo strong, .rx-an-paso.rojo span { color: #99201a; }
/* Por clasificar: guardar sin recargar (2026-10-03). */
.rx-cl-tarjeta.rx-cl-hecha { background: #e3f1e7; border-color: #b9dcc4; padding: 10px 16px; }
.rx-cl-hecha-texto { color: #1e6b3a; font-weight: 600; }
.rx-cl-error { color: #99201a; font-weight: 600; font-size: 13px; }
/* Lamina 18c: ver en eBay y repuesto nuevo en Por clasificar. */
.rx-cl-ebay { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; text-decoration: none; color: #1f4e79;
  border: 1px solid #c3ccd8; border-radius: 4px; padding: 0 7px; margin-left: 2px; }
.rx-cl-ebay:hover { border-color: #1f4e79; }
.rx-cl-nuevo { display: flex; flex-direction: column; gap: 12px; }
.rx-cl-nuevo-cab { display: flex; align-items: center; gap: 10px; }
.rx-cl-rep[hidden], .rx-cl-nuevo[hidden] { display: none !important; }
/* Lamina 8e: cargadores comprados aparte. */
.rx-an-derecha { display: inline-flex; align-items: center; gap: 12px; }
.rx-an-derecha form { margin: 0; }
.rx-an-sumar { font: inherit; font-weight: 600; font-size: 13px; border: 1px solid #1e6b3a; color: #1e6b3a; background: #fff;
  border-radius: 4px; padding: 6px 12px; min-height: 34px; cursor: pointer; }
.rx-an-sumar:hover { background: #e3f1e7; }
.rx-cl-carg { display: flex; flex-direction: column; gap: 10px; }
.rx-cl-carg .rx-cl-rep-rot { white-space: nowrap; }
.rx-cl-cant-cargadores { width: 80px; }
.rx-cl-coincide-carg { color: #1e6b3a; }
/* Lamina 8d: reclamo en eBay. */
.rx-an-nota { border-top: 1px solid #e6eaf0; padding-top: 10px; font-size: 13px; color: #5b6573; }
.rx-an-perdido { color: #99201a; font-weight: 700; }
.rx-reclamo.abierto { border-left: 4px solid #e0a800; }
.rx-reclamo-botones { display: flex; gap: 10px; flex-wrap: wrap; }
/* Lamina 8c: "En carga · no está en el sistema" (recibida según el Excel). */
.rx-an-paso.punteado { border-top-style: dashed; border-top-color: #c3ccd8; }
.rx-an-paso.punteado strong, .rx-an-paso.punteado span { color: #8b94a1; }
.rx-an-alerta { background: #f8e1df; color: #7a1a15; border-radius: 4px; padding: 8px 12px; }
@media (max-width: 900px) {
  .rx-cp, .rx-cp.rx-cb, .rx-cp-datos, .rx-an-cifras { grid-template-columns: minmax(0, 1fr); }
  .rx-cp-derecha { padding-top: 0; }
  .rx-pc-tabla th:nth-child(3) { width: auto; }
}
@media (max-width: 700px) {
  .rx-an-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
  .rx-an-arriba, .rx-cp-orden-fila, .rx-cb-orden-fila { flex-wrap: wrap; }
}

/* 8b. Anticipos: laptops y clases (2026-10-02) */
.rx-an-boton.rx-an-laptops { font-weight: 700; }
.rx-an-clasificar { font-weight: 600; border: 1px solid #8a5a00; padding: 8px 14px; min-height: 40px; box-sizing: border-box;
  background: #fff4d6; color: #8a5a00; border-radius: 4px; text-decoration: none; display: inline-flex; align-items: center; }
.rx-an-clasificar:hover { background: #fbe9b8; color: #8a5a00; }
.rx-an-filtros .rx-an-select { color: #000; }
.rx-an-precio { font-weight: 700; }
.rx-an-botones { align-items: center; }
.rx-an-buscar { margin: 0; }
.rx-an-buscar label { display: flex; align-items: center; gap: 8px; border: 1px solid #c3ccd8; border-radius: 4px; padding: 0 10px;
  background: #fff; width: 300px; box-sizing: border-box; min-height: 40px; margin: 0; }
.rx-an-buscar label:focus-within, .rx-an-buscar.activo label { border-color: #1f4e79; }
.rx-an-buscar svg { flex-shrink: 0; }
.rx-an-buscar input { font: inherit; border: 0; outline: 0; padding: 8px 0; flex-grow: 1; min-width: 0; color: #000;
  background: #fff; margin: 0; }
.rx-an-resultado { background: #e8eef5; color: #1c2430; border-radius: 4px; padding: 10px 14px; display: flex;
  align-items: center; gap: 10px; }
.rx-an-resultado a { font-weight: 600; color: #1f4e79; }
.rx-an-resultado a:hover { color: #163a5c; }
.rx-an-clase { background: #e8eef5; color: #1f4e79; border-radius: 3px; padding: 2px 8px; font-size: 12px; font-weight: 700;
  margin-right: 6px; white-space: nowrap; }
/* 17. Comprar laptops */
.rx-cl-sigue { gap: 14px; }
.rx-cl-paso { display: flex; gap: 12px; align-items: flex-start; }
.rx-cl-paso > div { display: flex; flex-direction: column; gap: 2px; }
.rx-cl-num { flex-shrink: 0; width: 26px; height: 26px; border-radius: 999px; background: #e8eef5; color: #1f4e79;
  font-weight: 700; display: flex; align-items: center; justify-content: center; }
/* 18. Por clasificar */
.rx-cl-revision { background: #fff; border: 1px solid #d5dbe3; border-radius: 6px; padding: 12px 16px; display: flex;
  align-items: center; gap: 12px; }
.rx-cl-revision .rx-rojo { color: #99201a; }
.rx-cl-tarjeta { background: #fff; border: 1px solid #d5dbe3; border-radius: 6px; padding: 16px 20px; display: flex;
  flex-direction: column; gap: 12px; margin: 0; }
.rx-cl-tarjeta.sin-sugerencia { border-color: #e0c27a; }
.rx-cl-arriba { display: flex; align-items: flex-start; gap: 14px; }
.rx-cl-titulo { font-size: 15px; }
.rx-cl-sugerido { background: #e8eef5; color: #1f4e79; border-radius: 3px; padding: 3px 8px; font-size: 12px;
  font-weight: 600; white-space: nowrap; }
.rx-cl-fila { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rx-cl-seg { display: flex; }
.rx-cl-seg label { margin: 0; display: flex; }
.rx-cl-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.rx-cl-seg span { font-weight: 600; border: 1px solid #1f4e79; padding: 8px 14px; min-height: 40px; box-sizing: border-box;
  background: #fff; color: #1f4e79; display: inline-flex; align-items: center; cursor: pointer; }
.rx-cl-seg label + label span { border-left: 0; }
.rx-cl-seg label:first-child span { border-radius: 4px 0 0 4px; }
.rx-cl-seg label:last-child span { border-radius: 0 4px 4px 0; }
.rx-cl-seg input:checked + span { background: #1f4e79; color: #fff; }
.rx-cl-seg input:focus-visible + span { outline: 2px solid #7fb0de; outline-offset: 2px; }
.rx-cl-guardar { font: inherit; font-weight: 700; background: #1f4e79; color: #fff; border: 1px solid #1f4e79;
  border-radius: 4px; padding: 8px 18px; min-height: 40px; margin: 0; cursor: pointer; }
.rx-cl-guardar:hover { background: #163a5c; }
.rx-cl-guardar:disabled { background: #f4f6f9; color: #8b94a1; border-color: #c3ccd8; cursor: not-allowed; }
div.rx-cl-detalle[data-clase="repuesto"] { background: #f7f9fc; border: 1px solid #d5dbe3; border-radius: 4px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.rx-cl-detalle[hidden], .rx-cl-usar[hidden], .rx-cl-coincide[hidden], .rx-cl [data-solo][hidden] { display: none !important; }
.rx-cl-rep { display: flex; align-items: center; gap: 10px; }
.rx-cl-rep-rot { display: flex; align-items: center; gap: 10px; font-weight: 600; margin: 0; }
.rx-cl-select { font: inherit; font-weight: 400; color: #000; padding: 7px 10px; border: 1px solid #1f4e79; border-radius: 4px;
  background: #fff; box-sizing: border-box; min-width: 322px; field-sizing: content; margin: 0; }
.rx-cl-coincide { color: #1e6b3a; }
.rx-cl-usar { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 400; }
.rx-cl-usar input { width: 18px; height: 18px; margin: 3px 3px 3px 4px; }
.rx-cl-sin { color: #8a5a00; font-size: 13px; font-weight: 600; }
.rx-cl-nota { display: flex; flex-direction: column; gap: 12px; }
.rx-cl-nota .rx-campo { display: flex; flex-direction: column; gap: 6px; font-weight: 600; margin: 0; }
.rx-cl-nota input { font: inherit; font-weight: 400; color: #000; padding: 8px 10px; border: 1px solid #c3ccd8;
  border-radius: 4px; max-width: 420px; margin: 0; }
@media (max-width: 700px) {
  .rx-cl-arriba, .rx-cl-rep { flex-wrap: wrap; }
  .rx-cl-select { min-width: 0; width: 100%; }
  .rx-cl-sugerido { white-space: normal; }
}

/* 18b. Por clasificar: aceptar varias sugerencias (2026-10-02) */
.rx-cl-lote { background: #fff; border: 2px solid #1f4e79; border-radius: 6px; padding: 16px 20px; display: flex;
  flex-direction: column; gap: 4px; }
.rx-cl-lote-cab { display: flex; align-items: baseline; gap: 12px; padding-bottom: 8px; }
.rx-cl-lote-cab h2 { margin: 0; font-size: 16px; font-weight: 700; }
.rx-cl-lote-fila { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid #e3e8ee; margin: 0; }
.rx-cl-lote-chip { background: #e8eef5; color: #1f4e79; border-radius: 3px; padding: 3px 8px; font-size: 12px; font-weight: 700;
  white-space: nowrap; min-width: 92px; box-sizing: content-box; text-align: center; display: inline-block; }
.rx-cl-lote-boton { font: inherit; font-weight: 700; background: #1f4e79; color: #fff; border: 1px solid #1f4e79;
  border-radius: 4px; padding: 8px 16px; min-height: 40px; white-space: nowrap; margin: 0; cursor: pointer; }
.rx-cl-lote-boton:hover { background: #163a5c; }
.rx-cl-lote-boton:disabled { background: #f4f6f9; color: #8b94a1; border-color: #c3ccd8; cursor: not-allowed; }
.rx-cl-lote-sin { color: #8a5a00; font-size: 13px; font-weight: 600; padding-top: 8px; border-top: 1px solid #e3e8ee; }
.rx-cl-incluir { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; color: #1f4e79;
  white-space: nowrap; }
.rx-cl-incluir input { width: 16px; height: 16px; margin: 3px 3px 3px 4px; }
@media (max-width: 700px) {
  .rx-cl-lote-fila, .rx-cl-lote-cab { flex-wrap: wrap; }
}

/* 19. Solicitudes con tres pestañas, 19c Esperando repuesto y 19d avisos (2026-10-03) */
.rx-pest { background: #1f4e79; border-radius: 6px; padding: 8px 8px 0; display: flex; gap: 4px; margin: 0 0 20px;
  flex-wrap: wrap; }
.rx-pest a { background: #24598a; color: #fff; text-decoration: none; font-weight: 700; padding: 11px 18px;
  border-radius: 4px 4px 0 0; display: inline-flex; align-items: center; gap: 8px; }
.rx-pest a:hover { background: #2d6699; color: #fff; }
.rx-pest a.activa { background: #fff; color: #1c2430; }
.rx-pest-n { background: #3b6f9e; color: #fff; border-radius: 10px; padding: 1px 8px; font-size: 12px; }
.rx-an-cabeza + .rx-pest { margin-bottom: 18px; }
.rx-pest a.activa .rx-pest-n { background: #fff4d6; color: #8a5a00; }

.rx-so-botones { display: flex; gap: 10px; flex-wrap: wrap; }
.rx-so-masiva, .rx-so-lote { border: 1px solid #1f4e79; border-radius: 4px; padding: 10px 16px; text-decoration: none; }
.rx-so-masiva { font-weight: 600; background: #fff; color: #1f4e79; }
.rx-so-masiva:hover { background: #eef3f9; color: #1f4e79; }
.rx-so-lote { font-weight: 700; background: #1f4e79; color: #fff !important; }
.rx-so-lote:hover { background: #163a5c; }

.rx-so { display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px; }
.rx-so-filtros { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; }
.rx-so-seg { display: flex; }
.rx-so-seg a, .rx-so-decidir { font-weight: 600; border: 1px solid #1f4e79; padding: 8px 14px; min-height: 40px;
  box-sizing: border-box; display: inline-flex; align-items: center; text-decoration: none; background: #fff;
  color: #1f4e79; white-space: nowrap; }
.rx-so-seg a + a { border-left: 0; }
.rx-so-seg a:first-child { border-radius: 4px 0 0 4px; }
.rx-so-seg a:last-child { border-radius: 0 4px 4px 0; }
.rx-so-seg a.activo { background: #1f4e79; color: #fff; }
.rx-so-seg a:not(.activo):hover { background: #eef3f9; }
.rx-so-decidir { border-color: #99201a; color: #99201a; border-radius: 4px; }
.rx-so-decidir.activo { background: #99201a; color: #fff; }
.rx-so-filtros input.rx-so-buscar { font: inherit; flex-grow: 1; flex-basis: 0; min-width: 260px; width: auto;
  min-height: 40px; box-sizing: border-box; border: 1px solid #c3ccd8; border-radius: 4px; padding: 8px 12px;
  background: #fff; color: #000; }
.rx-so-nota { color: #5b6573; font-size: 13px; }
.rx-so > .rx-so-nota { margin-top: -8px; }

.rx-seccion.rx-so-seccion { padding: 8px 24px 16px; gap: 0; overflow-x: auto; }
.rx-so-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.rx-so-tabla th { text-align: left; color: #5b6573; font-weight: 600; font-size: 13px; padding: 12px 6px;
  background: none; border: 0; text-transform: none; letter-spacing: 0; white-space: normal; }
.rx-so-tabla td { padding: 10px 6px; vertical-align: top; border: 0; border-top: 1px solid #e6eaf0; }
/* Como el canvas: ancho de columna sin contar el relleno, y numeros sin ancho fijo. */
.rx-so-tabla th, .rx-so-tabla td { box-sizing: content-box; }
.rx-so, .rx-so-tabla td, .rx-so-cabeza, .rx-pest { font-variant-numeric: normal; }
.rx-so-tabla tbody tr:hover { background: none; }
.rx-so-tabla .c-num { width: 110px; }
.rx-so-tabla .c-ped { width: 100px; }
.rx-so-tabla .c-eq { width: 120px; }
.rx-so-tabla .c-tec { width: 150px; }
.rx-so-tabla .c-pri { width: 90px; }
.rx-so-tabla .c-esp { width: 90px; }
.rx-so-tabla .c-acc { width: 90px; }
.rx-so-tabla .c-eq2 { width: 175px; }
.rx-so-tabla .c-tec2 { width: 140px; }
.rx-so-tabla .c-pri2 { width: 80px; }
.rx-so-tabla .c-pz2 { width: 215px; }
.rx-so-tabla .c-esp2 { width: 80px; }
.rx-so-tabla .c-eq3 { width: 140px; }
.rx-so-tabla .c-est { width: 200px; }
.rx-so-tabla td a.rx-so-num { font-weight: 700; color: #1c2430; }
.rx-so-urgente { color: #99201a; font-weight: 700; }
.rx-so-nowrap { white-space: nowrap; }
.rx-so-dias { border-radius: 3px; padding: 3px 8px; font-weight: 600; white-space: nowrap; }
.rx-so-dias.rojo { background: #f8e1df; color: #99201a; }
.rx-so-dias.ambar { background: #fff4d6; color: #8a5a00; }
.rx-so-tabla td.rx-so-acc { text-align: right; }
.rx-so-tabla td.rx-so-acc a { font-weight: 700; white-space: nowrap; }
.rx-so-chip { border-radius: 3px; padding: 3px 8px; font-weight: 600; white-space: nowrap; display: inline-block; }
.rx-so-chip.ambar { background: #fff4d6; color: #8a5a00; }
.rx-so-chip.rojo { background: #f8e1df; color: #99201a; }
.rx-so-chip.azul { background: #e8eef5; color: #1f4e79; }
.rx-so-chip.gris { background: #eef1f5; color: #5b6573; }
.rx-so-chip.tinta { background: #eef1f5; color: #1c2430; }
.rx-so-chip.verde { background: #e3f1e7; color: #1f6b3a; }
.rx-so-donde { color: #5b6573; display: inline-block; margin-top: 4px; }
.rx-so-tabla .rx-so-donde a { font-weight: 600; }
.rx-so-vacio { margin: 0; padding: 14px 6px; color: #5b6573; }
.rx-seccion.rx-so-leyenda { padding: 16px 24px; gap: 10px; }
.rx-seccion.rx-so-leyenda > h2 { padding-bottom: 0; border: 0; }
.rx-so-pasos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rx-so-flecha { color: #1f4e79; font-weight: 700; }

/* Aprobar una masiva: cuantas se compran para la familia */
.rx-familia-cant { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 600; color: #1c2430; }
.rx-familia-cant input.rx-cant-familia { width: 70px; min-height: 36px; box-sizing: border-box; border: 2px solid #1f4e79;
  border-radius: 4px; padding: 6px 10px; font: inherit; font-weight: 700; }

/* Llego lo que pediste */
.rx-av-lista { display: flex; flex-direction: column; gap: 12px; }
.rx-av-aviso { background: #fff; border: 1px solid #d5dbe3; border-left: 4px solid #1f4e79; border-radius: 6px;
  padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; margin: 0; }
.rx-av-rot { color: #5b6573; font-size: 12px; font-weight: 700; }
.rx-av-titulo { font-size: 15px; }
.rx-av-acciones { display: flex; gap: 14px; margin: 4px 0 0; }
.rx-av-ver, .rx-av-visto { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.rx-av-ver { font-weight: 700; color: #1f4e79; }
.rx-av-visto { color: #5b6573; }
.rx-av-ver:hover, .rx-av-visto:hover { text-decoration: underline; }
.rx-av-visto-fila { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid #e6eaf0; }
.rx-av-visto-fila a { font-weight: 600; text-decoration: none; }

/* fin: Repuestos con el diseno del canvas */

/* ---------- Barra "Buscar" (2026-10-02, pedido de Renaldy) ----------
   La lupa de escritorio paso a ser un campo redondeado y claro, siempre
   visible, justo despues de las cuatro puertas (antes de la campana). La
   lista se abre DEBAJO del campo y reusa las filas de la paleta
   (.paleta-lista/.paleta-fila/.paleta-pie); aqui solo el campo, la caja y
   las filas de datos (familias, garantias, cargas, ventas) con su chapa de
   estado. En el telefono no cambia nada: sigue la lupa con la paleta. */
/* Opcion E (2026-10-02, elegida entre seis): en reposo es SOLO la lupa,
   junto a la campana (antes que ella); al tocarla o con Ctrl+K el campo se
   abre hacia la IZQUIERDA, flotando encima de las puertas, sin mover nada
   de la barra (por eso va en absoluto dentro de un hueco fijo de 34px). */
.modulo-buscar { order: 10; flex: 0 0 34px; width: 34px; height: 34px; margin-left: auto; position: relative; }
.modulo-avisos { order: 11; margin-left: 0; }
.buscador-barra {
  position: absolute; top: 0; right: 0; z-index: 210;
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  width: 34px; height: 34px; padding: 0 0 0 8px; border-radius: 17px;
  background: transparent; border: 1px solid rgba(255,255,255,.35); color: #c3d3e2;
  transition: width .2s ease, background .15s, box-shadow .15s, color .15s;
}
.buscador-barra:hover { background: rgba(255,255,255,.08); color: #fff; }
.buscador-barra:focus-within, .buscador-barra.abierto {
  width: 300px; padding-right: 12px; cursor: text;
  background: #fff; border-color: #fff; color: #0b2338; box-shadow: 0 0 0 2px rgba(27,111,214,.55);
}
.buscador-lupa { flex-shrink: 0; }
.buscador-barra input, .buscador-barra input:focus {
  flex: 1; min-width: 0; width: 0; height: 100%; padding: 0; margin: 0;
  border: 0; outline: 0; box-shadow: none; background: transparent;
  font: inherit; font-size: 14px; color: #0b2338;
}
.buscador-barra input::placeholder { color: #4f6275; opacity: 1; }
.buscador-barra:not(:focus-within):not(.abierto) input { cursor: pointer; }
.buscador-caja {
  position: absolute; top: calc(100% + 8px); right: -1px; z-index: 200;
  width: 560px; max-width: calc(100vw - 32px); max-height: calc(100vh - 90px);
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-grande); box-shadow: 0 8px 24px rgba(11,35,56,.22);
  display: flex; flex-direction: column; overflow: hidden; color: var(--texto);
}
.buscador-caja[hidden] { display: none; }
.buscador-caja .paleta-lista { flex: 1; min-height: 0; }
/* Filas de datos: texto arriba, detalle debajo, estado a la derecha. */
.paleta-fila.paleta-registro { padding: 8px 12px; }
.paleta-registro-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.paleta-detalle { font-size: var(--t-sm); color: var(--suave); }
.paleta-detalle b { font-weight: 700; }
.paleta-chapa {
  margin-left: auto; flex-shrink: 0; white-space: nowrap;
  font-size: var(--t-xs); font-weight: 600; padding: 2px 9px; border-radius: 999px;
  background: var(--borde-suave); color: var(--suave);
}
.paleta-chapa.ok { background: var(--verde-fondo); color: var(--verde); }
.paleta-chapa.aviso { background: var(--ambar-fondo); color: var(--ambar); }
.paleta-titulo .paleta-mas { text-transform: none; letter-spacing: 0; font-weight: 400; }
@media (max-width: 900px) {
  .paleta-fila.paleta-registro { flex-direction: row; align-items: center; }
}
/* fin: Barra "Buscar" */

/* Caso C (2026-10-03): la laptop que entrega el cliente en un cambio de
   registro manual entra al inventario. */
.ingreso-entregada, #ie-cuerpo:not([hidden]) { display: flex; flex-direction: column; gap: 12px; }
.ingreso-entregada-fila { display: grid; grid-template-columns: 220px 220px minmax(0, 1fr); gap: 14px; align-items: end; }
.ingreso-entregada .ie-vista, .ingreso-entregada #ie-despues { margin: 0; }
.ie-id-grande { font-size: var(--t-lg); }
.ingreso-entregada .nota-menor { display: inline; }
.aviso.azul .ie-id-grande { color: var(--azul); }
.aviso-laptop-entregada { display: flex; gap: 16px; align-items: center; }
.aviso-laptop-entregada > div { flex: 1; }
.aviso-laptop-entregada .boton { white-space: nowrap; }
@media (max-width: 760px) {
  .ingreso-entregada-fila { grid-template-columns: 1fr; }
  .aviso-laptop-entregada { flex-direction: column; align-items: stretch; }
}
/* fin: Caso C */

/* Caso D (2026-10-03): el equipo que recibe vale menos. Botones con
   recuadro (canvas D1), el resultado en ambar y las dos opciones. */
.botones-envio.recuadro .boton-envio.activa,
.botones-envio.recuadro .boton-envio.activa:hover {
  background: var(--azul-tenue); border: 2px solid var(--azul); color: var(--azul); font-weight: 600;
}
.dif-pregunta { margin: 0 0 6px; font-weight: 600; font-size: 13px; }
.total-lote.a-favor { background: #fefaf3; border: 1px solid #eeddb9; color: #6e4611; }
.total-lote.a-favor b { color: #6e4611; }
.opciones-devolucion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opcion-devolucion {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 12px; background: #fff;
}
.opcion-devolucion:has(input:checked) { border: 2px solid var(--azul); background: #f7fafd; padding: 9px 11px; }
.opcion-devolucion input { margin: 2px 0 0; width: 16px; height: 16px; flex: 0 0 auto; }
.opcion-devolucion b { display: block; font-size: 13.5px; }
.opcion-devolucion .nota-menor { display: block; margin-top: 2px; }
.devolucion-fila { display: grid; grid-template-columns: 160px 190px 150px minmax(0, 1fr); gap: 10px; align-items: end; }
#bloque-menos, #bloque-devol:not([hidden]) { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
#bloque-menos[hidden] { display: none; }
#bloque-devol .aviso { margin: 0; }
@media (max-width: 760px) {
  .opciones-devolucion, .devolucion-fila { grid-template-columns: 1fr; }
}
/* fin: Caso D */

/* Hueco 1 (2026-10-03): la garantia no cubre la falla. */
.caso-cobertura {
  border: 1px solid var(--borde); border-radius: var(--radio); background: #fff;
  padding: 14px 16px; margin: 0 0 16px; display: flex; flex-direction: column; gap: 10px;
}
.caso-cobertura h3 { margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--borde); font-size: 16px; }
.caso-cobertura .datos { margin: 0; }
.caso-cobertura-pie { display: flex; gap: 16px; align-items: center; border-top: 1px solid var(--borde); padding-top: 10px; }
.caso-cobertura-pie p { flex: 1; margin: 0; font-size: 13px; color: var(--suave); }
.caso-cobertura-pie a { white-space: nowrap; }
.caso-cobertura-botones { display: flex; flex-direction: column; gap: 6px; }
.aviso-laptop-entregada > .caso-cobertura-botones { flex: 0 0 auto; }
.caso-cobertura-botones a { white-space: nowrap; text-align: center; }
.opciones-motivo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.opciones-motivo .opcion-devolucion { align-items: center; }
@media (max-width: 760px) {
  .caso-cobertura-pie { flex-direction: column; align-items: stretch; }
  .opciones-motivo { grid-template-columns: 1fr; }
}
/* fin: Hueco 1 */

/* Anticipos / Compras en Estilo Directorio (2026-10-04, maqueta
   Mockups/anticipos_estilo_directorio.html). Hoja blanca, franja "Pide
   atencion hoy", filtros en una fila y cada compra como fila sin recuadro con
   los cinco pasos en puntos. Plantilla: repuesto_ordenes_compra.html. */
.ad-hoja { font-variant-numeric: tabular-nums; }
.ad-hoja .pd-cabecera { margin-bottom: 0; }
.ad-sub { margin: 4px 0 0; color: var(--suave); font-size: var(--t-md); }
.ad-cab-der { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.ad-cifras { display: flex; gap: 24px; }
.ad-cifra { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.ad-cifra b { font-size: 20px; color: var(--azul-fuerte); white-space: nowrap; }
.ad-cifra small { font-size: var(--t-sm); color: var(--suave); }
.ad-cifra .rojo { color: var(--rojo); }
.ad-botones { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* Opcion B (2026-10-04): Comprar / PDF / Excel como iconos azules solos. */
.ad-icos { gap: 6px; align-items: center; }
.ad-ico { display: inline-flex; padding: 6px; border-radius: 6px; color: #1b6fd6; }
.ad-ico:hover { background: var(--azul-tenue); color: #1b6fd6; }
.ad-ico:focus-visible { outline: 2px solid #1b6fd6; outline-offset: 2px; }
/* Las tres pestanas de Repuestos, claras en esta pantalla. */
.ad-hoja .rx-pest { background: none; border-radius: 0; padding: 0; gap: 4px; margin: 0 0 22px; border-bottom: 1px solid var(--borde); }
.ad-hoja .rx-pest a { background: none; color: var(--suave); font-weight: 600; padding: 12px 14px 10px; border-radius: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 8px; }
.ad-hoja .rx-pest a:hover { background: none; color: var(--azul); }
.ad-hoja .rx-pest a.activa { background: none; color: var(--azul-fuerte); border-bottom-color: var(--azul); }
.ad-hoja .rx-pest-n, .ad-hoja .rx-pest a.activa .rx-pest-n { background: var(--azul-tenue); color: var(--azul);
  border-radius: var(--radio-chico); padding: 1px 8px; font-size: var(--t-sm); font-weight: 700; }
.ad-atencion { margin-bottom: 24px; }
.ad-atencion .pd-aviso.ad-ancho { flex: 1.6 1 300px; }
.ad-atencion .pd-aviso b.ad-dinero { font-size: 22px; }
/* Buscador, Filtros y En camino / Recibidas / Todas en una sola fila. */
.ad-controles { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.ad-buscar { flex: 1 1 280px; margin: 0; }
.ad-buscar label { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; margin: 0;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: #fff; color: var(--suave); }
.ad-buscar.activo label, .ad-buscar label:focus-within { border-color: var(--azul); }
.ad-buscar input { flex: 1; border: 0; outline: 0; padding: 0; margin: 0; min-width: 0; font: inherit;
  font-size: var(--t-md); background: transparent; color: var(--texto); }
.ad-filtros-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.ad-filtros { position: relative; }
.ad-filtros summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 36px;
  padding: 0 14px; color: var(--azul); border-color: #b9cde0; }
.ad-filtros summary::-webkit-details-marker { display: none; }
.ad-filtros[open] summary { border-color: var(--azul); }
.ad-filtros-caja { position: absolute; left: 0; top: 42px; z-index: 30; width: 260px; background: #fff;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-grande);
  box-shadow: var(--sombra-flotante, 0 8px 24px rgba(11,35,56,.14)); padding: 8px 0 12px; }
.ad-filtros-caja h3 { margin: 6px 14px 4px; font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--azul); }
.ad-filtros-caja a { display: flex; padding: 7px 14px; color: var(--texto); text-decoration: none; }
.ad-filtros-caja a:hover { background: #eef4fa; }
.ad-filtros-caja a.elegida { color: var(--azul); font-weight: 700; }
.ad-filtros-caja a.elegida::after { content: "✓"; margin-left: auto; }
.ad-filtros-caja hr { border: 0; border-top: 1px solid var(--borde-suave); margin: 6px 0; }
.ad-filtros-caja .rx-an-select { margin: 2px 14px 0; width: calc(100% - 28px); }
.ad-seg { display: inline-flex; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); overflow: hidden; }
.ad-seg a { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 14px; color: var(--texto);
  font-weight: 600; text-decoration: none; border-left: 1px solid var(--borde-fuerte); white-space: nowrap; }
.ad-seg a:first-child { border-left: 0; }
.ad-seg a span { font-weight: 400; color: var(--suave); }
.ad-seg a:hover { color: var(--azul); }
.ad-seg a.activo { background: var(--azul); color: #fff; }
.ad-seg a.activo span { color: #fff; opacity: .8; }
.ad-seg a.activo.rojo { background: var(--rojo); }
/* Anticipos (2026-10-04, opcion 2): con icono, sin recuadro, solo separadores; el activo en azul. */
.ad-seg.ad-seg-ico { border: 0; border-radius: 0; overflow: visible; }
.ad-seg-ico a { position: relative; border-left: 0; gap: 7px; padding: 0 14px; color: var(--suave); font-weight: 400; }
.ad-seg-ico a + a::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 1px; background: var(--borde-fuerte); }
.ad-seg-ico a svg { width: 18px; height: 18px; flex: none; color: #8a94a3; }
.ad-seg-ico a:hover, .ad-seg-ico a:hover svg { color: var(--azul); }
.ad-seg-ico a.activo { background: none; color: var(--azul); font-weight: 600; }
.ad-seg-ico a.activo svg { color: #1b6fd6; }
.ad-seg-ico a.activo span { color: var(--azul); opacity: 1; }
.ad-seg-ico a.activo.rojo { background: none; color: var(--rojo); }
.ad-seg-ico a.activo.rojo svg, .ad-seg-ico a.activo.rojo span { color: var(--rojo); }
/* Un mes: mayusculas sobre la regla azul de 2px. */
.ad-mes { margin-bottom: 30px; }
.ad-mes .pd-col-cab { min-height: 0; align-items: center; margin-bottom: 0; }
.ad-mes .pd-cuenta { margin-left: 0; margin-bottom: 0; }
.ad-mes .pd-col-cab svg { margin-bottom: 0; }
.ad-mes-sub { margin-left: auto; font-size: var(--t-sm); color: var(--suave); }
/* Una compra: fila sin recuadro, separador finisimo. */
.ad-compra { display: grid; grid-template-columns: minmax(0, 1fr) 400px 210px; gap: 24px; align-items: center;
  padding: 14px 4px; border-bottom: 1px solid var(--borde-suave); }
.ad-compra:hover { background: #f6f9fc; }
.ad-compra.atencion { box-shadow: inset 3px 0 0 var(--rojo); padding-left: 12px; }
.ad-titulo { display: flex; align-items: baseline; gap: 8px; }
.ad-titulo a, .ad-titulo strong { font-weight: 400; font-size: var(--t-lg); color: var(--texto); text-decoration: none; }
.ad-titulo a:hover { color: var(--azul); }
.ad-clase { flex: none; font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--radio-chico); color: var(--azul); background: var(--azul-tenue); }
.ad-clase.rep { color: #5b3a8a; background: #f1ecf8; }
.ad-meta { margin-top: 3px; font-size: var(--t-sm); color: var(--suave); }
.ad-meta .ad-num { font-weight: 600; color: var(--texto); }
.ad-meta b { color: var(--azul-fuerte); }
.ad-nota { margin-top: 4px; font-size: var(--t-sm); color: var(--ambar); }
.ad-alerta { margin-top: 4px; font-size: var(--t-sm); color: var(--rojo); }
/* Los cinco pasos en puntos sobre una linea. */
.ad-pasos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.ad-pasos li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  font-size: var(--t-xs); color: var(--suave); line-height: 1.25; }
.ad-pasos li::before { content: ""; position: absolute; top: 5px; left: -50%; width: 100%; height: 2px; background: var(--borde); }
.ad-pasos li:first-child::before { display: none; }
.ad-pasos i { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: #fff;
  border: 2px solid var(--borde-fuerte); margin-bottom: 4px; box-sizing: border-box; }
.ad-pasos strong { font-weight: 600; }
.ad-pasos em { font-style: normal; color: var(--suave); }
.ad-pasos li.azul::before { background: var(--azul); }
.ad-pasos li.azul i { background: var(--azul); border-color: var(--azul); }
.ad-pasos li.azul strong { color: var(--azul-fuerte); }
.ad-pasos li.verde::before { background: var(--verde); }
.ad-pasos li.verde i { background: var(--verde); border-color: var(--verde); }
.ad-pasos li.verde strong { color: var(--verde); }
.ad-pasos li.rojo::before { background: var(--rojo); }
.ad-pasos li.rojo i { background: #fff; border-color: var(--rojo); box-shadow: 0 0 0 3px var(--rojo-fondo); }
.ad-pasos li.rojo strong, .ad-pasos li.rojo em { color: var(--rojo); }
.ad-estado { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right;
  font-size: var(--t-sm); color: var(--suave); }
.ad-estado b { font-size: var(--t-base); color: var(--texto); }
.ad-estado b.rojo { color: var(--rojo); }
.ad-estado form { margin: 0; }
.ad-hoja .rx-an-resultado { margin-bottom: 8px; }
@media (max-width: 1100px) {
  .ad-compra { grid-template-columns: 1fr; gap: 12px; }
  .ad-estado { align-items: flex-start; text-align: left; }
}
@media (max-width: 700px) {
  .ad-cab-der { margin-left: 0; width: 100%; align-items: stretch; }
  .ad-cifras { justify-content: space-between; } .ad-cifra { align-items: flex-start; }
  .ad-botones { justify-content: flex-start; }
  .ad-hoja .rx-pest { overflow-x: auto; }
  .ad-atencion .pd-atencion-rotulo { width: 100%; padding: 8px 16px; }
  .ad-atencion .pd-aviso { flex-basis: 100%; border-left: none; border-top: 1px solid #d3e0ee; padding: 10px 16px; }
  .ad-filtros-form { width: 100%; }
  .ad-seg { width: 100%; } .ad-seg a { flex: 1; justify-content: center; padding: 0 6px; }
  .ad-mes .pd-col-cab { flex-wrap: wrap; } .ad-mes-sub { margin-left: 0; width: 100%; }
}

/* Solicitudes de Repuestos en Estilo Directorio (2026-10-04), mismas piezas
   que Anticipos / Compras (.ad-*): franja, controles en una fila y la tabla
   sin caja bajo una cabecera en mayusculas. Plantilla: repuestos.html. */
.so-d .so-buscar { flex: 1 1 280px; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; margin: 0;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: #fff; color: var(--suave); }
.so-d .so-buscar:focus-within { border-color: var(--azul); }
.so-d .so-buscar input { flex: 1; border: 0; outline: 0; padding: 0; margin: 0; min-width: 0; font: inherit;
  font-size: var(--t-md); background: transparent; color: var(--texto); }
.ad-seg a.rojo-texto { color: var(--rojo); }
.ad-seg a.rojo-texto.activo { color: #fff; }
.so-d .pd-col-cab { min-height: 0; align-items: center; margin-bottom: 0; }
.so-d .pd-col-cab svg, .so-d .pd-cuenta { margin-bottom: 0; }
.so-d .pd-cuenta { margin-left: 0; }
.so-d .so-nota { margin: 8px 0 4px; }
.so-scroll { overflow-x: auto; }
.so-d .rx-so-tabla th { font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--suave); border-bottom: 1px solid var(--borde-fuerte); }
.so-d .rx-so-tabla td { border-top: 0; border-bottom: 1px solid var(--borde-suave); }
.so-d .rx-so-tabla tbody tr:hover { background: #f6f9fc; }
.so-d .rx-so-tabla td a.rx-so-num { color: var(--azul); text-decoration: none; }
.so-leyenda { margin-top: 32px; }
.so-leyenda .rx-so-pasos { margin-top: 12px; }
@media (max-width: 700px) { .so-d .ad-seg { flex-wrap: wrap; } }

/* Por Comprar en Estilo Directorio (2026-10-04), mismas piezas que
   Solicitudes (.ad-*, .so-d): la tabla rx-pc-tabla sin caja, cabecera en
   mayusculas y separador finisimo. Plantilla: repuestos_por_comprar.html. */
.pc-d .ad-controles .so-buscar { max-width: 480px; }
.pc-d .rx-pc-tabla th { font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--suave); padding: 10px 6px; border-bottom: 1px solid var(--borde-fuerte); }
.pc-d .rx-pc-tabla td { border-top: 0; border-bottom: 1px solid var(--borde-suave); }
.pc-d .rx-pc-tabla tbody tr:hover { background: #f6f9fc; }
.pc-d .rx-pc-sol { color: var(--azul); font-weight: 600; }
.pc-d .rx-pc-tabla td strong.rx-so-urgente { font-size: var(--t-sm); margin-left: 4px; }

/* La paqueteria junto a un tracking (2026-10-04, chip_paqueteria.html): un
   chip chico con el nombre en los colores de cada empresa. No es la imagen
   oficial del logo; las que no tienen color propio van en gris. */
.chip-paq { display: inline-flex; align-items: center; height: 16px; padding: 0 5px; margin-left: 2px; border-radius: var(--radio-chico); border: 1px solid var(--borde); background: #f1f3f6; color: #4a5563; font-family: var(--fuente); font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: .3px; vertical-align: 1px; white-space: nowrap; text-decoration: none; }
a.chip-paq:hover { filter: brightness(.92); text-decoration: none; }
.chip-paq-ups { background: #351c15; border-color: #351c15; color: #ffb500; }
.chip-paq-usps { background: #333366; border-color: #333366; color: #fff; }
.chip-paq-fedex { background: #fff; letter-spacing: 0; }
.chip-paq-fedex .fx-fed { color: #4d148c; }
.chip-paq-fedex .fx-ex { color: #ff6600; }
.chip-paq-dhl { background: #ffcc00; border-color: #ffcc00; color: #d40511; font-style: italic; }
.chip-paq-amazon { background: #232f3e; border-color: #232f3e; color: #ff9900; letter-spacing: 0; }

/* ---------- DETALLE DEL DELIVERY, estilo Directorio (2026-10-04, opcion D) ----------
   templates/delivery_detalle.html. Hoja .pd-hoja, franja .pd-atencion con las
   cifras de la operacion y cuatro columnas .pd-col sobre regla azul. Antes eran
   8 tarjetas apiladas: el formulario de anular va en un <dialog> y la factura
   en un <details>, asi la pagina entra en una pantalla. */
.del-hoja { padding-bottom: 26px; }
.del-cab-izq { min-width: 0; flex: 1 1 520px; }
.del-hoja .pd-titulo { font-size: 26px; line-height: 1.2; flex-wrap: wrap; }
.del-flecha { font-size: 20px; font-weight: 600; color: var(--texto); }
.del-chapas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.del-principal { padding: 10px 20px; font-size: var(--t-lg); }
.del-icos { gap: 18px; align-items: flex-start; }
.del-ico { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 6px; border-radius: 6px; color: #1b6fd6; text-decoration: none; font-size: var(--t-sm); line-height: 1.2; }
.del-ico:hover { background: var(--azul-tenue); color: #1b6fd6; text-decoration: none; }
.del-ico:focus-visible { outline: 2px solid #1b6fd6; outline-offset: 2px; }
.del-ico-principal span { font-weight: 600; }
.del-aviso { margin: 0 0 18px; }
.del-franja { margin-bottom: 26px; }
.del-franja .pd-aviso b a { color: inherit; text-decoration: none; }
.del-franja .pd-aviso b a:hover { color: var(--azul); }
.del-franja .pd-aviso b { font-variant-numeric: tabular-nums; }
.del-columnas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.del-columnas > .pd-col:first-child { border-left: none; padding-left: 0; }
.del-columnas > .pd-col:last-child { padding-right: 0; }
.del-filas { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); margin: 0; font-size: var(--t-md); }
.del-filas dt, .del-filas dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--borde-suave); line-height: 1.4; }
.del-filas dt { color: var(--suave); padding-right: 12px; }
.del-fila-imp { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 38px; border-bottom: 1px solid var(--borde-suave); font-size: var(--t-md); }
.del-fila-imp label { color: var(--suave); }
.del-fila-imp select { max-width: 170px; }
.del-enlace { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  min-height: 38px; padding: 4px 8px; margin: 0 -8px; box-sizing: content-box;
  border: 0; border-bottom: 1px solid var(--borde-suave); border-radius: var(--radio);
  background: none; font: inherit; font-size: var(--t-md); font-weight: 600; color: var(--azul);
  text-align: left; text-decoration: none; cursor: pointer; }
.del-enlace:hover { background: #eef4fa; color: var(--azul-fuerte); }
.del-enlace.del-rojo { color: var(--rojo); }
.del-enlace.del-rojo:hover { background: var(--rojo-fondo); color: var(--rojo); }
.del-plegable > summary { list-style: none; }
.del-plegable > summary::-webkit-details-marker { display: none; }
.del-flecha-pleg { transition: transform .15s; }
.del-plegable[open] .del-flecha-pleg { transform: rotate(90deg); }
.del-form-factura { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 14px; }
.del-form-factura .pd-nota { margin: 6px 0 0; }
.del-form-factura label { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-sm); color: var(--suave); }
.del-form-factura .fila-editor-textos dl.datos { grid-template-columns: 1fr; }
.del-form-factura .acciones { margin-top: 0; }
.del-cab-2 { margin-top: 28px; min-height: 0; align-items: center; }
.del-aviso-pie { margin: 26px 0 0; }
.del-dialogo { width: min(480px, calc(100vw - 32px)); }
.del-dialogo .formulario { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.del-dialogo .dialogo-borrar-botones { margin-top: 6px; }
@media (max-width: 1100px) {
  .del-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .del-columnas > .pd-col:nth-child(3) { border-left: none; padding-left: 0; }
}
@media (max-width: 700px) {
  .del-columnas { grid-template-columns: 1fr; }
  .del-columnas > .pd-col { border-left: none; padding: 0; }
  .del-hoja .pd-titulo { font-size: 21px; }
  .del-franja .pd-aviso { flex-basis: 45%; }
}

/* Detalle del delivery en Estilo Directorio (2026-10-04, captura de
   DEL-000031): hoja blanca, franja celeste, datos en tres columnas con
   filas rotulo/valor de 38px y las acciones en otra fila de columnas, sin
   recuadros. Plantilla: delivery_detalle.html. */
.dd-d .pd-cabecera { margin-bottom: 20px; }
.dd-cab-izq { min-width: 0; }
.dd-d .pd-antetitulo a { color: inherit; text-decoration: none; }
.dd-d .pd-antetitulo a:hover { text-decoration: underline; }
.dd-sub { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.dd-cab-der { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.dd-atencion { margin-bottom: 14px; }
.dd-atencion .pd-aviso b i { font-style: normal; font-size: var(--t-md); font-weight: 600; color: var(--suave); }
.dd-atencion .pd-aviso b a { color: inherit; text-decoration: none; }
.dd-atencion .pd-aviso b a:hover { color: var(--azul); }
.dd-atencion .pd-aviso b.mono { font-size: 22px; }
.dd-nota { margin: 0 0 30px; }
.dd-d > .aviso { margin: 0 0 30px; }
.dd-columnas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 30px 0; align-items: start; margin-bottom: 36px;
}
.dd-columnas .pd-col:first-child { border-left: none; padding-left: 0; }
.dd-d .pd-col-cab { min-height: 0; align-items: center; margin-bottom: 6px; }
.dd-d .pd-col-cab svg { margin-bottom: 0; }
.dd-filas { margin: 0; }
.dd-filas > div {
  display: grid; grid-template-columns: minmax(110px, 40%) 1fr; gap: 12px; align-items: baseline;
  min-height: 38px; padding: 9px 0; border-bottom: 1px solid var(--borde-suave);
}
.dd-filas dt { font-size: var(--t-sm); color: var(--suave); }
.dd-filas dd { margin: 0; color: var(--texto); overflow-wrap: anywhere; }
.dd-acciones { margin-bottom: 0; }
.dd-acciones .pd-col-cab { margin-bottom: 14px; }
.dd-acciones .nota-panel { margin: 0 0 12px; }
.dd-acciones .formulario { gap: 10px; }
.dd-acciones .formulario label select { max-width: 100%; }
.dd-separada { margin-top: 18px !important; }
@media (max-width: 700px) {
  .dd-cab-der { margin-left: 0; width: 100%; }
  .dd-columnas .pd-col { padding: 0; border-left: none; }
}
.dd-acciones .fila-editor-textos dl.datos { grid-template-columns: 110px minmax(0, 1fr); }
/* Las otras pantallas del delivery en Estilo Directorio (2026-10-04):
   Enviar a delivery y Registrar el regreso usan .dd-d con dos columnas
   anchas (formularios); la bandeja /delivery usa .dl-d sobre .ad-* con la
   tabla sin caja, cabecera en mayusculas y separador finisimo. */
.dd-dos { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.dd-sub-texto { margin: 6px 0 0; font-size: var(--t-md); color: var(--suave); }
.dd-aviso { margin: -16px 0 30px; }
.dd-pie { padding-top: 18px; border-top: 1px solid var(--borde); }
.dd-acciones .formulario .dos-columnas label { margin: 0; }
.dl-d .pd-col-cab { min-height: 0; align-items: center; margin-bottom: 0; }
.dl-d .pd-col-cab svg, .dl-d .pd-cuenta { margin-bottom: 0; }
.dl-d .pd-cuenta { margin-left: 0; }
.dl-d .ad-seg { flex-wrap: wrap; }
.dl-d .tabla-scroll { margin: 0; }
.dl-d .dl-tabla th { font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--suave); background: none; border-bottom: 1px solid var(--borde-fuerte); }
.dl-d .dl-tabla td { border-top: 0; border-bottom: 1px solid var(--borde-suave); }
.dl-d .dl-tabla tbody tr { cursor: pointer; }
.dl-d .dl-tabla tbody tr:hover { background: #f6f9fc; }
.dl-d .dl-num { color: var(--azul); font-weight: 700; text-decoration: none; }
.dd-dos > .pd-col:nth-child(odd) { border-left: none; padding-left: 0; }
.dd-acciones #cliente-nuevo { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.dd-acciones .dos-columnas > label { font-size: var(--t-sm); color: var(--suave); }
.dl-d .dl-destino { min-width: 160px; max-width: 260px; }
.dl-d .dl-tabla td { vertical-align: top; padding-top: 12px; padding-bottom: 12px; }

/* --- Detalle de una compra de repuestos en Estilo Directorio (2026-10-04,
   opcion D del canvas "OCR-000043 sin tanto scroll"). Reusa la hoja, la
   franja, las columnas y los enlaces del detalle del delivery (.del-*) y los
   pasos en puntos de la lista de Anticipos (.ad-pasos). Los formularios van
   en <dialog class="dialogo-borrar oc-dialogo">. --- */
.oc-hoja .pd-titulo { font-size: 24px; }
.oc-ico-boton { border: 0; background: none; font: inherit; font-size: var(--t-sm); cursor: pointer; }
.oc-pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 26px; }
.oc-necesidad { margin: 0 0 26px; }
.oc-necesidad-fila { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px 0 0; }
.oc-necesidad-para { margin: 0; font-size: var(--t-md); color: var(--suave); }
.oc-necesidad .aviso { margin: 12px 0 0; }
.oc-necesidad details { margin-top: 8px; }
.oc-columnas .del-filas dd .chapa-solicitud { margin-left: 4px; }
.oc-fuerte { font-size: var(--t-lg); color: var(--azul-fuerte); }
.oc-recepciones .pd-cuenta { margin-left: auto; }
.oc-recepciones .tabla-scroll { margin-top: 6px; }
.oc-dialogo .dialogo-borrar-titulo { color: var(--azul); }
.oc-dialogo .dialogo-borrar-titulo.oc-titulo-ambar { color: var(--ambar); }
.oc-dialogo.oc-ancho { width: min(720px, calc(100vw - 32px)); }
.oc-dialogo .formulario { align-items: stretch; gap: 10px; }
.oc-dialogo .dialogo-borrar-botones { margin-top: 6px; }
.oc-dialogo.rx-reclamo.abierto { border-left: 4px solid #e0a800; }
@media (max-width: 1100px) {
  .oc-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .oc-columnas > .pd-col:nth-child(3) { border-left: none; padding-left: 0; }
}
@media (max-width: 700px) {
  .oc-columnas { grid-template-columns: minmax(0, 1fr); }
  .oc-columnas > .pd-col { border-left: none; padding: 0; }
  .oc-pasos { font-size: 11px; }
  .oc-dialogo .tres-columnas { grid-template-columns: minmax(0, 1fr); }
}

.oc-columnas dd a { color: var(--azul); }

/* Anticipos / Compras: boton de orden por fecha a la derecha de las pestañas
   (2026-10-04). La raya de abajo pasa de la nav a la fila, para que el boton
   quede sobre la misma linea. */
.ad-pest-fila { display: flex; align-items: flex-end; gap: 12px; margin: 0 0 22px; border-bottom: 1px solid var(--borde); }
.ad-pest-fila .rx-pest { margin: 0; border-bottom: 0; flex: 1 1 auto; min-width: 0; }
.ad-orden { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; margin-bottom: 6px;
  white-space: nowrap; flex: none; cursor: pointer; }
.ad-orden svg { flex: none; }
@media (max-width: 700px) {
  .ad-pest-fila { flex-wrap: wrap; }
  .ad-orden { margin: 0 0 8px auto; }
}
/* Oportunidad eBay en estilo Directorio (2026-10-04, opcion D): reusa .del-*
   y .oc-dialogo; aqui solo las barras de "Por que" y detalles propios. */
.pd-aviso.verde b { color: var(--verde); }
.eb-columnas .del-filas dd { overflow-wrap: anywhere; }
.eb-factor { display: grid; grid-template-columns: minmax(0, 1fr) 72px 52px; gap: 4px 10px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--borde-suave); font-size: var(--t-md); }
.eb-factor em { font-style: normal; color: var(--suave); }
.eb-factor b { text-align: right; font-weight: 600; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.eb-factor small { grid-column: 1 / -1; font-size: var(--t-sm); color: var(--suave); line-height: 1.35; }
.eb-barra { height: 7px; background: var(--borde-suave); border-radius: 4px; overflow: hidden; }
.eb-barra i { display: block; height: 100%; background: var(--azul); }
.eb-columnas .del-enlace { margin-top: 10px; }
.eb-columnas .del-enlace + .del-enlace { margin-top: 0; }
.eb-nota-chica { font-size: var(--t-sm); color: var(--suave); }
.eb-id { font-size: var(--t-sm); }
.eb-calculo { max-height: 60vh; margin-bottom: 12px; }
.eb-calculo pre { margin: 0; padding: 12px; font-size: var(--t-sm); white-space: pre; }
.eb-hoja .del-franja .pd-aviso { flex: 1 1 140px; flex-direction: column; align-items: flex-start; gap: 4px; padding: 4px 16px; }
.eb-hoja .del-franja .pd-aviso b { font-size: 24px; }

/* Ordenes de Trabajo en estilo Directorio (2026-10-06, maqueta aprobada).
   Una sola tabla: cada grupo empieza con una fila .ot-gcab que dibuja el
   titulo en mayusculas sobre la regla azul de 2px (roja en "Necesitan
   atencion"). Equipo y cliente pueden partirse en dos renglones para que la
   tabla entre a 1280 sin barra lateral. */
.ot-d .ot-tabla-d thead th { background: none; }
.ot-d .ot-tabla-d tr.ot-gcab td { padding: 26px 0 0; border: 0; background: none; cursor: default; }
.ot-d .ot-tabla-d tbody:first-of-type tr.ot-gcab td { padding-top: 8px; }
.ot-d .ot-gcab-in { display: flex; align-items: center; gap: 10px; padding: 0 0 9px; margin: 0;
  border-bottom: 2px solid var(--azul); color: var(--azul); text-decoration: none; }
.ot-d .ot-gcab-in svg { width: 18px; height: 18px; flex-shrink: 0; }
.ot-d .ot-gcab-in h2 { margin: 0; font-size: var(--t-md); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--azul-fuerte); }
.ot-d .ot-gcab-in .ot-ayuda { font-size: var(--t-sm); font-weight: 400; color: var(--suave); }
.ot-d .ot-gcab-in .pd-cuenta { margin-left: auto; margin-bottom: 0; }
.ot-d .ot-atencion .ot-gcab-in { border-bottom-color: var(--rojo); color: var(--rojo); }
.ot-d .ot-atencion .ot-gcab-in h2 { color: var(--rojo); }
.ot-d .ot-gcab-cerradas .ot-gcab-in { border-bottom: 1px solid var(--borde-fuerte); color: var(--suave); }
.ot-d .ot-gcab-cerradas .ot-gcab-in h2 { color: var(--suave); }
.ot-d a.ot-gcab-in:hover, .ot-d a.ot-gcab-in:hover h2 { color: var(--azul); }
.ot-d .ot-cerradas summary.ot-gcab-in { cursor: pointer; }
.ot-d .ot-envuelve .ot-ico { white-space: normal; align-items: flex-start; }
.ot-d .ot-envuelve .ot-ico svg { margin-top: 2px; }
.ot-d .ot-urgente-d { margin: 0 6px 0 0; }
.ot-d .ot-dias.ot-vieja { color: var(--rojo); }
.ot-d .ad-filtros-caja .ot-n { margin-left: 6px; color: var(--suave); font-weight: 400; }
.ot-d .ad-filtros-caja a.elegida .ot-n { color: var(--azul); }
.ot-d .ot-ordenar-d { display: block; margin: 4px 14px 2px; font-size: var(--t-sm); color: var(--suave); }
.ot-d .ot-ordenar-d select { display: block; width: 100%; margin-top: 4px; }
@media (max-width: 700px) {
  .ot-d .ot-gcab-in .ot-ayuda { display: none; }
  .ot-d .ad-seg.ad-seg-ico { flex-wrap: wrap; row-gap: 6px; }
  .ot-d .ot-envuelve .ot-ico { white-space: nowrap; }
}

/* Recepcion del Taller en Estilo Directorio (2026-10-06, maqueta aprobada).
   La franja celeste .pd-atencion HACE DE PESTANAS (nav.pestanas): cada paso
   numerado dice si le falta algo; el abierto queda en blanco con raya azul.
   Pisa el dibujo general de .pestanas solo dentro de .rc-d. */
.rc-d nav.rc-pasos { gap: 0; padding: 0; margin: 0 0 26px; overflow: hidden; border-bottom: 1px solid #d3e0ee; }
.rc-d nav.rc-pasos .pd-atencion-rotulo { padding: 14px 20px; }
.rc-d .rc-pasos .pestana.rc-paso { flex: 1 1 200px; display: flex; align-items: center; gap: 12px;
  padding: 14px 20px 12px; margin: 0; border: 0; border-left: 1px solid #d3e0ee; border-bottom: 3px solid transparent;
  border-radius: 0; background: none; color: var(--texto); font-weight: 400; white-space: normal; text-align: left; }
.rc-d .rc-pasos .pestana.rc-paso:hover { background: rgba(255,255,255,.55); color: var(--texto); }
.rc-d .rc-pasos .pestana.rc-paso.activa { background: var(--superficie); border-bottom-color: var(--azul); color: var(--texto); }
.rc-d .rc-num { font-size: 26px; font-weight: 700; line-height: 1; min-width: 18px; color: var(--azul-fuerte); }
.rc-d .rc-paso > span { display: flex; flex-direction: column; line-height: 1.3; }
.rc-d .rc-paso-t { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--t-md); }
.rc-d .rc-paso-t svg { color: var(--azul); }
.rc-d .rc-paso small { font-size: var(--t-sm); color: var(--suave); }
.rc-d .rc-paso.falta .rc-num, .rc-d .rc-paso.falta small { color: var(--rojo); }
.rc-d .rc-paso.falta small { font-weight: 600; }
.rc-d .rc-paso.ok .rc-num, .rc-d .rc-paso.ok small { color: var(--verde); }
.rc-d .rc-cab { min-height: 0; align-items: center; margin-bottom: 14px; }
.rc-d .rc-cab .rc-cab-nota { margin-left: auto; font-size: var(--t-sm); font-weight: 400; color: var(--suave);
  text-transform: none; letter-spacing: 0; text-align: right; }
.rc-d .rc-nota { margin: 0 0 16px; color: var(--suave); font-size: var(--t-md); max-width: 90ch; }
.rc-d .rc-accs { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 0 28px; }
.rc-d .rc-acc { display: flex; align-items: center; gap: 14px; min-height: 52px; border-bottom: 1px solid var(--borde-suave); }
.rc-d .rc-acc .chip-accesorio { min-width: 130px; margin: 0; }
.rc-d .rc-linea { border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent;
  padding: 6px 0; font: inherit; font-size: var(--t-md); color: var(--texto); width: 100%; min-width: 0; }
.rc-d .rc-linea:focus { outline: 0; border-bottom-color: var(--azul); }
.rc-d .rc-dos .rc-linea { border-bottom-color: var(--borde-fuerte); }
.rc-d .rc-texto { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-sm); color: var(--suave); margin: 0 0 18px; }
.rc-d .rc-texto textarea { font: inherit; font-size: var(--t-md); }
.rc-d .rc-dos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px 28px; margin-bottom: 28px; }
.rc-d .rc-campo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: var(--t-sm); color: var(--suave); margin: 0; }
.rc-d .rc-campo .rc-linea { align-self: stretch; }
.rc-d .rc-resumen dl { display: grid; grid-template-columns: 170px minmax(0, 1fr); margin: 0; }
.rc-d .rc-resumen dt, .rc-d .rc-resumen dd { margin: 0; min-height: 38px; display: flex; align-items: center;
  border-bottom: 1px solid var(--borde-suave); font-size: var(--t-md); }
.rc-d .rc-resumen dt { color: var(--suave); }
.rc-d .rc-resumen dd.falta { color: var(--rojo); font-weight: 600; }
.rc-d .rc-pie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 28px; padding-top: 18px;
  border-top: 1px solid var(--borde); }
.rc-d .rc-pie .rc-pie-nota { flex: 1 1 260px; font-size: var(--t-sm); color: var(--suave); }
@media (max-width: 700px) {
  .rc-d nav.rc-pasos .pd-atencion-rotulo { display: none; }
  .rc-d .rc-pasos .pestana.rc-paso { flex: 1 1 50%; border-left: 0; border-top: 1px solid #d3e0ee; }
  .rc-d .rc-accs { grid-template-columns: minmax(0, 1fr); }
  .rc-d .rc-resumen dl { grid-template-columns: 110px minmax(0, 1fr); }
}

/* Punto de venta en Estilo Directorio (2026-10-06, maqueta aprobada). El
   escaner sigue primero y grande; ubicaciones como .ad-seg-ico; "Mostrar"
   en el titulo de la tabla. Las filas conservan sus reglas .tabla-pos. */
.pv-d .pv-escaner { display: flex; gap: 10px; margin: 0 0 22px; flex-wrap: wrap; }
.pv-d .pv-escaner label { flex: 1 1 380px; display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 16px; margin: 0;
  border: 2px solid var(--azul); border-radius: var(--radio); background: var(--superficie); color: var(--azul); }
.pv-d .pv-escaner input { flex: 1; border: 0; outline: 0; padding: 0; margin: 0; min-width: 0; font: inherit; font-size: 17px;
  color: var(--texto); background: transparent; box-shadow: none; }
.pv-d .pv-escaner button, .pv-d .pv-escaner .boton-claro { height: 54px; padding: 0 28px; display: inline-flex; align-items: center; }
.pv-d .pv-sec { min-height: 0; align-items: center; margin-bottom: 0; }
.pv-d .pv-sec .pd-cuenta { margin-left: 0; margin-bottom: 0; }
.pv-d .pv-sec .pv-sec-nota { margin-left: auto; font-size: var(--t-sm); font-weight: 400; color: var(--suave); }
.pv-d .pv-mostrar summary { height: 32px; font-size: var(--t-sm); }
.pv-d .pv-mostrar .ad-filtros-caja { left: auto; right: 0; }
.pv-d .pos-tabla { padding-bottom: 0; }
.pv-d .tabla-pos th { background: none; }
.pd-hoja.pv-d { padding-left: 20px; padding-right: 20px; }
.pv-d .tabla-pos td { padding: 6px 6px; }
.pv-d .tabla-pos th { padding: 7px 6px; }
@media (min-width: 1341px) { .pv-d .pos-tabla .tabla-scroll { overflow: visible; } }
@media (max-width: 700px) {
  .pv-d .ad-seg.ad-seg-ico { flex-wrap: wrap; row-gap: 6px; }
  .pv-d .pv-sec { flex-wrap: wrap; }
  .pv-d .pv-sec .pv-sec-nota { display: none; }
  .pv-d .pv-mostrar { margin-left: auto; }
  .pv-d .pv-escaner label { height: 46px; }
  .pv-d .pv-escaner input { font-size: var(--t-md); }
  .pv-d .pv-escaner button { height: 44px; }
}

/* Compras por Encargo en Estilo Directorio (2026-10-06, maqueta aprobada):
   lista, detalle y formulario nuevo/editar. Datos en filas de 38px sobre la
   regla azul, pasos con bolitas en la franja celeste del detalle y campos de
   linea en el formulario. */
.ec-d .ec-cab { min-height: 0; align-items: center; margin-bottom: 4px; }
.ec-d .ec-cab .pd-cuenta { margin-left: 0; margin-bottom: 0; }
.ec-d .ec-cab .ec-cab-nota { margin-left: auto; font-size: var(--t-sm); font-weight: 400; color: var(--suave); }
.ec-d .tabla-ot th { background: none; }
.ec-d .ec-num { text-align: right; white-space: nowrap; }
.ec-d .ec-rojo { color: var(--rojo); }
.ec-d .pd-aviso b.ec-dinero { font-size: 22px; }
.ec-d .ec-chapa-titulo { font-size: 12px; margin-left: 6px; }
.ec-d .ec-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 0 40px; }
.ec-d .ec-columnas section { margin-bottom: 28px; min-width: 0; }
.ec-d .ec-datos { display: grid; grid-template-columns: 150px minmax(0, 1fr); margin: 0; }
.ec-d .ec-datos dt, .ec-d .ec-datos dd { margin: 0; min-height: 38px; padding: 6px 0; display: flex; align-items: center;
  flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--borde-suave); font-size: var(--t-md); }
.ec-d .ec-datos dt { color: var(--suave); }
.ec-d .ec-datos dt.ec-hist { font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.ec-d .ec-enlace a { overflow-wrap: anywhere; }
.ec-d .ec-grande { font-size: 18px; color: var(--azul-fuerte); }
.ec-d .ec-pasos { display: flex; align-items: center; flex-wrap: wrap; gap: 0; padding: 14px 0; }
.ec-d .ec-linea { display: flex; flex: 1 1 560px; list-style: none; margin: 0; padding: 0 12px; }
.ec-d .ec-linea li { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; font-size: var(--t-sm); }
.ec-d .ec-linea li::before { content: ""; position: absolute; top: 12px; left: -50%; right: 50%; height: 2px; background: #c8d7e6; }
.ec-d .ec-linea li:first-child::before { display: none; }
.ec-d .ec-linea li.hecho::before, .ec-d .ec-linea li.actual::before { background: var(--azul); }
.ec-d .ec-bola { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--superficie); border: 2px solid #c8d7e6; color: var(--suave); font-weight: 700; font-size: 12px; }
.ec-d .ec-linea li.hecho .ec-bola { background: var(--azul); border-color: var(--azul); color: #fff; }
.ec-d .ec-linea li.actual .ec-bola { border-color: var(--azul); color: var(--azul); box-shadow: 0 0 0 4px rgba(31,78,121,.15); }
.ec-d .ec-linea b { margin-top: 6px; font-weight: 600; color: var(--texto); }
.ec-d .ec-linea li:not(.hecho):not(.actual) b { color: var(--suave); font-weight: 400; }
.ec-d .ec-linea small { color: var(--suave); }
.ec-d .ec-linea.ec-cancelada { opacity: .55; }
.ec-d .ec-siguiente { display: flex; align-items: center; gap: 14px; padding: 6px 20px; border-left: 1px solid #d3e0ee; flex-wrap: wrap; }
.ec-d .ec-en-linea { margin: 0; }
.ec-d .ec-fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-top: 10px; margin: 0; }
.ec-d .ec-fila select { width: auto; }
.ec-d .ec-casilla { display: flex; gap: 8px; align-items: center; margin: 8px 0; font-weight: 400; }
.ec-d .ec-casilla input { width: auto; margin: 0; }
.ec-d .ec-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px 24px; margin-top: 10px; }
.ec-d .ec-campos.ec-una { grid-template-columns: minmax(0, 340px); }
.ec-d .ec-campos label, .ec-d .ec-texto { display: flex; flex-direction: column; gap: 2px; font-size: 12px; font-weight: 400; color: var(--suave); margin: 0; }
.ec-d .ec-campos input, .ec-d .ec-campos select { padding: 6px 0; border: 0; border-bottom: 1px solid var(--borde-fuerte); border-radius: 0;
  background: transparent; font: inherit; font-size: var(--t-md); color: var(--texto); box-shadow: none; }
.ec-d .ec-campos input:focus, .ec-d .ec-campos select:focus { outline: 0; border-bottom-color: var(--azul); box-shadow: 0 1px 0 var(--azul); }
.ec-d .ec-texto { margin-top: 16px; }
.ec-d .ec-texto textarea { font: inherit; font-size: var(--t-md); }
.ec-d .botones-envio { margin-top: 10px; }
.ec-d .ec-chica { font-size: var(--t-sm); }
.ec-d .ec-saldo-caja { display: flex; align-items: baseline; justify-content: space-between; margin-top: 16px; padding: 12px 0; border-top: 2px solid var(--borde); }
.ec-d .ec-saldo-caja b { font-size: 22px; color: var(--azul-fuerte); }
.ec-d .ec-pie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--borde); }
.ec-d .ec-pie .ec-chica { flex: 1 1 260px; margin: 0; }
@media (max-width: 700px) {
  .ec-d .ec-columnas { grid-template-columns: minmax(0, 1fr); }
  .ec-d .ec-datos { grid-template-columns: 110px minmax(0, 1fr); }
  .ec-d .ec-siguiente { border-left: 0; }
  .ec-d .ec-linea { flex-basis: 100%; padding: 0 4px; }
  .ec-d .ec-linea li:not(.actual) b, .ec-d .ec-linea li:not(.actual) small { display: none; }
  .ec-d .pd-titulo { flex-wrap: wrap; }
  .ec-d .pd-titulo .ec-chapa-titulo { margin-left: 0; }
}

/* Lapiz "Editar" del hardware en la ficha del equipo (2026-10-07, pedido de
   Renaldy): va junto al titulo "Equipo" del bloque. */
.fd-editar-hw { display: inline-flex; align-items: center; gap: 6px; margin-left: 22px;
  padding: 2px; font-size: 14px; font-weight: 600; color: var(--azul); text-decoration: none; }
.fd-editar-hw svg { width: 16px; height: 16px; }
.fd-editar-hw:hover { text-decoration: underline; }

/* Tareas en Estilo Directorio (2026-10-06, maqueta aprobada): lista,
   detalle y Nueva tarea. La hoja lleva tambien .ec-d (filas de datos,
   pasos, campos de linea de Encargos) y la lista .ot-d (grupos de la
   tabla de Ordenes de Trabajo); aqui va solo lo propio de Tareas. */
.ta-d .ta-cab { min-height: 0; align-items: center; margin-bottom: 4px; }
.ta-d .ta-cab .pd-cuenta { margin-left: 0; margin-bottom: 0; }
.ta-d .ta-cab .ta-cab-nota { margin-left: auto; font-size: var(--t-sm); font-weight: 400; color: var(--suave); }
.ta-d .ta-cab .ta-lado { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; padding: 4px 6px;
  border: 0; background: none; color: #1b6fd6; font: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer; }
.ta-d .ta-cab .ta-lado:hover { background: var(--azul-tenue); border-radius: var(--radio); }
.ta-d .ta-titulo { font-weight: 600; color: var(--texto); text-decoration: none; }
.ta-d .ta-titulo:hover { color: var(--azul); }
.ta-d tr.ta-vencida td:first-child { border-left: 3px solid var(--rojo); }
.ta-d .ta-rojo { color: var(--rojo); }
.ta-d .ta-ambar { color: var(--ambar); }
.ta-d .ta-prog { white-space: nowrap; }
.ta-d .ta-barra { display: inline-block; width: 60px; height: 5px; border-radius: 3px; background: var(--borde); overflow: hidden;
  vertical-align: middle; margin-right: 6px; }
.ta-d .ta-barra i { display: block; height: 100%; background: var(--azul); }
.ta-d .ta-barra.ta-barra-grande { width: 220px; height: 8px; }
.ta-d .ta-prog small { color: var(--suave); }
.ta-d .ta-filtros-caja { width: 460px; max-width: calc(100vw - 32px); padding: 8px 14px 14px; }
.ta-d .ta-filtros-caja h3 { margin-left: 0; }
.ta-d .ta-campos { grid-template-columns: 1fr 1fr; }
.ta-d .ta-filtros-pie { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.ta-d .ta-h1 { font-size: 24px; line-height: 1.25; text-wrap: balance; }
.ta-d .ta-desc, .ta-d .ta-vacia { margin: 6px 0 10px; color: var(--suave); font-size: var(--t-md); }
.ta-d .ta-desc { color: var(--texto); white-space: pre-line; }
.ta-d .ta-rango { display: flex; align-items: center; gap: 12px; padding-top: 12px; margin: 0; }
.ta-d .ta-rango input[type=range] { flex: 1; accent-color: var(--azul); }
.ta-d .ta-rango output { font-weight: 700; min-width: 40px; }
.ta-d .ta-marcas { display: flex; justify-content: space-between; margin-right: 130px; font-size: var(--t-xs); color: var(--suave); }
.ta-d .ta-linea-campo { border: 0; border-bottom: 1px solid var(--borde-fuerte); border-radius: 0; padding: 6px 0; background: transparent;
  font: inherit; font-size: var(--t-md); width: auto; flex: 1 1 150px; }
.ta-d .ta-comentar { display: flex; gap: 10px; align-items: flex-end; padding: 10px 0 6px; margin: 0; }
.ta-d .ta-comentar textarea { flex: 1; font: inherit; font-size: var(--t-md); }
.ta-d .ec-campos.ta-una { grid-template-columns: minmax(0, 1fr); }
.ta-d .ec-campos label small { font-size: var(--t-xs); color: var(--suave); }
.ta-d .ta-fijo { padding: 6px 0; font-size: var(--t-md); color: var(--texto); }
.ta-d .ta-cancelar { margin-top: 22px; padding-top: 6px; border-top: 1px solid var(--borde-suave); }
.ta-d .ta-reasignar { margin: 6px 0 14px; padding: 4px 0 12px; border-bottom: 1px solid var(--borde-suave); }
.ta-d .ta-nota { flex-basis: 100%; }
.ta-d .ta-docs dt { color: var(--texto); }
.ta-d .ta-quitar { margin: 0 0 0 auto; }
.ta-d .ta-linea li.ta-desvio .ec-bola { border-color: var(--ambar); color: var(--ambar); box-shadow: 0 0 0 4px rgba(138,86,0,.15); }
.ta-d .ta-cancelada { display: flex; align-items: center; gap: 12px; flex: 1 1 380px; padding: 0 20px; }
@media (max-width: 700px) {
  .ta-d .ta-campos { grid-template-columns: minmax(0, 1fr); }
  .ta-d .ta-marcas { margin-right: 120px; }
  .ta-d .ta-comentar { flex-direction: column; align-items: stretch; }
}

/* ------------------------------------------------------------------------
   Enviar a taller externo (2026-10-07, canvas "Enviar a taller externo").
   Medidas del dibujo; la pantalla lleva .rx-cabeza, asi que sale al 80%
   como las demas pantallas nuevas.
   ------------------------------------------------------------------------ */
.rx-cabeza.te-cabeza { flex-direction: column; align-items: flex-start; justify-content: flex-start;
  gap: 6px; margin: 28px 0 16px; }
.te-cabeza h1 { font-size: 24px; }
.te-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: #6b7685; }
.te-sub { margin: 0; color: #5b6573; font-size: 14px; }
.te-oculto { position: absolute; left: -9999px; }
.te-tarjeta { background: #fff; border: 1px solid #d5dce4; border-radius: 6px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px; font-size: 14px; }
.te-busca { display: flex; gap: 10px; }
.te-campo { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 12px;
  border: 2px solid #1f4e79; border-radius: 4px; background: #fff; }
.te-campo input { flex: 1; font: inherit; font-size: 15px; border: 0 !important; outline: 0;
  padding: 11px 0 !important; box-shadow: none !important; background: transparent; min-width: 0; }
.te-boton { font: inherit; font-weight: 600; padding: 0 22px; border: 0; color: #fff;
  background: #1f4e79; border-radius: 4px; cursor: pointer; }
.te-boton:disabled { background: #9fb3c8; cursor: not-allowed; }
.te-fila-filtros { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.te-seg { display: flex; border: 1px solid #c9d1db; border-radius: 4px; overflow: hidden; }
.te-seg a { padding: 7px 16px; color: #1c2430; background: #fff; text-decoration: none; }
.te-seg a + a { border-left: 1px solid #c9d1db; }
.te-seg a.activo { font-weight: 600; color: #fff; background: #1f4e79; }
.te-ayuda { color: #5b6573; font-size: 13px; }
.te-tabla { border-top: 1px solid #e3e7ec; }
.te-fila { display: grid; grid-template-columns: 36px 170px minmax(0, 1fr) 230px 190px minmax(0, 1fr);
  gap: 12px; align-items: center; padding: 12px 6px; border-bottom: 1px solid #e3e7ec; }
.te-fila.te-enc { padding: 10px 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; color: #6b7685; }
.te-fila.marcada { background: #eef4fa; }
.te-fila input[type=checkbox] { width: 18px; height: 18px; accent-color: #1f4e79; margin: 0; }
.te-codigo { font-weight: 700; text-decoration: none; }
.te-tmx { font-size: 12px; color: #6b7685; }
.te-origen { display: flex; flex-direction: column; gap: 3px; }
.te-chapa { align-self: center; justify-self: start; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 3px; }
.te-origen .te-chapa { align-self: flex-start; }
.te-chapa.garantia { background: #fdf0dc; color: #8a5a00; }
.te-chapa.inventario { background: #e7eef6; color: #1f4e79; }
.te-chapa.apagada { background: #eef1f4; color: #5b6573; }
.te-cliente { font-size: 12px; color: #5b6573; }
.te-donde { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #5b6573; }
.te-donde select { font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid #c9d1db;
  border-radius: 4px; background: #fff; color: #1c2430; }
.te-falla { color: #5b6573; }
.te-motivo { color: #8a5a00; }
.te-fila.te-gris { color: #8a93a0; }
.te-fila.te-gris .te-codigo { color: #8a93a0; }
.te-nota { margin: 0; color: #6b7685; font-size: 13px; }
.te-barra { position: sticky; bottom: 0; margin: 16px 0 24px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; padding: 14px 20px; background: #fff;
  border: 1px solid #d5dce4; border-radius: 6px; }
.te-barra-cuenta { display: flex; align-items: center; gap: 10px; min-width: 0; }
.te-barra-n { font-weight: 700; font-size: 16px; color: #1f4e79; white-space: nowrap; }
.te-barra-nombres { color: #5b6573; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.te-seguir { padding: 11px 22px; white-space: nowrap; }
@media (max-width: 900px) {
  .te-tabla { overflow-x: auto; }
  .te-fila { min-width: 980px; }
}

/* Enviar a taller externo, version 2 (2026-10-07): busqueda desplegable y
   lista "Para enviar". Medidas del artboard Busqueda.dc.html. */
.te-busca-caja { position: relative; }
.te-desplegable { position: absolute; left: 0; right: 0; top: 50px; background: #fff;
  border: 1px solid #c9d1db; border-radius: 6px; box-shadow: 0 8px 24px rgba(15, 30, 50, 0.16);
  z-index: 20; padding: 6px 0; max-height: 420px; overflow-y: auto; }
.te-grupo { padding: 10px 16px 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: #6b7685; }
.te-grupo:first-child { padding-top: 8px; }
.te-opcion { width: 100%; display: grid; grid-template-columns: 170px minmax(0, 1fr) 240px 120px; gap: 12px;
  align-items: center; text-align: left; font: inherit; font-size: 14px; padding: 10px 16px; border: 0;
  background: #fff; color: #1c2430; cursor: pointer; }
.te-opcion:hover, .te-opcion:focus { background: #eef4fa; outline: 0; }
.te-opcion b { color: #1f4e79; }
.te-opcion-sub { color: #5b6573; }
.te-opcion-accion { color: #1f4e79; font-weight: 600; text-align: right; }
.te-opcion-gris { grid-template-columns: 170px minmax(0, 1fr) 360px; color: #8a93a0; cursor: default; }
.te-opcion-gris:hover { background: #fff; }
.te-opcion-motivo { color: #8a5a00; }
.te-sin { padding: 12px 16px; color: #5b6573; }
.te-para-enviar { margin-top: 16px; gap: 10px; }
.te-para-enviar h2 { margin: 0; font-size: 16px; font-weight: 700; }
.te-fila2 { display: grid; grid-template-columns: 170px minmax(0, 1fr) 260px 190px minmax(0, 1fr) 80px;
  gap: 12px; align-items: center; padding: 12px 6px; border-bottom: 1px solid #e3e7ec; }
.te-fila2.te-enc { padding: 10px 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; color: #6b7685; }
.te-quitar { font: inherit; padding: 6px 10px; border: 0; background: none; color: #99201a; cursor: pointer; }
.te-para-enviar .te-tabla[hidden], .te-nota[hidden] { display: none; }
@media (max-width: 900px) {
  .te-fila2 { min-width: 1000px; }
  .te-para-enviar .te-tabla { overflow-x: auto; }
}

/* "Ya usados en este modelo" en una linea gris (2026-10-08, opcion A del
   canvas "Repuestos ya usados: mas discreto"). */
.rx-lista.rx-lista-linea { border: 0; background: none; border-radius: 0; max-height: none; overflow: visible; }
.rx-usados-linea { margin: 6px 0 0; color: #5b6573; font-size: 13px; display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap; line-height: normal; }
.rx-usados-item { font: inherit; font-size: 13px; padding: 0; border: 0; background: none; color: #1f4e79;
  font-weight: 600; text-decoration: underline; cursor: pointer; }
.rx-usados-item:hover { color: #2a6291; }

/* "Le quité una pieza" (2026-10-08, canvas "Cambio de pieza", lamina 1). */
.lq-caja { background: #fff; border: 2px solid #1f4e79; border-radius: 6px; padding: 18px 22px;
  display: flex; flex-direction: column; gap: 14px; margin: 10px 0; color: #1c2430; font-size: 14px; line-height: normal; }
.lq-caja[hidden] { display: none; }
.lq-caja h2 { margin: 0; font-size: 17px; font-weight: 700; color: #1c2430; }
.lq-form { display: flex; flex-direction: column; gap: 14px; }
.lq-que { display: flex; flex-direction: column; gap: 6px; }
.lq-rotulo { font-weight: 600; }
.lq-sugerida { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #1f4e79;
  border-radius: 4px; background: #eef4fa; cursor: pointer; }
.lq-sugerida[hidden] { display: none; }
.lq-caja .lq-sugerida input[type=radio] { accent-color: #1f4e79; margin: 0; padding: 0; width: 18px; height: 18px;
  min-width: 0; flex: 0 0 18px; border: 0; box-shadow: none; }
.lq-sug-texto { flex: 1; }
.lq-gris { color: #5b6573; }
.lq-chip { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 3px; background: #e6f2ea; color: #1d6b3a; white-space: nowrap; }
.lq-otra { align-self: flex-start; font: inherit; font-size: 13px; padding: 2px 0; border: 0; background: none;
  color: #1f4e79; text-decoration: underline; cursor: pointer; }
.lq-otra[hidden], .lq-buscar[hidden] { display: none; }
.lq-puntos { display: flex; flex-direction: column; gap: 4px; color: #5b6573; }
.lq-puntos strong { color: #1c2430; }
.lq-puntos [hidden] { display: none; }
.lq-acciones { display: flex; justify-content: flex-end; gap: 10px; }
.lq-boton { font: inherit; font-weight: 600; padding: 9px 18px; border: 1px solid #c9d1db; background: #fff;
  color: #1c2430; border-radius: 4px; cursor: pointer; }
.lq-boton.lleno { border: 0; background: #1f4e79; color: #fff; }
.lq-le-quite { font-weight: 700; }

/* Boton de imprimir con menu de destinos (opcion C, 2026-10-09).
   Macro: templates/_boton_imprimir.html. El boton dice donde va a salir;
   la flecha abre los destinos del esquema y elegir uno imprime ahi solo
   esa vez. */
.bi-par { position: relative; display: inline-flex; align-items: stretch; }
.bi-uno {
  font: inherit; display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  background: var(--azul); color: #fff; border: 0; border-radius: var(--radio) 0 0 var(--radio);
  padding: 8px 16px; cursor: pointer; margin: 0;
}
.bi-uno b { font-weight: 600; }
.bi-uno small { font-size: var(--t-sm); font-weight: 400; color: #bdd4e8; }
.bi-uno:hover { background: var(--azul-claro); }
.bi-mas { position: static; display: flex; }
.bi-mas > summary {
  list-style: none; display: flex; align-items: center; padding: 0 11px; cursor: pointer;
  background: var(--azul); color: #fff; border-left: 1px solid var(--azul-claro);
  border-radius: 0 var(--radio) var(--radio) 0;
}
.bi-mas > summary::-webkit-details-marker { display: none; }
.bi-mas > summary:hover, .bi-mas[open] > summary { background: var(--azul-claro); }
.bi-mas[open] > summary svg { transform: rotate(180deg); }
.bi-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 100%; width: 270px;
  background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-grande);
  box-shadow: var(--sombra-flotante, 0 8px 24px rgba(15, 23, 32, .14)); padding: 6px 0;
}
.bi-rotulo {
  padding: 6px 14px 4px; font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--azul);
}
.bi-opcion {
  font: inherit; display: flex; justify-content: space-between; align-items: center; width: 100%;
  min-height: 38px; padding: 0 14px; margin: 0; border: 0; border-top: 1px solid var(--borde-suave);
  border-radius: 0; background: var(--superficie); color: var(--texto); text-align: left; cursor: pointer;
  font-weight: 400; white-space: normal;
}
.bi-opcion:hover { background: var(--azul-fondo); color: var(--texto); }
.bi-opcion.si, .bi-opcion.si:hover { background: var(--azul-tenue); color: var(--azul); font-weight: 600; }
.bi-opcion.bi-navegador, .bi-opcion.bi-navegador:hover { color: var(--azul); }

/* Venta multiple en Estilo Directorio (opcion C, 2026-10-09): hoja blanca
   con el ticket y la factura en dos columnas; abajo sigue el comprobante. */
.vg-d { max-width: 900px; margin: 0 auto 18px; line-height: 1.5; }
.vg-d .pd-cabecera { margin-bottom: 22px; }
.vg-d .vg-enlaces { margin-left: auto; display: flex; gap: 18px; font-size: 13px; padding-bottom: 4px; }
.vg-d .vg-sub { margin: 4px 0 0; color: var(--suave); font-size: 13px; }
.vg-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; align-items: start; }
.vg-sec {
  display: flex; align-items: center; gap: 10px; padding: 0 0 10px; margin: 0 0 4px;
  border-bottom: 2px solid var(--azul);
}
.vg-sec h2 {
  margin: 0; font-size: var(--t-md); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--azul-fuerte);
}
.vg-chapa {
  margin-left: auto; font-size: var(--t-sm); font-weight: 700; border-radius: var(--radio-chico);
  padding: 2px 8px; color: var(--azul); background: var(--azul-tenue);
}
.vg-chapa.verde { color: var(--verde); background: var(--verde-fondo); }
.vg-fila { display: grid; grid-template-columns: 110px minmax(0, 1fr); border-bottom: 1px solid var(--borde-suave); }
.vg-fila > span { min-height: 38px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; }
.vg-fila > span:first-child { color: var(--suave); }
.vg-fila input { font: inherit; font-size: 14px; padding: 6px 8px; width: 90px; }
.vg-d .bi-par { margin-top: 18px; }
.vg-nota { font-size: var(--t-sm); color: var(--suave); margin: 8px 0 0; }
.vg-d .fila-editor-textos { margin-top: 4px; }
.vg-d .fila-editor-textos dl.datos { display: grid; grid-template-columns: 110px minmax(0, 1fr); margin: 0; }
.vg-d .fila-editor-textos dl.datos dt, .vg-d .fila-editor-textos dl.datos dd {
  margin: 0; min-height: 38px; padding: 6px 0; display: flex; align-items: center;
  border-bottom: 1px solid var(--borde-suave);
}
.vg-d .fila-editor-textos dl.datos dt { color: var(--suave); }
.vg-d .fila-editor-textos .acciones { margin-top: 10px; }
@media (max-width: 700px) {
  .vg-cols { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .vg-d .vg-enlaces { margin-left: 0; }
}
.bi-siempre { font-size: var(--t-xs); font-weight: 400; color: var(--suave); }
.ticket-lado .bi-par { display: flex; }
.ticket-lado .bi-uno { flex: 1 1 auto; }

/* Delivery: columna Imprimir con el boton nuevo (2026-10-09, canvas E1/E2):
   los dos papeles son botones azules a todo el ancho de la columna. */
.del-hoja .bi-par { display: flex; margin-top: 14px; }
.del-hoja .bi-uno { flex: 1 1 auto; }
.del-hoja .del-form-factura { margin-top: 26px; }
.del-textos { margin-top: 10px; }
.del-textos-rotulo {
  margin: 0 0 4px; font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--azul);
}

/* ===== Cotizaciones en Estilo Directorio (2026-10-09, canvas "Opciones de
   impresion", tableros F1 lista, F2 y F3 detalle, F4 editar). Plantillas:
   cotizaciones.html, cotizacion.html, cotizacion_form.html. ===== */
.cot-d { line-height: 1.5; }
.cot-d .pd-cabecera { margin-bottom: 20px; }
.cot-sec {
  display: flex; align-items: center; gap: 10px; padding: 0 0 10px; margin: 0 0 4px;
  border-bottom: 2px solid var(--azul); color: var(--azul);
}
.cot-sec h2 {
  margin: 0; padding: 0; border: 0; font-size: var(--t-md); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--azul-fuerte);
}
.cot-sec .pd-cuenta { margin-bottom: 0; }
.cot-nota { font-size: var(--t-sm); color: var(--suave); margin: 8px 0 0; line-height: 1.45; }
.cot-nota b { color: var(--azul-fuerte); }
.cot-gris { color: var(--suave); font-weight: 400; }

/* F1, la lista */
.cot-buscar {
  display: flex; align-items: center; gap: 10px; margin-left: auto; height: 40px; width: 340px; max-width: 100%;
  padding: 0 12px; background: var(--azul-fondo); border: 1px solid var(--borde-fuerte); border-radius: var(--radio);
  color: var(--suave);
}
.cot-buscar input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 0; font: inherit; }
.cot-buscar input:focus { outline: none; box-shadow: none; }
.cot-buscar:focus-within { background: var(--superficie); border-color: var(--azul); }
.cot-dos { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0 36px; align-items: start; }
.cot-pila { display: flex; flex-direction: column; gap: 28px; }
.cot-item { padding: 9px 0; border-bottom: 1px solid var(--borde-suave); }
.cot-item-fila { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
.cot-item-sub { font-size: var(--t-sm); color: var(--suave); }
.cot-item-acciones { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 13px; margin-top: 3px; }
.cot-d .cot-form-mini { display: inline-flex; gap: 14px; margin: 0; }
button.cot-enlace, button.cot-enlace:hover {
  font: inherit; font-size: 13px; background: none; border: 0; padding: 0; color: var(--azul); cursor: pointer;
}
button.cot-enlace:hover { text-decoration: underline; }
button.cot-enlace.texto-rojo { color: var(--rojo); }
.cot-vacia { padding: 9px 0; }
.cot-ver-mas { display: block; font-size: var(--t-sm); margin-top: 8px; }
.cot-filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.cot-chip {
  font-size: 13px; padding: 5px 12px; border-radius: var(--radio-chico); border: 1px solid var(--borde-fuerte);
  background: var(--superficie); color: var(--texto); text-decoration: none;
}
.cot-chip:hover { border-color: var(--azul); color: var(--azul); }
.cot-chip.si { border: 2px solid var(--azul); background: var(--azul-tenue); color: var(--azul); font-weight: 600; padding: 4px 11px; }
.cot-mas-filtros { margin-left: auto; }
.cot-mas-filtros[open] { flex-basis: 100%; margin-left: 0; }
.cot-mas-filtros > summary {
  list-style: none; cursor: pointer; display: inline-block; font-size: 13px; font-weight: 600; color: var(--azul);
  background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: var(--radio); padding: 6px 12px;
}
.cot-mas-filtros > summary::-webkit-details-marker { display: none; }
.cot-mas-filtros[open] > summary { float: right; }
.cot-filtros-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 12px 0 4px; clear: both; }
.cot-filtros-form label { display: flex; flex-direction: column; gap: 3px; font-size: var(--t-sm); color: var(--suave); }
.cot-filtros-form select { max-width: 220px; }
.cot-d table.cot-tabla-d { width: 100%; border-collapse: collapse; }
.cot-d table.cot-tabla-d th {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue);
  text-align: left; padding: 8px; border-bottom: 1px solid var(--borde-fuerte); background: none;
}
.cot-d table.cot-tabla-d td { padding: 9px 8px; border-bottom: 1px solid var(--borde-suave); vertical-align: middle; }
.cot-d table.cot-tabla-d .num { text-align: right; }
.cot-cod { font-weight: 700; color: var(--azul); }
.cot-sub { display: block; font-size: var(--t-sm); color: var(--suave); }
.cot-cerrada { color: var(--suave); }

/* F2 y F3, el detalle */
.cot-chapas { display: flex; gap: 8px; margin-top: 8px; }
.cot-iconos { margin-left: auto; display: flex; gap: 30px; padding-bottom: 4px; }
.cot-iconos form { margin: 0; display: flex; }
.cot-iconos a, .cot-iconos button, .cot-iconos button:hover {
  display: flex; flex-direction: column; align-items: center; gap: 2px; font: inherit; font-size: 13px;
  font-weight: 400; color: var(--azul); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer;
}
.cot-iconos a:hover, .cot-iconos button:hover { color: var(--azul-claro); }
.cot-aviso-ot { margin: 0 0 20px; }
.cot-siguiente { font-size: var(--t-md) !important; color: var(--azul) !important; font-weight: 700; }
.cot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: 30px; }
.cot-col { padding: 0 20px; border-left: 1px solid #e3e9f0; min-width: 0; }
.cot-col:first-child { padding-left: 0; border-left: 0; }
.cot-col:last-child { padding-right: 0; }
.cot-col form { margin: 0; }
.cot-datos { display: grid; grid-template-columns: 40% minmax(0, 1fr); margin: 0; }
.cot-datos dt, .cot-datos dd {
  margin: 0; min-height: 38px; padding: 6px 0; display: flex; align-items: center;
  border-bottom: 1px solid var(--borde-suave); overflow-wrap: anywhere;
}
.cot-datos dt { color: var(--suave); }
button.cot-lapiz, button.cot-lapiz:hover { margin-left: auto; background: none; border: 0; padding: 0; color: var(--azul); cursor: pointer; }
button.cot-lapiz svg { width: 18px; height: 18px; display: block; }
.cot-d .tabla-scroll { border: 0; border-radius: 0; box-shadow: none; }
.cot-form-cliente { margin-top: 10px; }
.cot-form-cliente label { width: 100%; }
.cot-form-cliente input { width: 100%; }
.cot-enl, button.cot-enl {
  display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 42px;
  border: 0; border-bottom: 1px solid var(--borde-suave); border-radius: 0; background: none; padding: 0;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--azul); text-decoration: none; text-align: left; cursor: pointer;
}
.cot-enl:hover, button.cot-enl:hover { background: none; color: var(--azul-claro); border-color: var(--borde-suave); }
.cot-enl-fuerte, button.cot-enl-fuerte { font-weight: 700; }
.cot-enl-rojo, button.cot-enl-rojo, button.cot-enl-rojo:hover { color: var(--rojo); }
.cot-col .bi-par + .cot-enl, .cot-col form + .cot-enl { margin-top: 10px; }
.cot-col form.cot-papelera { margin-top: 14px; }
.cot-d .bi-par { display: flex; margin-top: 12px; }
.cot-d .bi-uno { flex: 1 1 auto; }
.cot-bloque { margin-bottom: 30px; }
.cot-conv { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0 36px; align-items: start; }
.cot-aviso { margin: 12px 0; }
.cot-rot { font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
.cot-pago { display: flex; gap: 6px; flex-wrap: wrap; }
.cot-pago label {
  font-size: 13px; padding: 5px 12px; border-radius: var(--radio-chico); border: 1px solid var(--borde-fuerte);
  background: var(--superficie); color: var(--texto); cursor: pointer; display: inline-flex; align-items: center; margin: 0; font-weight: 400;
}
.cot-pago label:has(input:checked) { border: 2px solid var(--azul); background: var(--azul-tenue); color: var(--azul); font-weight: 600; padding: 4px 11px; }
.cot-pago input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cot-ref { width: 260px; }
.cot-conv .cot-nota label { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; }
.cot-conv .cot-nota input[type=checkbox] { width: auto; margin: 2px 0 0; flex: none; }
.cot-cargador { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; border-bottom: 1px solid var(--borde-suave); }
.cot-cargador > span { min-height: 40px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; }
.cot-cargador .cot-enl { border-bottom: 0; min-height: 0; }
.cot-conv-resumen { border-left: 1px solid #e3e9f0; padding-left: 24px; }
.cot-conv-fila { display: flex; justify-content: space-between; align-items: center; min-height: 40px; border-bottom: 1px solid var(--borde-suave); }
button.cot-convertir { width: 100%; margin-top: 16px; padding: 11px 20px; }
button.cot-convertir:disabled, button.cot-convertir:disabled:hover { background: var(--borde-fuerte); border-color: var(--borde-fuerte); cursor: not-allowed; }
.cot-totales-d {
  display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 28px; align-items: baseline;
  padding: 12px 8px; border-bottom: 2px solid var(--azul);
}
.cot-totales-d b { font-size: 15px; }
.cot-total-d b { font-size: 22px; color: var(--azul-fuerte); }
.cot-interno { font-size: var(--t-sm); color: var(--suave); margin: 10px 8px 0; }
.cot-hist { display: grid; grid-template-columns: 160px minmax(0, 1fr); border-bottom: 1px solid var(--borde-suave); }
.cot-hist > span { min-height: 38px; display: flex; align-items: center; padding: 6px 0; }
.cot-hist > span:first-child { color: var(--suave); }

/* F4, editar o nueva: el marcado de siempre, restilado */
.cotf-d .pd-titulo .chapa-solicitud { margin-left: 4px; }
.cotf-d .cot-pasos { margin-left: auto; background: none; border: 0; padding: 0 0 6px; gap: 22px; box-shadow: none; }
.cotf-d .cot-paso-linea { display: none; }
.cotf-d .cot-paso-boton { font-size: 13px; color: var(--suave); padding: 0; }
.cotf-d .cot-paso-boton.activo { color: var(--azul); font-weight: 700; }
.cotf-d .cot-bola { width: 22px; height: 22px; font-size: 12px; border-width: 1px; }
.cotf-d .cot-paso-boton.activo .cot-bola { border-width: 2px; }
.cotf-d .cot-form { grid-template-columns: minmax(0, 1fr) 340px; gap: 0 36px; }
.cotf-d .cot-pasos-col { gap: 26px; }
.cotf-d .cot-paso.panel, .cotf-d .cot-resumen.panel {
  background: none; border: 0; border-radius: 0; padding: 0; margin: 0; box-shadow: none;
}
.cotf-d .cot-paso-cabeza { padding-bottom: 10px; margin-bottom: 4px; border-bottom: 2px solid var(--azul); }
.cotf-d .cot-paso-cabeza h2 {
  font-size: var(--t-md); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--azul-fuerte);
}
.cotf-d .cot-paso-resumen { font-size: var(--t-md); }
.cotf-d button.cot-editar, .cotf-d button.cot-editar:hover {
  background: none; border: 0; padding: 0; font-size: 13px; font-weight: 600; color: var(--azul);
}
.cotf-d .cot-paso-cuerpo { margin-top: 10px; padding-top: 0; border-top: 0; }
.cotf-d #tabla-lineas th {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue);
  padding: 8px; border-bottom: 1px solid var(--borde-fuerte); background: none;
}
.cotf-d #tabla-lineas td { padding: 10px 8px; border-bottom: 1px solid var(--borde-suave); }
.cotf-d .cot-resumen { gap: 8px; }
.cotf-d .cot-resumen > label { font-size: var(--t-sm); font-weight: 600; color: var(--suave); }
.cotf-d .cot-moneda { gap: 6px; }
.cotf-d .cot-moneda .boton-envio {
  font-size: 13px; padding: 5px 12px; border-radius: var(--radio-chico); border: 1px solid var(--borde-fuerte);
  background: var(--superficie); color: var(--texto); font-weight: 400;
}
.cotf-d .cot-moneda .boton-envio.activa {
  border: 2px solid var(--azul); background: var(--azul-tenue); color: var(--azul); font-weight: 600; padding: 4px 11px;
}
.cotf-d .cot-totales { border-top: 0; padding-top: 0; }
.cotf-d .cot-total-fila { min-height: 40px; border-bottom: 1px solid var(--borde-suave); }
.cotf-d .cot-total-grande { border-top: 2px solid var(--azul); border-bottom: 0; margin-top: 12px; padding-top: 14px; }
.cotf-d .cot-total-grande > span:last-child { font-size: 26px; color: var(--azul-fuerte); }
.cotf-d .cot-crear { width: 100%; margin-top: 8px; }
.cotf-d .cot-cancelar { display: block; text-align: center; margin-top: 4px; }

@media (max-width: 1100px) {
  .cot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; }
  .cot-col:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 800px) {
  .cot-dos, .cot-conv, .cotf-d .cot-form { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cot-cols { grid-template-columns: minmax(0, 1fr); }
  .cot-col { padding: 0; border-left: 0; }
  .cot-conv-resumen { border-left: 0; padding-left: 0; }
  .cot-buscar { width: 100%; }
  .cot-iconos { margin-left: 0; }
}