wrapper)
══════════════════════════════════════════════════════════ */
.ps-hdr-a { position: absolute; inset: 0; display: block; }
/* ══════════════════════════════════════════════════════════
23c. MAPA SVG CONTENEDOR
══════════════════════════════════════════════════════════ */
.ps-mapa-svg { margin: 1.8rem 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--brd); background: var(--card); }
.ps-mapa-svg svg { display: block; width: 100%; height: auto; }
.ps-mapa-caption { background: var(--az); color: rgba(255,255,255,.8); font-family: 'Segoe UI', system-ui, sans-serif; font-size: .78rem; padding: .5rem 1rem; line-height: 1.4; }
/* ══════════════════════════════════════════════════════════
23d. MAPA CONCEPTUAL (ficha de trabajo colapsable)
══════════════════════════════════════════════════════════ */
.ps-mapa-acciones { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.5rem 0 .5rem; }
.ps-mapa-toggle {
background: var(--az);
color: #fff;
border: none;
border-radius: var(--r);
padding: .65rem 1.2rem;
font-family: 'Segoe UI', system-ui, sans-serif;
font-size: .9rem;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
gap: .5rem;
transition: background .18s;
}
.ps-mapa-toggle:hover { background: var(--narjaD); }
.ps-mapa-print {
background: var(--card);
color: var(--verde);
border: 2px solid var(--verde);
border-radius: var(--r);
padding: .65rem 1.2rem;
font-family: 'Segoe UI', system-ui, sans-serif;
font-size: .9rem;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
gap: .5rem;
transition: all .18s;
}
.ps-mapa-print:hover { background: var(--verdeC); }
.ps-mapa-wrap {
border: 2px solid var(--morado);
border-radius: var(--r);
background: var(--moradoC);
overflow: hidden;
margin: .5rem 0 2rem;
}
.ps-mapa-instr { background: #E8E0F5; padding: .55rem 1rem; font-family: 'Segoe UI', system-ui, sans-serif; font-size: .82rem; color: var(--morado); border-bottom: 1px solid #C5B8E0; }
.ps-mapa-body { padding: 1.2rem 1rem; }
.ps-mapa-central {
background: var(--morado);
color: #fff;
text-align: center;
padding: .8rem 1.5rem;
border-radius: var(--r);
font-weight: 800;
font-size: 1rem;
font-family: 'Segoe UI', system-ui, sans-serif;
margin-bottom: 1.4rem;
}
.ps-mapa-central::after { content: ''; display: block; width: 2px; height: 20px; background: var(--morado); margin: 0 auto; }
.ps-mapa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.ps-mapa-linea { border-bottom: 1px dashed #C5B8E0; padding: .32rem 0; min-height: 1.5rem; font-family: 'Segoe UI', system-ui, sans-serif; font-size: .88rem; color: #AAA; font-style: italic; }
.ps-mapa-linea:last-child { border-bottom: none; }
.ps-mapa-rama { background: var(--card); border: 1.5px solid var(--morado); border-radius: var(--r); padding: .8rem 1rem; }
.ps-mapa-rama-titulo { font-family: 'Segoe UI', system-ui, sans-serif; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--morado); margin-bottom: .6rem; padding-bottom: .4rem; border-bottom: 1px solid #C5B8E0; }
.ps-mapa-nota { background: var(--morado); border-radius: 0 0 var(--r) var(--r); padding: .5rem 1rem; font-family: 'Segoe UI', system-ui, sans-serif; font-size: .78rem; color: rgba(255,255,255,.85); margin-top: .8rem; }
/* ══════════════════════════════════════════════════════════
23e. CUADRO COMPARATIVO (evidencia de aprendizaje)
══════════════════════════════════════════════════════════ */
.ps-cuadro-wrap { border: 2px solid var(--verde); border-radius: var(--r); overflow: hidden; margin: 1.5rem 0; }
.ps-cuadro { width: 100%; border-collapse: collapse; }
.ps-cuadro thead th {
background: var(--verde);
color: #fff;
font-family: 'Segoe UI', system-ui, sans-serif;
font-size: .74rem;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
padding: .65rem 1rem;
text-align: center;
}
.ps-cuadro thead th.verde { background: var(--verde); }
.ps-cuadro thead th.rojo { background: var(--rojo); }
.ps-cuadro tbody td {
padding: .55rem 1rem;
border-bottom: 1px solid var(--brd);
vertical-align: top;
font-family: 'Segoe UI', system-ui, sans-serif;
font-size: .88rem;
min-height: 2rem;
line-height: 1.5;
}
.ps-cuadro tbody td.c-verde { background: var(--verdeC); border-right: 1px solid var(--brd); }
.ps-cuadro tbody td.c-rojo { background: var(--rojoC); }
.ps-cuadro tbody tr:last-child td { border-bottom: none; }
.ps-cuadro-linea { border-bottom: 1px dashed #CCC; min-height: 1.4rem; margin: .2rem 0; }
.ps-cuadro-concl {
background: #EEF3F8;
border: 1px solid #C0CFDD;
border-radius: 0 0 var(--r) var(--r);
padding: .8rem 1rem;
font-family: 'Segoe UI', system-ui, sans-serif;
font-size: .88rem;
color: var(--tx);
}
.ps-cuadro-concl strong { color: var(--az); }
.ps-cuadro-btn-impr { display: none; } /* solo para print */
/* ══════════════════════════════════════════════════════════
23f. ACTIVIDAD DE GRUPOS
══════════════════════════════════════════════════════════ */
.ps-act-grupos {
background: var(--verdeC);
border: 2px solid var(--verde);
border-radius: var(--r);
margin: 1rem 0 0;
overflow: hidden;
}
.ps-act-grupos-hdr {
background: var(--verde);
padding: .55rem 1rem;
font-family: 'Segoe UI', system-ui, sans-serif;
font-size: .7rem;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
color: #fff;
display: flex;
align-items: center;
gap: .5rem;
}
.ps-act-grupos-instr {
padding: .6rem 1rem;
font-family: 'Segoe UI', system-ui, sans-serif;
font-size: .88rem;
color: var(--tx);
line-height: 1.6;
border-bottom: 1px solid #A8D5BB;
background: var(--verdeC);
}
.ps-act-grupos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .5rem; padding: .8rem 1rem 1rem; }
.ps-act-grupo {
background: var(--card);
border: 1.5px solid var(--verde);
border-radius: var(--rg);
padding: .6rem .85rem;
}
.ps-act-grupo-nombre {
font-family: 'Segoe UI', system-ui, sans-serif;
font-size: .7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: .35rem;
}
.ps-act-grupo-est { font-family: 'Segoe UI', system-ui, sans-serif; font-size: .85rem; color: var(--tx); line-height: 1.55; }
/* Variantes de color por grupo */
.g-naranja .ps-act-grupo-nombre { color: var(--narjaD); border-bottom: 2px solid var(--naranja); padding-bottom: .25rem; }
.g-morado .ps-act-grupo-nombre { color: var(--morado); border-bottom: 2px solid var(--morado); padding-bottom: .25rem; }
.g-azul .ps-act-grupo-nombre { color: var(--az); border-bottom: 2px solid var(--az); padding-bottom: .25rem; }
.g-verde .ps-act-grupo-nombre { color: var(--verde); border-bottom: 2px solid var(--verde); padding-bottom: .25rem; }
.g-rojo .ps-act-grupo-nombre { color: var(--rojo); border-bottom: 2px solid var(--rojo); padding-bottom: .25rem; }
@media (max-width: 480px) {
.ps-act-grupos-grid { grid-template-columns: 1fr 1fr; }
}
/* ══════════════════════════════════════════════════════════
24. FOOTER
══════════════════════════════════════════════════════════ */
.ps-ft { text-align: center; padding: 1.2rem 0 .5rem; border-top: 1px solid var(--brd); margin-top: 2rem; font-family: 'Segoe UI', system-ui, sans-serif; font-size: .77rem; color: #999; }
.ps-ft a { color: var(--naranja); text-decoration: none; }
/* ══════════════════════════════════════════════════════════
25. CORRECCIONES ANTI-WORDPRESS
(Evita que el tema sobreescriba colores en fondos oscuros)
══════════════════════════════════════════════════════════ */
.ps-pm p,
.ps-pm span { color: #fff !important; }
.ps-rec li,
.ps-rec p { color: #fff !important; }
.ps-qe-t,
.ps-qe-sub,
.ps-qe-pq,
.ps-qe-o { color: #fff !important; }
.ps-hdr h1,
.ps-hdr-meta { color: #fff !important; }
.ps-concepto-hdr span { color: rgba(255,255,255,.75) !important; }
/* ══════════════════════════════════════════════════════════
26. RESPONSIVE — 720px (tablets y pantallas medianas)
══════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
.ps-hdr h1 { font-size: 1.25rem; }
.ps-hdr-meta { text-align: left; font-size: .8rem; }
.ps-pm-q { font-size: 1.05rem; }
.ps-curr { grid-template-columns: 1fr; }
.ps-ficha-grid { grid-template-columns: 1fr; }
.ps-ficha-item { border-right: none !important; }
.ps-exp-preguntas { grid-template-columns: 1fr 1fr; }
.ps-cruce-pre-sub,
.ps-cruce-his-sub { display: none; }
.ps-cruce-his-tit { font-size: .7rem; }
.ps-lect-btn-titulo,
.ps-ficha-btn-titulo { font-size: .9rem; }
.ps-lect-btn-sub,
.ps-ficha-btn-sub { font-size: .75rem; }
}
/* ══════════════════════════════════════════════════════════
27. RESPONSIVE — 600px (celulares)
Tabla de asignaciones → tarjetas apiladas
Retratos → columna centrada
══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
/* Retratos de personaje */
.ps-personaje { flex-direction: column; align-items: center; }
.ps-per-img { width: 160px; }
.ps-per-txt { width: 100%; }
/* Tabla → Tarjetas */
.ps-tabla-wrap { overflow-x: unset; border: none; border-radius: 0; margin: .5rem 0; }
.ps-tabla,
.ps-tabla tbody { display: block; min-width: unset; width: 100%; }
.ps-tabla thead { display: none; }
.ps-tabla tbody tr {
display: block;
margin-bottom: .55rem;
border-radius: var(--rg);
overflow: hidden;
border: 1px solid var(--brd);
background: #fff;
}
/* Franja de color lateral por equipo */
.ps-tabla tbody tr[data-team="naranja"] { border-left: 4px solid var(--naranja); }
.ps-tabla tbody tr[data-team="morado"] { border-left: 4px solid var(--morado); }
.ps-tabla tbody tr[data-team="azul"] { border-left: 4px solid var(--az); }
.ps-tabla tbody tr[data-team="verde"] { border-left: 4px solid var(--verde); }
.ps-tabla tbody tr[data-team="rojo"] { border-left: 4px solid var(--rojo); }
/* Celdas como bloques */
.ps-tabla tbody td {
display: block;
padding: .35rem .85rem;
border-bottom: 1px solid #f0f0f0 !important;
background: #fff !important;
font-size: .84rem;
}
.ps-tabla tbody td:last-child { border-bottom: none !important; }
.ps-tabla tbody tr:nth-child(even) td { background: #fff !important; }
/* Etiqueta automática con data-label */
.ps-tabla tbody td[data-label]::before {
content: attr(data-label);
display: block;
font-size: .65rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .8px;
color: var(--txs);
margin-bottom: .15rem;
}
/* Celda equipo: pequeña y discreta arriba */
.ps-tabla tbody td.t-equipo {
font-size: .68rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
padding: .3rem .85rem .1rem;
color: var(--txs);
}
/* Celda nombre: grande y prominente */
.ps-tabla tbody td.t-name {
font-size: .97rem;
padding: .15rem .85rem .4rem;
}
/* Mapa conceptual: una columna en celular */
.ps-mapa-grid { grid-template-columns: 1fr; }
/* Cuadro comparativo: scroll horizontal si no cabe */
.ps-cuadro-wrap { overflow-x: auto; }
.ps-cuadro { min-width: 360px; }
}
/* ══════════════════════════════════════════════════════════
28. RESPONSIVE — 480px (celulares pequeños)
══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
/* Botón panel: ocultar subtítulo, tag a línea propia */
.ps-lect-btn-sub,
.ps-ficha-btn-sub { display: none; }
.ps-lect-btn-tag,
.ps-ficha-btn-tag { width: 100%; text-align: center; margin-top: .1rem; order: 3; }
.ps-lect-btn-ico,
.ps-ficha-btn-ico { font-size: 1.5rem; }
.ps-lect-btn-titulo,
.ps-ficha-btn-titulo { font-size: .88rem; }
.ps-lect-btn { gap: .6rem; padding: .8rem 1rem; }
.ps-ficha-btn { gap: .6rem; padding: .8rem 1rem; }
}
/* ══════════════════════════════════════════════════════════
29. PRINT — Impresión legada (.f-wrap, para compatibilidad)
══════════════════════════════════════════════════════════ */
@media print {
body * { visibility: hidden; }
.f-wrap, .f-wrap * { visibility: visible; }
.f-wrap {
position: absolute;
left: 0; top: 0;
width: 100%;
border: none;
padding: 8mm;
}
}
/* ══════════════════════════════════════════════════════════
30. PRINT POPUP — Fichas imprimibles en ventana emergente
Prefijo .pi- (profeshima imprimir)
Usadas en función imprimirFichas() → popup A4 horizontal
Minimalista: solo bordes de color, sin fondos de bloque,
sin pie de página, sin URL, sin datos del colegio.
══════════════════════════════════════════════════════════ */
/* ── Página ── */
.pi-page { font-family: 'Segoe UI', system-ui, sans-serif; font-size: 10pt; color: #111; background: #fff; }
/* ── Cabecera de ficha imprimible ── */
.pi-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
border-bottom: 2.5px solid #4527a0;
padding-bottom: .45rem;
margin-bottom: .8rem;
}
.pi-header-titulo { font-size: 13pt; font-weight: 800; color: #4527a0; line-height: 1.2; }
.pi-header-sub { font-size: 8.5pt; color: #555; margin-top: .15rem; }
.pi-header-datos { text-align: right; font-size: 8pt; color: #333; }
.pi-header-datos span { display: block; border-bottom: 1px solid #aaa; min-width: 180px; padding-bottom: 2px; margin-bottom: .35rem; }
.pi-header-datos label { font-size: 7.5pt; color: #777; display: block; margin-bottom: .15rem; }
/* ── Salto de página ── */
.pi-salto { page-break-before: always; }
/* ── Mapa conceptual ── */
.pi-mapa-instr {
font-size: 7.5pt;
color: #555;
margin-bottom: .65rem;
border-left: 3px solid #4527a0;
padding-left: .5rem;
}
.pi-mapa-central-wrap { text-align: center; }
.pi-mapa-central {
border: 2.5px solid #4527a0;
border-radius: 6px;
text-align: center;
padding: .5rem 1rem;
font-weight: 800;
font-size: 11pt;
color: #4527a0;
display: inline-block;
margin: 0 auto .7rem;
min-width: 200px;
}
.pi-mapa-central small { font-size: 8pt; font-weight: 400; color: #666; }
.pi-mapa-grid {
display: grid;
grid-template-columns: 1fr 1fr; /* 2 columnas × 2 filas = cuadrantes más grandes */
grid-template-rows: auto auto;
gap: .7rem;
margin-top: .5rem;
}
.pi-rama { border: 1.5px solid #4527a0; border-radius: 5px; padding: .55rem .75rem; min-height: 5.5cm; }
.pi-rama-titulo { font-size: 8.5pt; font-weight: 800; color: #4527a0; border-bottom: 1px solid #c9b8f0; padding-bottom: .3rem; margin-bottom: .45rem; }
.pi-nota { margin-top: .7rem; border: 1.2px dashed #9575cd; border-radius: 4px; padding: .35rem .7rem; font-size: 8.5pt; color: #333; }
/* ── Líneas de escritura ── */
.pi-linea { border-bottom: 1px solid #bbb; min-height: 1.6em; margin-bottom: .35rem; font-size: 8.5pt; }
.pi-linea-td { border-bottom: 1px solid #bbb; min-height: 1.7em; display: block; margin-bottom: .35rem; }
/* ── Cuadro comparativo ── */
.pi-cuadro-wrap { margin-top: .5rem; }
.pi-cuadro { width: 100%; border-collapse: collapse; font-size: 9pt; }
.pi-cuadro .pi-th-banner {
background: #fff;
color: #333;
text-align: center;
font-weight: 800;
font-size: 9.5pt;
padding: .45rem;
border: 1.5px solid #1a237e;
}
.pi-cuadro .pi-th-verde { border: 2px solid #2e7d32; color: #2e7d32; font-weight: 800; font-size: 8.5pt; padding: .45rem .7rem; width: 50%; text-align: center; }
.pi-cuadro .pi-th-rojo { border: 2px solid #c62828; color: #c62828; font-weight: 800; font-size: 8.5pt; padding: .45rem .7rem; width: 50%; text-align: center; }
.pi-cuadro .pi-td-verde { border: 1.5px solid #2e7d32; border-top: none; padding: .55rem .8rem; vertical-align: top; height: 2.4cm; }
.pi-cuadro .pi-td-rojo { border: 1.5px solid #c62828; border-top: none; padding: .55rem .8rem; vertical-align: top; height: 2.4cm; }
.pi-concl {
margin-top: .6rem;
border: 1.5px solid #1a237e;
border-radius: 4px;
padding: .5rem .8rem;
font-size: 8.5pt;
}
.pi-concl strong { color: #1a237e; }
/* ══════════════════════════════════════════════════════════
31. TOGGLE NARRATIVA
Secciones expandibles para contexto del profesor.
El alumno no copia esto — solo escucha.
══════════════════════════════════════════════════════════ */
.ps-toggle-btn {
display: flex;
align-items: center;
gap: .7rem;
background: var(--azC);
border: 1.5px solid #bcd;
border-radius: var(--rg);
padding: .7rem 1rem;
margin: .6rem 0;
cursor: pointer;
font-family: 'Segoe UI', system-ui, sans-serif;
font-size: .9rem;
font-weight: 600;
color: var(--az);
width: 100%;
box-sizing: border-box;
}
.ps-toggle-btn:hover { filter: brightness(.96); }
.ps-toggle-tag {
margin-left: auto;
background: var(--az);
color: #fff;
font-size: .7rem;
font-weight: 700;
padding: .2rem .65rem;
border-radius: 99px;
white-space: nowrap;
}
.ps-toggle-contenido {
background: var(--card);
border: 1.5px solid var(--brd);
border-radius: 0 0 var(--rg) var(--rg);
padding: 1rem 1.2rem;
margin-top: -.4rem;
margin-bottom: .6rem;
display: none;
}
.ps-toggle-contenido.open { display: block; }
.ps-toggle-contenido p { font-size: .95rem; }
/* ══════════════════════════════════════════════════════════
32. BARRA DE FICHAS DE TRABAJO
Selector horizontal de fichas imprimibles.
══════════════════════════════════════════════════════════ */
.fichas-barra {
display: flex;
gap: .5rem;
flex-wrap: wrap;
align-items: stretch;
margin: 2rem 0 0;
background: var(--card);
border: 1.5px solid var(--brd);
border-radius: var(--r);
padding: .7rem .9rem;
}
.fichas-barra-titulo {
width: 100%;
font-family: 'Segoe UI', system-ui, sans-serif;
font-size: .67rem;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--txs);
margin-bottom: .35rem;
}
.ficha-btn {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: .55rem;
background: var(--bg);
border: 1.5px solid var(--brd);
border-radius: var(--rg);
padding: .65rem .9rem;
cursor: pointer;
font-family: 'Segoe UI', system-ui, sans-serif;
font-size: .88rem;
font-weight: 700;
color: var(--az2);
transition: all .18s;
text-align: left;
white-space: nowrap;
}
.ficha-btn:hover { background: var(--azC); border-color: var(--az2); }
.ficha-btn.activo { background: var(--azC); border-color: var(--az2); color: var(--az2); }
.ficha-btn-ico { font-size: 1.15rem; flex-shrink: 0; }
.ficha-btn-lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.ficha-btn-tag {
background: var(--az2);
color: #fff;
font-size: .65rem;
font-weight: 800;
padding: .15rem .5rem;
border-radius: 99px;
flex-shrink: 0;
transition: background .18s;
}
.ficha-btn:not(.activo) .ficha-btn-tag { background: var(--txs); }
.ficha-impr-btn {
display: flex;
align-items: center;
gap: .5rem;
background: var(--rojo);
color: #fff;
border: none;
border-radius: var(--rg);
padding: .65rem 1rem;
font-family: 'Segoe UI', system-ui, sans-serif;
font-size: .84rem;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
}
.ficha-impr-btn:hover { filter: brightness(.88); }
/* ══════════════════════════════════════════════════════════
33. SGM — ÁRBOL DE CAUSAS
Organizador visual de multicausalidad convergente.
══════════════════════════════════════════════════════════ */
.sgm-arbol {
background: var(--card);
border: 2px solid var(--az2);
border-radius: var(--r);
padding: 1.4rem 1.2rem;
margin: 1rem 0;
}
.sgm-arbol-titulo {
font-family: 'Segoe UI', system-ui, sans-serif;
font-size: .68rem;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--az2);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: .5rem;
}
.sgm-causas-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
margin-bottom: .6rem;
}
.sgm-causa-box {
border: 2px solid var(--az2);
border-radius: var(--r);
padding: .85rem .9rem;
text-align: center;
background: var(--azC);
}
.sgm-causa-num { font-size: 1.6rem; font-weight: 900; color: var(--az2); line-height: 1; margin-bottom: .3rem; }
.sgm-causa-tit { font-family: 'Segoe UI', system-ui, sans-serif; font-size: .88rem; font-weight: 700; color: var(--az); margin-bottom: .4rem; line-height: 1.3; }
.sgm-causa-desc { font-family: 'Segoe UI', system-ui, sans-serif; font-size: .8rem; color: var(--txs); line-height: 1.5; }
.sgm-arbol-flechas {
display: flex;
justify-content: space-around;
padding: 0 3rem;
color: var(--az2);
font-size: 1.6rem;
line-height: 1;
margin: .3rem 0;
}
.sgm-arbol-resultado {
background: var(--az2);
color: #fff;
border-radius: var(--r);
padding: 1rem 1.4rem;
text-align: center;
font-family: 'Segoe UI', system-ui, sans-serif;
margin-top: .3rem;
}
.sgm-arbol-resultado strong { color: #fff !important; font-size: 1rem; }
.sgm-arbol-resultado span { display: block; font-size: .82rem; opacity: .82; margin-top: .25rem; }
/* ══════════════════════════════════════════════════════════
34. SGM — DIAGRAMA DE TRES FRENTES
Bloques paralelos: Occidental · Oriental · Pacífico
══════════════════════════════════════════════════════════ */
.sgm-frentes-titulo {
font-family: 'Segoe UI', system-ui, sans-serif;
font-size: .68rem;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--rojo);
margin: 1.6rem 0 .7rem;
display: flex;
align-items: center;
gap: .5rem;
}
.sgm-frentes-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: .8rem;
margin-bottom: 1.2rem;
}
.sgm-frente {
border-radius: var(--r);
overflow: hidden;
border: 1.5px solid var(--brd);
}
.sgm-frente-hdr {
padding: .65rem .9rem;
font-family: 'Segoe UI', system-ui, sans-serif;
font-weight: 800;
font-size: .85rem;
color: #fff;
text-align: center;
line-height: 1.3;
}
.sgm-frente-hdr.occ { background: var(--az2); }
.sgm-frente-hdr.ori { background: var(--rojo); }
.sgm-frente-hdr.pac { background: var(--az); }
.sgm-evento {
padding: .55rem .8rem;
border-bottom: 1px solid var(--brd);
background: var(--card);
}
.sgm-evento:last-child { border-bottom: none; }
.sgm-evento-fecha { font-family: 'Segoe UI', system-ui, sans-serif; font-size: .72rem; font-weight: 700; color: var(--txs); margin-bottom: .1rem; }
.sgm-evento-nombre { font-family: 'Segoe UI', system-ui, sans-serif; font-size: .84rem; font-weight: 700; color: var(--tx); line-height: 1.3; }
.sgm-evento-desc { font-family: 'Segoe UI', system-ui, sans-serif; font-size: .77rem; color: var(--txs); margin-top: .15rem; line-height: 1.4; }
.sgm-evento.inflexion { background: var(--narjaC); border-left: 3px solid var(--narjaD); }
.sgm-evento.inflexion .sgm-evento-nombre::before { content: '★ '; color: var(--narjaD); }
.sgm-frentes-nota { font-family: 'Segoe UI', system-ui, sans-serif; font-size: .8rem; color: var(--txs); text-align: center; margin: .2rem 0 .8rem; }
/* ══════════════════════════════════════════════════════════
35. TEMA AZUL — modificador de sesión (.ps-tema-azul)
Recolorea los componentes estándar al azul profundo.
Uso:
Aplicar en: SGM (S7–S8), Guerra Fría (S10…)
══════════════════════════════════════════════════════════ */
.ps-tema-azul .ps-hdr-overlay { background: var(--az2); }
.ps-tema-azul .ps-hdr-badge { background: var(--rojo); }
.ps-tema-azul .ps-dato { border-left-color: var(--az2); }
.ps-tema-azul .ps-sq { background: var(--azC); border-left-color: var(--az2); }
.ps-tema-azul .ps-sq-lbl { color: var(--az); }
.ps-tema-azul .ps-sq strong { color: var(--az); }
.ps-tema-azul .ps-ficha { border-color: var(--az2); background: var(--azC); }
.ps-tema-azul .ps-ficha-hdr { background: var(--az2); }
.ps-tema-azul .ps-ficha-item { border-color: #bcd; }
.ps-tema-azul .ps-ficha-item-lbl { color: var(--az2); }
.ps-tema-azul .ps-ficha-nota { background: var(--az2); }
.ps-tema-azul .ps-rec { background: var(--az2); }
.ps-tema-azul .ps-glos { border-color: var(--az2); }
.ps-tema-azul .ps-glos-hdr { background: var(--az2); }
.ps-tema-azul .ps-glos-instr { background: var(--azC); color: var(--az); border-color: #bcd; }
.ps-tema-azul .ps-glos td:first-child { color: var(--az2); }
.ps-tema-azul .ps-glos tr:nth-child(even) td { background: #F4F6FB; }
.ps-tema-azul .ps-qi-btn:hover:not(:disabled) { border-color: var(--az2); color: var(--az2); background: var(--azC); }
.ps-tema-azul .ps-concepto { border-color: var(--az2); background: var(--azC); }
.ps-tema-azul .ps-concepto-hdr { background: var(--az2); }
.ps-tema-azul .ps-concepto-term { color: var(--az2); }
.ps-tema-azul .ps-concepto-def { border-left-color: var(--az2); }
.ps-tema-azul .ps-concepto-nota { background: var(--az2); }
/* Anti-WordPress — textos blancos en fondos oscuros del tema azul */
.ps-tema-azul .ps-rec li,
.ps-tema-azul .ps-rec p { color: #fff !important; }
/* ══════════════════════════════════════════════════════════
RESPONSIVE — adiciones para secciones 31–34
══════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
.sgm-causas-grid { grid-template-columns: 1fr; }
.sgm-frentes-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.ficha-btn { font-size: .8rem; padding: .55rem .75rem; }
.ficha-impr-btn { width: 100%; justify-content: center; }
}