/* ─────────────────────────────────────────────
   Lo propio de Luca que VOOST DS no tiene: la barra de calidad, los iconos de Momo, los colores de los estados…
   (Documentacion/Plan-Interfaz-VOOST-2026-10-26.md, §5.1)

   Se escribe con tokens semánticos, para que siga al tema. Cuando un papel de Luca no tiene token en VOOST, se define
   aquí UNA vez, con su valor en claro y en oscuro sacado de las rampas de VOOST, y el resto de Luca usa ese nombre:
   es la única hoja de Luca donde un primitivo de VOOST puede aparecer. El oscuro va dos veces, como en los tokens de
   VOOST: por atributo (el tema elegido) y por prefers-color-scheme (el del sistema, sin atributo).
   ───────────────────────────────────────────── */

/* ── Tokens propios ──

   --surface-well: el «pozo» donde se apoyan tarjetas dentro del panel. Gris claro en claro; en oscuro, el morado
   grisáceo de VOOST, un paso por encima de las tarjetas para que se lean.

   --shadow-lift: la sombra de una tarjeta que se eleva al pasar por encima (las de campaña y de pieza del prototipo de
   VOOST: 3 px arriba y esta sombra, como la Luca de antes). En oscuro, más densa: la clara se pierde sobre el negro. */
:root {
  --surface-well: var(--canvas-100);
  --shadow-lift: 0 10px 26px rgba(15, 10, 30, .12);
}

[data-theme="dark"] {
  --surface-well: var(--canvas-overlay);
  --shadow-lift: 0 10px 26px rgba(0, 0, 0, .35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-well: var(--canvas-overlay);
    --shadow-lift: 0 10px 26px rgba(0, 0, 0, .35);
  }
}

/* ── .luca-page: el contenido de una página dentro del panel, con los márgenes y la separación del prototipo de VOOST
   (.content: 24 arriba, 32 a los lados, 48 abajo; 24 entre bloques). ── */
.luca-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  padding: 24px 32px 48px;
}

/* ── .luca-btn: el botón de VOOST DS tal como lo pinta su componente React, que es el del prototipo (Sora 500 14/16,
   pastilla). El de su CSS para HTML (.voost-btn) lleva Sora 800: los dos no coinciden dentro de VOOST, y manda el
   prototipo. Pequeño (32) por defecto; --md, 40. --outline: contorno en el color del producto. ── */
.luca-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  height: 32px;
  padding: 0 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font: 500 14px/16px var(--font-display);
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}

.luca-btn:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
  color: var(--on-accent);
}

.luca-btn:active {
  border-color: var(--accent-pressed);
  background: var(--accent-pressed);
}

.luca-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.luca-btn:disabled,
.luca-btn.is-disabled {
  border-color: var(--line);
  background: var(--surface-sunken);
  color: var(--text-subtle);
  cursor: not-allowed;
}

.luca-btn svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.luca-btn--md {
  height: 40px;
  padding: 0 20px;
}

.luca-btn--outline {
  border-color: var(--accent-icon);
  background: transparent;
  color: var(--accent-text);
}

.luca-btn--outline:hover {
  border-color: var(--accent-icon);
  background: var(--accent-soft);
  color: var(--on-accent-soft);
}

/* ── .luca-iconbtn: el IconButton de VOOST DS. De contorno (de serie): 1 px en --line y el texto en --text; al pasar por
   encima, el borde en el color del producto y el fondo --hover-strong. Cuadrado (radio 12), 36 px con el icono de 18;
   --sm, 32 con el de 16; --ghost, sin borde y en gris. ── */
.luca-iconbtn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}

.luca-iconbtn svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.luca-iconbtn:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--hover-strong);
  color: var(--on-accent-soft);
}

.luca-iconbtn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.luca-iconbtn:disabled {
  color: var(--text-subtle);
  cursor: not-allowed;
}

.luca-iconbtn--sm {
  width: 32px;
  height: 32px;
}

.luca-iconbtn--sm svg {
  width: 16px;
  height: 16px;
}

.luca-iconbtn--ghost {
  border-color: transparent;
  color: var(--text-muted);
}

.luca-iconbtn--ghost:hover:not(:disabled) {
  border-color: transparent;
}

/* ── .luca-side-card: las tarjetas de la columna lateral del prototipo (.side-card: Card de VOOST con su CardHeader):
   24 de relleno, radio 24, 1 px en --line, --surface-raised y sombra pequeña; la cabecera con el icono de 18, el título
   en Sora 600 16/24, la cifra en la pastilla de .side-count y «Limpiar» (.linkbtn) a la derecha. ── */
.luca-side-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font: 400 14px/20px var(--font-body);
}

.luca-side-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.luca-side-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text);
  font: 600 16px/24px var(--font-display);
  letter-spacing: -.005em;
}

.luca-side-card__title svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.luca-side-card__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--on-accent-soft);
  font: 400 12px/16px var(--font-mono);
}

.luca-side-card__count--off {
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.luca-side-card__clear {
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--accent-text);
  font: 600 13px/16px var(--font-body);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.luca-side-card__clear:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.luca-side-card__body {
  display: grid;
  gap: 14px;
}

/* ---- El panel de gestión (V7): las piezas de las listas del prototipo de VOOST ----
   ListCard (una Card de 24 de relleno con todo dentro, separado 16), Toolbar (buscador que crece, filtros de 180 y
   «Limpiar filtros»), Count (JetBrains Mono 12 gris), Table (la banda de cabecera --surface-sunken de 48 con los rótulos
   en versalitas, filas de 48 con su línea y la píldora --row-hover al pasar) y RowActions (botones de icono S, a la
   derecha). Son clases globales porque las usan las páginas y las tablas de LucaMVP.Web.Components, que no ven los
   componentes de este proyecto. */

.luca-list-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font: 400 14px/20px var(--font-body);
}

.luca-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.luca-toolbar__search {
  flex: 1 1 280px;
  min-width: 220px;
}

.luca-toolbar__filter {
  width: 180px;
}

/* Los desplegables de Luca piden 220 de ancho mínimo; en la barra, los 180 del prototipo. */
.luca-toolbar .luca-toolbar__filter .custom-select-container {
  min-width: 0;
}

.luca-count {
  margin: 0;
  color: var(--text-muted);
  font: 400 12px/16px var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.luca-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 32px 16px;
  color: var(--text-muted);
  text-align: center;
}

.luca-list-empty strong {
  color: var(--text);
  font: 600 16px/24px var(--font-display);
}

/* La tabla: la banda de la cabecera la pinta el envoltorio (como .voost-table-wrap), para que sea una sola forma
   redondeada aunque cada celda tenga su fondo; las celdas de la cabecera miden 52 con 4 debajo, y así la fila de
   encima nunca toca la banda. */
.luca-table-wrap {
  position: relative;
  min-width: 0;
}

.luca-table-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  pointer-events: none;
}

.luca-table {
  position: relative;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  color: var(--text);
  font: 400 14px/20px var(--font-body);
}

.luca-table th {
  height: 52px;
  box-sizing: border-box;
  padding: 0 12px 4px;
  color: var(--text-muted);
  font: 600 12px/16px var(--font-body);
  letter-spacing: .04em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.luca-table td {
  height: 48px;
  box-sizing: border-box;
  padding: 6px 12px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background-color .12s ease;
}

.luca-table tbody tr:last-child td {
  border-bottom-color: transparent;
}

.luca-table tbody tr:hover td {
  border-bottom-color: transparent;
  background: var(--row-hover);
}

.luca-table tbody tr[data-state="selected"] td {
  border-bottom-color: transparent;
  background: var(--accent-selected);
}

.luca-table tbody tr:hover td:first-child,
.luca-table tbody tr[data-state="selected"] td:first-child {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

.luca-table tbody tr:hover td:last-child,
.luca-table tbody tr[data-state="selected"] td:last-child {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

.luca-table .luca-td--strong {
  font-weight: 600;
}

.luca-table .luca-td--mono {
  font: 400 13px/20px var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.luca-table .luca-td--muted {
  color: var(--text-muted);
}

.luca-table .luca-td--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.luca-table .luca-td--actions {
  overflow: visible;
}

.luca-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

/* La persona en una celda: el avatar XS de VOOST (24, iniciales) y el nombre. */
.luca-person {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-width: 0;
  vertical-align: middle;
}

.luca-person > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.luca-avatar-xs {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--on-accent-soft);
  font: 600 10px/1 var(--font-body);
  letter-spacing: .02em;
}

/* La Tag de VOOST DS en su variante suave: 24 de alto, píldora, Inter 600 12/16, fondo y texto del tono. */
.luca-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  max-width: 100%;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font: 600 12px/16px var(--font-body);
  white-space: nowrap;
  vertical-align: middle;
}

.luca-tag--accent { background: var(--accent-soft); color: var(--on-accent-soft); }
.luca-tag--info { background: var(--info-soft); color: var(--info-on-soft); }
.luca-tag--positive { background: var(--positive-soft); color: var(--positive-on-soft); }
.luca-tag--warning { background: var(--warning-soft); color: var(--warning-on-soft); }
.luca-tag--negative { background: var(--negative-soft); color: var(--negative-on-soft); }

/* El Kpi de VOOST DS: Card de 20 de relleno; el rótulo con su icono arriba (Inter 600 14 gris), la cifra en Sora 800 32
   y, debajo, la línea de contexto (12 gris). El tono warning colorea el icono y la cifra. */
.luca-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.luca-kpi {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
  color: var(--text);
}

.luca-kpi__label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font: 600 14px/20px var(--font-body);
}

.luca-kpi__label svg {
  flex-shrink: 0;
  color: var(--accent-icon);
}

.luca-kpi__value {
  font: 800 32px/38px var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.luca-kpi__of {
  color: var(--text-muted);
  font-size: 16px;
}

.luca-kpi__delta {
  color: var(--text-muted);
  font: 400 12px/16px var(--font-body);
}

.luca-kpi--warning .luca-kpi__label svg,
.luca-kpi--warning .luca-kpi__value {
  color: var(--warning-text);
}

/* La paginación de las tablas (TablePagination): el rango en mono a la izquierda y, a la derecha, «1 / 3» entre dos
   botones de icono S. */
.luca-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 4px;
}

.luca-pager__range {
  color: var(--text-muted);
  font: 400 12px/16px var(--font-mono);
}

.luca-pager__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 12px/16px var(--font-mono);
}

/* El formulario de una ficha (form-card + FormFooter): una Card de 880 como mucho con los campos en dos columnas, y los
   botones debajo, a la derecha. */
.luca-form-card {
  max-width: 880px;
}

.luca-grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
}

.luca-form-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  max-width: 880px;
}

@media (max-width: 720px) {
  .luca-grid2 {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
  }
}

/* La acción de fila que borra o da de baja: el icono pasa a --negative-icon al pasar por encima. */
.luca-iconbtn--danger:hover:not(:disabled) {
  color: var(--negative-icon);
}

/* ---- Campos sueltos (V8): para los formularios que no usan TextInput (diálogos de campaña, campaña de diseño) ----
   El Field de VOOST: la etiqueta en Inter 12/16 a 6 px del campo; el Input en talla M (40, píldora, 1 px en --text,
   JetBrains Mono 14), enfocado en el color del producto; la ayuda en gris 12/16 y los errores y avisos en su tono. */
.luca-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.luca-field__label {
  color: var(--text);
  font: 400 12px/16px var(--font-body);
}

.luca-input {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 0 16px;
  border: var(--border-width) solid var(--text);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font: 400 14px/20px var(--font-mono);
}

.luca-input:focus {
  outline: none;
  border-color: var(--accent);
}

.luca-input:disabled {
  border-color: var(--line);
  background: var(--surface-sunken);
  color: var(--text-subtle);
}

.luca-help {
  color: var(--text-muted);
  font: 400 12px/16px var(--font-body);
}

.luca-error {
  color: var(--negative-text);
  font: 400 12px/16px var(--font-body);
}

.luca-warn {
  color: var(--warning-text);
  font: 400 12px/16px var(--font-body);
}

/* Un bloque de lectura dentro de un diálogo (el resumen de lo que se va a hacer): --surface-sunken, radio 12. */
.luca-note {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text);
  font: 400 13px/20px var(--font-body);
}

/* El botón destructivo de VOOST: contorno en negative-*, y el suave al pasar. */
.luca-btn--danger {
  border-color: var(--negative-icon);
  background: transparent;
  color: var(--negative-text);
}

.luca-btn--danger:hover:not(:disabled) {
  border-color: var(--negative-icon);
  background: var(--negative-soft);
  color: var(--negative-on-soft);
}

/* El cuerpo de un diálogo con formulario: los campos apilados a 16, alineados a la izquierda. */
.luca-dialog-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--text);
  font: 400 14px/20px var(--font-body);
  text-align: left;
}

/* Una tabla pequeña dentro de un diálogo: la cabecera en versalitas grises sobre --surface-sunken y filas con su línea. */
.luca-mini-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.luca-mini-table th {
  height: 36px;
  padding: 0 10px;
  background: var(--surface-sunken);
  color: var(--text-muted);
  font: 600 12px/16px var(--font-body);
  letter-spacing: .04em;
  text-align: left;
  text-transform: uppercase;
}

.luca-mini-table th:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.luca-mini-table th:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

.luca-mini-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}

.luca-mini-table tr:last-child td { border-bottom-color: transparent; }
.luca-mini-table__mono { font: 400 13px/20px var(--font-mono); }
.luca-mini-table__end { text-align: right; white-space: nowrap; }