/* =============================================================
   app.css — Estilos propios del panel
   -------------------------------------------------------------
   Aquí van los componentes que se repiten. Todo lo puntual sigue
   con clases de Tailwind en el HTML.
   ============================================================= */

:root {
  --marca: #EC5B21;
  /* Colores con significado económico. No se usan para decorar. */
  --positivo: #157F4B;   /* beneficio, cuadre correcto      */
  --negativo: #C02626;   /* pérdidas, costes, descuadres    */
  --aviso:    #B45309;   /* dato incompleto o por debajo    */
  --info:     #1D4ED8;   /* liquidaciones y operativa       */
  --impuesto: #6D28D9;   /* IVA                             */
  --neutro:   #6B7280;   /* secundario                      */
}
.dark {
  --positivo: #4ADE80;
  --negativo: #F87171;
  --aviso:    #FBBF24;
  --info:     #93C5FD;
  --impuesto: #C4B5FD;
  --neutro:   #9CA3AF;
}

/* Los importes se leen en columna: cifras de ancho fijo y a la derecha. */
.tabular-nums, .importe { font-variant-numeric: tabular-nums; }
.importe { text-align: right; white-space: nowrap; }

/* --- Significado económico ------------------------------------------- */
.financial-positive { color: var(--positivo); }
.financial-negative { color: var(--negativo); }
.financial-warning  { color: var(--aviso); }
.financial-info     { color: var(--info); }
.financial-tax      { color: var(--impuesto); }
/* Un dato que no se puede verificar no se pinta como si fuera cero. */
.financial-unknown  { color: var(--neutro); font-style: italic; }

/* --- Tarjeta de indicador -------------------------------------------- */
.financial-kpi {
  border: 1px solid rgb(232 227 221);
  background: #fff;
  border-radius: 10px;
  padding: 14px 16px;
}
.dark .financial-kpi { border-color: rgb(30 41 59); background: rgb(15 23 42); }
.financial-kpi__label {
  font-size: 12px; font-weight: 500; color: var(--neutro);
  display: flex; align-items: center; gap: 6px;
}
.financial-kpi__value {
  margin-top: 4px; font-size: 24px; font-weight: 600;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.financial-kpi__hint { margin-top: 2px; font-size: 12px; color: var(--neutro); }

/* --- Cuenta contable -------------------------------------------------- */
.reconciliation-card {
  border: 1px solid rgb(232 227 221);
  background: #fff; border-radius: 10px;
}
.dark .reconciliation-card { border-color: rgb(30 41 59); background: rgb(15 23 42); }
.accounting-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 7px 0; font-size: 14px;
}
.accounting-row + .accounting-row { border-top: 1px solid rgb(244 241 237); }
.dark .accounting-row + .accounting-row { border-top-color: rgb(30 41 59); }
.accounting-row--total {
  border-top: 2px solid rgb(214 207 198) !important;
  font-weight: 600; padding-top: 9px;
}
.dark .accounting-row--total { border-top-color: rgb(51 65 85) !important; }
.accounting-row__label { color: rgb(71 85 105); }
.dark .accounting-row__label { color: rgb(148 163 184); }
.accounting-row__note { display: block; font-size: 12px; color: var(--neutro); }

/* --- Distintivos de estado -------------------------------------------- */
.status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 999px; padding: 2px 9px;
  font-size: 12px; font-weight: 500; white-space: nowrap;
}
/* El estado nunca se distingue solo por el color: siempre lleva texto. */
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 999px;
                       background: currentColor; flex: none; }
.status-pill--ok    { background: #E8F5EE; color: #157F4B; }
.status-pill--aviso { background: #FEF3E2; color: #B45309; }
.status-pill--malo  { background: #FDECEC; color: #C02626; }
.status-pill--info  { background: #E8EFFD; color: #1D4ED8; }
.status-pill--gris  { background: #F1EFEC; color: #57534E; }
.dark .status-pill--ok    { background: #052E1B; color: #4ADE80; }
.dark .status-pill--aviso { background: #3A2606; color: #FBBF24; }
.dark .status-pill--malo  { background: #3B0D0D; color: #F87171; }
.dark .status-pill--info  { background: #0B1F45; color: #93C5FD; }
.dark .status-pill--gris  { background: #1E293B; color: #CBD5E1; }

/* --- Filtros activos --------------------------------------------------- */
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgb(232 227 221); border-radius: 999px;
  padding: 3px 10px; font-size: 12px; background: #fff;
}
.dark .filter-chip { border-color: rgb(51 65 85); background: rgb(30 41 59); }

/* --- Tablas de datos --------------------------------------------------- */
.data-table { width: 100%; text-align: left; font-size: 14px; border-collapse: collapse; }
.data-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: rgb(250 248 246);
  border-bottom: 1px solid rgb(232 227 221);
  padding: 9px 14px; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; color: var(--neutro);
  white-space: nowrap;
}
.dark .data-table thead th { background: rgb(15 23 42); border-bottom-color: rgb(30 41 59); }
.data-table tbody td { padding: 9px 14px; border-bottom: 1px solid rgb(244 241 237); }
.dark .data-table tbody td { border-bottom-color: rgb(30 41 59); }
.data-table tbody tr:hover { background: rgb(250 248 246); }
.dark .data-table tbody tr:hover { background: rgba(30, 41, 59, .5); }
/* Una fila que pierde dinero se ve sin tener que leer la cifra. */
.data-table tbody tr.fila-perdida { background: #FDF5F5; }
.dark .data-table tbody tr.fila-perdida { background: rgba(59, 13, 13, .35); }
.data-table tbody tr.fila-dudosa { background: #FEFAF2; }
.dark .data-table tbody tr.fila-dudosa { background: rgba(58, 38, 6, .3); }

/* --- Alertas ----------------------------------------------------------- */
.alert-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid rgb(244 241 237);
}
.dark .alert-item { border-bottom-color: rgb(30 41 59); }
.alert-item:last-child { border-bottom: 0; }
.alert-item__count {
  min-width: 34px; text-align: center; font-weight: 600;
  font-size: 16px; font-variant-numeric: tabular-nums;
}

/* --- Accesibilidad y movimiento ---------------------------------------- */
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
/* Objetivos táctiles cómodos en pantallas pequeñas. */
@media (pointer: coarse) {
  button, select, input[type="checkbox"], .toque { min-height: 40px; }
}
.vista { animation: aparecer .16s ease-out; }
.cajon { animation: entrar .18s ease-out; }
@keyframes aparecer { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes entrar { from { transform: translateX(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .vista, .cajon { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* Barra de desplazamiento discreta. */
#contenido::-webkit-scrollbar { width: 10px; height: 10px; }
#contenido::-webkit-scrollbar-thumb {
  background: rgb(214 207 198); border-radius: 9999px;
  border: 3px solid transparent; background-clip: content-box;
}
.dark #contenido::-webkit-scrollbar-thumb { background: rgb(51 65 85); background-clip: content-box; }
#contenido::-webkit-scrollbar-track { background: transparent; }

/* --- Barra de iconos con submenú flotante ----------------------------
   El menú vive colapsado: sólo iconos. Al pasar el ratón (o al llegar con
   el tabulador) se despliega hacia la derecha la lista de la sección.
   Todo con CSS: no hace falta JavaScript para abrir y cerrar. */
.rail {
  position: relative;
  z-index: 40;
  flex-direction: column;
  align-items: center;
  width: 56px;
  flex: 0 0 56px;
  background: #101828;
  padding: 10px 0;
}
.rail__marca {
  display: grid; place-items: center;
  width: 32px; height: 32px; margin-bottom: 14px;
  border-radius: 9px; background: var(--marca);
  color: #fff; font-weight: 700; font-size: 15px; text-decoration: none;
}
.rail__nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.rail__pie { display: flex; flex-direction: column; gap: 4px; }

.rail__item { position: relative; }
.rail__icono {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  color: #94A3B8;
  background: transparent;
  cursor: pointer;
  transition: background-color .12s, color .12s;
}
.rail__icono:hover { background: rgba(255,255,255,.09); color: #fff; }
.rail__item.is-activo .rail__icono { background: rgba(236,91,33,.22); color: #fff; }
/* Marca de sección activa, pegada al borde izquierdo */
.rail__item.is-activo::before {
  content: ""; position: absolute; left: -8px; top: 9px;
  width: 3px; height: 22px; border-radius: 0 3px 3px 0;
  background: var(--marca);
}
.rail__icono:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
/* Aviso de marketplace sin clave: punto naranja sobre el icono */
.rail__punto::after {
  content: ""; position: absolute; top: 7px; right: 7px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--marca); box-shadow: 0 0 0 2px #101828;
}

/* El panel flotante. El relleno izquierdo es zona muerta a propósito:
   mantiene el ratón «dentro» mientras se cruza el hueco hacia el menú. */
.rail__flotante {
  position: absolute; left: 100%; top: -6px;
  padding-left: 8px;
  opacity: 0; visibility: hidden; transform: translateX(-4px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
}
/* Lo que está al pie del rail (Configuración) se abre hacia arriba: hacia
   abajo se saldría de la ventana. */
.rail__pie .rail__flotante { top: auto; bottom: -6px; }
.rail__item:hover > .rail__flotante,
.rail__item:focus-within > .rail__flotante {
  opacity: 1; visibility: visible; transform: none;
}
.rail__panel {
  min-width: 216px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgb(232 227 221);
  box-shadow: 0 12px 28px -8px rgba(15,23,42,.28);
  padding: 8px 0;
}
.dark .rail__panel { background: rgb(15 23 42); border-color: rgb(30 41 59); }
.rail__titulo {
  padding: 4px 14px 8px;
  font-size: 10px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--neutro);
}
.rail__enlace {
  display: block; width: 100%; text-align: left;
  padding: 8px 14px; font-size: 13px; color: rgb(51 65 85);
  background: none; border: 0; cursor: pointer;
}
.dark .rail__enlace { color: rgb(203 213 225); }
.rail__enlace:hover { background: rgb(244 241 237); color: var(--marca); }
.dark .rail__enlace:hover { background: rgb(30 41 59); }
.rail__enlace[aria-current="page"] { color: var(--marca); font-weight: 600; }

/* Sección de un solo destino: en vez de lista, una etiqueta */
.rail__globo {
  border-radius: 7px; background: #101828; color: #fff;
  padding: 6px 10px; font-size: 12px; white-space: nowrap;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.5);
}

/* El mismo menú, desplegado, en el cajón de móvil */
.menu__titulo {
  padding: 6px 12px 4px;
  font-size: 10px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--neutro);
}
/* En pantalla táctil no hay «pasar el ratón»: el primer toque abre. */
.rail__item.is-abierto > .rail__flotante {
  opacity: 1; visibility: visible; transform: none;
}