/* =====================================================================
   CPJA 175 · Gestión MASC — estilos de la aplicación
   Todos los colores se definen como variables: para cambiar la marca,
   edita solo este bloque.
   ===================================================================== */
:root {
  --cpja-azul: #12335b;          /* barra lateral y encabezados */
  --cpja-azul-2: #1b4677;
  --cpja-acento: #c8a24a;        /* indicador activo (uso mínimo) */
  --cpja-fondo: #f3f5f8;         /* plano de la página */
  --cpja-superficie: #ffffff;    /* tarjetas */
  --cpja-borde: rgba(11, 11, 11, .10);
  --cpja-tinta: #0b0b0b;
  --cpja-tinta-2: #52514e;
  --cpja-tinta-3: #6c6b66;
  --cpja-rejilla: #e1e0d9;
  /* Gráficas: una sola serie (validada contra la superficie clara) */
  --viz-serie-1: #2a78d6;
  --viz-pista: #eef1f5;
  /* Estatus (fijos, siempre acompañados de icono + texto) */
  --st-bien: #0ca30c;
  --st-cuidado: #fab219;
  --st-serio: #ec835a;
  --st-urgente: #d03b3b;
  --st-bien-texto: #006300;
  --st-urgente-texto: #b02a2a;
  --st-cuidado-texto: #8a5a00;
  color-scheme: light;
}
[data-bs-theme="dark"] {
  --cpja-azul: #0e1d31;
  --cpja-azul-2: #16304f;
  --cpja-fondo: #121416;
  --cpja-superficie: #1c1f23;
  --cpja-borde: rgba(255, 255, 255, .10);
  --cpja-tinta: #f0efec;
  --cpja-tinta-2: #c3c2b7;
  --cpja-tinta-3: #9b9a93;
  --cpja-rejilla: #2c2c2a;
  --viz-serie-1: #3987e5;
  --viz-pista: #262a30;
  --st-bien-texto: #2fd12f;
  --st-urgente-texto: #f08080;
  --st-cuidado-texto: #fab219;
  color-scheme: dark;
}

body {
  background: var(--cpja-fondo);
  color: var(--cpja-tinta);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: .925rem;
}
a { text-underline-offset: 2px; }

/* ---------------------------------------------------------------- layout */
.app { display: flex; min-height: 100vh; }
/* El contenedor es "offcanvas" en pantallas chicas; el fondo va en el hijo
   porque Bootstrap fuerza fondo transparente en .offcanvas-lg de escritorio. */
.lateral { --bs-offcanvas-width: 264px; }
@media (min-width: 992px) {
  .lateral { width: 252px; flex: 0 0 252px; position: sticky; top: 0; height: 100vh; }
}
.barra-lateral { background: var(--cpja-azul); color: #dfe7f1; width: 100%; height: 100%; overflow-y: auto; }
.barra-lateral .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.marca {
  display: flex; align-items: center; gap: .6rem;
  padding: 1rem 1.1rem; color: #fff; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.marca:hover { color: #fff; }
/* Logotipo oficial (azul sobre transparente): va sobre un círculo blanco para contrastar con la barra. */
.marca-logo {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; padding: 3px;
  background: #fff; object-fit: contain;
}
.marca-logo-grande { width: 112px; height: 112px; object-fit: contain; }
.marca-texto { line-height: 1.1; }
.marca-texto strong { display: block; font-size: 1rem; }
.marca-texto small { color: #9fb3cc; font-size: .72rem; }
.menu { list-style: none; margin: 0; padding: .6rem 0 1.5rem; }
.menu-seccion {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: #8ea3bd; padding: 1rem 1.25rem .35rem;
}
.menu a {
  display: flex; align-items: center; gap: .7rem;
  padding: .48rem 1.25rem; color: #dfe7f1; text-decoration: none;
  border-left: 3px solid transparent; font-size: .9rem;
}
.menu a:hover { background: rgba(255,255,255,.06); color: #fff; }
.menu a.activo { background: rgba(255,255,255,.10); color: #fff; border-left-color: var(--cpja-acento); }
.menu .bi { font-size: 1rem; opacity: .9; }
.menu .contador { margin-left: auto; }

.principal { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.barra-superior {
  position: sticky; top: 0; z-index: 1020;
  background: var(--cpja-superficie); border-bottom: 1px solid var(--cpja-borde);
  display: flex; align-items: center; gap: .75rem; padding: .55rem 1rem;
}
.barra-superior .titulo { font-weight: 600; font-size: .95rem; margin: 0; color: var(--cpja-tinta-2); }
.selector-sede { min-width: 190px; }
.contenido { padding: 1.25rem; flex: 1; }
@media (max-width: 575.98px) {
  .contenido { padding: .9rem 1rem; }
  .selector-sede { min-width: 0; max-width: 150px; }
}

.tarjeta {
  background: var(--cpja-superficie); border: 1px solid var(--cpja-borde);
  border-radius: 12px; padding: 1rem 1.1rem;
}
.tarjeta + .tarjeta { margin-top: 1rem; }
.tarjeta-titulo { font-size: .95rem; font-weight: 650; margin: 0 0 .75rem; display: flex; align-items: center; gap: .5rem; }
.tarjeta-titulo small { font-weight: 400; color: var(--cpja-tinta-3); }
.texto-tenue { color: var(--cpja-tinta-3) !important; }
.texto-secundario { color: var(--cpja-tinta-2) !important; }

/* ---------------------------------------------------------------- encabezado de expediente */
.exp-encabezado { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: flex-start; justify-content: space-between; }
.exp-numero { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.exp-datos { display: flex; flex-wrap: wrap; gap: .35rem .9rem; color: var(--cpja-tinta-2); font-size: .85rem; margin-top: .25rem; }
.pestanas { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; border-bottom: 1px solid var(--cpja-borde); }
.pestanas .nav-link { white-space: nowrap; color: var(--cpja-tinta-2); border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: .5rem .4rem; font-size: .83rem; }
.pestanas .nav-link .bi { margin-right: .1rem; }
.pestanas .nav-link:hover { color: var(--cpja-tinta); }
.pestanas .nav-link.active { color: var(--cpja-tinta); border-bottom-color: var(--cpja-azul-2); background: transparent; font-weight: 600; }
[data-bs-theme="dark"] .pestanas .nav-link.active { border-bottom-color: var(--viz-serie-1); }

/* ---------------------------------------------------------------- estatus con icono + texto */
.estatus { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 600; padding: .15rem .5rem; border-radius: 999px; border: 1px solid var(--cpja-borde); white-space: nowrap; }
.estatus .punto { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; }
.estatus-pendiente { color: var(--cpja-tinta-2); }
.estatus-pendiente .punto { background: transparent; border: 2px solid var(--cpja-tinta-3); }
.estatus-proceso { color: var(--cpja-tinta); }
.estatus-proceso .punto { background: var(--viz-serie-1); }
.estatus-concluida { color: var(--st-bien-texto); }
.estatus-concluida .punto { background: var(--st-bien); }
.estatus-noaplica { color: var(--cpja-tinta-3); text-decoration: line-through; }
.estatus-noaplica .punto { background: var(--cpja-rejilla); }

.semaforo { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; font-size: .8rem; white-space: nowrap; }
.semaforo .bi { font-size: .95rem; }
.semaforo-verde { color: var(--st-bien-texto); }
.semaforo-verde .bi { color: var(--st-bien); }
.semaforo-amarillo { color: var(--st-cuidado-texto); }
.semaforo-amarillo .bi { color: var(--st-cuidado); }
.semaforo-rojo { color: var(--st-urgente-texto); }
.semaforo-rojo .bi { color: var(--st-urgente); }
.semaforo-gris { color: var(--cpja-tinta-3); }
.fila-bloqueante { box-shadow: inset 3px 0 0 var(--st-urgente); }
.fila-media { box-shadow: inset 3px 0 0 var(--st-cuidado); }

/* ---------------------------------------------------------------- tabla de flujo */
.tabla-flujo { font-size: .79rem; margin: 0; }
.tabla-flujo th, .tabla-flujo td { white-space: nowrap; vertical-align: middle; padding: .32rem .4rem; }
.tabla-flujo td.nombre { white-space: normal; min-width: 210px; }
.tabla-flujo .acciones-etapa { float: right; margin-left: .35rem; }
.tabla-flujo .doc-pend { font-size: .7rem; color: var(--st-urgente-texto); font-weight: 600; white-space: nowrap; }
.tabla-flujo thead th { background: var(--bs-tertiary-bg); font-weight: 600; color: var(--cpja-tinta-2); border-bottom-width: 1px; }
.tabla-flujo thead tr.grupo th { text-align: center; text-transform: uppercase; font-size: .68rem; letter-spacing: .06em; border-bottom: 2px solid var(--cpja-borde); }
.tabla-flujo .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-flujo .fecha { font-variant-numeric: tabular-nums; }
.tabla-flujo tr.fila-expediente td { background: color-mix(in srgb, var(--viz-serie-1) 9%, var(--cpja-superficie)); font-weight: 700; }
.tabla-flujo tr.fila-fase td { background: var(--bs-tertiary-bg); font-weight: 650; }
.tabla-flujo tr.fila-etapa td.nombre { padding-left: 1.6rem; }
.tabla-flujo .separador { border-left: 1px solid var(--cpja-borde); }
.tabla-flujo .act { min-width: 2.2rem; text-align: center; font-variant-numeric: tabular-nums; }
.tabla-flujo .act-retr { color: var(--st-urgente-texto); font-weight: 700; }
.bloqueada { color: var(--cpja-tinta-3); }

/* ---------------------------------------------------------------- documentos */
.etapa-docs { border: 1px solid var(--cpja-borde); border-radius: 12px; overflow: hidden; background: var(--cpja-superficie); }
.etapa-docs + .etapa-docs { margin-top: 1rem; }
.etapa-docs-titulo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem 1rem; background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--cpja-borde); }
.etapa-docs-titulo h3 { font-size: .92rem; margin: 0; font-weight: 650; }
.tabla-docs { font-size: .82rem; margin: 0; table-layout: fixed; min-width: 1060px; }
.tabla-docs td, .tabla-docs th { vertical-align: middle; overflow-wrap: anywhere; }
.tabla-docs .datos-sup { font-size: .76rem; line-height: 1.35; }
.tabla-docs th { font-weight: 600; color: var(--cpja-tinta-2); font-size: .78rem; }
.archivo-subir { max-width: 230px; }

/* ---------------------------------------------------------------- KPIs y gráficas */
.kpi { background: var(--cpja-superficie); border: 1px solid var(--cpja-borde); border-radius: 12px; padding: .9rem 1rem; height: 100%; }
.kpi-etiqueta { color: var(--cpja-tinta-2); font-size: .8rem; margin-bottom: .2rem; }
.kpi-valor { font-size: 1.65rem; font-weight: 650; line-height: 1.15; color: var(--cpja-tinta); }
.kpi-nota { color: var(--cpja-tinta-3); font-size: .76rem; margin-top: .2rem; }
.kpi-heroe .kpi-valor { font-size: 3rem; }

.barras { list-style: none; margin: 0; padding: 0; }
.barras li { display: grid; grid-template-columns: minmax(90px, 34%) 1fr; gap: .6rem; align-items: center; padding: 3px 0; }
.barras .etiqueta { font-size: .82rem; color: var(--cpja-tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barras .pista { position: relative; display: flex; align-items: center; gap: .45rem; min-height: 22px; }
.barras .barra {
  display: block; height: 14px; background: var(--viz-serie-1);
  border-radius: 0 4px 4px 0; min-width: 3px; outline-offset: 2px;
}
.barras .barra:hover, .barras .barra:focus-visible { filter: brightness(1.12); }
.barras .valor { font-size: .8rem; color: var(--cpja-tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
.barras .eje { border-left: 1px solid var(--cpja-rejilla); }

[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 30;
  background: var(--cpja-superficie); color: var(--cpja-tinta);
  border: 1px solid var(--cpja-borde); box-shadow: 0 4px 14px rgba(0,0,0,.12);
  padding: .3rem .5rem; border-radius: 6px; font-size: .76rem; white-space: nowrap; font-weight: 600;
}

/* ---------------------------------------------------------------- editor de textos */
.editor { border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-body-bg); }
.editor-barra { display: flex; flex-wrap: wrap; gap: 2px; padding: .35rem; border-bottom: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); border-radius: .5rem .5rem 0 0; }
.editor-barra button { border: 0; background: transparent; color: var(--cpja-tinta-2); border-radius: 4px; padding: .2rem .45rem; font-size: .85rem; line-height: 1.2; }
.editor-barra button:hover { background: var(--cpja-borde); color: var(--cpja-tinta); }
.editor-barra .sep { width: 1px; background: var(--bs-border-color); margin: 0 .25rem; }
.editor-area { min-height: 220px; padding: .75rem 1rem; outline: none; overflow-y: auto; max-height: 60vh; }
.editor-area:focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--viz-serie-1) 35%, transparent); }
.editor-pie { display: flex; justify-content: space-between; font-size: .75rem; color: var(--cpja-tinta-3); padding: .25rem .6rem; border-top: 1px solid var(--bs-border-color); }
.editor-variables { position: absolute; z-index: 40; width: 320px; max-height: 300px; overflow-y: auto; }
.variable-token { background: color-mix(in srgb, var(--viz-serie-1) 14%, transparent); border-radius: 4px; padding: 0 .2rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }
.contenido-texto { line-height: 1.55; }
.contenido-texto p { margin-bottom: .5rem; }

/* ---------------------------------------------------------------- misceláneos */
.form-label { font-weight: 600; font-size: .82rem; color: var(--cpja-tinta-2); margin-bottom: .25rem; }
.form-text { font-size: .75rem; }
.table { --bs-table-bg: transparent; }
.tabla-compacta td, .tabla-compacta th { padding: .45rem .55rem; font-size: .85rem; }
.vacio { text-align: center; color: var(--cpja-tinta-3); padding: 2rem 1rem; }
.vacio .bi { font-size: 2rem; display: block; margin-bottom: .4rem; }
.codigo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; }
.acceso { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(160deg, var(--cpja-azul) 0%, var(--cpja-azul-2) 100%); padding: 1rem; }
.acceso .tarjeta { width: 100%; max-width: 380px; }
@media print {
  .barra-lateral, .barra-superior, .no-imprimir { display: none !important; }
  .contenido { padding: 0; }
}

/* Tablero de inicio: cifras del reporte de sancionados y filas por antigüedad. */
.kpi-valor-chico { font-size: 1.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.cifra { border: 1px solid var(--cpja-borde); border-radius: 10px; padding: .6rem .4rem; height: 100%; }
.cifra-valor { font-size: 1.75rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cifra-etiqueta { font-size: .75rem; color: var(--bs-secondary-color); }
.cifra-verde .cifra-valor { color: var(--st-bien-texto); }
tr.fila-ok > td:first-child { box-shadow: inset 4px 0 0 var(--st-bien); }
tr.fila-media > td:first-child { box-shadow: inset 4px 0 0 var(--st-cuidado); }
tr.fila-bloqueante > td:first-child { box-shadow: inset 4px 0 0 var(--st-urgente); }

/* Listas largas del inicio: alto fijo con barra para desplazarse y encabezado fijo. */
.lista-desplazable { max-height: 26rem; overflow-y: auto; border: 1px solid var(--cpja-borde); border-radius: 8px; }
.lista-desplazable thead th { position: sticky; top: 0; z-index: 1; background: var(--cpja-superficie); box-shadow: inset 0 -1px 0 var(--cpja-borde); }
.lista-desplazable .fila-grupo th { position: sticky; top: 2.1rem; background: var(--bs-tertiary-bg); font-weight: 600; }
.lista-desplazable-barras .barras { max-height: 22rem; overflow-y: auto; padding-right: .25rem; }
.lista-desplazable-barras .barras li { grid-template-columns: minmax(150px, 60%) 1fr; }
.tabla-materia td, .tabla-materia th { padding-left: .35rem; padding-right: .35rem; }

/* Impresión del reporte del Inicio (botón «Imprimir»): sin menú ni barras, listas completas. */
.solo-imprimir { display: none; }
@media print {
  @page { size: letter; margin: 1.2cm; }
  html, body { background: #fff !important; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; font-size: 10pt; }
  .lateral, .barra-superior, .alert, .btn { display: none !important; }
  .app, .principal, .contenido { display: block !important; margin: 0 !important; padding: 0 !important; width: auto !important; }
  .solo-imprimir { display: block !important; }
  .encabezado-impresion { border-bottom: 2px solid #000; padding-bottom: .35rem; margin-bottom: .6rem; }
  .imprimir-mt-0 { margin-top: 0 !important; }
  .tarjeta { box-shadow: none !important; border: 1px solid #bbb !important; break-inside: auto; }
  .tarjeta-titulo, thead, .fila-grupo { break-after: avoid; }
  tr { break-inside: avoid; }
  .row > [class*="col-"] { flex: 0 0 100% !important; max-width: 100% !important; }
  .lista-desplazable, .lista-desplazable-barras .barras { max-height: none !important; overflow: visible !important; }
  .lista-desplazable thead th, .lista-desplazable .fila-grupo th { position: static !important; }
  .d-none.d-sm-table-cell, .d-none.d-md-table-cell { display: table-cell !important; }
  a { color: inherit !important; text-decoration: none !important; }
  .tabla-compacta th, .tabla-compacta td { padding-top: .12rem !important; padding-bottom: .12rem !important; font-size: 8.5pt; }
  .tarjeta { padding: .6rem !important; margin-bottom: .5rem; }
}