/* ==========================================================================
   CeooPay · sitio comercial · capa propia sobre el sistema «Puesto de mando»
   CEOO Tecnologías S.A.S. de C.V. · Hecho en México
   Solo consume tokens semánticos de prototipo/css/tokens.css (punto único de
   importación: SISTEMA_VISUAL en config/sitio.conf). Ningún hex suelto.
   ========================================================================== */

/* ── Franja «en construcción» ── */
.franja { text-align: center; }
.franja a { color: inherit; font-weight: 500; text-underline-offset: 2px; }

/* ── Cabecera: navegación activa y menú móvil ── */
.nav-publica a[aria-current="page"] { color: var(--texto); background: var(--superficie-2); }
.menu-movil { display: none; position: relative; }
.menu-movil > summary { list-style: none; display: inline-grid; place-items: center; width: var(--alto-control); height: var(--alto-control); border: 1px solid var(--linea-fuerte); border-radius: var(--r-2); cursor: pointer; color: var(--texto); background: var(--superficie); }
.menu-movil > summary::-webkit-details-marker { display: none; }
.menu-movil > summary:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.menu-movil[open] > summary { background: var(--superficie-2); }
.menu-movil nav { position: absolute; right: 0; top: calc(100% + var(--e-2)); z-index: 40; width: min(18rem, calc(100vw - 2 * var(--margen))); display: grid; gap: var(--e-1); padding: var(--e-3); background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: var(--r-3); box-shadow: var(--sombra-2); }
.menu-movil nav a:not(.boton) { display: flex; align-items: center; min-height: var(--alto-control); padding: 0 var(--e-3); border-radius: var(--r-2); color: var(--texto); text-decoration: none; font-weight: 500; }
.menu-movil nav a:not(.boton):hover, .menu-movil nav a[aria-current="page"] { background: var(--superficie-2); }
.menu-movil nav .boton { margin-top: var(--e-2); }
@media (max-width: 900px) { .menu-movil { display: block; } }
@media (max-width: 560px) { .cta-cabecera { display: none; } }

/* ── Migas ── */
.migas { border-bottom: 1px solid var(--linea); }
.migas ol { list-style: none; margin: 0; padding: var(--e-3) 0; display: flex; flex-wrap: wrap; gap: var(--e-2); font: 500 var(--t-xs)/1.4 var(--f-mono); letter-spacing: .04em; color: var(--texto-3); }
.migas li + li::before { content: "/"; margin-right: var(--e-2); color: var(--linea-fuerte); }
.migas a { color: var(--texto-2); text-decoration: none; }
.migas a:hover { color: var(--texto); text-decoration: underline; }

/* ── Encabezado de páginas interiores ── */
.portada-interior { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(2rem, 1rem + 3vw, 3.5rem); }
.portada-interior h1 { margin-top: var(--e-4); font-size: var(--t-3xl); letter-spacing: -.03em; line-height: 1.06; font-weight: 600; max-width: 22ch; }
.portada-interior .bajada { margin-top: var(--e-4); max-width: 44rem; color: var(--texto-2); font-size: var(--t-l); }
.portada-interior .aviso-ancho { margin-top: var(--e-5); }
.separado { margin-top: var(--e-5); }
.acciones-pagina { margin-top: var(--e-6); display: flex; flex-wrap: wrap; gap: var(--e-3); }
.seccion-compacta { padding-block: var(--e-6) var(--e-8); }

/* ── Tablero de la portada (instrumento con datos reales) ── */
.tablero { margin: 0; }
.sello-real { font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: var(--tracking-etiqueta); text-transform: uppercase; color: var(--liquidado); background: var(--liquidado-fondo); padding: .35rem .5rem; border-radius: var(--r-1); }
.instrumento .resumen-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.resumen-3 dd { margin: 0; }
.cifra { font: 600 var(--t-2xl)/1.1 var(--f-texto); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--texto); margin: 0; }
.lista-metodos { list-style: none; margin: 0; padding: 0; }
.lista-metodos li { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-5); border-top: 1px solid var(--linea); }
.lista-metodos li:first-child { border-top: 0; }
.nombre-metodo { font-size: var(--t-s); color: var(--texto); min-width: 0; }
.tablero .pie a { color: inherit; }
@media (max-width: 480px) {
  .instrumento .resumen-3 { grid-template-columns: 1fr; }
  .instrumento .resumen-3 > div + div { border-left: 0; border-top: 1px solid var(--linea); }
  .lista-metodos li { flex-direction: column; align-items: flex-start; padding-inline: var(--e-4); }
  .tablero .barra { padding-inline: var(--e-4); }
}

/* ── Verbos: línea «Hoy» ── */
.verbos .hoy { margin-top: auto; padding-top: var(--e-3); border-top: 1px dashed var(--linea-fuerte); font-size: var(--t-s); color: var(--texto-2); display: grid; gap: var(--e-1); }

/* ── Tres columnas con filetes, no tarjetas ── */
.tres-columnas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--texto); }
.tres-columnas > article { padding: var(--e-5) var(--e-5) var(--e-2) 0; display: grid; gap: var(--e-3); align-content: start; }
.tres-columnas > article + article { padding-left: var(--e-5); border-left: 1px solid var(--linea); }
.tres-columnas h3 { font-size: var(--t-xl); letter-spacing: -.02em; }
.tres-columnas p:not(.etiqueta) { color: var(--texto-2); }
@media (max-width: 860px) {
  .tres-columnas { grid-template-columns: 1fr; }
  .tres-columnas > article + article { padding-left: 0; border-left: 0; border-top: 1px solid var(--linea); }
}
.subtitulo { font-size: var(--t-l); letter-spacing: -.01em; }

/* ── Listas con ícono y filete ── */
.lista-lineas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.lista-lineas li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-4); padding: var(--e-4) 0; border-bottom: 1px solid var(--linea); color: var(--texto-2); }
.lista-lineas li .icono { color: var(--mando); margin-top: .15rem; }
.lista-lineas.pendientes li .icono { color: var(--pendiente); }
.lista-lineas strong { color: var(--texto); font-weight: 600; }
.nota-pie { margin-top: var(--e-5); font-size: var(--t-s); color: var(--texto-3); max-width: 52rem; }

/* ── Pasos numerados ── */
.pasos-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--texto); }
.pasos-lista li { padding: var(--e-5) var(--e-5) var(--e-4) 0; display: grid; gap: var(--e-2); align-content: start; }
.pasos-lista li + li { padding-left: var(--e-5); border-left: 1px solid var(--linea); }
.pasos-lista .n { font: 500 var(--t-xs)/1 var(--f-mono); color: var(--texto-3); letter-spacing: .1em; }
.pasos-lista h3 { font-size: var(--t-l); letter-spacing: -.01em; }
.pasos-lista p { color: var(--texto-2); font-size: var(--t-s); }
.pasos-8 li:nth-child(5) { padding-left: 0; border-left: 0; }
.pasos-8 li:nth-child(n+5) { border-top: 1px solid var(--linea); }
@media (max-width: 900px) {
  .pasos-lista { grid-template-columns: 1fr 1fr; }
  .pasos-lista li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .pasos-lista li:nth-child(even) { padding-left: var(--e-5); border-left: 1px solid var(--linea); }
  .pasos-lista li:nth-child(n+3) { border-top: 1px solid var(--linea); }
}
@media (max-width: 520px) {
  .pasos-lista { grid-template-columns: 1fr; }
  .pasos-lista li, .pasos-lista li:nth-child(even) { padding-left: 0; border-left: 0; }
  .pasos-lista li + li { border-top: 1px solid var(--linea); }
}

/* ── Métodos de pago ── */
.conteo { margin: 0 0 var(--e-5); }
.conteo dd { margin: 0; }
.aviso-ancho { max-width: 52rem; }
.metodos { display: grid; gap: var(--e-7); }
.metodos > * { min-width: 0; }
.grupo-metodos h3 { font-size: var(--t-xl); letter-spacing: -.02em; margin-bottom: var(--e-3); }
.tabla-metodos { min-width: 40rem; }
.tabla-metodos th[scope="row"] { text-align: left; font: 500 var(--t-s)/1.4 var(--f-texto); text-transform: none; letter-spacing: 0; color: var(--texto); padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linea); position: static; background: none; white-space: normal; width: 34%; }
.tabla-metodos td { height: auto; padding-block: var(--e-3); }
.tabla-metodos .explica { color: var(--texto-2); }
.tabla-metodos .estado { white-space: normal; }
@media (max-width: 640px) {
  .tabla-metodos { min-width: 0; }
  .tabla-metodos thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-metodos, .tabla-metodos tbody, .tabla-metodos tr, .tabla-metodos th[scope="row"], .tabla-metodos td { display: block; width: 100%; }
  .tabla-metodos tr { padding: var(--e-4) 0; border-bottom: 1px solid var(--linea); display: grid; gap: var(--e-2); }
  .tabla-metodos th[scope="row"], .tabla-metodos td { border: 0; padding: 0; height: auto; }
  .tabla-metodos tbody tr:hover td { background: none; }
}

/* ── Bitácora ── */
.bitacora { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.bitacora li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--e-5); padding: var(--e-5) 0; border-bottom: 1px solid var(--linea); }
.bitacora time { font: 500 var(--t-s)/1.5 var(--f-mono); color: var(--texto-3); letter-spacing: .02em; }
.bitacora h3 { font-size: var(--t-l); margin-bottom: var(--e-2); }
.bitacora p { color: var(--texto-2); max-width: 46rem; }
@media (max-width: 600px) { .bitacora li { grid-template-columns: 1fr; gap: var(--e-2); } }

/* ── Contacto ── */
.contacto-rejilla { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.formulario { display: grid; gap: var(--e-5); max-width: 40rem; }
.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-5); }
.opcional { font-weight: 400; color: var(--texto-3); }
.control.area { min-height: 9rem; padding-block: var(--e-3); resize: vertical; line-height: var(--interlinea); }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.nota-envio { font-size: var(--t-s); color: var(--texto-3); }
.contacto-lado { display: grid; gap: var(--e-3); padding-left: var(--e-6); border-left: 1px solid var(--linea); color: var(--texto-2); }
.contacto-lado .etiqueta + * { margin-top: calc(-1 * var(--e-1)); }
.dato-grande { font-size: var(--t-xl); font-weight: 500; letter-spacing: -.01em; overflow-wrap: anywhere; }
.lista-numerada { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--e-2); }
.folio { font-family: var(--f-mono); letter-spacing: .04em; color: var(--texto); }
@media (max-width: 900px) {
  .contacto-rejilla { grid-template-columns: 1fr; }
  .contacto-lado { padding-left: 0; border-left: 0; padding-top: var(--e-6); border-top: 1px solid var(--linea); }
}
@media (max-width: 560px) { .fila-2 { grid-template-columns: 1fr; } }

/* ── Textos legales ── */
.texto-legal .contenedor { max-width: 46rem; margin-inline: auto; width: min(100% - 2 * var(--margen), 46rem); }
.texto-legal h2 { font-size: var(--t-xl); letter-spacing: -.015em; margin: var(--e-7) 0 var(--e-3); }
.texto-legal h2:first-child { margin-top: 0; }
.texto-legal p, .texto-legal li { color: var(--texto-2); }
.texto-legal p + p { margin-top: var(--e-3); }
.texto-legal ul { margin: var(--e-3) 0; padding-left: 1.25rem; display: grid; gap: var(--e-2); }

/* ── 404 ── */
.enlaces-404 { margin-top: var(--e-6); max-width: 32rem; }
.enlaces-404 a { color: var(--texto); font-weight: 500; }

/* ── Pie: enlaces de la columna legal legibles sobre tinta ── */
.pie-sitio .legal a { color: inherit; }
.pie-sitio .legal strong { color: var(--marca-crema); font-weight: 500; }

/* Los chips de estado no se encogen junto a nombres largos (el ícono desaparecía). */
.lista-metodos .estado, .tabla-metodos .estado { flex: none; }
.estado svg { flex: none; }