:root {
  --brand: #ee8f8c;
  --accent: #c9524e;
  --accent-dark: #b03f3b;
  --gray-brand: #737476;
  --bg: #faf9f8;
  --card: #ffffff;
  --border: #e9e6e5;
  --soft: #fbefee;
  --text: #2e2d2d;
  --muted: #7a7876;
  --ok: #2f6b4f;
  --error: #b42318;

  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 32px 20px;
}

.hero {
  margin-bottom: 20px;
}

.eyebrow {
  color: var(--brand);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13px;
  margin: 0 0 8px;
}

h1,
h2,
h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}

h1 {
  font-size: 42px;
  line-height: 1.1;
  margin: 0 0 8px;
  padding-bottom: 14px;
  position: relative;
}

h1::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-top: 14px;
  border-radius: 2px;
  background: var(--brand);
}

h2 {
  font-size: 26px;
  margin: 0 0 16px;
}

h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 20px;
}

p {
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Navegación por pestañas
--------------------------------------------------------------------------- */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.tab-btn {
  background: #fff;
  color: var(--gray-brand);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease;
}

.tab-btn:hover {
  background: var(--soft);
  color: var(--text);
  border-color: var(--brand);
}

.tab-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.tab-btn.active:hover {
  background: var(--accent-dark);
  color: #fff;
}

/* Paneles: solo el activo se muestra */
.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
  animation: fadeIn 0.18s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------------------------
   Home: tarjetas de acceso a cada sección
--------------------------------------------------------------------------- */
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.home-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  margin: 0;
  cursor: pointer;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(46, 45, 45, 0.03),
    0 8px 24px rgba(46, 45, 45, 0.04);
  transition: transform 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.home-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 2px 4px rgba(46, 45, 45, 0.05),
    0 12px 30px rgba(46, 45, 45, 0.08);
}

.home-num {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 700;
  color: var(--brand);
  line-height: 1;
}

.home-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}

.home-desc {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

.home-card--feature {
  border-color: var(--brand);
  background: var(--soft);
}

.home-card--feature .home-num {
  color: var(--accent);
}

/* ---------------------------------------------------------------------------
   Dashboard de costos
--------------------------------------------------------------------------- */
.dash-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dash-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Buscador de cirugía a lo ancho: etiqueta en línea + caja que ocupa el resto.
   flex-direction:row porque los <label> de la app apilan en columna por defecto. */
.dash-search {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex: 1 1 320px;
  margin-bottom: 0;
}

.dash-search > span {
  font-weight: 600;
  white-space: nowrap;
  color: var(--text);
}

.dash-search input {
  flex: 1;
  margin: 0;
}

.dash-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.dash-variante-nombre {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  text-transform: capitalize;
}

.dash-total-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

/* Encabezado del desglose: nombre → costo total al lado → ícono de impresión al final. */
.dash-summary--desglose {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.dash-desglose-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.dash-desglose-head .dash-variante-nombre { margin: 0; }

.dash-total-inline {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.dash-print-btn {
  margin-left: auto;
  align-self: center;
}

.dash-desglose-sub { margin: 4px 0 0; }

.dash-total-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-brand);
}

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  margin: 12px 0 4px;
}

/* Grilla de tarjetas de variantes (una por cirugía con su último costo). */
.dash-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin: 12px 0 8px;
}

.dash-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Semáforo de "% precios actualizados" en la esquina de la tarjeta (% en tooltip).
   Anillo sutil + sombra para que los colores claros (amarillo) se lean bien. */
.dash-dot {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.28);
}
.dash-card-nombre { padding-right: 24px; }

.dash-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 8px 20px rgba(46, 45, 45, 0.07);
}

.dash-card-nombre {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted, #555);
}

.dash-card-total {
  font-size: 26px;
  font-weight: 800;
  color: var(--ok);
  font-variant-numeric: tabular-nums;
}

.dash-card-fecha {
  font-size: 12px;
  color: var(--muted, #777);
}

/* Receta existente sin costo generado (ej. recién clonada). */
.dash-card--sincosto {
  border-style: dashed;
  opacity: 0.85;
}

.dash-card-total--vacio {
  font-size: 18px;
  font-weight: 700;
  color: var(--muted, #999);
}

.dash-metric {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.dash-metric .dash-dot { top: 12px; right: 12px; }
.dash-metric .dash-metric-label { padding-right: 20px; }

.dash-metric-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-brand);
}

.dash-metric-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

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

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(46, 45, 45, 0.03),
    0 8px 24px rgba(46, 45, 45, 0.04);
  margin-bottom: 18px;
}

.card.wide {
  grid-column: span 2;
}

button {
  background: var(--accent);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  margin-right: 6px;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    color 0.18s ease, box-shadow 0.18s ease;
}

button:hover {
  background: var(--accent-dark);
}

button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(238, 143, 140, 0.45);
}

button.secondary {
  background: #fff;
  color: var(--gray-brand);
  border: 1px solid var(--gray-brand);
}

button.secondary:hover {
  background: var(--soft);
  color: var(--text);
  border-color: var(--text);
}

/* Links con pinta de botón secundario (ej. "Ver original" en validación). */
a.secondary {
  display: inline-block;
  background: #fff;
  color: var(--gray-brand);
  border: 1px solid var(--gray-brand);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

a.secondary:hover {
  background: var(--soft);
  color: var(--text);
  border-color: var(--text);
}

button.danger {
  background: var(--error);
  color: #fff;
  border-color: transparent;
}

button.danger:hover {
  background: var(--error);
  filter: brightness(0.93);
}

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}

label.checkbox {
  flex-direction: row;
  align-items: center;
  font-weight: 600;
  gap: 8px;
}

input,
select {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text);
  background: #fff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(238, 143, 140, 0.28);
}

pre {
  background: #2e2d2d;
  color: #fbefee;
  padding: 14px;
  border-radius: 8px;
  overflow-x: auto;
  min-height: 48px;
  white-space: pre-wrap;
  font-size: 13px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

/* Buscador en vivo (filtra tablas de insumos / líneas de receta). */
.buscador {
  max-width: 460px;
  margin-top: 6px;
}

.buscador input {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239a8f8f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 12px center;
  padding-left: 38px;
}

.table-wrap {
  overflow: auto;
  max-height: 70vh;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
}

/* Encabezado fijo: al scrollear con la rueda, el thead queda pegado arriba.
   Fondo oscuro con texto blanco (el color de texto lo ponen las reglas thead th
   de más abajo); antes usaba var(--card) blanco y el texto blanco quedaba
   invisible (blanco sobre blanco). */
.table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #3f4654;
  box-shadow: inset 0 -1px 0 var(--border);
}

/* Igual dentro de las result-card: encabezado oscuro para que se lea. */
.result-card .table-wrap thead th {
  background: #3f4654;
}

td.num,
th.num {
  text-align: right;
}

th,
td {
  border-bottom: 1px solid var(--border);
  padding: 8px 9px;
  text-align: left;
  font-size: 13px;
}

th {
  color: var(--gray-brand);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  white-space: nowrap;
}

/* Botones de acción dentro de una fila: lado a lado, compactos, sin envolver.
   Aprovecha el ancho horizontal de la columna de acción. */
.row-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
}

.row-actions button {
  margin: 0;
  padding: 6px 10px;
  font-size: 12px;
  white-space: nowrap;
}

td {
  font-variant-numeric: tabular-nums;
}

tbody tr {
  transition: background-color 0.12s ease;
}

/* Al pasar el mouse por una fila, gris apenas más oscuro para guiar la lectura. */
tbody tr:hover {
  background: #eef0f2;
}

/* Columna Comentario ocultable (toggle "Comentarios") y acción alineada a la
   derecha (íconos siempre a la derecha). */
#recetaResult.comentarios-ocultos .col-comentario { display: none; }
#recetaResult .col-comentario {
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#recetaResult td.col-accion { text-align: right; }
#recetaResult .row-actions { justify-content: flex-end; }

.result-card {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  background: var(--soft);
}

.total {
  font-size: 28px;
  font-weight: 800;
  color: var(--ok);
  font-variant-numeric: tabular-nums;
}

.error {
  color: var(--error);
  font-weight: 700;
}

details {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--soft);
  padding: 12px;
  margin: 12px 0;
}

summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
}

/* Bloques dentro de "Consultar cirugía" (Duración / Insumos). */
.sub-block { margin: 18px 0; }
.sub-block > h3 { margin: 0 0 10px; }

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

  .card.wide {
    grid-column: span 1;
  }
}

.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}

.hint {
  font-size: 13px;
  color: var(--muted);
  margin-top: -4px;
  margin-bottom: 10px;
}

/* ---------------------------------------------------------------------------
   Vista por grupo de componente (MP / CIP / MOD) en Gestionar receta
--------------------------------------------------------------------------- */
.group-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 6px;
}

.group-btn {
  background: #fff;
  color: var(--gray-brand);
  border: 1px solid var(--gray-brand);
  border-radius: 999px;
  padding: 7px 20px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.group-btn:hover {
  background: var(--soft);
  color: var(--text);
}

.group-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.group-btn.active:hover {
  background: var(--accent-dark);
  color: #fff;
}

/* Pestañas segmentadas (Crear / Consultar): la barra reusa .group-tabs y
   .group-btn; cada panel se muestra/oculta con [hidden]. */
.seg-panels { margin-top: 6px; }
.seg-panels > [data-seg-panel] { margin-top: 8px; }

/* Encabezado compacto de "Consultar cirugía": título + buscador + botón en fila. */
.consultar-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.consultar-head h2 { margin: 0; white-space: nowrap; }
.consultar-head h2::after { display: none; }
.consultar-head input { flex: 1; margin: 0; }
@media (max-width: 640px) {
  .consultar-head { flex-wrap: wrap; }
  .consultar-head input { flex: 1 1 100%; order: 3; }
}

/* Barra sobre la tabla de insumos: pestañas de grupo a la izquierda, botón
   "Agregar insumo" a la derecha. */
.insumos-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 8px;
}
.insumos-bar .group-tabs { margin: 0; }
.insumos-bar-der { display: flex; align-items: center; gap: 14px; }
.toggle-comentarios {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  font-size: 13px; font-weight: 600; color: var(--gray-brand); white-space: nowrap; cursor: pointer;
}
.toggle-comentarios input { width: auto; margin: 0; }
/* La nota ocupa todo el ancho de la grilla del formulario. */
.campo-ancho { grid-column: 1 / -1; }
.campo-ancho textarea { width: 100%; resize: vertical; }
.insumos-add { white-space: nowrap; }
.insumos-add .nav-ic { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }

/* Tabla de insumos más compacta: menos padding y buscador chico. */
.result-card--compacta { padding: 14px; }
.result-card--compacta .buscador { margin: 0 0 10px; }
.hint--pie { margin-top: 10px; }

/* Formulario de alta de insumo, encima de la tabla. */
.agregar-insumo {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--soft);
  padding: 14px;
  margin-bottom: 12px;
}

/* Subtítulo de cada tabla dentro de la vista "Todos". */
.grupo-sub {
  margin: 16px 0 6px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-brand);
}

/* Contador de coincidencias del buscador junto al nombre del grupo. */
.group-count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Botón "?" de ayuda de regla */
.regla-help {
  background: #fff;
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.regla-help:hover {
  background: var(--accent);
  color: #fff;
}

.regla-popover {
  position: absolute;
  z-index: 60;
  max-width: 300px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(46, 45, 45, 0.14);
  display: none;
}

.regla-popover.visible {
  display: block;
}

.regla-popover strong {
  color: var(--text);
  font-size: 14px;
}

.regla-formula {
  font-family: "Courier New", monospace;
  background: var(--soft);
  border-radius: 6px;
  padding: 6px 8px;
  margin: 8px 0;
  color: var(--text);
  font-size: 13px;
}

.regla-tipos {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

/* Tarjetas del dashboard clickeables */
.dash-metric--link {
  cursor: pointer;
  text-align: left;
  align-items: flex-start;
  transition: transform 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.dash-metric--link:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 8px 20px rgba(46, 45, 45, 0.07);
}

.hidden {
  display: none;
}

.inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.inline-check input {
  width: auto;
}

/* Más aire entre los botones de acción y el texto de ayuda que le sigue. */
.hint-espaciado {
  margin-top: 22px;
}

/* Enlace con aspecto de botón secundario (descargas Excel). */
.btn-link {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink, #1a1a1a);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.btn-link:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
}

/* Panel de edición de línea de receta. */
.edit-panel {
  margin-top: 16px;
  border: 1px solid var(--brand, var(--border));
  border-radius: 12px;
  padding: 16px;
  background: #fff;
}

.edit-panel h4 {
  margin: 0 0 12px;
}

/* Celda de fórmula: monoespaciada, precisa, para auditar el cálculo. */
.formula-cell {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12px;
  white-space: nowrap;
  color: #444;
}

/* Costo detallado: subtotales por grupo y fila de total. */
.grupo-row td {
  font-weight: 600;
  background: rgba(0, 0, 0, 0.03);
}

.total-row td {
  font-weight: 800;
  background: rgba(0, 0, 0, 0.06);
  font-size: 15px;
}

/* ===================== Alarma de precios (Paso 1) ===================== */

/* Banner de la Home */
.alarma-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
  background: var(--soft);
}

.alarma-banner--rojo {
  background: #fdecea;
  border-color: #f3b9b3;
}

.alarma-banner--amarillo {
  background: #fdf6e3;
  border-color: #eddca8;
}

.alarma-banner-icono {
  font-size: 22px;
  line-height: 1;
}

.alarma-banner-texto {
  flex: 1;
  font-size: 14px;
  color: var(--text);
}

.alarma-banner-btn {
  flex-shrink: 0;
}

/* Chips de estado */
.alarma-resumen {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 14px;
}

.alarma-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
}

.alarma--vencido {
  background: #fdecea;
  color: #b42318;
  border-color: #f3b9b3;
}

.alarma--por-vencer {
  background: #fdf6e3;
  color: #8a6d1a;
  border-color: #eddca8;
}

.alarma--sin-precio {
  background: #eef0f2;
  color: #4a4d52;
  border-color: #d6d9dd;
}

.alarma--ok {
  background: #e9f4ee;
  color: var(--ok);
  border-color: #bfe0cd;
}

/* Chips de la tabla de insumos por cirugía que además filtran al clic. */
.chip-filtro {
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}
.chip-filtro.activo {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}
.insumos-grupos {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
}

/* Estado de pago de una factura (mismo estilo de chip que las alarmas). */
.estado--pagada {
  background: #e9f4ee;
  color: var(--ok);
  border-color: #bfe0cd;
}

.estado--pendiente {
  background: #fdf6e3;
  color: #8a6d1a;
  border-color: #eddca8;
}

/* Panel de filtros (facturas y otras listas). */
.filtros-panel {
  align-items: end;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--soft);
  margin-top: 8px;
}

.filtros-acciones {
  display: flex;
  align-items: end;
  /* Los <label> del grid traen margin-bottom:10px; sin el mismo margen, el botón
     "Limpiar filtros" cae 10px por debajo de la línea de los inputs. */
  margin-bottom: 10px;
}

.filtros-acciones button {
  margin: 0;
}

/* Contenedor de resultados que ahora muestra tablas (antes eran <pre>). */
.result-box {
  margin-top: 8px;
  min-height: 24px;
}

/* Tabla de revisión de sueldos asalariados: encabezado oscuro con texto blanco
   (si no, queda blanco sobre blanco e invisible), y anchos cómodos. */
.result-box table.tabla-sueldos th {
  background: #3f4654;
  color: #fff;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}
.tabla-sueldos { width: 100%; }
.tabla-sueldos td:nth-child(4),   /* empleado (abreviado) */
.tabla-sueldos td:nth-child(6) {  /* Costeo */
  white-space: nowrap;
}
.tabla-sueldos .det-valor {
  width: 100%;
  min-width: 120px;
}
.tabla-sueldos .det-insumo {
  width: 100%;
  min-width: 170px;
}

/* Encabezado REAL (thead) dentro de result-box: blanco sobre el fondo oscuro.
   La regla .result-box table th (más abajo) es solo para las tablas verticales
   clave/valor (th en tbody); sin este override le pisaba el color y quedaba
   texto oscuro sobre azul, ilegible. */
.result-box table thead th {
  color: #fff;
  text-transform: none;
  width: auto;
}

/* Dropzone de subida (Excel del estudio, PDF de facturas): recuadro punteado,
   clic o arrastrar. */
.dropzone {
  border: 2px dashed var(--brand);
  border-radius: 16px;
  padding: 28px 20px;
  margin-top: 8px;
  text-align: center;
  cursor: pointer;
  background: var(--card, #fff);
  transition: background .15s ease, border-color .15s ease;
  max-width: 520px;
}
.dropzone:hover,
.dropzone.dragover {
  background: var(--soft, #f7f8fa);
}
.dropzone.dragover,
.dropzone.has-file {
  border-style: solid;
}
.dropzone-ic {
  width: 44px;
  height: 44px;
  color: var(--brand);
  margin-bottom: 6px;
}
.dropzone-text {
  margin: 0;
  font-weight: 700;
  font-style: italic;
  color: var(--brand);
}
.dropzone-file {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* Tabla vertical clave/valor (parámetros, precio vigente): la 1ª col es
   etiqueta, sin transformar a mayúsculas y con ancho acotado. */
.result-box table th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--text);
  width: 42%;
}

.alarma-ok-card h3 {
  color: var(--ok);
}

/* Botón-enlace dentro de la tabla de alarmas */
.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-size: 13px;
  text-decoration: underline;
}

.link-btn:hover {
  color: var(--accent-dark);
}

/* =========================================================================
   REDISENO CEO Costos  (bloque agregado - sobrescribe estilos previos)
   ========================================================================= */
:root {
  --brand: #e53f3a;
  --accent: #e53f3a;
  --accent-dark: #c3302a;
  --soft: #fdeceb;
  --bg: #f3f4f6;
  --side: #dd3a32;
  --side-hover: #c73129;
  --side-active: #b02b24;
  --ink: #1f2430;
  --muted: #6b7280;
  --line: #e9ebf0;
  --panel: #ffffff;
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body {
  background: var(--bg);
  font-family: var(--font-sans);
  color: var(--ink);
}

/* ---- Layout general ---- */
.layout { display: flex; align-items: stretch; min-height: 100vh; }
.main-area { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---- Sidebar ---- */
.sidebar {
  width: 250px; flex-shrink: 0; background: var(--side); color: #fff;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.sidebar-brand {
  background: #fff; margin: 14px; border-radius: 14px; padding: 16px 16px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.sidebar-brand img { width: 100%; max-width: 172px; height: auto; display: block; }
.sidebar-brand-sub {
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand);
}
.sidebar-nav {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px; flex: 1; overflow-y: auto;
}
.sidebar-foot {
  padding: 16px 20px; font-size: 11px; line-height: 1.55;
  color: rgba(255, 255, 255, .85); border-top: 1px solid rgba(255, 255, 255, .18);
}
.sidebar-foot strong { color: #fff; font-weight: 700; }

/* Items del menu (reemplazan las pastillas .tab-btn) */
.sidebar-nav .tab-btn {
  all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 11px 14px; border-radius: 10px; color: rgba(255, 255, 255, .92);
  font-family: var(--font-sans); font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background-color .12s ease;
}
.sidebar-nav .tab-btn:hover { background: var(--side-hover); color: #fff; }
.sidebar-nav .tab-btn.active { background: var(--side-active); color: #fff; }
.nav-ic { width: 19px; height: 19px; flex-shrink: 0; }

/* ---- Topbar ---- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 30px; background: var(--panel); border-bottom: 1px solid var(--line);
  flex-wrap: wrap; position: sticky; top: 0; z-index: 5;
}
.topbar-crumb {
  font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #9aa1ac;
}
.topbar-title h1 {
  font-family: var(--font-sans); font-size: 23px; font-weight: 800;
  margin: 3px 0 0; padding: 0; color: var(--ink); text-transform: capitalize;
}
.topbar-title h1::after { display: none; }
.topbar-user { position: relative; display: flex; align-items: center; }
.topbar-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px;
  border: none; cursor: pointer; padding: 0; transition: filter .14s ease;
  /* Corrido a la izquierda del borde para que el menú, centrado bajo la letra,
     no se salga del viewport por la derecha. */
  margin-right: 48px;
}
.topbar-avatar:hover { filter: brightness(1.08); }
.topbar-avatar:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Menú desplegable de cuenta, centrado respecto al avatar. */
.user-menu {
  position: absolute; top: calc(100% + 8px); left: 19px; transform: translateX(-50%); z-index: 20;
  min-width: 160px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 12px 30px rgba(31, 36, 48, .16);
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.user-menu[hidden] { display: none; }
.user-menu-nombre {
  padding: 8px 12px 10px; font-size: 13px; font-weight: 700; color: var(--ink);
  border-bottom: 1px solid var(--line); margin-bottom: 4px; text-transform: capitalize;
}
.user-menu-item {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  padding: 9px 12px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--ink); transition: background .12s ease;
}
.user-menu-item:hover { background: var(--surface, #f3f4f6); }

/* ---- Contenedor de contenido ---- */
.main-area .container { max-width: none; margin: 0; padding: 30px; }

/* ---- Tarjetas de resumen (KPIs) ---- */
.kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-bottom: 30px; }
.kpi {
  all: unset; box-sizing: border-box; min-width: 0; cursor: pointer; background: var(--c); color: #fff;
  border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 10px 24px rgba(31, 36, 48, .10); transition: transform .14s ease, box-shadow .14s ease;
}
.kpi:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(31, 36, 48, .17); }
.kpi:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-ic {
  width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, .20);
  display: flex; align-items: center; justify-content: center;
}
.kpi-ic svg { width: 22px; height: 22px; }
.kpi-num {
  font-family: var(--font-sans); font-size: 29px; font-weight: 800; line-height: 1;
  letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.kpi-num--sm { font-size: 20px; }
.kpi-lbl { font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.kpi-lbl small { display: block; font-weight: 500; opacity: .85; font-size: 12px; margin-top: 3px; }

/* ---- Titulo de seccion en Home ---- */
.home-section-title {
  font-family: var(--font-sans); font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em; color: #9aa1ac; margin: 0 0 16px; padding: 0;
}
.home-section-title::after { display: none; }

/* ---- Accesos rapidos (home-grid) reskin neutro ---- */
.home-grid { gap: 18px; }
.home-card { border-radius: 14px; box-shadow: 0 1px 2px rgba(31, 36, 48, .04), 0 6px 16px rgba(31, 36, 48, .05); }
.home-card:hover { border-color: var(--brand); }
.home-num, .home-title { font-family: var(--font-sans); }
.home-num { color: var(--brand); font-weight: 800; }
.home-card--feature { background: var(--soft); border-color: var(--brand); }

/* ---- Panels / cards ---- */
.card, .result-card {
  border-radius: 16px; border: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(31, 36, 48, .06); padding: 26px;
}
h1, h2, h3 { font-family: var(--font-sans); }
h2 { font-size: 20px; font-weight: 800; }
h1::after, h2::after, h3::after { display: none; }

/* ---- Tablas elegantes con encabezado salmon ---- */
table { border-collapse: collapse; width: 100%; }
thead th {
  background: var(--brand); color: #fff; font-weight: 600; font-size: 12.5px;
  letter-spacing: .02em; text-align: left; padding: 12px 18px; border: none;
}
tbody td { padding: 13px 18px; border-bottom: 1px solid var(--line); }
tbody tr:hover { background: #fbfbfc; }
tbody tr:last-child td { border-bottom: none; }

/* ---- Responsive ---- */
@media (max-width: 1100px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; }
  .sidebar-nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar-nav .tab-btn { width: auto; }
  .kpi-row { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   RONDA 1 - Estetica sobria (de-pink, tablas legibles, hovers sutiles)
   ========================================================================= */
:root { --soft: #f2f3f5; }

/* Paneles: fondo blanco/neutro, sin rosa */
.card { background: #fff; }
.result-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.home-card--feature { background: #f7f8fa; border-color: var(--line); }

/* Callout sobrio (ej. "Precios al dia"): gris con borde izquierdo mas oscuro */
.alarma-ok-card, .result-card.alarma-ok-card {
  background: #f6f7f9; border: 1px solid var(--line);
  border-left: 4px solid #9aa1ac; border-radius: 10px;
}

/* Banner de alarma del inicio: compacto, sobrio, con borde izquierdo */
.alarma-banner { background: #f6f7f9; border: 1px solid var(--line); border-left: 4px solid var(--brand); }
.alarma-banner--rojo { background: #fdf2f1; border-left-color: #c0302a; }
.alarma-banner--amarillo { background: #fbf7ef; border-left-color: #e0912f; }

/* Tablas: encabezado gris oscuro (siempre legible), filas con lineas visibles */
thead th,
.result-card .table-wrap thead th {
  background: #3f4654; color: #fff; font-weight: 600; letter-spacing: .02em;
}
tbody td { border-bottom: 1px solid #dfe2e7; }
tbody tr:hover { background: #f6f7f9; }

/* Tarjetas de variante (Dashboard de costos): texto gris, sombra, hover sutil */
.dash-card { background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(31, 36, 48, .05); }
.dash-card-nombre { color: #6b7280; }
.dash-card-total { color: #1f2430; }
.dash-card-fecha { color: #9aa1ac; }
.dash-card:hover {
  transform: translateY(-2px); border-color: #c7ccd4; background: #fbfbfc;
  box-shadow: 0 6px 16px rgba(31, 36, 48, .09);
}

/* Hover sutil de tarjetas KPI: apenas mas oscuras, sin fill oscuro */
.kpi:hover { transform: translateY(-3px); filter: brightness(.96); box-shadow: 0 14px 30px rgba(31, 36, 48, .17); }

/* Botones de grupo (MP/CIP/MOD): hover sobrio */
.group-btn:hover { background: #f2f3f5; }

/* Panel "Items para revision" en el Inicio */
.revision-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.revision-head h2 { margin: 0; }
.empty-state { color: #6b7280; font-size: 14px; padding: 6px 2px; line-height: 1.55; }
.link-accion { font-size: 13px; font-weight: 700; color: var(--brand); text-decoration: none; cursor: pointer; white-space: nowrap; }
.link-accion:hover { text-decoration: underline; }

/* =========================================================================
   RONDA 2 - Ajustes finales de sobriedad (hovers sutiles, totales en gris,
   panel de precios compacto, encabezados legibles). Este bloque va último:
   sobrescribe cualquier regla previa por orden de cascada.
   ========================================================================= */

/* ---- Hover de tarjetas: nunca fill oscuro. Solo un borde gris algo más
   marcado + un fondo apenas más oscuro que el actual, con sombra suave. ---- */
.home-card:hover {
  transform: translateY(-2px);
  border-color: #c7ccd4;
  background: #f7f8fa;
  box-shadow: 0 6px 16px rgba(31, 36, 48, .09);
}
.dash-card:hover {
  transform: translateY(-2px);
  border-color: #b9bfc9;
  background: #eef0f3;
  box-shadow: 0 6px 16px rgba(31, 36, 48, .10);
}
/* KPIs (tiles de color): que solo se eleven, sin oscurecerse. */
.kpi:hover {
  transform: translateY(-3px);
  filter: none;
  box-shadow: 0 16px 32px rgba(31, 36, 48, .18);
}
/* Tarjetas del desglose por componente: mismo criterio sobrio. */
.dash-metric--link:hover {
  transform: translateY(-2px);
  border-color: #b9bfc9;
  background: #eef0f3;
  box-shadow: 0 6px 16px rgba(31, 36, 48, .10);
}

/* ---- Cifras de costo en GRIS oscuro (no verde) ---- */
.total,
.dash-card-total,
.dash-metric-value,
.dash-total-box .total {
  color: #1f2430;
}
.dash-card-total--vacio { color: #9aa1ac; }

/* ---- Encabezados de sección siempre legibles (evita el "invisible") ---- */
.result-card h2,
.result-card h3,
.dash-variante-nombre { color: #1f2430; }

/* ---- Tablas: sin fondo de color, líneas horizontales bien visibles ---- */
.result-card { background: #fff; }
thead th,
.result-card .table-wrap thead th {
  background: #3f4654;
  color: #fff;
  font-weight: 600;
}
tbody td { border-bottom: 1px solid #d7dbe2; }
tbody tr:hover { background: #e7e9ee; }

/* ---- Panel "Precios para actualizar" del Dashboard: rectángulo gris sobrio,
   borde izquierdo gris más oscuro, compacto (ocupa poco). Sin recuadros de
   color de fondo. ---- */
#alarmaPanel { margin-top: 18px; }
#alarmaPanel .result-card {
  background: #f6f7f9;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: none;
}
#alarmaPanel .result-card h3 { font-size: 16px; margin: 0 0 4px; }
#alarmaPanel .result-card .hint { margin-bottom: 8px; }
#alarmaPanel .alarma-resumen { margin: 6px 0 10px; }

/* Resultado de la ingesta desde PDF */
.ingesta-resultado {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border, #d8dee4);
  border-radius: 8px;
  background: var(--surface-2, #f6f8fa);
}
.ingesta-resultado p { margin: 0.4rem 0; }
.ingesta-badge {
  display: inline-block;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: #e7edf3;
  color: #24313f;
  margin-bottom: 0.4rem;
}
.ingesta-badge.ok { background: #dcf1e6; color: #146c43; }
.ingesta-badge.warn { background: #fbeecc; color: #8a5a00; }

.ingesta-resultado .ok { color: #146c43; font-weight: 600; }

/* --- Validación de facturas pendientes (Fase 4) --- */
.val-factura {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--border, #d8dee4);
  border-radius: 10px;
  background: var(--surface-2, #f6f8fa);
}
.val-factura-head { margin-bottom: 0.6rem; }
.val-factura-head strong { font-size: 1.02rem; }
/* Cada ítem ocupa DOS filas: arriba los campos crudos (el ítem del proveedor y
   el código se llevan el ancho que sobra), y abajo, a lo ancho, el mapeo. Así
   no se desperdicia espacio en columnas angostas y sobra a la derecha. Cada
   ítem es su propio <tbody class="val-item"> con las dos <tr>. */
.val-tabla-wrap { overflow-x: auto; }
/* table-layout: fixed => las columnas respetan los % de abajo sin importar el
   contenido; así el ítem del proveedor se lleva un tercio del ancho y las
   numéricas quedan justas (antes el auto-layout repartía el espacio parejo y
   sobraba en las columnitas). */
.val-tabla { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.9rem; }
.val-tabla th, .val-tabla td {
  text-align: left;
  padding: 0.45rem 0.4rem;
  vertical-align: middle;
  /* table-layout:fixed => lo que no entra en la columna se recorta en vez de
     ensanchar la tabla (los títulos largos como "Costeo/unidad (ARS)" quedan
     en varias líneas; las celdas de datos no desbordan). */
  overflow: hidden;
}
.val-tabla thead th { white-space: normal; word-break: break-word; }
/* El color de texto lo hereda de la regla global `thead th` (blanco sobre el
   fondo oscuro #3f4654), para que el encabezado sea legible como el resto. */
.val-tabla thead th {
  font-weight: 600;
  border-bottom: 2px solid var(--border, #d8dee4);
}
/* Reparto de ancho: el ítem del proveedor manda; el resto ajustado. */
.val-tabla thead th:nth-child(1) { width: 34%; }  /* Ítem del proveedor */
.val-tabla thead th:nth-child(2) { width: 12%; }  /* Cód. */
.val-tabla thead th:nth-child(3) { width: 8%; }   /* Cant. */
.val-tabla thead th:nth-child(4) { width: 8%; }   /* Present. */
.val-tabla thead th:nth-child(5) { width: 12%; }  /* P. envase */
.val-tabla thead th:nth-child(6) { width: 7%; }   /* IVA % */
.val-tabla thead th:nth-child(7) { width: 8%; }   /* IVA $ */
.val-tabla thead th:nth-child(8) { width: 11%; }  /* Costeo/unidad */
/* min-width:0 es clave: el <input> trae un ancho intrínseco (~20ch) como piso y
   sin esto no baja al ancho de las columnas angostas => desbordaba a la derecha. */
.val-tabla .val-item-datos input { width: 100%; min-width: 0; box-sizing: border-box; }

/* Cada ítem se lee como un bloque: la fila de datos (blanca) + la de mapeo
   (gris tenue), y una línea gruesa abajo que lo cierra y lo separa del
   siguiente. El espacio de arriba en la fila de datos abre aire entre ítems. */
.val-tabla .val-item-datos td { border-bottom: none; padding-top: 0.6rem; padding-bottom: 0.25rem; }
.val-tabla .val-item-mapeo-row td {
  background: #eef1f5;
  border-bottom: 2px solid #c7cede;
  padding-top: 0.35rem;
  padding-bottom: 0.6rem;
}
.val-costeo { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Mapeo en línea (una franja horizontal), no en columna. */
.val-mapeo { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.val-mapeo select, .val-mapeo input { max-width: 100%; }
.val-mapeo .val-descripcion { min-width: 16rem; flex: 1 1 16rem; }
.val-mapeo-label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; color: var(--muted, #57606a);
}
.val-confirmar, .val-nuevo { display: flex; gap: 0.4rem; flex-wrap: wrap; flex: 1 1 18rem; }
.val-aprender-row { font-size: 0.82rem; color: var(--muted, #57606a); }
.val-item-guardar { margin-left: auto; white-space: nowrap; }
.val-tabla + .actions { margin-top: 0.8rem; }
.val-mapeo .val-insumo { min-width: 16rem; flex: 1 1 16rem; }

/* Cabecera editable de la factura (fecha / moneda / TC). */
.val-cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.9rem;
  align-items: flex-end;
  margin: 0.6rem 0 0.8rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border, #d8dee4);
  border-radius: 6px;
}
.val-cabecera label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.82rem;
  color: var(--muted, #57606a);
}
.val-cabecera .cab-tc { width: 8rem; }
.val-cabecera .cab-numero { width: 9rem; }
.val-cabecera .cab-letra { width: 3.5rem; }
.val-cabecera .cab-drive-line { flex-basis: 100%; font-size: 0.85rem; }
.val-cabecera .cab-drive { font-weight: 600; }
.val-cabecera .cab-proveedor { max-width: 22rem; }
.val-cabecera .cab-prov-label { flex-basis: 100%; }
.val-cabecera .cab-res.error,
.val-cabecera .cab-prov-res.error { color: var(--error, #c0392b); }

/* Form para agregar a mano un ítem que la extracción no capturó. */
.agregar-item-form {
  margin-top: 0.8rem;
  padding: 0.8rem;
  border: 1px dashed var(--borde, #ccc);
  border-radius: 6px;
}
.agregar-item-campos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}
.agregar-item-campos .add-desc { flex: 1 1 14rem; min-width: 10rem; }
.agregar-item-campos input { padding: 0.35rem 0.5rem; }
.add-item-res { display: block; margin-top: 0.5rem; }
.add-item-res.error { color: var(--error, #c0392b); }

/* --- Edición del mapping (CRUD) --- */
.val-factura-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.editor-factura { margin-top: 1rem; }
.val-item-guardar { white-space: nowrap; }
.val-item-res { display: block; margin-top: 0.3rem; font-size: 0.82rem; }
.acciones-factura { white-space: nowrap; }
.acciones-factura .btn-sm { margin-right: 0.35rem; }
.btn-sm { padding: 0.25rem 0.6rem; font-size: 0.82rem; }
.btn-danger {
  background: #b42318;
  color: #fff;
  border: 1px solid #b42318;
  border-radius: 8px;
  cursor: pointer;
}
.btn-danger:hover { background: #912018; border-color: #912018; }

/* --- Tabla compacta de facturas cargadas (una fila por factura) --- */
/* No usar display:flex acá: un <td> flex no se estira al alto de la fila (queda
   más bajo que las otras celdas → borde y botones desalineados). Se deja como
   celda normal y se separan los botones con margen, como en .acciones-col. */
.factura-acciones { white-space: nowrap; }
.factura-acciones .factura-icon-btn + .factura-icon-btn { margin-left: 0.3rem; }
/* Íconos de acción sobrios: sin caja, gris legible en reposo y salmón (--accent)
   al pasar el mouse o al recibir foco de teclado (paridad hover/focus, WCAG). */
.factura-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 1.9rem;
  height: 1.9rem;
  /* margin:0 iguala <button> (trae margen del UA) con <a>/<span> (la lupa),
     que si no queda un par de px más arriba que el resto de la fila. */
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: color .12s ease, background-color .12s ease;
}
.factura-icon-btn:hover,
.factura-icon-btn:focus-visible {
  color: var(--accent);
  background: rgba(201, 82, 78, .10);
  outline: none;
}
.factura-icon-btn:focus-visible { box-shadow: 0 0 0 2px rgba(201, 82, 78, .35); }
/* "Danger" comparte estética: mismo gris → salmón (la confirmación protege). */
.factura-icon-danger { color: #6b7280; }
.factura-icon-danger:hover,
.factura-icon-danger:focus-visible { color: var(--accent); background: rgba(201, 82, 78, .10); }
.factura-icon-disabled { color: #cdd0d5; cursor: default; }
.factura-icon-disabled:hover { background: transparent; color: #cdd0d5; }
.factura-detalle td {
  padding: 0 1rem 0.85rem 2.6rem;
  background: var(--soft);
}
.factura-detalle-tabla { width: 100%; font-size: 0.85rem; }

/* ---------------------------------------------------------------------------
   Menú lateral plegable
--------------------------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 10px;
  background: transparent; color: var(--muted); cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.nav-toggle:hover { background: var(--soft); color: var(--accent); border-color: var(--brand); }
.nav-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Estado plegado: el sidebar queda como una franja de íconos. El logo no se
   achica de forma legible a 72px, así que se oculta y vuelve al desplegar. */
.sidebar { transition: width .18s ease; }
.layout.nav-plegada .sidebar { width: 72px; }
.layout.nav-plegada .sidebar-brand { display: none; }
.layout.nav-plegada .sidebar-foot { display: none; }
.layout.nav-plegada .sidebar-nav { padding: 16px 10px; }
.layout.nav-plegada .sidebar-nav .tab-btn { justify-content: center; padding: 11px 0; }
.layout.nav-plegada .sidebar-nav .tab-btn span { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* ---------------------------------------------------------------------------
   Tarjetas de acción (una por cada cosa que se puede hacer en la sección)
--------------------------------------------------------------------------- */
.accion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

/* Mismo lenguaje visual que las tarjetas del Dashboard de costos: fondo
   blanco, borde fino y hover gris neutro (nunca fill oscuro ni borde rojo). */
.accion-card {
  all: unset;
  box-sizing: border-box;
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  font-family: var(--font-sans);
  box-shadow: 0 2px 8px rgba(31, 36, 48, .05);
  /* Solo se animan transform y fondo: el borde y la sombra cambian al toque.
     Marcar la tarjeta abierta es un cambio de estado, no un efecto de hover,
     y animarlo lo deja a medio camino si el navegador no alcanza a renderizar. */
  transition: transform .15s ease, background-color .15s ease;
}
.accion-card:hover {
  transform: translateY(-2px);
  border-color: #b9bfc9;
  background: #eef0f3;
  box-shadow: 0 6px 16px rgba(31, 36, 48, .10);
}
.accion-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.accion-ic { width: 20px; height: 20px; color: #9aa1ac; margin-bottom: 2px; }
.accion-tit { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.accion-sub { font-size: 12.5px; line-height: 1.45; color: #6b7280; }

/* La tarjeta cuyo panel está abierto: anillo del acento, sin fondo relleno,
   para que el texto siga tan legible como en reposo. */
.accion-card.abierta {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 6px 16px rgba(31, 36, 48, .08);
}
.accion-card.abierta:hover { background: #fbfbfc; transform: translateY(-2px); }
.accion-card.abierta .accion-ic { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .accion-card, .accion-card:hover { transform: none; transition: none; }
}

/* ---------------------------------------------------------------------------
   Acciones con ícono dentro de las tablas (mismo patrón que facturas)
--------------------------------------------------------------------------- */
.acciones-col { white-space: nowrap; }
.acciones-col .factura-icon-btn { margin-right: .3rem; }

/* label global es flex-column (etiqueta arriba del input); los checkboxes
   sueltos tienen que volver a fila o el tilde queda encima del texto. */
.inline-check { flex-direction: row; }

/* El atributo [hidden] debe ganarle a display:flex/grid de .alarma-banner,
   .home-grid, etc. (si no, quedan visibles vacíos). */
[hidden] { display: none !important; }

/* --- Login ---------------------------------------------------------------
   Tapa la app entera hasta que el servidor confirme la sesión. Ocultar el
   menú por rol (data-roles en los .tab-btn) es comodidad, no seguridad: los
   permisos los verifica la API en cada request. */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 20px;
}

.login-overlay[hidden] { display: none; }

.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 28px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
}

.login-logo { display: block; height: 42px; margin: 0 auto 18px; }

.login-card h2 { margin: 0 0 22px; text-align: center; font-size: 1.35rem; }

.login-card label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.login-card input { width: 100%; margin-bottom: 16px; }

.login-card button[type="submit"] { width: 100%; }

.login-error {
  margin: 14px 0 0;
  color: var(--error);
  font-size: 13px;
  text-align: center;
}

.login-error[hidden] { display: none; }

/* --- Ver contraseña + cambio de contraseña ------------------------------- */
/* El input ocupa TODO el ancho (igual que el de usuario) y el ojito va adentro,
   fijo a la derecha. El margen inferior vive en el wrapper, no en el input, así
   el wrapper mide exactamente lo que el input y el ojito centra con
   top:0/bottom:0/margin:auto (sin correrse hacia abajo). */
.campo-clave { position: relative; margin-bottom: 16px; }
.campo-clave input { width: 100%; margin-bottom: 0 !important; padding-right: 40px; }

.ver-clave {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 8px;
  margin: auto 0;
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
}

/* Edge mete su propio ojo/equis dentro de los campos de contraseña; lo sacamos
   para no tener dos controles superpuestos. */
.campo-clave input::-ms-reveal,
.campo-clave input::-ms-clear { display: none; }

.ver-clave:hover { color: var(--text); background: transparent; }
.ver-clave.activo { color: var(--accent); }
.ver-clave .nav-ic { width: 18px; height: 18px; }

.clave-acciones { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }

.login-ok { margin: 12px 0 0; color: var(--ok); font-size: 13px; text-align: center; }
.login-ok[hidden] { display: none; }

/* Encabezados ordenables de la tabla de facturas. */
.th-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.th-sortable:hover { text-decoration: underline; }

/* Carrusel de facturas pendientes: una por vez con navegación ←/→. */
.pendientes-nav { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 8px 0 12px; }
.pendientes-nav button:disabled { opacity: .4; cursor: default; }