/* Presentaciones de NADKOR Fiscal y NADKOR Contabilidad (28/09/2026). Van
   sobre presentacion.css (la del ERP): mismas láminas, animaciones y
   reglas -- sin JS todo se ve; sin movimiento con prefers-reduced-motion.
   Aquí solo lo que esas dos presentaciones agregan. El color del producto
   (catálogo de submarcas) acompaña; la paleta sigue siendo la de NADKOR. */
.producto-fiscal { --producto: #76639A; --producto-claro: #B7A8D6; --producto-suave: #EFEBF6; }
.producto-contabilidad { --producto: #53856C; --producto-claro: #9FCDB4; --producto-suave: #E6F0EA; }

/* Portada: el icono de la submarca con su nombre en texto. El logotipo
   ancho no se usa aquí: en CONTABILIDAD sale recortado (catálogo). */
.marca-producto { display: inline-flex; align-items: center; gap: 1.1rem; margin: 0 auto 2.2rem; text-align: left; }
.marca-producto img { width: 88px; height: 88px; border-radius: 22px; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.6); }
.marca-producto strong { display: block; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.1; font-weight: 800; color: #FFFFFF; letter-spacing: -0.02em; }
.marca-producto span { display: block; margin-top: 0.3rem; font-size: 0.86rem; color: var(--producto-claro); font-weight: 600; letter-spacing: 0.04em; }
.barra-producto { font-size: 0.8rem; font-weight: 700; color: var(--producto); letter-spacing: 0.06em; text-transform: uppercase; }
.lamina .eyebrow { color: var(--teal-oscuro); }
.chip-producto { background: var(--producto-suave); color: var(--producto); }

.deptos.deptos-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Matriz: obligación × mes (Fiscal) o cliente × etapa (Contabilidad). */
.matriz-caja { padding: 1.2rem 1.3rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); overflow-x: auto; }
.matriz-caja figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.9rem; }
.matriz-caja figcaption strong { color: var(--navy); }
.matriz-caja figcaption span { font-size: 0.8rem; color: var(--texto-2); }
.matriz { width: 100%; min-width: 520px; border-collapse: separate; border-spacing: 4px; font-size: 0.82rem; }
.matriz th { font-size: 0.72rem; font-weight: 700; color: var(--texto-2); text-transform: uppercase; letter-spacing: 0.04em; padding: 0.2rem; }
.matriz th[scope="row"] { text-align: left; text-transform: none; letter-spacing: 0; font-size: 0.84rem; color: var(--navy); white-space: nowrap; padding-right: 0.8rem; }
.matriz td { height: 2rem; text-align: center; border-radius: 7px; font-weight: 700; font-size: 0.74rem; }
.matriz .ok { background: #E1F4EA; color: #1E7A4C; }
.matriz .falta { background: #FBE3E1; color: #9E322C; }
.matriz .pend { background: #FFF1D9; color: #8A5A10; }
.matriz .nada { background: #F1F5F6; color: #9AAAB0; }
html.js .matriz td { opacity: 0; transform: scale(0.85); transition: opacity 0.35s var(--curva), transform 0.35s var(--curva);
  transition-delay: calc(0.4s + var(--j, 0) * 25ms); }
html.js .visible .matriz td { opacity: 1; transform: none; }

.tablero-producto { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.1rem; }
.tablero-producto .kpis { grid-column: 1 / -1; }
.lista-atencion { margin: 0; padding: 1.2rem 1.3rem; list-style: none; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra); display: flex; flex-direction: column; }
.lista-atencion > strong { color: var(--navy); margin-bottom: 0.6rem; }
.lista-atencion li { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0; border-top: 1px solid #EDF2F3; font-size: 0.86rem; }
.lista-atencion li span { flex: 1; min-width: 0; }
.lista-atencion em { font-style: normal; font-size: 0.72rem; font-weight: 700; padding: 0.18rem 0.55rem; border-radius: 999px; white-space: nowrap; }
.lista-atencion .rojo { background: #FBE3E1; color: #9E322C; }
.lista-atencion .ambar { background: #FFF1D9; color: #8A5A10; }
.lista-atencion .gris { background: #EEF2F3; color: #52666F; }

/* Frecuencias de las revisiones (Fiscal). */
.frecuencias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.frecuencia { padding: 1.3rem 1.2rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.frecuencia b { display: inline-block; padding: 0.25rem 0.65rem; border-radius: 999px; font-size: 0.74rem; color: #FFFFFF; background: var(--producto); }
.frecuencia h3 { margin-top: 0.9rem; font-size: 1.02rem; color: var(--navy); }
.frecuencia p { margin: 0.35rem 0 0; font-size: 0.86rem; color: var(--texto-2); }
.controles { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.controles li { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem; border-radius: 999px; font-size: 0.88rem; font-weight: 600;
  color: var(--navy); background: var(--superficie); border: 1px solid var(--borde); }
.controles svg { width: 1.05rem; height: 1.05rem; color: var(--producto); }

/* Cadena de custodia de la e.firma (Fiscal, lámina oscura). */
.cadena { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.cadena li { position: relative; display: flex; gap: 0.9rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: 14px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); }
.cadena li + li::before { content: ""; position: absolute; left: 1.9rem; top: -0.8rem; width: 2px; height: 0.8rem; background: var(--producto-claro); }
.cadena-num { flex: none; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; font-weight: 800; font-size: 0.85rem;
  color: #0C2F3D; background: var(--producto-claro); }
.cadena strong { display: block; color: #FFFFFF; }
.cadena div span { display: block; font-size: 0.86rem; color: #B9CDD3; }

/* Póliza de ejemplo con el porqué de cada renglón (Contabilidad). */
.poliza { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 1.2rem; align-items: start; }
.factura-origen { padding: 1.3rem 1.4rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; box-shadow: var(--sombra-alta); }
.factura-origen dl { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 0.9rem 0 0; font-size: 0.88rem; }
.factura-origen dt { color: var(--texto-2); }
.factura-origen dd { margin: 0; color: var(--navy); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.poliza-caja { padding: 1.2rem 1.3rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; box-shadow: var(--sombra); overflow-x: auto; }
.poliza-caja table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 0.84rem; }
.poliza-caja th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-2); text-align: left; padding: 0 0.5rem 0.5rem; }
.poliza-caja td { padding: 0.6rem 0.5rem; border-top: 1px solid #EDF2F3; vertical-align: top; }
.poliza-caja td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; color: var(--navy); }
.poliza-caja .porque { display: block; margin-top: 0.2rem; font-size: 0.76rem; color: var(--producto); font-weight: 600; }
.poliza-caja tfoot td { font-weight: 800; color: var(--navy); border-top: 2px solid var(--borde); }

/* Dos lecturas del IVA (Contabilidad, lámina oscura). */
.lecturas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin-bottom: 1rem; }
.lectura { padding: 0.9rem 1rem; border-radius: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); }
.lectura small { display: block; color: #A9C1C8; font-size: 0.8rem; }
.lectura strong { display: block; margin-top: 0.2rem; font-size: 1.35rem; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.diferencia { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0 0 1rem; padding: 0.7rem 0.9rem; border-radius: 10px;
  background: rgba(227, 163, 59, 0.14); color: #F3D29B; font-size: 0.88rem; }
.diferencia svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; }

@media (max-width: 1100px) {
  .frecuencias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .tablero-producto, .poliza { grid-template-columns: minmax(0, 1fr); }
  .deptos.deptos-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .marca-producto img { width: 64px; height: 64px; border-radius: 16px; }
  .lecturas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .deptos.deptos-3, .frecuencias { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html.js .matriz td { opacity: 1; transform: none; }
}
@media print {
  html.js .matriz td { opacity: 1 !important; transform: none !important; }
}

/* Barra: icono de la submarca + nombre en texto (el logotipo horizontal a
   37 px no deja leer el nombre del producto). */
.barra-marca { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.barra-marca img { width: 2.25rem; height: 2.25rem; }
.barra-marca span { font-weight: 800; font-size: 1rem; color: var(--navy); white-space: nowrap; letter-spacing: -0.01em; }
@media (max-width: 480px) { .barra-marca span { font-size: 0.86rem; } .barra-marca img { width: 1.9rem; height: 1.9rem; } }