/* catalogo.css — estilos de la herramienta Catálogo (42.6).
   La pantalla del Catálogos del v44 con el aspecto de la 42.5: colores, letra, botones y tamaños de app.css.
   TODOS los selectores empiezan con `.cat44`: no cambian nada del resto del panel. Las variables viven dentro de `.cat44`
   y se apoyan en las del panel (--bg, --card, --ink, --muted, --brand…), que ya cambian solas en el tema oscuro. */

.cat44 {
  --c-fondo: var(--bg);
  --c-sup: var(--card);
  --c-pozo: color-mix(in srgb, var(--ink) 5%, var(--card));
  --c-pozo-2: color-mix(in srgb, var(--ink) 9%, var(--card));
  --c-linea: var(--line);
  --c-borde: var(--line-strong);
  --c-tinta: var(--ink);
  --c-apoyo: var(--muted);
  --c-acc: var(--brand);
  --c-acc-hondo: #093a43;
  --c-acc-suave: var(--brand-light);
  --c-placa: var(--accent-light);
  --c-placa-borde: var(--accent);
  --c-ok: var(--ok);
  --c-r: var(--radius-sm);
  --c-r-grande: var(--radius-lg);
  --c-foco: 0 0 0 3px color-mix(in srgb, var(--brand-2) 35%, transparent);
  color: var(--c-tinta);
  font-size: 14px;
  line-height: 1.5;
}
html[data-theme="dark"] .cat44 {
  --c-acc: #7cc7d1;
  --c-acc-hondo: #a6dce3;
  --c-placa: #2a2110;
}

/* Reinicio de lo que se cuela de las tablas globales del panel (encabezados en mayúsculas y pegajosos, etc.) */
.cat44 table { font-size: 13px; }
.cat44 th { text-transform: none; letter-spacing: normal; position: static; font-size: 12px; white-space: nowrap; background: var(--c-pozo); }
.cat44 td { white-space: normal; }
.cat44 tbody tr:hover td { background: transparent; }
.cat44 button { font: inherit; }
.cat44 :focus-visible { outline: none; box-shadow: var(--c-foco); border-radius: 6px; }
.cat44 .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cat44 .ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cat44 .num { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.cat44 .menor { color: var(--c-apoyo); font-size: 12.5px; }
.cat44 .bloque-menor { display: block; }
.cat44 ul[role="list"], .cat44 ol[role="list"] { list-style: none; padding: 0; margin: 0; }

/* ── Estructura ─────────────────────────────────────────────────────────────────────── */
.cat44 .cat-pagina { display: grid; gap: 16px; min-width: 0; }
.cat44 .herramienta { display: grid; gap: 16px; min-width: 0; }
.cat44 .cargando { display: inline-flex; align-items: center; gap: 8px; color: var(--c-apoyo); font-weight: 600; margin: 0; }
.cat44 .acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cat44 .sec-titulo__h { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.cat44 .sec-titulo__h3 { margin: 0 0 10px; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }

/* Partes: el mismo selector de pestañas que el resto del panel (.cda-turno-sw) */
.cat44 .lugares { display: inline-flex; flex-wrap: wrap; justify-self: start; border: 1px solid var(--c-borde); border-radius: 9px; overflow: hidden; background: var(--c-sup); }
.cat44 .lugares .lugar {
  border: none; background: none; cursor: pointer; padding: 8px 14px; min-height: 36px;
  font-size: 13px; font-weight: 600; color: var(--c-apoyo); border-right: 1px solid var(--c-linea);
}
.cat44 .lugares .lugar:last-child { border-right: none; }
.cat44 .lugares .lugar:hover { background: var(--c-fondo); color: var(--c-tinta); }
.cat44 .lugares .lugar[aria-current] { background: var(--brand-2); color: #fff; }

/* ── Botones: los de la 42.5 ───────────────────────────────────────────────────────── */
.cat44 .boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 36px; padding: 8px 14px; border: 1px solid transparent; border-radius: var(--c-r);
  background: linear-gradient(160deg, var(--brand-2), var(--brand)); color: #fff;
  font-size: 13px; font-weight: 700; line-height: 1.15; white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 2px rgba(13, 79, 90, 0.25), 0 6px 16px -6px rgba(13, 79, 90, 0.4);
  transition: all 0.15s var(--ease);
}
.cat44 .boton:hover { filter: brightness(1.06); }
.cat44 .boton--secundario { background: var(--c-sup); color: var(--c-tinta); border-color: var(--c-borde); box-shadow: var(--shadow-sm); }
.cat44 .boton--secundario:hover { background: var(--c-pozo); filter: none; }
.cat44 .boton--suave { background: none; border-color: transparent; box-shadow: none; color: var(--c-acc); padding: 8px 10px; }
.cat44 .boton--suave:hover { background: var(--c-acc-suave); filter: none; }
.cat44 .boton--chico { font-size: 11.5px; padding: 5px 11px; min-height: 29px; border-radius: 8px; }
/* N-EQ-04: en las filas de M+ (campo y «Guardar» en la misma línea) el botón mide como el campo: 36 px, 44 en el celular (abajo). */
.cat44 .formulario--linea .boton--chico { min-height: 36px; }
.cat44 .boton:disabled { opacity: 0.4; cursor: default; filter: none; }
.cat44 .boton--peligro { background: var(--c-sup); color: var(--err); border-color: var(--err); box-shadow: none; }
.cat44 .boton--peligro:hover { background: var(--err-light); filter: none; }

/* ── Tarjeta, placa, estado, avisos ─────────────────────────────────────────────────── */
.cat44 .tarjeta { min-width: 0; background: var(--c-sup); border: 1px solid var(--c-linea); border-radius: var(--c-r-grande); box-shadow: var(--shadow); padding: 18px 20px; display: grid; gap: 14px; }
.cat44 .tarjeta--marcada { border: 1.5px solid var(--brand-2); }
.cat44 .tarjeta__titulo { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; overflow-wrap: anywhere; }

.cat44 .placa { display: inline-flex; flex-direction: column; gap: 2px; min-width: 0; background: var(--c-placa); color: var(--c-tinta); border: 1.5px solid var(--c-placa-borde); border-radius: 12px; padding: 10px 16px 12px; }
.cat44 .placa__rotulo { font-size: 13px; font-weight: 700; }
.cat44 .placa__cifra { font-size: 34px; font-weight: 800; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.cat44 .placa__nota { font-size: 12.5px; font-weight: 600; }

.cat44 .estado { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 2px 9px 2px 7px; border: 1px solid transparent; border-radius: 7px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.cat44 .estado .ico { width: 14px; height: 14px; }
.cat44 .estado--aprobado { background: var(--ok-light); color: var(--ok); }
.cat44 .estado--revision { background: var(--c-sup); border-color: var(--c-borde); }
.cat44 .estado--espera { background: transparent; color: var(--c-apoyo); border: 1px dashed var(--c-borde); }
.cat44 .estado--accion { background: var(--c-acc-suave); color: var(--c-acc); }
.cat44 .tipo { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border: 1px solid var(--c-borde); border-radius: 6px; font-size: 11.5px; font-weight: 700; color: var(--c-apoyo); white-space: nowrap; }
.cat44 .por-definir { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 2px 9px 2px 7px; border: 1px dotted var(--c-borde); border-radius: 7px; font-size: 12px; font-weight: 700; color: var(--c-apoyo); white-space: nowrap; }

.cat44 .aviso { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; background: var(--c-pozo); color: var(--c-tinta); border-radius: var(--c-r); font-size: 13px; }
.cat44 .aviso > .ico { margin-top: 2px; }
.cat44 .aviso__texto { min-width: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
.cat44 .aviso__texto > span { color: var(--c-apoyo); }
.cat44 .aviso--importante { background: var(--err-light); color: var(--err); }
.cat44 .aviso--exito { background: var(--ok-light); color: var(--ok); }
.cat44 .aviso__lista { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 2px; font-size: 12.5px; color: var(--c-tinta); }

/* ── Campos y formularios ───────────────────────────────────────────────────────────── */
.cat44 .formulario { display: grid; gap: 14px; min-width: 0; }
.cat44 .formulario__dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.cat44 .formulario--fila { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); align-items: end; }
.cat44 .formulario--linea { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
/* align-content: start — si el mensaje de error de una casilla alarga la fila, la casilla vecina no reparte el espacio sobrante entre sus
   filas (rótulo y caja): se queda en 36 px y arriba, en Catálogo, Calendario y Clientes (CAT-14, CAL-07, CLI-05). */
.cat44 .campo { display: grid; gap: 5px; min-width: 0; align-content: start; }
.cat44 .campo--todo { grid-column: 1 / -1; }
.cat44 .campo__rotulo { font-size: 12px; font-weight: 700; color: var(--c-apoyo); }
.cat44 .campo__error { color: var(--err); font-weight: 700; font-size: 12px; }
/* N3-01: de noche el rojo del tema claro (--err) sobre la tarjeta oscura daba 2,93 a 1. El mismo rojo claro de los demás errores del panel de noche
   (faltantes, avisos de la ventana del cierre). Lo usan Catálogo, Clientes y Calendario; --err no se redefine de noche porque pinta fondos con texto blanco. */
html[data-theme="dark"] .cat44 .campo__error,
html[data-theme="dark"] .cat44 .aviso--importante { color: #ff8b7c; }
.cat44 .entrada {
  min-height: 36px; width: 100%; padding: 6px 11px; background: var(--c-sup); color: var(--c-tinta);
  border: 1px solid var(--c-borde); border-radius: var(--c-r); font-size: 14px;
}
.cat44 .entrada:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(13, 79, 90, 0.08); }
.cat44 .entrada[aria-invalid="true"] { border-color: var(--err); }
.cat44 .entrada--corta { width: 90px; }
.cat44 select.entrada { padding-right: 28px; }
.cat44 .entrada-dinero { display: flex; align-items: center; gap: 4px; }
.cat44 .entrada-dinero > span { color: var(--c-apoyo); font-weight: 700; }
.cat44 .entrada-dinero .entrada { width: 96px; text-align: right; font-variant-numeric: tabular-nums; }

.cat44 .opciones { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 6px; }
.cat44 .opciones legend { padding: 0; margin-bottom: 4px; }
.cat44 .opciones__fila { display: flex; flex-wrap: wrap; gap: 8px; }
.cat44 .opcion { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; background: var(--c-sup); border: 1px solid var(--c-borde); border-radius: var(--c-r); font-weight: 700; cursor: pointer; }
.cat44 .opcion:hover { border-color: var(--brand-2); }
.cat44 .opcion--elegida { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }
.cat44 .opcion input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.cat44 .opcion:has(input:focus-visible), .cat44 .confirmar:has(input:focus-visible) { box-shadow: var(--c-foco); }
.cat44 .confirmar { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 12px; background: var(--c-sup); border: 1px solid var(--c-borde); border-radius: var(--c-r); font-weight: 600; cursor: pointer; }
.cat44 .confirmar input { width: 18px; height: 18px; accent-color: var(--brand-2); }
.cat44 .arranque { border: 0; margin: 0; padding: 0; display: grid; gap: 14px; min-width: 0; }
.cat44 .condiciones { display: grid; gap: 8px; margin: 0; }
.cat44 .condicion { display: grid; gap: 2px; }
.cat44 .condicion dt { color: var(--c-apoyo); font-size: 12px; font-weight: 700; }
.cat44 .condicion dd { margin: 0; }
.cat44 .condicion__valor { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.cat44 .confirmacion { display: grid; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--brand-2); border-radius: var(--c-r); background: var(--c-sup); }
.cat44 .confirmacion p { margin: 0; }

/* ── Catálogos y productos ──────────────────────────────────────────────────────────── */
.cat44 .catalogos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.cat44 .catalogo { display: grid; gap: 14px; min-width: 0; }
.cat44 .catalogo__cab { display: grid; gap: 10px; }
.cat44 .catalogo__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cat44 .fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.cat44 .fichas > li { display: flex; }
.cat44 .ficha { display: grid; align-content: start; align-self: stretch; gap: 2px; width: 100%; min-height: 36px; padding: 10px 14px; text-align: left; background: var(--c-sup); color: var(--c-tinta); border: 1px solid var(--c-borde); border-radius: var(--c-r); cursor: pointer; }
.cat44 .ficha:hover { border-color: var(--brand-2); }
.cat44 .ficha--elegida { border-color: var(--brand-2); box-shadow: inset 4px 0 0 var(--brand-2); }
.cat44 .ficha__nombre { font-size: 14px; }
.cat44 .ficha__dato { color: var(--c-apoyo); font-size: 12px; }
.cat44 .ficha__marca { display: inline-flex; align-items: center; gap: 4px; color: var(--c-apoyo); font-size: 12px; font-weight: 700; }
.cat44 .ficha__marca .ico { width: 13px; height: 13px; }
.cat44 .desplegable { display: grid; gap: 10px; }
.cat44 .desplegable > summary { list-style: none; justify-self: start; cursor: pointer; }
.cat44 .desplegable > summary::-webkit-details-marker { display: none; }
.cat44 .desplegable[open] > summary .ico { transform: rotate(180deg); }

.cat44 .caja-tabla { position: relative; min-width: 0; max-width: 100%; overflow-x: auto; background: var(--c-sup); border: 1px solid var(--c-linea); border-radius: var(--c-r-grande); box-shadow: var(--shadow); }
.cat44 .tabla { width: 100%; border-collapse: separate; border-spacing: 0; }
.cat44 .tabla caption { text-align: left; }
.cat44 .tabla th { text-align: left; vertical-align: bottom; padding: 8px 12px; color: var(--c-apoyo); font-weight: 700; border-bottom: 1px solid var(--c-linea); }
.cat44 .tabla td { padding: 9px 12px; border-bottom: 1px solid var(--c-linea); vertical-align: middle; }
.cat44 .tabla tr:last-child td { border-bottom: 0; }
.cat44 .tabla .der { text-align: right; }
.cat44 .tabla .fuerte { font-weight: 700; }
.cat44 .celda-producto { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cat44 .celda-producto__texto { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.cat44 .celda-producto__texto b { font-size: 14px; }
.cat44 .celda-producto .estado { justify-self: start; }
.cat44 .mini { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; background: var(--c-pozo); border: 1px solid var(--c-borde); border-radius: 9px; font-weight: 800; color: var(--c-apoyo); }
.cat44 .medidas { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.cat44 .medida { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 6px; border: 1px solid var(--c-borde); border-radius: 6px; font-weight: 700; font-size: 12px; }
.cat44 .precio { font-weight: 800; font-size: 14px; }
.cat44 .precio small { font-weight: 600; color: var(--c-apoyo); font-size: 11.5px; }
.cat44 .programado { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cat44 .celda-acciones { white-space: nowrap; text-align: right; }

.cat44 .programar { display: grid; gap: 14px; }
.cat44 .vista-previa { display: grid; gap: 14px; padding-top: 14px; border-top: 1px solid var(--c-linea); }
.cat44 .vista-previa__titulo { margin: 0; font-size: 15px; font-weight: 800; }
.cat44 .vista-previa__placa { justify-self: start; }
.cat44 .lista-simple { display: grid; gap: 8px; margin: 0; padding-left: 18px; }
.cat44 .lista-simple .estado, .cat44 .lista-simple .menor { margin-left: 8px; }
.cat44 .lista-tachados s, .cat44 .tramo--corregido s { color: var(--c-apoyo); text-decoration-thickness: 2px; }
.cat44 .lista-tachados .tachado { color: var(--c-apoyo); }
.cat44 .lista-tachados .tachado b { color: var(--c-tinta); }

/* La ficha del producto (42.7): una sola caja, como «Programar precios». El nombre del producto, en la tabla, abre la ficha. */
.cat44 .ficha-producto { max-width: 640px; }
.cat44 .nombre-producto { background: none; border: 0; padding: 0; min-height: 28px; text-align: left; font-size: 14px; font-weight: 700; color: var(--c-acc); cursor: pointer; overflow-wrap: anywhere; }
.cat44 .nombre-producto:hover { text-decoration: underline; }
.cat44 .entrada--empaque { min-width: 130px; }

/* ── Tipos de tienda ────────────────────────────────────────────────────────────────── */
.cat44 .tipos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.cat44 .tipo-tarjeta { display: flex; flex-direction: column; }
.cat44 .tipo-tarjeta__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.cat44 .tipo-tarjeta__nombre { margin: 0; font-size: 16px; font-weight: 800; }
.cat44 .tipo-tarjeta > .boton { align-self: flex-start; margin-top: auto; }
.cat44 .tipo-tarjeta--nuevo { border-style: dashed; align-items: flex-start; justify-content: center; box-shadow: none; }
.cat44 .tipo-tarjeta--nuevo > .boton { margin-top: 0; }
.cat44 .editor-tipo .volver { justify-self: start; display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: var(--c-acc); font-weight: 700; cursor: pointer; }
.cat44 .estado-tipo { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--c-linea); }
.cat44 .estado-tipo p { margin: 0; }

/* ── Tramos de precio (los usa la herramienta Calendario) ─────────────────────────── */
.cat44 .tramos-lista { display: grid; gap: 4px; }
.cat44 .tramos { display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--c-linea); }
.cat44 .tramos__lista { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.cat44 .tramo { display: grid; gap: 2px; padding: 5px 10px; border: 1px solid var(--c-borde); border-radius: 8px; background: var(--c-sup); }
.cat44 .tramo--corregido { border-style: dashed; }

/* ── Teléfono ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .cat44 .formulario__dos, .cat44 .formulario--fila { grid-template-columns: minmax(0, 1fr); }
  .cat44 .tramos { grid-template-columns: minmax(0, 1fr); }
  .cat44 .tabla--apilable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cat44 .tabla--apilable, .cat44 .tabla--apilable tbody { display: block; width: 100%; }
  .cat44 .tabla--apilable tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 14px; padding: 12px 14px; border-bottom: 1px solid var(--c-linea); }
  .cat44 .tabla--apilable tr:last-child { border-bottom: 0; }
  .cat44 .tabla--apilable td { display: grid; gap: 2px; justify-items: start; align-content: start; min-width: 0; padding: 0; border: 0; text-align: left; }
  .cat44 .tabla--apilable td::before { content: attr(data-etiqueta); color: var(--c-apoyo); font-size: 12px; font-weight: 600; }
  .cat44 .tabla--apilable td:first-child { grid-column: 1 / -1; font-size: 14px; }
  .cat44 .tabla--apilable td:first-child::before { content: none; }
  /* M+: el empaque con su botón y las libras con el suyo no caben en media columna: cada uno ocupa la fila entera (CAT-08). */
  .cat44 .tabla--apilable td[data-etiqueta="Empaque"], .cat44 .tabla--apilable td[data-etiqueta="Libras"] { grid-column: 1 / -1; }
  .cat44 .tabla--apilable .formulario--linea { flex-wrap: wrap; }
  .cat44 .entrada--empaque { min-width: 0; }
  .cat44 .tabla--apilable td .estado { white-space: normal; max-width: 100%; }
  .cat44 .tabla--apilable td.der { justify-items: start; }
  .cat44 .caja-tabla:has(.tabla--apilable) { overflow-x: visible; }
  .cat44 .boton, .cat44 .lugares .lugar, .cat44 .entrada { min-height: 44px; }
  .cat44 .boton--chico { min-height: 36px; }
  .cat44 .formulario--linea .boton--chico { min-height: 44px; }
  .cat44 .nombre-producto { min-height: 36px; }
}