/* ======================================================================
   ACD-CCO-012_v1_c4 — Contenido del código implementado en estilos.css
   Estado: c1 (en construcción; aún no validado en otras páginas)
   Contratos: ACD-DIC-001_v2 (THEME_SELECTED, data-theme/.theme-*),
   rutas assets/css/*, buffer LDI_ENTRIES, columnas del Listado.
   Principios: no-regresión, compatibilidad hacia atrás, accesibilidad (WCAG AA).
   ====================================================================== */

/* === [BLOQUE 01] — Tokens base y reglas de theming (columna 0) === */
:root {
  /* Tokens base (valores neutrales por defecto) */
  --bg: #ffffff;
  --surface: #f6f8fa;
  --surface-alt: #ffffff;
  --surface-subtle: #f9fafb;
  --text: #16181d;
  --muted: #5c6773;
  --primary: #2563eb;
  --primary-contrast: #ffffff;
  --primary-strong: #1d4ed8;
  --border: #e5e7eb;
  --border-soft: #d4d7dd;
  --focus: #2563eb33; /* alpha para outline */
  --ok: #139d57;
  --warn: #b98307;
  --err: #d13b3b;
  --info: #0a66c2;

  --input-bg: #ffffff;
  --input-text: #16181d;
  --input-border: #cfd5dd;
  --input-focus: var(--primary);

  --table-head: #f1f5f9;
  --table-row: #ffffff;
  --table-stripe: #f9fafb;
  --table-hover: #eef2f7;

  --badge-bg: #eef2ff;
  --badge-text: #1f3a8a;
  --pill-ok: #e8f6ef;
  --pill-err: #fdecec;

  --btn-primary-bg: var(--primary);
  --btn-primary-text: var(--primary-contrast);
  --btn-primary-border: var(--primary);

  --btn-secondary-bg: #eaeef4;
  --btn-secondary-text: #1f2937;
  --btn-secondary-border: #d1d5db;

  --btn-quiet-bg: transparent;
  --btn-quiet-text: var(--primary);
  --btn-quiet-border: transparent;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 6px 16px rgba(0,0,0,.08);
  --transition: 160ms ease;

  /* Fondos semánticos para secciones de formulario (alternancia por sección) */
  --section-bg-1: var(--surface);
  --section-bg-2: var(--table-stripe);

  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}


/* Comunica soporte de claro/oscuro al UA (no fuerza tema) */
:root { color-scheme: light dark; }

/* Temas por atributo data-theme (contrato DIC v2) */
[data-theme="actual"] { /* redefinir si difiere de :root */ }

[data-theme="teen"] {
  --primary: #9b5de5;
  --primary-contrast: #ffffff;

  --bg: #fff9fe;
  --surface: #fff3fb;
  --surface-alt: #ffe9fd;
  --surface-subtle: #fff9fe;
  --text: #241a2e;
  --muted: #7a6a8b;

  --border: #edd7ff;
  --border-soft: #f3d9ff;
  --focus: #9b5de533;

  --ok: #2ecc71;
  --warn: #f39c12;
  --err: #e74c3c;
  --info: #6c5ce7;

  --input-bg: #ffffff;
  --input-text: #241a2e;
  --input-border: #e3c8ff;

  --table-head: #f9edff;
  --table-row: #fff3fb;
  --table-stripe: #fff8ff;
  --table-hover: #f5eaff;

  --badge-bg: #f7e9ff;
  --badge-text: #5a2d91;
}

[data-theme="dark"] {
  --bg: #0f1115;
  --surface: #171a21;
  --surface-alt: #111827;
  --surface-subtle: #0b0f16;
  --text: #eef2f8;
  --muted: #9aa4b2;

  --primary: #60a5fa;
  --primary-contrast: #0b0e13;
  --primary-strong: #1d4ed8;
  --border: #2a2f3a;
  --border-soft: #1f2430;
  --focus: #60a5fa33;

  --ok: #22c55e;
  --warn: #eab308;
  --err: #ef4444;
  --info: #38bdf8;

  --input-bg: #0f1115;
  --input-text: #eef2f8;
  --input-border: #2a2f3a;

  --table-head: #1c212b;
  --table-row: #0f1115;
  --table-stripe: #151924;
  --table-hover: #1b2030;

  --badge-bg: #1b2030;
  --badge-text: #c7d2fe;
}
[data-theme="trend1"] {
  --primary: #10b981;
  --primary-contrast: #0b0f0d;

  --bg: #f0fdf4;
  --surface: #ecfdf5;
  --surface-alt: #dcfce7;
  --surface-subtle: #f0fdf4;
  --text: #022c22;
  --muted: #166534;

  --border: #bbf7d0;
  --border-soft: #d1fae5;
  --focus: #10b98133;

  --ok: #16a34a;
  --warn: #eab308;
  --err: #b91c1c;
  --info: #0ea5e9;

  --input-bg: #ffffff;
  --input-text: #022c22;
  --input-border: #bbf7d0;

  --table-head: #dcfce7;
  --table-row: #f0fdf4;
  --table-stripe: #e5f9ec;
  --table-hover: #d1fae5;

  --badge-bg: #d1fae5;
  --badge-text: #065f46;
}
[data-theme="trend2"] {
  --primary: #f97316;
  --primary-contrast: #101010;

  --bg: #fff7ed;
  --surface: #fff1e6;
  --surface-alt: #ffedd5;
  --surface-subtle: #fff7ed;
  --text: #7c2d12;
  --muted: #9a3412;

  --border: #fed7aa;
  --border-soft: #ffedd5;
  --focus: #f9731633;

  --ok: #16a34a;
  --warn: #eab308;
  --err: #b91c1c;
  --info: #0284c7;

  --input-bg: #ffffff;
  --input-text: #7c2d12;
  --input-border: #fed7aa;

  --table-head: #ffedd5;
  --table-row: #fff7ed;
  --table-stripe: #fff1e6;
  --table-hover: #fed7aa;

  --badge-bg: #ffedd5;
  --badge-text: #9a3412;
}
/* === [BLOQUE 02] — Reset ligero y base tipográfica === */
html, body { height: 100%; }
*,*::before,*::after { box-sizing: border-box; }

body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-ui); line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  transition: background var(--transition), color var(--transition);
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
hr { border: 0; border-top: 1px solid var(--border); }

/* === [BLOQUE 03] — Accesibilidad de foco (:focus-visible) === */
:where(a, button, input, select, textarea) { outline: none; }
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px; border-radius: max(2px, var(--radius-xs));
}
/* Fallback: mostrar anillo con :focus si :focus-visible no está */
:where(a, button, input, select, textarea):focus:not(:focus-visible) {
  outline: 3px solid var(--focus); outline-offset: 2px;
}

/* === [BLOQUE 04] — Contenedores y tarjetas === */
.container { width: min(1100px, 92%); margin-inline: auto; padding: 24px 0; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px; }

/* === [BLOQUE 05] — Botones === */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius: var(--radius-sm); border:1px solid transparent;
  font-weight:600; cursor:pointer;
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity:.6; cursor:not-allowed; }
.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); border-color: var(--btn-primary-border); }
.btn-primary:hover { filter: brightness(0.95); }
.btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); border-color: var(--btn-secondary-border); }
.btn-secondary:hover { filter: brightness(0.98); }
.btn-quiet { background: var(--btn-quiet-bg); color: var(--btn-quiet-text); border-color: var(--btn-quiet-border); }
.btn-quiet:hover { text-decoration: underline; }

/* === [BLOQUE 06] — Formularios === */
.input, input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], textarea, select {
  width:100%; background:var(--input-bg); color:var(--input-text);
  border:1px solid var(--input-border); border-radius: var(--radius-xs); padding:10px 12px;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}
.input::placeholder, input::placeholder, textarea::placeholder { color: var(--muted); }
.input:focus, input:focus, textarea:focus, select:focus { border-color: var(--input-focus); box-shadow: 0 0 0 3px var(--focus); }
.label { display:block; margin: 8px 0 6px; font-weight: 600; color: var(--text); }
.help { color: var(--muted); font-size: .92rem; }

/* === [BLOQUE 07] — Tablas (con header sticky) === */
.table-wrap {
  overflow:auto; max-height:70vh;
  border:1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
table { width:100%; border-collapse: separate; border-spacing: 0; }
th, td { padding:10px 12px; border-bottom:1px solid var(--border); text-align:left; }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--table-head); box-shadow: 0 1px 0 var(--border);
}
tbody tr:nth-child(odd) { background: var(--table-stripe); }
tbody tr:hover { background: var(--table-hover); }

/* Casilla selección (Listado) */
.cell-check { width: 42px; }
.cell-actions { white-space: nowrap; }

/* === [BLOQUE 08] — Badges, alerts, chips === */
.badge { display:inline-block; padding:2px 8px; border-radius:999px; background: var(--badge-bg); color: var(--badge-text); font-weight:600; font-size:.85rem; }
.alert { padding:12px 14px; border-radius: var(--radius); border:1px solid var(--border); background: var(--surface); }
.alert.ok   { border-color:#b7e4c7; background:#eef9f1; }
.alert.warn { border-color:#f1d38b; background:#fff8e6; }
.alert.err  { border-color:#f3b0b0; background:#fff0f0; }
.alert.info { border-color:#b6d6ff; background:#eef5ff; }

/* === [BLOQUE 09] — Header reutilizable (estilos) === */
.header {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:10px 14px; background: var(--surface); border-bottom:1px solid var(--border);
}
.header .brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.05rem; }
.header .nav { display:flex; gap:8px; flex-wrap:wrap; }
.header .nav a { padding:8px 10px; border-radius: var(--radius-xs); color: var(--text); text-decoration:none; }
.header .nav a.is-active { background: var(--table-head); }
.header .user { display:flex; align-items:center; gap:10px; color: var(--muted); }
#session-box { /* renderizado por auth.js; aquí solo estilos de layout */ }

/* === [BLOQUE 10] — Utilidades === */
.hidden { display:none !important; }
.center { display:grid; place-items:center; }
.row { display:flex; gap:12px; align-items:center; }
.col { display:flex; flex-direction:column; gap:8px; }

/* === [BLOQUE 11] — Tooltips (accesibles) === */
[aria-label][data-tooltip] { position: relative; }
[aria-label][data-tooltip]:hover::after,
[aria-label][data-tooltip]:focus-visible::after {
  content: attr(aria-label);
  position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 0;
  background: var(--text); color: var(--bg);
  border-radius: 6px; padding: 6px 8px; font-size: .85rem; white-space: nowrap; box-shadow: var(--shadow-sm);
}

/* === [BLOQUE 12] — Modales mínimos === */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; }
.modal { background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-md); max-width: 560px; width: min(560px, 92%); }
.modal-backdrop[open] { display:flex; }

/* === [BLOQUE 13] — Estados/colores semánticos rápidos === */
.text-ok { color: var(--ok); }
.text-warn { color: var(--warn); }
.text-err { color: var(--err); }
.text-info { color: var(--info); }

/* === [BLOQUE 14] — WCAG: bordes de inputs/UI >= 3:1 (recordatorio) === */
/* Validar contrastes con herramientas externas durante QA (AA/AAA). */

/* === [BLOQUE 15] — Fin de estilos base === */

/* === [BLOQUE 21] — Layout de secciones específicas === */

/* Página de configuración / explorar — panel principal */
#config-panel,
#explorar-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Subpaneles lado a lado (desktop) */
.panel-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 1.25rem;
}

@media (max-width: 900px) {
  .panel-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Tarjetas genéricas */
.card {
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--surface-alt);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
}

/* === [BLOQUE 17] — Inputs especiales y helpers === */

/* Inputs de URL/API */
.input-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 0.88rem;
}

/* Grupo de botones en línea con inputs */
.input-with-actions {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.input-with-actions .input {
  flex: 1 1 auto;
}

/* Chips de filtro/búsqueda (explorar, catálogo, etc.) */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* === [BLOQUE 18] — Helpers de espaciado y layout menores === */

.mt-1 {
  margin-top: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

/* Flex helpers */
.flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.flex-gap-sm {
  gap: 0.4rem;
}

.flex-gap-md {
  gap: 0.7rem;
}

/* === [BLOQUE 19] — Tema “black” refinado (ajustes extra) === */

/* Modo “black” forzado desde el portal (paleta oscura dura) */
body.theme-black {
  background-color: #020617;
  color: #f9fafb;
  /* Ajuste de fondos de sección para tema black */
  --section-bg-1: #020617;
  --section-bg-2: #020b25;
}

body.theme-black main.container {
  background: #020617;
}

/* Botones en tema black */
body.theme-black .btn-primary {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--primary) 90%, #000 10%),
    var(--primary)
  );
  border-color: color-mix(in srgb, var(--primary-strong) 65%, #000 15%);
}

body.theme-black .btn-secondary {
  background: #111827;
  color: #e5e7eb;
  border-color: #1f2937;
}

/* Paneles y tarjetas en tema black */
body.theme-black .card,
body.theme-black .table-wrap {
  background: #020617;
  border-color: #1f2937;
  box-shadow: var(--shadow-md);
}

/* Inputs en tema black */
body.theme-black .input,
body.theme-black select.input,
body.theme-black textarea.input {
  background: #020617;
  border-color: #1f2937;
}

/* === [BLOQUE 19-b] — Secciones de formulario (fondos alternados) === */

.form-section {
  margin-bottom: 1.5rem;
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius);
  background: var(--section-bg-1);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

/* Alternancia de fondo por sección en páginas de formulario */
.page-cargar-producto .form-section:nth-of-type(odd),
#page-cargar-producto .form-section:nth-of-type(odd) {
  background: var(--section-bg-1);
}

.page-cargar-producto .form-section:nth-of-type(even),
#page-cargar-producto .form-section:nth-of-type(even) {
  background: var(--section-bg-2);
}

/* === [BLOQUE 20] — Ajustes finos de responsividad === */

@media (max-width: 640px) {
  main.container {
    padding: 1rem 0.75rem 1.5rem;
  }

  .form-section {
    padding: 1rem 0.75rem;
  }

  .btn {
    width: auto;
  }
}

/* === [BLOQUE 21] — Imágenes de producto (tarjetas y miniaturas) === */

/* Contenedor de tarjetas de imagen */
#lista-imagenes {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
}

/* Tarjeta base de imagen */
.img-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 260px;
  padding: 0.75rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

/* Zona de miniatura (tamaño por defecto = grande) */
.img-item-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: inherit;
  background: var(--table-stripe);
}

.img-item-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Controles de rol (principal / thumbnails) */
.img-item-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.88rem;
}

.img-item-roles label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Input ALT dentro de la tarjeta */
.img-alt-input {
  font-size: 0.9rem;
}

/* Variantes de tamaño de miniatura
   Se aplican en un contenedor padre:
   - .thumb-lg (default para cargar-producto)
   - .thumb-md
   - .thumb-sm (pensado para inventario, etc.)
*/

/* Grande */
.thumb-lg .img-item {
  max-width: 260px;
}

/* Mediana */
.thumb-md .img-item {
  max-width: 180px;
}

/* Pequeña */
.thumb-sm .img-item {
  max-width: 120px;
}

/* === [BLOQUE XX] — Página inventario: agrupación por grupo de producto === */
.inv-group-row {
  background: var(--surface-subtle);
}
.inv-group-cell {
  font-size: 0.85rem;
  font-weight: 600;
}
.inv-group-toggle {
  margin-right: 0.5rem;
}


/* ===== Bloque X — Resumen de tabla en Inventario (inv-summary) ===== */
.page-inventario .table-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 0.75rem;
}

.page-inventario .table-summary .summary-item {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.35rem;
}

.page-inventario .table-summary .summary-label {
  font-size: 0.875rem;
  opacity: 0.8;
}

.page-inventario .table-summary .summary-value {
  font-weight: 600;
}