:root {
  /* Marca Versa (logo): azul petróleo, verde y azul de la hoja */
  --marca-petroleo: #0e3d55;
  --marca-petroleo-claro: #155a78;
  --marca-verde: #2db35a;
  --marca-verde-oscuro: #1d8346;   /* verde con contraste suficiente para texto blanco */
  --marca-azul: #1290d4;
  --marca-degradado: linear-gradient(90deg, var(--marca-verde) 0%, var(--marca-azul) 100%);

  --color-fondo: #ffffff;
  --color-fondo-suave: #f3f6f8;      /* fondo de paneles internos (segmentos, capturas), ya no es el fondo de página */
  --color-superficie: #ffffff;
  --color-texto: #14303f;
  --color-texto-suave: #5a6f7c;
  --color-borde: #c3d2da;
  --color-primario: #0b6a9e;        /* enlaces y foco */
  --color-primario-oscuro: #0e3d55;
  --color-accion: var(--marca-verde-oscuro);
  --color-accion-hover: #176b39;
  --color-error-fondo: #fdecec;
  --color-error-texto: #9b1c1c;
  --color-etiqueta: #e4f0f6;
  --color-ok-fondo: #e7f6ec;
  --color-ok-texto: #1e6b3a;
  --color-alerta-fondo: #fff4e0;
  --color-alerta-texto: #8a5300;
  --color-oculto: #f1f3f6;
  --color-opcional: #e1f0fa;
  --color-obligatorio: #d9f2e1;
  --color-fila-alterna: #fafbfc;
  --color-campo-bloqueado: #f3f6f8;
  --radio: 8px;
  --sombra: 0 1px 3px rgba(16, 24, 40, 0.10), 0 4px 10px rgba(16, 24, 40, 0.06);
  --sombra-flotante: 0 2px 4px rgba(16, 24, 40, 0.12), 0 10px 24px rgba(16, 24, 40, 0.10);
  /* Escala de tipografía y espacio, para ir adoptándola pantalla por pantalla */
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.875rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--color-texto);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-fondo);
}

.encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 24px;
  background: linear-gradient(135deg, var(--marca-petroleo) 0%, #0c4a63 100%);
  color: #fff;
  position: relative;
}
.encabezado::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--marca-degradado); }

.marca { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.marca img { height: 46px; width: auto; display: block; }
.marca-texto { font-weight: 600; font-size: 0.95rem; line-height: 1.2; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, 0.25); }
.marca-texto small { display: block; font-weight: 400; font-size: 0.75rem; color: #b9d3e0; }

.sesion { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sesion-nombre { font-weight: 600; }
.sesion-detalle { color: #b9d3e0; font-size: 0.8rem; }
.sesion form { margin: 0; }
.encabezado .boton-secundario { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.encabezado .boton-secundario:hover { background: rgba(255, 255, 255, 0.12); }

.contenido { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 24px 16px; }

h1 { font-size: 1.5rem; margin: 0 0 8px; }
h2 { font-size: 1.1rem; margin: 0 0 8px; }
.subtitulo { color: var(--color-texto-suave); margin: 0 0 24px; }

.tarjeta {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 20px;
}

.tarjeta-acceso { max-width: 380px; margin: 48px auto; }

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.modulo p { color: var(--color-texto-suave); margin: 0 0 12px; }

.etiqueta {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-etiqueta);
  color: var(--color-primario-oscuro);
  font-size: 0.75rem;
}

.formulario { display: flex; flex-direction: column; gap: 8px; }
.formulario label { font-size: 0.875rem; font-weight: 600; margin-top: 8px; }
.formulario input {
  padding: 8px 10px;
  border: 1px solid var(--color-borde);
  border-radius: 6px;
  font: inherit;
}
.formulario input:focus { outline: 2px solid var(--color-primario); outline-offset: 1px; }
.formulario .boton { margin-top: 16px; }

.boton {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--color-accion);
  border-radius: 6px;
  background: var(--color-accion);
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.boton:hover { background: var(--color-accion-hover); border-color: var(--color-accion-hover); }
.boton-secundario { background: transparent; color: var(--marca-petroleo); border-color: var(--marca-petroleo-claro); font-weight: 500; }
.boton-secundario:hover { background: var(--color-etiqueta); }
.boton:disabled { opacity: 0.6; cursor: wait; }
a { color: var(--color-primario); }

.alerta { padding: 10px 12px; border-radius: 6px; margin: 8px 0; }
.alerta-error { background: var(--color-error-fondo); color: var(--color-error-texto); }


.pie { padding: 16px; text-align: center; color: var(--color-texto-suave); font-size: 0.8rem; border-top: 1px solid var(--color-borde); }
h1 { color: var(--marca-petroleo); }
.tarjeta-acceso { border-top: 4px solid var(--marca-verde); }
.acceso-logo { display: flex; justify-content: center; margin: -4px 0 16px; padding: 16px; border-radius: 6px; background: var(--marca-petroleo); }
.acceso-logo img { height: 96px; }

/* Navegación */
.menu { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.menu a { padding: 7px 12px; border-radius: 6px; color: #dcebf2; text-decoration: none; font-weight: 500; }
.menu a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.menu a.activo { background: rgba(45, 179, 90, 0.22); color: #fff; box-shadow: inset 0 -2px 0 var(--marca-verde); }

.contenido-ancho { max-width: none; }
.migas { color: var(--color-texto-suave); font-size: 0.875rem; margin: 0 0 8px; }
.migas a { color: var(--color-primario); }
.titulo-acciones { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.titulo-acciones h1, .titulo-acciones h2 { margin: 0; }
.texto-suave { color: var(--color-texto-suave); }
.nowrap { white-space: nowrap; }
.grupo { margin-bottom: 24px; }
.grupo h2 { margin-bottom: 12px; }
h3 { font-size: 1rem; margin: 0 0 6px; }
.enlace-tarjeta { color: inherit; text-decoration: none; display: block; }
/* El acento verde va con una sombra interior: un borde superior transparente dejaba la tarjeta sin su borde de arriba */
.enlace-tarjeta { transition: box-shadow 0.15s; }
.enlace-tarjeta:hover { box-shadow: inset 0 3px 0 var(--marca-verde), 0 4px 12px rgba(14, 61, 85, 0.08); }
.tarjeta-catalogo:hover { box-shadow: inset 0 3px 0 var(--marca-verde), 0 4px 12px rgba(14, 61, 85, 0.08); }
.tarjeta-catalogo .enlace-tarjeta:hover { box-shadow: none; }
.modulo-pendiente { opacity: 0.75; }
.contador { display: inline-block; min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--color-etiqueta);
  color: var(--color-primario-oscuro); font-size: 0.75rem; text-align: center; font-weight: 600; }

/* Avisos y acciones */
.alerta-ok { background: var(--color-ok-fondo); color: var(--color-ok-texto); }
.boton-peligro { background: #fff; color: var(--color-error-texto); border-color: var(--color-error-texto); }
.boton-peligro:hover { background: var(--color-error-fondo); }
.acciones-registro { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-borde); }

/* Filtros y formularios */
.filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 16px 0; }
.filtros label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; font-weight: 600; color: var(--color-texto-suave); }
.filtros input, .filtros select, .formulario select, .formulario textarea, .mostrar select {
  padding: 7px 9px; border: 1px solid var(--color-borde); border-radius: 6px; font: inherit; background: #fff; color: var(--color-texto); }
/* misma altura para cajas, listas y botón en una fila de filtros (antes el buscador quedaba más bajito) */
.filtros input:not([type=file]):not([type=checkbox]), .filtros select { height: 36px; }
.filtros input[type=file] { padding: 5px 6px; }
.filtros .boton { height: 36px; display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0; }
.boton-texto { border: none; background: none; padding: 0; color: var(--color-primario); font: inherit; cursor: pointer;
  text-decoration: underline; align-self: center; }
.formulario select, .formulario textarea { width: 100%; }
.formulario input:disabled, .formulario select:disabled, .formulario textarea:disabled { background: var(--color-oculto); color: var(--color-texto-suave); }
.campo-bloqueado { background: var(--color-campo-bloqueado) !important; border-style: dashed !important; color: var(--color-texto-suave) !important; }
.formulario .casilla { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.ayuda { color: var(--color-texto-suave); font-size: 0.78rem; }
.error-campo { color: var(--color-error-texto); font-size: 0.8rem; font-weight: 600; }

/* Tablas */
.tabla-contenedor { overflow-x: auto; background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio); }
.tabla { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.tabla th, .tabla td { padding: 8px 10px; border-bottom: 1px solid var(--color-borde); text-align: left; vertical-align: top; }
.tabla th { background: #eaf2f6; color: var(--marca-petroleo); font-weight: 600; position: sticky; top: 0; z-index: 1; }
.tabla tbody tr:nth-child(even) { background: var(--color-fila-alterna); }
.tabla-compacta th, .tabla-compacta td { padding: 5px 8px; font-size: 0.8rem; }
.tabla .valor { max-width: 360px; word-break: break-word; font-family: Consolas, monospace; font-size: 0.78rem; }
tr.inactivo td { color: var(--color-texto-suave); text-decoration: line-through; }
.paginacion { display: flex; gap: 4px; flex-wrap: wrap; margin: 12px 0; }
.paginacion a, .paginacion span { padding: 4px 9px; border: 1px solid var(--color-borde); border-radius: 6px; text-decoration: none; }
.paginacion .pagina-actual { background: var(--marca-petroleo); color: #fff; border-color: var(--marca-petroleo); }

/* Etiquetas de estado */
.etiqueta-baja, .etiqueta-rechazo, .etiqueta-error { background: var(--color-error-fondo); color: var(--color-error-texto); }
.etiqueta-advertencia, .etiqueta-con_rechazos, .etiqueta-cambio { background: var(--color-alerta-fondo); color: var(--color-alerta-texto); }
.etiqueta-alta, .etiqueta-ok, .etiqueta-reactivacion { background: var(--color-ok-fondo); color: var(--color-ok-texto); }

/* Detalle de catálogo */
.dos-columnas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.dos-columnas > div { display: flex; flex-direction: column; gap: 16px; }
.lista-hijos { margin: 8px 0; padding-left: 20px; }
.lista-hijos li { margin: 2px 0; }
.rejilla-cifras { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.cifra { display: flex; flex-direction: column; align-items: center; padding: 14px; }
.cifra-valor { font-size: 1.6rem; font-weight: 700; }
.cifra-etiqueta { color: var(--color-texto-suave); font-size: 0.8rem; }

/* Matriz */
/* Cambio masivo: casillas por fila (form="masivo") y una barra con la columna y el estado a aplicar */
.barra-masiva { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 0 0 12px; padding: 10px 12px;
  border: 1px solid var(--color-borde); border-radius: 6px; background: var(--color-fondo-suave); }
.barra-masiva > strong, .barra-masiva > span { align-self: center; }
.barra-masiva label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; font-weight: 600; color: var(--color-texto-suave); }
.barra-masiva select { height: 36px; padding: 0 9px; border: 1px solid var(--color-borde); border-radius: 6px; font: inherit; background: #fff; color: var(--color-texto); }
.barra-masiva .boton { height: 36px; }
.barra-masiva .boton:disabled { opacity: 0.5; cursor: not-allowed; }
.matriz .seleccion { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.matriz-y-panel { display: flex; gap: 16px; align-items: flex-start; }
.matriz-contenedor { flex: 1; max-height: 72vh; overflow: auto; }
.matriz th, .matriz td { padding: 6px 8px; white-space: nowrap; font-size: var(--fs-sm); }
.matriz .fija { position: sticky; left: 0; background: var(--color-superficie); z-index: 2; min-width: 150px; }  /* casilla + tabla */
.matriz .fija-2 { left: 150px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; box-shadow: 1px 0 0 var(--color-borde); }
.matriz th.fija { z-index: 3; background: #eaf2f6; }
.columna-dimension { text-align: center; }
.tabla th.columna-dimension { text-align: center; }
.columna-dimension small { display: block; font-weight: 400; color: var(--color-texto-suave); font-size: 0.7rem; }
.celda { text-align: center; }
.celda select { padding: 3px 5px; border: 1px solid transparent; border-radius: 4px; background: transparent; font: inherit; font-size: var(--fs-sm); cursor: pointer; color: inherit; }
.celda select:hover, .celda select:focus { border-color: var(--color-primario); background: #fff; }
.estado-oculto { background: var(--color-oculto); color: var(--color-texto-suave); }
.estado-opcional { background: var(--color-opcional); }
.estado-obligatorio { background: var(--color-obligatorio); color: #14592f; font-weight: 600; }
.celda-error { outline: 2px solid var(--color-error-texto); outline-offset: -2px; }
.error-celda { display: block; color: var(--color-error-texto); font-size: 0.7rem; white-space: normal; max-width: 140px; }
.detalle-cruce { border: none; background: transparent; color: var(--color-texto-suave); cursor: pointer; padding: 0 2px; font-size: 0.9rem; }
.detalle-cruce.con-detalle { color: var(--color-primario); font-weight: 700; }
.panel-detalle:empty { display: none; }
.panel-detalle { width: 380px; flex-shrink: 0; position: sticky; top: 16px; background: var(--color-superficie);
  border: 1px solid var(--color-borde); border-radius: var(--radio); box-shadow: var(--sombra-flotante); padding: 16px; max-height: 80vh; overflow: auto; }
.panel-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.panel-detalle .tarjeta { padding: 0; border: none; box-shadow: none; margin-top: 16px; }
.leyenda { margin-left: 16px; }
.muestra { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin: 0 2px 0 8px; border: 1px solid var(--color-borde); }

/* Acciones y formularios en línea */
.barra-acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 16px; }
.fila-formulario { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.fila-formulario label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; font-weight: 600; color: var(--color-texto-suave); }
.fila-formulario input, .fila-formulario select, .campo-captura input, .valor-por-registro input {
  padding: 7px 9px; border: 1px solid var(--color-borde); border-radius: 6px; font: inherit; background: #fff; color: var(--color-texto); }
.casilla-linea { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; font-weight: 400 !important; }
.botones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.boton-enlace { border: none; background: none; color: var(--color-error-texto); cursor: pointer; font: inherit; font-size: 0.8rem; text-decoration: underline; }
.alerta-advertencia { background: var(--color-alerta-fondo); color: var(--color-alerta-texto); display: inline-block; }
/* separación entre tarjetas apiladas; dentro de una rejilla la pone el gap (si no, la 2.ª y 3.ª columna quedaban más abajo) */
:where(section.tarjeta + section.tarjeta, form + section.tarjeta, section.tarjeta + form, .formulario-solicitud > section.tarjeta) { margin-top: 16px; }
:is(.rejilla, .dos-columnas, .rejilla-grupos, .rejilla-pendientes) > .tarjeta { margin-top: 0; }

/* Plantillas */
.hoja-plantilla { margin-bottom: 16px; }
details.registro { border: 1px solid var(--color-borde); border-radius: 6px; padding: 8px 12px; margin-top: 10px; background: var(--color-fondo-suave); }
details.registro[open] { background: var(--color-superficie); }
details.registro summary { cursor: pointer; font-weight: 600; color: var(--marca-petroleo); }
details.registro .tabla-contenedor { margin: 10px 0; }
details.registro input[name^="valor-"] { padding: 4px 6px; border: 1px solid var(--color-borde); border-radius: 4px; font: inherit; font-size: 0.8rem; }

/* Solicitudes */
.flujo { display: flex; gap: 0; list-style: none; padding: 0; margin: 0 0 16px; overflow-x: auto; }
.paso { flex: 1; min-width: 130px; position: relative; padding: 10px 12px 10px 18px; background: var(--color-superficie);
  border: 1px solid var(--color-borde); border-left: none; display: flex; flex-direction: column; gap: 2px; font-size: 0.8rem; }
.paso:first-child { border-left: 1px solid var(--color-borde); border-radius: 6px 0 0 6px; }
.paso:last-child { border-radius: 0 6px 6px 0; }
.paso::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--color-borde); }
.paso-nombre { font-weight: 600; color: var(--marca-petroleo); }
.paso-estado { color: var(--color-texto-suave); }
.paso-comentario { font-style: italic; color: var(--color-texto-suave); }
.paso-hecho::before, .paso-aprobada::before { background: var(--marca-verde); }
.paso-pendiente::before { background: var(--marca-azul); }
.paso-pendiente { background: #eef7fd; }
.paso-rechazada::before { background: var(--color-error-texto); }
.paso-rechazada { background: var(--color-error-fondo); }
.tarjeta-decision { border-left: 4px solid var(--marca-azul); margin-bottom: 16px; }
.tarjeta-eleccion { display: flex; flex-direction: column; gap: 6px; }
.tarjeta-eleccion .boton { align-self: flex-start; margin-top: auto; }
.codigo-grande { font-family: Consolas, monospace; font-size: 1.4rem; font-weight: 700; color: var(--marca-petroleo); letter-spacing: 1px; margin: 4px 0; }
.propuesta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; padding: 12px 14px; margin: 12px 0;
  border-radius: 6px; background: #edf7f1; border: 1px solid #bfe3cc; }
.hoja-captura { border: 1px solid var(--color-borde); border-radius: 6px; padding: 10px 14px 14px; margin: 12px 0 0; }
.hoja-captura legend { font-weight: 600; color: var(--marca-petroleo); padding: 0 6px; }
.rejilla-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 16px; }
.campo-captura { display: flex; flex-direction: column; gap: 4px; }
.campo-captura label { font-size: 0.82rem; font-weight: 600; }
.campo-captura code { font-weight: 400; color: var(--color-texto-suave); font-size: 0.75rem; }
.valor-por-registro { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; font-size: 0.75rem; }
.campo-captura details summary { cursor: pointer; font-size: 0.78rem; color: var(--color-primario); margin-top: 4px; }
details.extension { margin-top: 8px; }
details.extension summary { cursor: pointer; }
.lista-extensiones { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; padding: 8px 0 0 12px; font-size: 0.85rem; }
.lista-errores { margin: 8px 0; padding-left: 20px; color: var(--color-alerta-texto); font-size: 0.875rem; }
.historial { list-style: none; padding: 0; margin: 0; font-size: 0.875rem; }
.historial li { padding: 6px 0; border-bottom: 1px solid var(--color-borde); }
.estado-solicitud-borrador { background: var(--color-oculto); color: var(--color-texto-suave); }
.estado-solicitud-en_aprobacion { background: #e1f0fa; color: #0b5c88; }
.estado-solicitud-rechazada, .estado-solicitud-cancelada { background: var(--color-error-fondo); color: var(--color-error-texto); }
.estado-solicitud-aprobada, .estado-solicitud-layout_generado { background: var(--color-ok-fondo); color: var(--color-ok-texto); }

/* Consulta vs. administración */
.acceso-admin { padding: 7px 12px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.45); color: #fff;
  text-decoration: none; font-weight: 600; white-space: nowrap; }
.acceso-admin:hover { background: rgba(255, 255, 255, 0.12); }
.acceso-admin.activo { background: var(--marca-verde-oscuro); border-color: var(--marca-verde-oscuro); }
.barra-admin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  padding: 8px 24px; background: #e3f4e9; border-bottom: 1px solid #bfe3cc; }
.barra-admin-titulo { display: flex; flex-direction: column; line-height: 1.25; }
.barra-admin-titulo strong { color: var(--marca-verde-oscuro); font-size: 0.95rem; }
.barra-admin-titulo span { color: #3d6b4e; font-size: 0.75rem; }
.menu-admin { display: flex; flex-wrap: wrap; gap: 2px; }
.menu-admin a { padding: 6px 10px; border-radius: 6px; color: #1d4d31; text-decoration: none; font-size: 0.875rem; font-weight: 500; }
.menu-admin a:hover { background: #cdebd8; }
.menu-admin a.activo { background: var(--marca-verde-oscuro); color: #fff; }
body.modo-admin .contenido { border-top: none; }
body.modo-admin h1 { color: var(--marca-verde-oscuro); }
.grupo-admin { padding: 16px; border-radius: var(--radio); background: #f0f9f3; border: 1px dashed #9fd3b2; }
.etiqueta-admin { background: var(--marca-verde-oscuro); color: #fff; vertical-align: middle; }
.paso-quien { color: var(--color-texto); font-size: 0.78rem; }
.casilla-nacional { align-self: center; }

@media (max-width: 900px) {
  .dos-columnas { grid-template-columns: 1fr; }
  .matriz-y-panel { flex-direction: column; }
  .panel-detalle { width: 100%; position: static; }
}

@media (max-width: 600px) {
  .encabezado { flex-direction: column; align-items: flex-start; padding: 12px 16px; }
}

/* --- Materiales: buscador y ficha (etapa C) --- */
.completitud { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; }
.completitud-barra { display: inline-block; width: 70px; height: 8px; border-radius: 4px; background: var(--color-oculto); overflow: hidden; }
.completitud-barra > span { display: block; height: 100%; background: var(--color-alerta-texto); }
.completitud-alta .completitud-barra > span { background: var(--marca-verde); }
.completitud-media .completitud-barra > span { background: var(--marca-azul); }
.completitud-baja { color: var(--color-alerta-texto); }
.completitud-sin { font-weight: 500; color: var(--color-texto-suave); font-style: italic; }
/* Ficha: los opcionales sin dato no cuentan para la completitud; se ven plegados debajo de los obligatorios */
details.opcionales-faltantes { margin-top: 12px; }
details.opcionales-faltantes summary { cursor: pointer; color: var(--color-texto-suave); font-size: 0.85rem; }
details.opcionales-faltantes .tabla-contenedor { margin-top: 8px; }
.ficha-cabecera { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; justify-content: space-between; }
.segmentos-codigo { display: flex; flex-wrap: wrap; gap: 8px; }
.segmento { display: flex; flex-direction: column; min-width: 92px; padding: 8px 12px; border: 1px solid var(--color-borde); border-radius: var(--radio); background: var(--color-fondo-suave); }
.segmento small { color: var(--color-texto-suave); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; }
.segmento strong { font-family: Consolas, monospace; font-size: 1.1rem; color: var(--marca-petroleo); }
.segmento span { font-size: 0.75rem; color: var(--color-texto-suave); }
.datos-cabecera { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 20px; margin: 0; flex: 1; min-width: 280px; }
.datos-cabecera dt { font-size: 0.75rem; color: var(--color-texto-suave); }
.datos-cabecera dd { margin: 2px 0 0; font-weight: 600; }
.col-fija { position: sticky; left: 0; z-index: 1; background: var(--color-superficie); box-shadow: 1px 0 0 var(--color-borde); }
.tabla th.col-fija { z-index: 2; background: #eaf2f6; }
.tabla-datos th[scope="row"].col-fija { background: var(--color-fila-alterna); z-index: 2; }
.col-discreta { color: var(--color-texto-suave); font-size: var(--fs-xs); }
.pestanas { display: flex; flex-wrap: wrap; gap: 4px; margin: 16px 0; border-bottom: 2px solid var(--color-borde); }
.pestanas a { padding: 8px 14px; text-decoration: none; color: var(--color-texto-suave); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.pestanas a.activo { color: var(--marca-petroleo); border-bottom-color: var(--marca-verde); }
.pestanas a:hover { color: var(--color-primario); }
.lista-faltantes { max-height: 460px; overflow-y: auto; }
.tabla-datos th[scope="row"] { text-align: left; font-weight: 400; min-width: 220px; background: var(--color-fila-alterna); }
.tabla-datos td { min-width: 110px; }
.fila-no-lleva th, .fila-disponible th { opacity: 0.8; }
.celda-vacia { color: var(--color-error-texto); font-weight: 700; }
.valor-dato { font-family: Consolas, monospace; }
.valor-significado { display: block; color: var(--color-texto-suave); font-size: 0.7rem; }
td.numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Consultas por ángulo (etapa C3) --- */
.subnav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.subnav a { padding: 5px 12px; border-radius: 999px; text-decoration: none; font-size: 0.85rem; font-weight: 600; color: var(--color-primario); background: var(--color-etiqueta); }
.subnav a.activo { background: var(--marca-petroleo); color: #fff; }
.angulos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.angulos-titulo { font-size: 0.75rem; font-weight: 700; color: var(--color-texto-suave); text-transform: uppercase; min-width: 90px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--color-borde); border-radius: 999px; background: var(--color-superficie); color: var(--color-texto); text-decoration: none; font-size: 0.8rem; }
.chip span { font-weight: 700; color: var(--color-primario); }
.chip:hover { border-color: var(--color-primario); }
.chip.activo { background: var(--marca-verde-oscuro); border-color: var(--marca-verde-oscuro); color: #fff; }
.chip.activo span { color: #fff; }
.nivel { display: inline-block; min-width: 22px; text-align: center; border-radius: 4px; font-weight: 700; font-size: 0.75rem; padding: 1px 4px; background: var(--color-etiqueta); }
.nivel-2 { background: var(--color-opcional); }
.nivel-3 { background: var(--color-obligatorio); }
.nivel-4 { background: var(--color-alerta-fondo); }
td.via { font-size: 0.75rem; font-family: Consolas, monospace; }
.filtros input.corto { width: 90px; }

/* --- Datos por capturar --- */
.rejilla-pendientes { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-bottom: 16px; }
.pendiente-resumen { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--color-texto); border-top: 4px solid var(--color-borde); }
.pendiente-resumen small { color: var(--color-texto-suave); }
.prioridad-alta { border-top-color: var(--color-error-texto); }
.prioridad-media { border-top-color: var(--color-alerta-texto); }
.prioridad-baja { border-top-color: var(--marca-azul); }
.pendiente-listo { border-top-color: var(--marca-verde); opacity: 0.7; }
.boton-chico { padding: 3px 10px; font-size: 0.75rem; }

/* Solicitudes con varios materiales */
.fila-seleccionada td { background: #eef5f9; }
.titulo-material { margin: 4px 0 12px; }
.botones form { display: inline-flex; gap: 8px; align-items: end; margin: 0; }

/* Selector de listas de materiales y de versiones de fabricación en la ficha */
.selector-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 12px 0; }
.selector-opciones .opcion { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--color-borde);
  border-radius: 8px; background: #fff; color: var(--color-texto); text-decoration: none; }
.selector-opciones .opcion:hover { border-color: var(--color-primario); }
.selector-opciones .opcion.activo { border: 2px solid var(--color-primario); background: #eef5f9; }
.selector-opciones .opcion small { color: var(--color-texto-suave); }
.selector-opciones .opcion .etiqueta { margin-right: 4px; }
.tabla .columna-grupo { text-align: center; border-bottom: 1px solid var(--color-borde); }

/* --- Captura de solicitud de modificación --- */
.barra-captura { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--esp-3); margin-bottom: var(--esp-3); }
.barra-captura-herramientas { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; }
.buscador-campos { padding: 7px 9px; border: 1px solid var(--color-borde); border-radius: 6px; font: inherit; min-width: 220px; }
.contador-cambios { font-size: var(--fs-sm); font-weight: 600; color: var(--color-primario-oscuro); background: var(--color-etiqueta);
  padding: 3px 10px; border-radius: 999px; white-space: nowrap; }

.grupo-campos { border: 1px solid var(--color-borde); border-radius: var(--radio); margin-bottom: var(--esp-3); background: var(--color-superficie); }
.grupo-campos + .grupo-campos { margin-top: 0; }
.grupo-campos summary { cursor: pointer; padding: var(--esp-2) var(--esp-3); font-weight: 600; color: var(--marca-petroleo);
  list-style: none; display: flex; align-items: center; gap: var(--esp-2); }
.grupo-campos summary::-webkit-details-marker { display: none; }
.grupo-campos summary::before { content: "▸"; display: inline-block; color: var(--color-texto-suave); transition: transform .15s; }
.grupo-campos[open] summary::before { transform: rotate(90deg); }
.grupo-campos .subgrupos-nivel { padding: 0 var(--esp-3) var(--esp-3); }

.nivel-captura { margin-top: var(--esp-3); }
.nivel-captura:first-child { margin-top: 0; }
.chip-nivel { display: inline-block; margin-bottom: var(--esp-2); padding: 2px 10px; border-radius: 999px;
  background: var(--color-opcional); color: var(--marca-petroleo); font-size: var(--fs-xs); font-weight: 600; }

.tabla-captura th:first-child, .tabla-captura td:first-child { width: 36%; }
.tabla-captura th:nth-child(2), .tabla-captura td:nth-child(2) { width: 30%; }
.tabla-captura td { vertical-align: middle; }
.tabla-captura td.valor-actual { background: var(--color-fondo-suave); white-space: normal; word-break: break-word; font-size: var(--fs-sm); }
.tabla-captura .vacio { color: var(--color-texto-suave); font-style: italic; }
.tabla-captura .input-valor-nuevo { width: 100%; padding: 6px 8px; border: 1px solid var(--color-borde); border-radius: 6px; font: inherit; }
.tabla-captura tr.fila-con-cambio { background: var(--color-ok-fondo); box-shadow: inset 3px 0 0 var(--marca-verde-oscuro); }
.tabla-captura tr.fila-con-cambio td.valor-actual { background: transparent; }
.tabla-captura .aviso-igual { display: block; color: var(--color-alerta-texto); font-size: var(--fs-xs); margin-top: 2px; }
.tabla-captura tr.fila-oculta-busqueda { display: none; }

.material-captura-titulo { display: flex; align-items: baseline; gap: var(--esp-2); margin: var(--esp-4) 0 var(--esp-2);
  padding-top: var(--esp-3); border-top: 2px solid var(--color-borde); }

/* Listas largas en pocas líneas (registros nuevos de un respaldo) */
.lista-compacta { columns: 3 18em; margin: 8px 0; padding-left: 18px; font-size: .9em; }

/* Cortes del dataset (Importaciones) */
.etiqueta-rechazado { background: var(--color-error-fondo); color: var(--color-error-texto); }
.etiqueta-obsoleto { background: var(--color-alerta-fondo); color: var(--color-alerta-texto); }
.tabla .fila-activa td { background: #eef5f9; }

/* Composición: líneas de árbol para ver qué componente cuelga de cuál */
.guia-arbol { font-family: ui-monospace, Consolas, monospace; color: var(--color-texto-suave); white-space: pre; }
.tabla code.con-componentes { font-weight: 700; }
.alternar-arbol { width: 20px; padding: 0; margin-right: 4px; border: 1px solid var(--color-borde); border-radius: 4px;
  background: #fff; color: var(--color-primario); font-size: .85em; line-height: 1.3; cursor: pointer; }
.alternar-arbol:hover { border-color: var(--color-primario); }
.alternar-hueco { display: inline-block; width: 24px; }
.acciones-arbol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }

/* Ficha legible del interlocutor (servicios/vista_interlocutor.py) */
.datos-legibles { display: grid; grid-template-columns: minmax(10em, max-content) 1fr; gap: 6px 16px; margin: 6px 0 12px; }
.datos-legibles > div { display: contents; }
.datos-legibles dt { color: var(--color-texto-suave); }
.datos-legibles dd { margin: 0; }
.rejilla-grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-bottom: 12px; }
.grupo-datos h3 { margin-top: 0; }
.titulo-seccion { margin: 18px 0 8px; }
.codigo-suave { color: var(--color-texto-suave); font-size: .85em; }
.lista-roles { list-style: none; padding: 0; margin: 0; }
.lista-roles li { padding: 6px 0; border-bottom: 1px solid var(--color-borde); }
.lista-roles li:last-child { border-bottom: 0; }
.direccion { font-style: normal; line-height: 1.6; }

/* Mapa de catálogos (Administración → Catálogos) */
.buscador-catalogos { margin: 12px 0 8px; }
.buscador-catalogos label { display: block; font-weight: 600; margin-bottom: 4px; }
.buscador-catalogos input { width: min(100%, 560px); padding: 8px 10px; font-size: 1rem; }
.indice-temas { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 18px; }
.indice-temas a { padding: 4px 10px; border: 1px solid var(--color-borde); border-radius: 14px; text-decoration: none; background: #fff; }
.indice-temas a:hover { border-color: var(--color-primario); }
.tema-catalogos { margin-bottom: 26px; padding-top: 4px; }
.tema-catalogos > h2 { margin-bottom: 2px; border-bottom: 2px solid var(--color-borde); padding-bottom: 4px; }
.subtema-catalogos h3 { margin: 14px 0 6px; font-size: 1rem; color: var(--color-texto-suave); text-transform: uppercase; letter-spacing: .03em; }
.rejilla-catalogos { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.tarjeta-catalogo { position: relative; padding-bottom: 30px; }
.tarjeta-catalogo h4 { margin: 0 0 4px; }
.tarjeta-catalogo p { margin: 0; font-size: .88em; color: var(--color-texto-suave); }
.tarjeta-catalogo .nuevo-catalogo { position: absolute; right: 12px; bottom: 8px; font-size: .85em; }

/* Importaciones y lotes (2026-10-25) */
.rejilla-nodos { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); margin-bottom: 8px; }
.tarjeta-nodo { display: flex; flex-direction: column; gap: 8px; }
.tarjeta-nodo h3 { margin: 0; font-size: 1.05rem; }
.tarjeta-nodo .tabla { margin-top: 4px; }
.nota-nodo { margin: 0; font-size: var(--fs-sm); }
.alerta-bloque { display: block; }
.etiqueta-en_proceso { background: #e1f0fa; color: #0b5c88; }
.cifra-cero .cifra-valor { color: var(--color-texto-suave); font-weight: 600; }
.tabla .valor { min-width: 9em; }
.lista-una-columna { columns: 1; }

/* Formulario de catálogo */
.una-columna { max-width: 760px; margin-bottom: 16px; }
.botones-formulario { align-items: center; margin-top: 16px; }
.formulario .botones-formulario .boton { margin-top: 0; }
.filtros .boton-texto { align-self: flex-end; line-height: 36px; }

/* Buscador de materiales: búsqueda al frente y el resto en "Más filtros" */
.filtros-principal { margin-bottom: 8px; }
.campo-busqueda { flex: 1 1 320px; max-width: 520px; }
.filtros-avanzados { margin: 0 0 16px; padding: 8px 14px; border: 1px solid var(--color-borde); border-radius: var(--radio); background: var(--color-fondo-suave); }
.filtros-avanzados summary { cursor: pointer; font-weight: 600; color: var(--marca-petroleo); }
.filtros-avanzados[open] { padding-bottom: 4px; }
.rejilla-filtros { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 16px; margin-top: 12px; }
.rejilla-filtros label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; font-weight: 600; color: var(--color-texto-suave); }
.rejilla-filtros input, .rejilla-filtros select { height: 36px; padding: 7px 9px; border: 1px solid var(--color-borde); border-radius: 6px;
  font: inherit; font-weight: 400; background: #fff; color: var(--color-texto); width: 100%; }
.descripcion-sub { display: block; font-size: var(--fs-xs); }
.boton-detalle { font-weight: 400; opacity: 0.85; }   /* texto secundario dentro de un botón (legible sobre el verde) */
.tabla th.numero { text-align: right; }

/* SKU duplicados (lista y comparación de un grupo) */
.filtros-casillas { display: flex; flex-wrap: wrap; gap: 6px 18px; flex-basis: 100%; }
.filtros label.casilla { flex-direction: row; align-items: center; gap: 6px; font-weight: 400; color: var(--color-texto); }
.tabla-comparacion th, .tabla-comparacion td { vertical-align: top; }
.tabla-comparacion tbody th { text-align: left; white-space: nowrap; color: var(--color-texto-suave); font-weight: 600; background: var(--color-fondo-suave); }
.tabla-comparacion td { min-width: 150px; }

/* ===== SKU duplicados: tablero ejecutivo (rediseño; solo vistas/duplicados/) ===== */
.sku-kpis, .sku-filtros, .sku-seccion, .sku-matriz, .sku-aparte { --sku-candidato: var(--marca-verde-oscuro); --sku-candidato-fondo: var(--color-ok-fondo);
  --sku-uso: var(--marca-petroleo); --sku-uso-2: #3f7f9f; --sku-uso-3: #8fb6c9; --sku-gris: #6b7a84; --sku-gris-claro: #9aa5ad;
  --sku-ambar: #8a5300; --sku-ambar-fondo: var(--color-alerta-fondo); --sku-ambar-borde: #d9962b; }
.sku-subtitulo { margin-bottom: var(--esp-4); max-width: 80ch; }
.sku-acciones { margin-top: 0; }
.sku-seccion { margin: var(--esp-5) 0; min-width: 0; }
.sku-seccion h2 { margin: 0 0 var(--esp-2); font-size: var(--fs-lg); color: var(--marca-petroleo); }
.sku-nota { margin: 0 0 var(--esp-3); color: var(--color-texto-suave); font-size: var(--fs-sm); font-weight: 400; }
h2 .sku-nota { margin: 0; }
.sku-vacio { padding: var(--esp-5); text-align: center; color: var(--color-texto-suave); background: var(--color-fondo-suave);
  border: 1px dashed var(--color-borde); border-radius: var(--radio); }
td.sku-vacio { border-radius: 0; border-style: none; }

/* Filtros: una sola línea, misma altura, y se acomodan en pantallas angostas */
.sku-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--esp-3) var(--esp-4); margin: 0 0 var(--esp-4);
  padding: var(--esp-3) var(--esp-4); background: var(--color-fondo-suave); border: 1px solid var(--color-borde); border-radius: var(--radio); }
.sku-filtro-campo { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); font-weight: 600; color: var(--color-texto-suave); min-width: 0; }
.sku-filtro-campo input, .sku-filtro-campo select { height: 36px; padding: 0 9px; border: 1px solid var(--color-borde); border-radius: 6px;
  font: inherit; font-size: var(--fs-base); font-weight: 400; background: #fff; color: var(--color-texto); max-width: 100%; }
.sku-filtro-campo input[type=number] { width: 96px; }
.sku-filtro-casilla { display: inline-flex; align-items: center; gap: 6px; height: 36px; font-size: var(--fs-base); font-weight: 400; color: var(--color-texto); }
.sku-filtros .boton { height: 36px; display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0; }
.sku-filtros .boton-texto { height: 36px; display: inline-flex; align-items: center; }
.sku-filtros-casillas { display: flex; flex-wrap: wrap; gap: 0 var(--esp-5); flex-basis: 100%; }

/* Nivel 1: indicadores (4 columnas, 2 en tablet, 1 en móvil) */
.sku-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-4); margin: 0 0 var(--esp-5); }
.sku-kpi { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--esp-4); background: var(--color-superficie);
  border: 1px solid var(--color-borde); border-top: 3px solid var(--marca-petroleo); border-radius: var(--radio); box-shadow: var(--sombra); }
.sku-kpi-valor { font-size: clamp(1.35rem, 2.1vw, 1.95rem); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums;
  color: var(--color-texto); overflow-wrap: anywhere; }
.sku-kpi-etiqueta { font-weight: 600; color: var(--marca-petroleo); font-size: var(--fs-base); }
.sku-kpi-contexto { color: var(--color-texto-suave); font-size: var(--fs-sm); }
.sku-kpi-candidato { border-top-color: var(--sku-candidato); background: linear-gradient(var(--sku-candidato-fondo), #fff 70%); }
.sku-kpi-candidato .sku-kpi-valor, .sku-kpi-candidato .sku-kpi-etiqueta { color: var(--marca-verde-oscuro); }
.sku-kpi-alerta { border-top-color: var(--sku-ambar-borde); }
.sku-dinero { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sku-dinero small { margin-left: 4px; font-size: .55em; font-weight: 500; color: var(--color-texto-suave); letter-spacing: .02em; }

/* Colores con significado: verde = candidato, petróleo/azul = con stock y en uso, gris = marcado, ámbar = sin movimiento */
.sku-c-candidatos { background: var(--marca-verde-oscuro); fill: var(--marca-verde-oscuro); }
.sku-c-con_stock_en_listas { background: var(--marca-petroleo); fill: var(--marca-petroleo); }
.sku-c-con_stock_fuera_listas { background: #3f7f9f; fill: #3f7f9f; }
.sku-c-sin_stock_en_listas { background: #8fb6c9; fill: #8fb6c9; }
.sku-c-marcados { background: #9aa5ad; fill: #9aa5ad; }

/* Nivel 2: barra apilada de composición */
.sku-barra { display: block; width: 100%; height: 34px; border-radius: 6px; overflow: hidden; background: var(--color-fondo-suave); }
.sku-seg { stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.sku-barra a:hover .sku-seg { opacity: .85; }
.sku-leyenda { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5); list-style: none; margin: var(--esp-3) 0 0; padding: 0; }
.sku-leyenda a { display: inline-flex; align-items: baseline; gap: 6px; color: var(--color-texto); text-decoration: none; font-size: var(--fs-sm); }
.sku-leyenda a:hover .sku-leyenda-texto { text-decoration: underline; }
.sku-muestra { display: inline-block; width: 12px; height: 12px; border-radius: 3px; align-self: center; flex: none; }
.sku-leyenda strong { font-variant-numeric: tabular-nums; }

/* Nivel 3: matriz 2x2 y tarjetas de escenario (misma altura por fila) */
.sku-matriz { display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr); gap: var(--esp-3); align-items: stretch; }
.sku-matriz-columna { text-align: center; align-self: end; color: var(--marca-petroleo); font-size: var(--fs-sm); }
.sku-matriz-fila { align-self: center; color: var(--marca-petroleo); font-size: var(--fs-sm); white-space: nowrap; text-align: right; padding-right: var(--esp-1); }
.sku-aparte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-4); }
.sku-aparte > div { display: flex; flex-direction: column; min-width: 0; }
.sku-aparte .sku-tarjeta { flex: 1; }
.sku-tarjeta { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: var(--esp-4); text-decoration: none; color: var(--color-texto);
  background: var(--color-superficie); border: 1px solid var(--color-borde); border-left: 4px solid var(--sku-gris); border-radius: var(--radio); box-shadow: var(--sombra); }
.sku-tarjeta:hover { border-color: var(--marca-petroleo); box-shadow: var(--sombra-flotante); }
.sku-tarjeta-titulo { font-weight: 600; color: var(--marca-petroleo); font-size: var(--fs-base); }
.sku-tarjeta-cifra { font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sku-tarjeta-cifra small { font-size: var(--fs-sm); font-weight: 400; color: var(--color-texto-suave); }
.sku-tarjeta-valor { font-size: var(--fs-sm); color: var(--color-texto-suave); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.sku-tarjeta-valor .sku-dinero { font-size: var(--fs-lg); font-weight: 600; color: var(--color-texto); }
.sku-tarjeta-texto { color: var(--color-texto-suave); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.sku-tarjeta-ver { margin-top: auto; padding-top: var(--esp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--color-primario); }
.sku-tarjeta.sku-uso { border-left-color: var(--sku-uso); }
.sku-tarjeta.sku-sinstock { border-left-color: var(--sku-uso-3); }
.sku-tarjeta.sku-marcado { border-left-color: var(--sku-gris-claro); }
.sku-tarjeta.sku-movimiento { border-left-color: var(--sku-ambar-borde); background: linear-gradient(var(--sku-ambar-fondo), #fff 60%); }
.sku-tarjeta.sku-candidato { border-color: var(--sku-candidato); border-left: 4px solid var(--sku-candidato); background: linear-gradient(var(--sku-candidato-fondo), #fff 65%); }
.sku-tarjeta.sku-candidato .sku-tarjeta-titulo, .sku-tarjeta.sku-candidato .sku-tarjeta-ver { color: var(--marca-verde-oscuro); }

/* Chips de estado */
.sku-chips { white-space: normal; }
.sku-chip { display: inline-block; padding: 1px 8px; margin: 1px 4px 1px 0; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600;
  line-height: 1.6; white-space: nowrap; background: var(--color-fondo-suave); color: #4d5d68; border: 1px solid var(--color-borde); }
.sku-chip-stock { background: #e1f0fa; color: var(--marca-petroleo); border-color: #b9d8ea; }
.sku-chip-listas { background: #eaf2f6; color: var(--marca-petroleo); border-color: #b9d8ea; }
.sku-chip-marcado { background: #eceff1; color: #4d5d68; border-color: #cfd6db; }
.sku-revision-revisado { background: #e6f1fa; color: #0b5e92; border-color: #b7d7ee; }
.sku-revision-compartido { background: var(--color-alerta-fondo); color: var(--color-alerta-texto); border-color: #f0d49a; }
.sku-revision-resuelto { background: var(--color-ok-fondo); color: var(--color-ok-texto); border-color: #b9e0c6; }
.sku-revision-no_duplicado { background: transparent; color: var(--color-texto-suave); border-style: dashed; }
.sku-revision-form { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: flex-end; }
.sku-revision-comentario { flex: 1 1 22rem; }
.sku-revision-comentario textarea { width: 100%; resize: vertical; }
.sku-chip-mov { background: var(--color-alerta-fondo); color: var(--color-alerta-texto); border-color: #f0d49a; }
.sku-chip-candidato { background: var(--color-ok-fondo); color: var(--color-ok-texto); border-color: #b9e0c6; }
.sku-chip-si { background: var(--color-ok-fondo); color: var(--color-ok-texto); border-color: #b9e0c6; }
.sku-chip-no { background: #fff; color: #5a6f7c; }

/* Desglose por dueño: barras proporcionales */
.sku-barras { list-style: none; margin: 0; padding: 0; max-width: 820px; }
.sku-barra-fila { display: grid; grid-template-columns: minmax(110px, 220px) minmax(80px, 1fr) auto auto; gap: var(--esp-3); align-items: center; padding: 4px 0;
  border-bottom: 1px solid var(--color-fondo-suave); font-size: var(--fs-sm); }
.sku-barra-etiqueta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sku-barra-grafica { display: block; width: 100%; height: 14px; }
.sku-barra-fondo { fill: var(--color-fondo-suave); }
.sku-barra-valor { fill: var(--marca-petroleo); }
.sku-barra-cifra { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; min-width: 3.5ch; }
.sku-barra-importe { text-align: right; color: var(--color-texto-suave); min-width: 12ch; }
.sku-mas { margin-top: var(--esp-2); }
.sku-mas summary { cursor: pointer; color: var(--color-primario); font-size: var(--fs-sm); font-weight: 600; }

/* Tablas: encabezado fijo dentro de su contenedor, hover y números a la derecha */
.sku-tabla { overflow: auto; max-height: 70vh; background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio); }
.sku-tabla .tabla { margin: 0; }
.sku-tabla-datos thead th { position: sticky; top: 0; z-index: 2; box-shadow: 0 1px 0 var(--color-borde); }
.sku-tabla-datos tbody tr:hover { background: #eef5f9; }
.sku-tabla-datos td.numero, .sku-tabla-datos th.numero { text-align: right; font-variant-numeric: tabular-nums; }
.sku-cero { color: #8b9aa5; }

@media (max-width: 1100px) {
  .sku-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sku-kpis, .sku-aparte { grid-template-columns: minmax(0, 1fr); }
  .sku-matriz { grid-template-columns: minmax(0, 1fr); }
  .sku-matriz-vacia, .sku-matriz-columna { display: none; }
  .sku-matriz-fila { text-align: left; margin-top: var(--esp-2); }
  .sku-barra-fila { grid-template-columns: minmax(0, 1fr) auto; }
  .sku-barra-grafica { grid-column: 1 / -1; grid-row: 2; }
  .sku-filtros { align-items: stretch; }
  .sku-filtro-campo { flex: 1 1 100%; }
  .sku-filtro-campo input[type=number] { width: 100%; }
}
@media print {
  .sku-tabla { max-height: none; overflow: visible; }
  .sku-tabla-datos thead th { position: static; }
  .sku-acciones, .sku-filtros, .migas { display: none; }
  .sku-kpi, .sku-tarjeta, .sku-seg, .sku-muestra, .sku-chip, .sku-barra-valor { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sku-kpi, .sku-tarjeta, .sku-seccion { break-inside: avoid; }
}