/* ============================================================
   SIAT-NDC - Estilos del frontend

   Hoja unica de todas las pantallas. Va despues del CSS del
   framework gob.mx v3, al que sobreescribe donde choca.

   El bloque "Diseno" es el CSS comun de las catorce pantallas
   del lienzo de documents/mockups/Diseño/ (las catorce traen las
   mismas 103 reglas), sin el encabezado ni el pie institucional:
   esos los inyecta gobmx.js. El bloque "Complementos" agrega lo
   que el diseno no dibuja y la aplicacion necesita: avisos
   flotantes, modales, paginacion, estados de tabla, formularios
   reales y lo pendiente.
   ============================================================ */

/* Paleta guinda del diseno: una sola paleta primaria a la vez,
   como pide el Sistema Nacional de Diseno */
:root {
    --marca:       #611232;
    --marcaHover:  #4A0C26;
    --marcaActiva: #781838;
    --marcaClara:  #F3E4E9;
    --texto:       #161A1D;
    --textoMedio:  #434343;
    --textoSuave:  #767676;
    --borde:       #DDDDDD;
    --fondo:       #F9F9F9;
    --gris:        #F3F3F3;
    --rojo:        #9B0F15;
}

*, *::before, *::after { box-sizing: border-box; }

/* gob.mx fija la raíz en 10 px y los tamaños de esta hoja y de las vistas
   van en rem: con 12.5 px toda la letra queda 25 % más grande (decisión del
   usuario, 2026-10-15) */
html { font-size: 12.5px; }

/* La barra institucional de gob.mx separa el logo del menú con márgenes en
   rem (63rem a la derecha del logo): con la raíz más grande el menú se salía
   por la derecha. En escritorio el logo empuja al menú con margin auto */
@media (min-width: 768px) {
    nav.navbar .navbar-brand { margin-right: auto; }
    nav.navbar .navbar-collapse { flex-grow: 0; }
    nav.navbar .navbar-nav.margen { margin-left: 0; }
}

body {
    font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    color: var(--texto);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--marca); }
a:hover { color: var(--marcaHover); }

:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

/* El atributo hidden debe ganar aunque la clase del elemento fije display
   (.aviso, .campo, .boton): las vistas lo usan para mostrar y ocultar */
[hidden] { display: none !important; }

.solo-lector {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   Diseno
   ============================================================ */

/* --- Barra de aplicacion --- */
.appbar { display: flex; align-items: center; gap: 24px; height: 56px; padding: 0 24px;
          background: #FFFFFF; border-bottom: 1px solid #DDDDDD; }
.appbar__marca { font-weight: 700; font-size: 1.0625rem; letter-spacing: .01em; color: var(--marca, #611232); }
.buscador { display: flex; align-items: center; gap: 8px; flex-grow: 1; max-width: 420px;
            height: 36px; padding: 0 14px; border: 1px solid #DDDDDD; border-radius: 50rem;
            background: #FFFFFF; color: #767676; font-size: .875rem; }
.appbar__derecha { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.campana { position: relative; display: flex; }
.campana__punto { position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px;
                  padding: 0 4px; border-radius: 50rem; background: #9B0F15; color: #fff;
                  font-size: .625rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.selperiodo { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px;
              border: 1px solid #DDDDDD; border-radius: 8px; font-size: .8125rem; font-weight: 600; color: #434343; }
.usuario { display: flex; align-items: center; gap: 10px; }
.avatar { width: 36px; height: 36px; border-radius: 50rem; background: var(--marcaClara, #F3E4E9);
          color: var(--marca, #611232); display: flex; align-items: center; justify-content: center;
          font-weight: 700; font-size: .8125rem; }
.usuario__nom { font-size: .8125rem; font-weight: 600; line-height: 1.25; display: block; }
.usuario__rol { font-size: .75rem; color: #767676; line-height: 1.25; display: block; }

/* --- Riel lateral --- */
.cuerpo { display: flex; align-items: stretch; }
.riel { width: 96px; flex-shrink: 0; background: var(--marca, #611232); padding: 16px 8px;
        display: flex; flex-direction: column; gap: 4px; }
.riel__item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px;
              border-radius: 8px; color: #FFFFFF; text-decoration: none; font-size: .6875rem;
              font-weight: 600; text-align: center; line-height: 1.2; }
.riel__item--activo { background: var(--marcaActiva, #781838); }
.principal { flex-grow: 1; padding: 28px 40px 40px; min-width: 0; }

/* --- Tipografia y bloques --- */
.migas { font-size: .8125rem; color: #767676; margin: 0 0 12px; }
.migas b { color: #434343; font-weight: 600; }
.h1 { font-size: 2rem; line-height: 2.75rem; font-weight: 700; margin: 0 0 6px; }
.h2 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; margin: 0 0 16px; }
.h3 { font-size: 1rem; font-weight: 700; margin: 0 0 12px; }
.detalle { font-size: .875rem; color: #767676; margin: 0; }
.tarjeta { background: #FFFFFF; border: 1px solid #DDDDDD; border-radius: 16px; padding: 20px 24px;
           box-shadow: 0 1px 3px rgba(0,0,0,.04); }

/* --- Botones --- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
         height: 48px; padding: 0 20px; border-radius: 8px; font-size: 1rem; font-weight: 600;
         text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.boton--primario { background: var(--marca, #611232); color: #FFFFFF; }
.boton--primario:hover { background: var(--marcaHover, #4A0C26); color: #FFFFFF; }
.boton--secundario { background: #FFFFFF; border-color: var(--marca, #611232); color: var(--marca, #611232); }
.boton--fantasma { background: transparent; color: var(--marca, #611232); padding: 0 8px; }
.boton--chico { height: 36px; padding: 0 14px; font-size: .8125rem; border-radius: 8px; }
.boton--peligro { background: #FFFFFF; border-color: #9B0F15; color: #9B0F15; }

/* --- Formularios --- */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo__eti { font-size: .8125rem; font-weight: 600; color: #434343; }
.campo__ctrl { height: 44px; border: 1px solid #DDDDDD; border-radius: 8px; background: #FFFFFF;
               padding: 0 12px; display: flex; align-items: center; justify-content: space-between;
               font-size: .875rem; color: #434343; }
.campo__ayuda { font-size: .75rem; color: #767676; }
.campo__ctrl--error { border-color: #9B0F15; }
.campo__error { font-size: .75rem; color: #9B0F15; font-weight: 600; }

/* --- Chips y estados --- */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
        border-radius: 50rem; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.chip--gris { background: #F3F3F3; color: #434343; }
.chip--verde { background: #F0FAF5; color: #086308; }
.chip--azul { background: #EDF2FE; color: #224497; }
.chip--rojo { background: #FAE5E5; color: #9B0F15; }
.chip--ambar { background: #FFEB99; color: #684700; }
.chip--naranja { background: #F9D9A9; color: #6E3700; }
.chip--morado { background: #ECE2F5; color: #6708C1; }
.chip--marca { background: var(--marcaClara, #F3E4E9); color: var(--marca, #611232); }

/* --- Avisos --- */
.aviso { display: flex; gap: 12px; padding: 14px 16px; border-radius: 8px; font-size: .875rem;
         line-height: 1.45; align-items: flex-start; }
.aviso--info { background: #EDF2FE; color: #224497; }
.aviso--ambar { background: #FFEB99; color: #684700; }
.aviso--naranja { background: #F9D9A9; color: #6E3700; }
.aviso--rojo { background: #FAE5E5; color: #9B0F15; }
.aviso b { font-weight: 700; }

/* --- Acciones pendientes del tablero (EP020.1 v11) --- */
.acciones { background: #FFEB99; color: #684700; border-radius: 8px; padding: 16px 16px 12px; margin-bottom: 20px; }
.acciones .h2 { color: #684700; margin-bottom: 12px; font-size: 1.125rem; }
.acciones__rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.acciones__tarjeta { display: block; padding: 14px 16px; color: inherit; text-decoration: none; }
.acciones__tarjeta:hover { border-color: #684700; }
.acciones__tarjeta .cifra__valor { font-size: 1.75rem; }

/* --- Tablas --- */
.tabla { width: 100%; border-collapse: collapse; background: #FFFFFF; font-size: .875rem; }
.tabla th { background: #F3F3F3; color: #434343; font-weight: 600; text-align: left;
            padding: 12px 16px; font-size: .8125rem; white-space: nowrap; }
.tabla th:first-child { border-top-left-radius: 8px; }
.tabla th:last-child { border-top-right-radius: 8px; }
.tabla td { padding: 14px 16px; border-bottom: 1px solid #DDDDDD; vertical-align: middle; height: 56px; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla__envoltura { border: 1px solid #DDDDDD; border-radius: 8px; overflow: hidden; background: #FFFFFF; }
.tabla__pie { display: flex; align-items: center; justify-content: space-between;
              padding: 12px 16px; font-size: .8125rem; color: #767676; border-top: 1px solid #DDDDDD; }
.mono { font-family: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; }
.punto { width: 10px; height: 10px; border-radius: 50rem; display: inline-block; flex-shrink: 0; }

/* ============================================================
   Complementos
   ============================================================ */

/* --- Convivencia con gob.mx v3 ---
   gobmx.js agrega margin-top de 70px al body si encuentra un <nav>,
   pensando en su sub-barra fija. El riel lateral es un <nav> pero no
   es fijo, asi que el margen solo dejaria un hueco */
body { margin-top: 0 !important; }

/* --- Barra de aplicacion: partes interactivas --- */
.appbar__marca { text-decoration: none; }
.buscador input {
    border: 0; outline: 0; background: transparent; flex-grow: 1; min-width: 0;
    font: inherit; color: var(--texto);
}
.selperiodo select {
    border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; padding-right: 4px;
}
.usuario { position: relative; background: transparent; border: 0; padding: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.cuenta-menu {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 1000; min-width: 220px;
    background: #FFFFFF; border: 1px solid var(--borde); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12); padding: 8px 0;
}
.cuenta-menu__dato { display: block; padding: 6px 16px; font-size: .75rem; color: var(--textoSuave); }
.cuenta-menu__opcion {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px; border: 0; background: transparent;
    font: inherit; font-size: .875rem; color: var(--textoMedio); text-decoration: none; cursor: pointer; text-align: left;
}
.cuenta-menu__opcion:hover { background: var(--gris); color: var(--texto); }
.cuenta { position: relative; }

/* --- Riel lateral: alto completo y entradas pendientes --- */
.cuerpo { min-height: calc(100vh - 56px); }
.riel__item:hover { background: var(--marcaActiva); color: #FFFFFF; }
.riel__item--pendiente { opacity: .55; }
.riel__item--pendiente:hover { background: transparent; }

/* --- Encabezado de pantalla --- */
.encabezado { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.encabezado__acciones { display: flex; gap: 12px; flex-shrink: 0; }
.migas a { color: var(--textoSuave); text-decoration: none; }
.migas a:hover { text-decoration: underline; }

/* --- Controles de formulario reales ---
   El diseno dibuja los campos como cajas; aqui los inputs, selects y
   textareas toman el mismo aspecto */
.control {
    height: 44px; width: 100%; border: 1px solid var(--borde); border-radius: 8px; background: #FFFFFF;
    padding: 0 12px; font: inherit; font-size: .875rem; color: var(--texto);
}
.control--grande { height: 48px; font-size: 1rem; }
textarea.control { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
select.control { appearance: none; padding-right: 36px; cursor: pointer;
    background: #FFFFFF 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='%23434343' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; }
.control:focus { outline: 2px solid var(--marca); outline-offset: 1px; border-color: var(--marca); }
.control:disabled { background: var(--gris); color: var(--textoSuave); cursor: not-allowed; }
.control.campo__ctrl--error { border-color: var(--rojo); }
.casilla { display: inline-flex; align-items: center; gap: 10px; font-size: .875rem; color: var(--textoMedio); cursor: pointer; }
.casilla input { width: 18px; height: 18px; accent-color: var(--marca); }
.rejilla { display: grid; gap: 16px; }
.rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rejilla__ancho { grid-column: 1 / -1; }
.form-errores { margin-bottom: 16px; }
.form-errores ul { margin: 0; padding-left: 18px; }
.form-errores:empty { display: none; }

/* --- Botones: estados --- */
button.boton { font-family: inherit; }
.boton:disabled, .boton[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.boton--peligro:hover { background: #FAE5E5; color: var(--rojo); }
.boton--secundario:hover { background: var(--marcaClara); color: var(--marca); }
.boton--fantasma:hover { text-decoration: underline; }
.boton--icono { width: 36px; padding: 0; }

/* --- Lo pendiente: se ve, no hace nada y lo dice --- */
.pendiente { opacity: .55; cursor: not-allowed; }

/* --- Tablas: estados y pie --- */
.tabla__estado { text-align: center; color: var(--textoSuave); padding: 32px 16px; height: auto; }
.tabla tbody tr:hover td { background: #FCFAFB; }
.tabla tbody tr.tabla__fila--activa td { background: #F6EEF1; }
.tabla__envoltura { overflow-x: auto; }
/* Matriz de doble entrada (roles y permisos): filas bajas y encabezados de fila con su línea */
.tabla--matriz td, .tabla--matriz th { height: auto; padding: 8px 16px; }
.tabla--matriz tbody th { border-bottom: 1px solid #DDDDDD; border-radius: 0; text-align: left; }
.tabla--matriz tbody th[scope="row"] { background: #FFFFFF; font-weight: 400; }
.tabla--matriz tbody th[scope="colgroup"] { background: #F9F9F9; padding-top: 10px; padding-bottom: 10px; }
.tabla--matriz td { text-align: center; }
.paginas { display: flex; align-items: center; gap: 4px; }
.paginas__boton {
    min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--borde); border-radius: 8px;
    background: #FFFFFF; color: var(--textoMedio); font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer;
}
.paginas__boton--activo { background: var(--marca); border-color: var(--marca); color: #FFFFFF; cursor: default; }
.paginas__boton:disabled { opacity: .45; cursor: not-allowed; }
.paginas__hueco { padding: 0 4px; color: var(--textoSuave); }

/* --- Filtros en chips (Todas 24, En captura 7...) --- */
.filtros-chip { display: flex; flex-wrap: wrap; gap: 8px; }
.filtros-chip .chip { border: 1px solid transparent; cursor: pointer; font-family: inherit; height: 32px; padding: 0 14px; }
.filtros-chip .chip--activo { background: var(--marca); color: #FFFFFF; }

/* --- Pestanas --- */
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin-bottom: 20px; }
.pestana {
    border: 0; background: transparent; font: inherit; font-size: .875rem; font-weight: 600; color: var(--textoMedio);
    padding: 10px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
}
.pestana--activa { color: var(--marca); border-bottom-color: var(--marca); }

/* --- Avisos flotantes --- */
.banner-zona { position: fixed; top: 16px; right: 16px; z-index: 3000; display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.banner {
    padding: 14px 16px; border-radius: 8px; font-size: .875rem; line-height: 1.45; font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14); background: #FFFFFF; border-left: 4px solid var(--textoSuave);
}
.banner--exito { border-left-color: #086308; }
.banner--error { border-left-color: var(--rojo); color: var(--rojo); }
.banner--aviso { border-left-color: #684700; }
.banner--info  { border-left-color: #224497; }

/* --- Modales --- */
.modal {
    position: fixed; inset: 0; z-index: 2000; display: none; align-items: flex-start; justify-content: center;
    background: rgba(22, 26, 29, .45); padding: 64px 16px; overflow-y: auto;
}
.modal--abierto { display: flex; }
.modal__caja { background: #FFFFFF; border-radius: 16px; width: 100%; max-width: 640px; box-shadow: 0 24px 48px rgba(0, 0, 0, .2); }
.modal__caja--ancha { max-width: 880px; }
.modal__cabeza { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--borde); }
.modal__titulo { font-size: 1.25rem; font-weight: 700; margin: 0; }
.modal__cuerpo { padding: 24px; }
.modal__pie { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--borde); }
.modal__cerrar { border: 0; background: transparent; font-size: 1.5rem; line-height: 1; color: var(--textoSuave); cursor: pointer; }
body.con-modal { overflow: hidden; }

/* --- Indicadores y tarjetas de cifra --- */
.cifra__eti { font-size: .8125rem; color: var(--textoSuave); display: block; margin-bottom: 10px; }
.cifra__valor { font-size: 2rem; font-weight: 700; line-height: 1.1; display: block; }
.cifra__unidad { font-size: .8125rem; color: var(--textoSuave); display: block; margin-top: 2px; }
.cifra__delta { font-size: .75rem; font-weight: 700; display: block; margin-top: 10px; }
.cifra__delta--sube { color: #086308; }
.cifra__delta--baja { color: var(--rojo); }
.grafica { width: 100%; height: 320px; }
.grafica__aviso { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--textoSuave); font-size: .875rem; text-align: center; padding: 16px; }
.cargando { color: var(--textoSuave); font-size: .875rem; }

/* --- Acceso (login y segundo factor) --- */
.acceso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 720px; }
.acceso__marca { background: var(--marca); color: #FFFFFF; padding: 56px 48px; display: flex; flex-direction: column; }
.acceso__chip { background: rgba(255, 255, 255, .16); color: #FFFFFF; height: 28px; padding: 0 14px; align-self: flex-start; margin-bottom: 28px; }
.acceso__titulo { font-size: 2.25rem; line-height: 2.85rem; font-weight: 700; margin: 0 0 18px; }
.acceso__texto { font-size: 1rem; line-height: 1.7; color: rgba(255, 255, 255, .88); margin: 0 0 28px; max-width: 480px; }
.acceso__pie { margin-top: auto; display: flex; align-items: center; gap: 28px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .22); }
.acceso__sigla { font-size: .8125rem; font-weight: 700; letter-spacing: .04em; }
.acceso__proyecto { font-size: .75rem; color: rgba(255, 255, 255, .7); line-height: 1.4; }
.acceso__panel { background: #FFFFFF; display: flex; align-items: center; justify-content: center; padding: 56px 48px; }
.acceso__caja { max-width: 420px; width: 100%; }
.acceso__h2 { font-size: 1.75rem; font-weight: 700; margin: 0 0 6px; }
.acceso__legal { font-size: .75rem; color: var(--textoSuave); line-height: 1.55; margin: 24px 0 0; }
.codigo { letter-spacing: .5em; font-size: 1.5rem; text-align: center; font-family: "Source Code Pro", ui-monospace, monospace; }

/* --- Sitio publico --- */
.publico-barra { display: flex; align-items: center; gap: 32px; height: 64px; padding: 0 40px; background: #FFFFFF; border-bottom: 1px solid var(--borde); }
.publico-barra nav { display: flex; align-items: center; gap: 24px; }
.publico-barra__enlace { font-size: .9375rem; font-weight: 600; text-decoration: none; color: var(--textoMedio); padding: 6px 2px; border-bottom: 2px solid transparent; }
.publico-barra__enlace--activo { font-weight: 700; color: var(--marca); border-bottom-color: var(--marca); }

/* --- Pagina de error --- */
.error-pagina { max-width: 560px; margin: 80px auto; text-align: center; padding: 0 16px; }
.error-pagina__codigo { font-size: 4rem; font-weight: 700; color: var(--marca); margin: 0; }

/* --- Pantallas angostas ---
   El diseno esta dibujado a 1440 px; abajo de 1100 el riel pasa a
   barra horizontal y las rejillas se apilan */
@media (max-width: 1100px) {
    .cuerpo { flex-direction: column; }
    .riel { width: 100%; flex-direction: row; overflow-x: auto; padding: 8px; }
    .riel__item { min-width: 84px; }
    .principal { padding: 20px 16px 32px; }
    .buscador { display: none; }
    .rejilla--3, .rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .acceso { grid-template-columns: 1fr; }
    .encabezado { flex-direction: column; }
}

@media (max-width: 640px) {
    .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: 1fr; }
    .usuario__nom, .usuario__rol, .selperiodo { display: none; }
    .acceso__marca, .acceso__panel { padding: 32px 16px; }
    .publico-barra { padding: 0 16px; gap: 16px; overflow-x: auto; }
}

/* --- Campana de notificaciones --- */
.notificaciones { width: 360px; padding: 8px 0 0; }
.notificaciones__item { flex-direction: column; align-items: flex-start; gap: 2px; border-bottom: 1px solid var(--gris); }
.notificaciones__item--nueva { background: var(--marcaClara); }
.notificaciones__item--nueva span { font-weight: 700; color: var(--texto); }
.notificaciones__fecha { font-size: .75rem; color: var(--textoSuave); }

/* --- Selector de formato (datos abiertos, EP022.2) ---
   <div class="formatos"><label class="formato"><input type="radio" name="formato" value="csv"><span>CSV</span></label>...</div> */
.formatos { display: flex; flex-wrap: wrap; gap: 8px; }
.formato { position: relative; cursor: pointer; }
.formato input { position: absolute; opacity: 0; pointer-events: none; }
.formato span {
    display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--borde);
    border-radius: 8px; background: #FFFFFF; font-size: .8125rem; font-weight: 600; color: var(--textoMedio);
}
.formato input:checked + span { border-color: var(--marca); background: var(--marcaClara); color: var(--marca); }
.formato input:focus-visible + span { outline: 2px solid var(--marca); outline-offset: 2px; }

/* --- Barra de avance ---
   Indica el estado, no un porcentaje: EP022.3 no da avance. La variante
   --indeterminada se mueve mientras el trabajo sigue en cola o generando */
.avance { height: 8px; border-radius: 50rem; background: var(--gris); overflow: hidden; }
.avance__relleno { height: 100%; width: 0; background: var(--marca); border-radius: 50rem; transition: width .3s; }
.avance--indeterminada .avance__relleno { width: 35%; animation: avance-vaiven 1.4s ease-in-out infinite; }
.avance--completa .avance__relleno { width: 100%; background: #086308; }
.avance--error .avance__relleno { width: 100%; background: var(--rojo); }
@keyframes avance-vaiven { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { .avance--indeterminada .avance__relleno { animation: none; width: 100%; opacity: .5; } }

/* --- Semaforo de lineas de accion (EP003) ---
   Color, figura y texto: no depende solo del color */
.semaforo { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.semaforo::before { content: ""; width: 10px; height: 10px; flex-shrink: 0; }
.semaforo--verde::before    { background: #086308; border-radius: 50%; }
.semaforo--amarillo::before { background: #B78A00; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.semaforo--naranja::before  { background: #C25E00; transform: rotate(45deg) scale(.85); }
.semaforo--rojo::before     { background: var(--rojo); }
.semaforo--sin::before      { background: transparent; border: 1px dashed var(--textoSuave); border-radius: 50%; }


/* Lista de ayuda: cada término (por ejemplo, un color del semáforo) con su explicación al lado */
.ayuda-texto { font-size: .875rem; line-height: 1.5; text-align: left; }
.ayuda-lista { display: grid; grid-template-columns: max-content 1fr; gap: 12px 16px; margin: 0; align-items: baseline; }
.ayuda-lista dt { margin: 0; }
.ayuda-lista dd { margin: 0; font-size: .875rem; line-height: 1.5; text-align: left; }

/* --- Mapa publico (EP021.9) ---
   Lienzo de MapLibre sobre las teselas de EP002.7; mapa.js pinta la coropleta
   y la vista pone el color con la escala del valor */
.mapa { position: relative; height: 460px; border-radius: 6px; overflow: hidden; background: #E3E6E8; }
.mapa[hidden] { display: none; }
.mapa__migas { margin-bottom: 8px; font-size: .875rem; }
.mapa__miga { background: none; border: 0; padding: 0; color: var(--enlace, #0B5394); text-decoration: underline; cursor: pointer; font: inherit; }
.mapa-popup .maplibregl-popup-content { padding: 6px 10px; font-size: .75rem; line-height: 1.4; }
.escala { display: flex; align-items: center; gap: 8px; font-size: .75rem; color: var(--textoSuave); }
.escala__barra { flex-grow: 1; height: 10px; border-radius: 50rem; }

/* --- Lectura (metodologia) --- */
.lectura { display: grid; grid-template-columns: 240px minmax(0, 720px); gap: 48px; align-items: start; }
/* La barra de gob.mx va fija arriba y mide 90 px: el índice se detiene
   debajo de ella y las secciones enlazadas por ancla no quedan tapadas */
.lectura__indice { position: sticky; top: 106px; display: flex; flex-direction: column; gap: 4px; font-size: .875rem; }
.lectura__indice a { color: var(--textoMedio); text-decoration: none; padding: 6px 10px; border-left: 2px solid var(--borde); }
.lectura__indice a:hover, .lectura__indice a[aria-current] { color: var(--marca); border-left-color: var(--marca); }
.lectura__seccion { scroll-margin-top: 106px; margin-bottom: 40px; }
@media (max-width: 1100px) { .lectura { grid-template-columns: 1fr; } .lectura__indice { position: static; } }

/* --- Catalogos (EP002, EP003, EP004 y EP024) ---
   La subnavegacion de Catalogos tiene mas pestanas de las que caben en
   una fila: se envuelve en lugar de desbordar la pantalla */
nav.pestanas { flex-wrap: wrap; row-gap: 0; }
nav.pestanas .pestana { padding: 10px 12px; }
.catalogo-filtros { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; margin-bottom: 16px; }
.catalogo-datos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; margin: 0; font-size: .875rem; }
.catalogo-datos dt { color: var(--textoSuave); font-weight: 600; }
.catalogo-datos dd { margin: 0; color: var(--texto); }
.catalogo-refs { list-style: none; margin: 0; padding: 0; font-size: .875rem; }
.catalogo-refs li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--borde); }
.catalogo-refs__total { font-weight: 700; border-bottom: 0 !important; }
.territorios { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; }
.territorios .chip button { border: 0; background: transparent; cursor: pointer; padding: 0 0 0 4px; color: inherit; font-weight: 700; }
@media (max-width: 1100px) {
    .catalogo-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .catalogo-filtros { grid-template-columns: 1fr; }
}

/* --- Ficha de la medida (EP012.3) ---
   Dos columnas como el dictamen: datos y periodos a la izquierda,
   acciones, template, etiquetas y familia a la derecha; abajo de
   1100 px se apilan */
.ficha { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.ficha__columna { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ficha p { font-size: .875rem; line-height: 1.5; font-weight: 400; }
.ficha .tabla td { text-align: left; }
.ficha__acciones { display: flex; flex-direction: column; gap: 8px; }
.ficha__acciones .boton { width: 100%; justify-content: center; }
.ficha__etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.ficha__etiquetas .chip button { border: 0; background: transparent; cursor: pointer; padding: 0 0 0 4px; color: inherit; font-weight: 700; }
.enlace-medida { color: inherit; text-decoration: none; }
.enlace-medida:hover strong { color: var(--marca); text-decoration: underline; }

/* Historial de envíos del periodo en la ficha de la medida (EP016.7) */
.enlace-historial { background: none; border: 0; padding: 0; margin-top: 4px; font: inherit; font-size: .8125rem; color: var(--marca); text-decoration: underline; cursor: pointer; }
.linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid #E6E6E6; }
.linea-tiempo__evento { position: relative; padding: 0 0 16px 12px; font-size: .875rem; }
.linea-tiempo__evento::before { content: ''; position: absolute; left: -25px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #9D9D9C; border: 2px solid #FFFFFF; }
.linea-tiempo__evento--verde::before { background: #086308; }
.linea-tiempo__evento--rojo::before { background: #9B0F15; }
.linea-tiempo__evento--azul::before { background: #224497; }
.linea-tiempo__evento--ambar::before { background: #B38600; }
.linea-tiempo__evento--morado::before { background: #6708C1; }
.linea-tiempo__fecha { font-size: .75rem; color: #6F7271; }
.linea-tiempo__titulo { font-weight: 700; }
.linea-tiempo__cambio { margin-top: 4px; line-height: 1.5; }
.linea-tiempo__antes { color: #6F7271; text-decoration: line-through; }
.linea-tiempo__motivo { margin-top: 4px; padding: 6px 10px; background: #F3F3F3; border-radius: 8px; line-height: 1.5; }
/* Resumen de las versiones de envío del periodo en captura y dictamen (EP014.8), de la más antigua a la vigente */
.versiones { display: flex; flex-wrap: wrap; row-gap: 14px; list-style: none; margin: 0; padding: 0; }
.versiones__item { position: relative; flex: 0 0 auto; min-width: 112px; padding: 20px 16px 0 0; font-size: .8125rem; line-height: 1.4; }
.versiones__item::before { content: ''; position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; background: #9D9D9C; }
.versiones__item::after { content: ''; position: absolute; left: 16px; right: 4px; top: 5px; height: 2px; background: #E6E6E6; }
.versiones__item:last-child::after { display: none; }
.versiones__item--verde::before { background: #086308; }
.versiones__item--rojo::before { background: #9B0F15; }
.versiones__item--morado::before { background: #6708C1; }
.versiones__item--actual::before { box-shadow: 0 0 0 3px var(--marcaClara, #F3E4E9); }
.versiones__version { display: block; font-weight: 700; }
.versiones__fecha { display: block; color: #6F7271; font-size: .75rem; }
.versiones__item .chip { margin: 2px 0; }
.arbol { list-style: none; margin: 0; padding: 0; font-size: .875rem; }
.arbol .arbol { padding-left: 18px; border-left: 1px solid var(--borde); margin-left: 6px; }
.arbol li { padding: 6px 0; }
.arbol__actual { font-weight: 700; }
@media (max-width: 1100px) {
    .ficha { grid-template-columns: 1fr; }
}

/* --- Mi cuenta (EP001.5 a EP001.8, EP001.11 y EP001.12) ---
   QR y clave del alta del segundo factor lado a lado; los codigos de
   recuperacion en dos columnas, faciles de copiar a mano */
.cuenta-permisos { columns: 2; margin: 10px 0 0; padding-left: 18px; font-size: .8125rem; color: var(--textoMedio); }
.cuenta-qr { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.cuenta-qr__imagen { width: 216px; height: 216px; padding: 8px; border: 1px solid var(--borde); border-radius: 8px; background: #FFFFFF; flex-shrink: 0; }
.cuenta-qr__imagen:empty { display: none; }
.cuenta-qr__imagen img, .cuenta-qr__imagen canvas { display: block; width: 200px; height: 200px; }
.cuenta-qr__secreto { font-size: 1rem; font-weight: 600; letter-spacing: .04em; word-break: break-all; margin: 4px 0 8px; color: var(--texto); }
.cuenta-codigos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin: 0; padding: 16px 16px 16px 40px; background: var(--gris); border-radius: 8px; font-size: 1rem; }
@media (max-width: 640px) {
    .cuenta-permisos { columns: 1; }
    .cuenta-codigos { grid-template-columns: 1fr; }
}
.cuenta-codigos li { font-size: .9375rem; }

/* ------------------------------------------------------------
   Selector de idioma "ES | EN" (EP000 apartado 8)
------------------------------------------------------------ */
.selector-idioma { display: inline-flex; align-items: center; gap: 4px; font-size: .8125rem; color: #767676; }
.selector-idioma__opcion { border: 0; background: transparent; padding: 4px 6px; border-radius: 4px; cursor: pointer;
                           font: inherit; font-weight: 600; color: #434343; }
.selector-idioma__opcion:hover { color: var(--marca, #611232); }
.selector-idioma__opcion[aria-current="true"] { color: var(--marca, #611232); background: var(--marcaClara, #F3E4E9); }
.selector-idioma--flotante { position: absolute; top: 12px; right: 16px; z-index: 5; }
main#contenido:has(> .acceso) { position: relative; }

/* Tabla de altura acotada (exploración del tablero público): el cuerpo hace scroll vertical y el encabezado se queda fijo */
.tabla__envoltura--acotada { display: flex; flex-direction: column; max-height: 440px; }
.tabla__scroll { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.tabla__scroll thead th { position: sticky; top: 0; z-index: 1; }

/* Porcentaje de avance contra la meta en el color de su tramo (APP.ui.pastillaAvance) */
.pastilla-avance { display: inline-block; padding: 2px 8px; border-radius: 50rem; font-size: .75rem; font-weight: 600; white-space: nowrap; }

/* Chip deshabilitado (por ejemplo, el desglose por gas fuera de mitigación) */
.chip:disabled { opacity: .45; cursor: not-allowed; }