/* Maquetas del producto SOFTIA para la sección «El sistema por dentro» de la landing. Cada maqueta es un fragmento
   autocontenido con raíz `.producto`: aquí se declaran sus variables (los valores de DESIGN.md) y todos los componentes
   con prefijo `.producto .p-…`, para que el fragmento se vea igual dentro de cualquier página. Las fuentes (Bricolage
   Grotesque y Figtree) vienen de las `@font-face` de la página que lo aloja; no se duplican. No hay sombras: los bloques se distinguen
   por el fondo y el borde. Un solo botón dorado por pantalla. */

.producto {
    --p-primario: #1F365C;
    --p-primario-profundo: #14253F;
    --p-primario-suave: #DCE6F5;
    --p-acento: #F2B01E;
    --p-sobre-acento: #2A1E00;
    --p-acento-suave: #FFF1CC;
    --p-sobre-acento-suave: #5C4300;
    --p-enlace: #0B5CAD;
    --p-fondo: #F7F8FB;
    --p-superficie: #FFFFFF;
    --p-superficie-2: #EEF1F7;
    --p-texto: #1A1C22;
    --p-texto-2: #4A5162;
    --p-borde: #C5CBD6;
    --p-borde-campo: #6B7385;
    --p-exito: #0F5C35;
    --p-exito-fondo: #DDF3E6;
    --p-advertencia: #6B4000;
    --p-advertencia-fondo: #FFEFD1;
    --p-error: #8C1D18;
    --p-error-fondo: #FBE4E2;
    --p-info: #0A4A8C;
    --p-info-fondo: #DCEBFA;
    --p-fuente: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
    --p-fuente-titulo: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;

    position: relative;
    box-sizing: border-box;
    margin: 0;
    font: 400 15px/1.5 var(--p-fuente);
    color: var(--p-texto);
    text-align: left;
    letter-spacing: normal;
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
}
.producto *, .producto *::before, .producto *::after { box-sizing: border-box; }
.producto svg { display: block; flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.producto .p-escudo { width: 32px; height: 36px; stroke: none; }
.producto .p-escudo--mini { width: 24px; height: 27px; }
.producto .p-ic-16 { width: 16px; height: 16px; }
.producto .p-ic-18 { width: 18px; height: 18px; }
.producto .p-ic-20 { width: 20px; height: 20px; }

/* ---------- Textos ---------- */
.producto .p-saludo { font: 700 26px/1.1 var(--p-fuente-titulo); color: var(--p-primario-profundo); }
.producto .p-titulo { font: 700 30px/1.1 var(--p-fuente); color: var(--p-primario-profundo); letter-spacing: -0.01em; }
.producto .p-titulo--24 { font-size: 24px; }
.producto .p-titulo--20 { font-size: 20px; line-height: 1.2; }
.producto .p-sub { font-size: 14px; color: var(--p-texto-2); }
.producto .p-apoyo { font-size: 13px; color: var(--p-texto-2); line-height: 1.4; }
.producto .p-apoyo-14 { font-size: 14px; color: var(--p-texto-2); line-height: 1.45; }
.producto .p-tarjeta-titulo { font-weight: 700; font-size: 18px; line-height: 1.25; color: var(--p-texto); }
.producto .p-negrita { font-weight: 600; }
.producto .p-700 { font-weight: 700; }
.producto .p-enlace { color: var(--p-enlace); font-weight: 600; text-decoration: none; }
.producto .p-num { font-variant-numeric: tabular-nums; text-align: right; }
.producto .p-valor { font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; }
.producto .p-fila { display: flex; align-items: center; gap: 8px; }
.producto .p-fila--entre { justify-content: space-between; }
.producto .p-fila--arriba { align-items: flex-start; }
.producto .p-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.producto .p-crece { flex: 1; min-width: 0; }
.producto .p-separador { height: 1px; background: var(--p-borde); margin: 12px 0; }
.producto .p-recorte { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Botones (sin interacción: maquetas) ---------- */
.producto .p-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; padding: 0 20px; border-radius: 999px;
    font: 600 15px/1 var(--p-fuente); white-space: nowrap; border: 2px solid transparent;
}
.producto .p-btn svg { width: 20px; height: 20px; }
.producto .p-btn--dorado { background: var(--p-acento); color: var(--p-sobre-acento); }
.producto .p-btn--primario { background: var(--p-primario); color: #FFFFFF; }
.producto .p-btn--delineado { background: var(--p-superficie); color: var(--p-primario); border-color: var(--p-borde-campo); }
.producto .p-btn--bloque { width: 100%; height: 48px; font-size: 16px; }
.producto .p-btn--40 { height: 40px; padding: 0 16px; font-size: 14px; }
.producto .p-btn--foco { outline: 3px solid var(--p-enlace); outline-offset: 2px; }

/* ---------- Sellos, niveles y semáforo ---------- */
.producto .p-sello {
    display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px;
    font: 600 13px/1 var(--p-fuente); white-space: nowrap; background: var(--p-superficie-2); color: var(--p-texto-2);
}
.producto .p-sello svg { width: 16px; height: 16px; }
.producto .p-sello--exito { background: var(--p-exito-fondo); color: var(--p-exito); }
.producto .p-sello--advertencia { background: var(--p-advertencia-fondo); color: var(--p-advertencia); }
.producto .p-sello--error { background: var(--p-error-fondo); color: var(--p-error); }
.producto .p-sello--info { background: var(--p-info-fondo); color: var(--p-info); }
.producto .p-sello--acento { background: var(--p-acento-suave); color: var(--p-sobre-acento-suave); }
.producto .p-sello--cerrado { background: var(--p-primario-suave); color: var(--p-primario); }
.producto .p-sello--borrador { background: var(--p-superficie-2); color: var(--p-texto-2); border: 1px dashed var(--p-borde-campo); }
.producto .p-sello--primario { background: var(--p-primario); color: #FFFFFF; }
.producto .p-sello--grande { height: 32px; padding: 0 12px; font-size: 14px; }
.producto .p-sello--grande svg { width: 18px; height: 18px; }

/* Pasos con estado: visto (hecho), reloj (en revisión), número (pendiente). */
.producto .p-paso {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
    font: 600 13px/1 var(--p-fuente); color: var(--p-texto-2); background: var(--p-superficie); border: 2px solid var(--p-borde-campo); flex: none;
}
.producto .p-paso svg { width: 16px; height: 16px; }
.producto .p-paso--hecho { background: var(--p-exito); border-color: var(--p-exito); color: #FFFFFF; }
.producto .p-paso--revision { background: var(--p-acento-suave); border-color: var(--p-acento); color: var(--p-sobre-acento-suave); }
.producto .p-paso--actual { background: var(--p-primario); border-color: var(--p-primario); color: #FFFFFF; }
.producto .p-paso--32 { width: 32px; height: 32px; font-size: 14px; }
.producto .p-paso--32 svg { width: 18px; height: 18px; }

/* ---------- Tarjetas, cifras y campos ---------- */
.producto .p-tarjeta { background: var(--p-superficie); border: 1px solid var(--p-borde); border-radius: 12px; padding: 16px; }
.producto .p-tarjeta--16 { border-radius: 16px; }
.producto .p-tarjeta--suave { background: var(--p-superficie-2); border-color: transparent; }
.producto .p-tarjeta--oscura { background: var(--p-primario); border-color: var(--p-primario); color: #FFFFFF; }
.producto .p-tarjeta--acento { background: var(--p-acento-suave); border-color: var(--p-acento); }
.producto .p-tarjeta--error { background: var(--p-error-fondo); border-color: var(--p-error); }
.producto .p-tarjeta--exito { background: var(--p-exito-fondo); border-color: #9BD3B3; }
.producto .p-tarjeta--info { background: var(--p-info-fondo); border-color: #A9C8EE; }
.producto .p-tarjeta--seleccion { border-color: var(--p-primario); border-width: 2px; }
.producto .p-cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.producto .p-cifra { background: var(--p-superficie); border: 1px solid var(--p-borde); border-radius: 12px; padding: 14px 16px; min-height: 84px; }
.producto .p-cifra__rotulo { font-size: 13px; color: var(--p-texto-2); }
.producto .p-cifra__valor { font: 700 30px/1.1 var(--p-fuente); font-variant-numeric: tabular-nums; color: var(--p-texto); margin-top: 2px; }
.producto .p-cifra__nota { font-size: 13px; color: var(--p-texto-2); margin-top: 4px; }
.producto .p-cifra--acento { background: var(--p-acento-suave); border-color: var(--p-acento); }
.producto .p-cifra--acento .p-cifra__rotulo, .producto .p-cifra--acento .p-cifra__nota { color: var(--p-sobre-acento-suave); }
.producto .p-cifra--error { background: var(--p-error-fondo); border-color: var(--p-error); }
.producto .p-cifra--error .p-cifra__rotulo, .producto .p-cifra--error .p-cifra__nota { color: var(--p-error); }
.producto .p-campo {
    display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 8px;
    border: 1px solid var(--p-borde-campo); background: var(--p-superficie); color: var(--p-texto); font-size: 15px;
}
.producto .p-campo--vacio { color: var(--p-texto-2); }
.producto .p-campo--foco { border: 2px solid var(--p-primario); outline: 3px solid var(--p-enlace); outline-offset: 2px; }
.producto .p-campo--alto { height: auto; min-height: 88px; align-items: flex-start; padding: 10px 14px; line-height: 1.5; }
.producto .p-campo__rotulo { font-size: 14px; font-weight: 600; margin-bottom: 6px; display: block; }
.producto .p-campo--redondo { border-radius: 999px; color: var(--p-texto-2); }
.producto .p-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px;
    border: 1px solid var(--p-borde-campo); background: var(--p-superficie); font: 600 14px/1 var(--p-fuente); color: var(--p-texto); white-space: nowrap;
}
.producto .p-chip svg { width: 16px; height: 16px; }
.producto .p-chip--activo { background: var(--p-primario); border-color: var(--p-primario); color: #FFFFFF; }
.producto .p-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.producto .p-icono-cuadro {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px;
    background: var(--p-primario-suave); color: var(--p-primario); flex: none;
}
.producto .p-icono-cuadro--32 { width: 32px; height: 32px; }
.producto .p-icono-cuadro--32 svg { width: 20px; height: 20px; }
.producto .p-avatar {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
    background: var(--p-primario); color: #FFFFFF; font: 600 14px/1 var(--p-fuente); flex: none;
}
.producto .p-avatar--suave { background: var(--p-primario-suave); color: var(--p-primario); }
.producto .p-avatar--32 { width: 32px; height: 32px; font-size: 12px; }
.producto .p-nota { font-size: 14px; color: var(--p-texto-2); }

/* Barra de progreso y lectura */
.producto .p-barra { position: relative; height: 8px; border-radius: 999px; background: var(--p-superficie-2); overflow: hidden; flex: 1; min-width: 60px; }
.producto .p-barra > i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--p-primario); }
.producto .p-barra--exito > i { background: var(--p-exito); }
.producto .p-barra--acento > i { background: var(--p-acento); }
.producto .p-barra--advertencia > i { background: #B8741A; }
.producto .p-barra--error > i { background: var(--p-error); }
.producto .p-barra--gris > i { background: var(--p-borde-campo); }

/* Indicador de guardado */
.producto .p-guardado { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--p-exito); white-space: nowrap; }
.producto .p-guardado svg { width: 18px; height: 18px; }
.producto .p-guardado--sello { height: 30px; padding: 0 12px; border-radius: 999px; background: var(--p-exito-fondo); font-size: 13px; }
.producto .p-guardado--sello svg { width: 16px; height: 16px; }

/* Marca de «Confidencial» */
.producto .p-confidencial { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; background: var(--p-primario-profundo); color: #FFFFFF; font-size: 14px; }

/* ---------- Tablas ---------- */
.producto .p-tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; background: var(--p-superficie); }
.producto .p-tabla th {
    position: sticky; top: 0; z-index: 1; height: 40px; padding: 0 12px; text-align: left; vertical-align: middle;
    font: 600 13px/1.3 var(--p-fuente); color: var(--p-texto-2); background: var(--p-superficie-2); border-bottom: 1px solid var(--p-borde); white-space: nowrap;
}
.producto .p-tabla td { height: 44px; padding: 0 12px; vertical-align: middle; border-bottom: 1px solid var(--p-borde); white-space: nowrap; }
.producto .p-tabla tr:last-child td { border-bottom: 0; }
.producto .p-tabla .p-num, .producto .p-tabla th.p-num { text-align: right; font-variant-numeric: tabular-nums; }
.producto .p-tabla .p-centro { text-align: center; }
.producto .p-tabla .p-fija { position: sticky; left: 0; background: inherit; z-index: 2; }
.producto .p-tabla tbody tr { background: var(--p-superficie); }
.producto .p-tabla tbody tr.p-seleccion { background: var(--p-primario-suave); }
.producto .p-tabla tbody tr.p-seleccion td:first-child { box-shadow: inset 3px 0 0 var(--p-primario); }
.producto .p-tabla tbody tr.p-total td { background: var(--p-superficie-2); font-weight: 600; }
.producto .p-tabla .p-bajo { color: var(--p-error); font-weight: 600; }
.producto .p-tabla .p-bajo svg { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-left: 2px; }
.producto .p-tabla .p-celda-foco { outline: 2px solid var(--p-primario); outline-offset: -2px; border-radius: 6px; background: var(--p-superficie); }
.producto .p-tabla-marco { border: 1px solid var(--p-borde); border-radius: 12px; overflow: hidden; background: var(--p-superficie); }
.producto .p-tabla--grupo th { border-left: 1px solid var(--p-borde); }
.producto .p-tabla--grupo th:first-child, .producto .p-tabla--grupo th.p-sin-borde { border-left: 0; }
.producto .p-tabla--grupo td.p-grupo-ini { border-left: 1px solid var(--p-borde); }
.producto .p-tabla th .p-th-sub { display: block; font-weight: 400; font-size: 12px; color: var(--p-texto-2); }
.producto .p-tabla th.p-th-grupo { text-align: center; height: 36px; white-space: normal; line-height: 1.25; padding: 6px 4px; }
.producto .p-tabla th.p-th-grupo span { display: block; font-weight: 400; font-size: 12px; }
.producto .p-tabla th.p-th-act { height: 44px; text-align: right; padding: 0 6px; white-space: normal; line-height: 1.25; font-size: 12px; }
.producto .p-tabla--compacta td { height: 36px; font-size: 14px; }
.producto .p-tabla tbody td.p-calculada { background: var(--p-superficie-2); }

/* Gráfica comparativa: valor escrito sobre cada barra; la segunda serie o lo que está bajo la meta lleva trama. */
.producto .p-grafica { display: flex; align-items: flex-end; gap: 10px; height: 160px; padding: 0 4px; border-bottom: 1px solid var(--p-borde); }
.producto .p-barra-v { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.producto .p-barra-v b { font: 600 13px/1 var(--p-fuente); font-variant-numeric: tabular-nums; }
.producto .p-barra-v i { width: 100%; max-width: 40px; border-radius: 4px 4px 0 0; background: var(--p-primario); display: block; }
.producto .p-barra-v--trama i { background: repeating-linear-gradient(135deg, var(--p-borde-campo) 0 3px, #FFFFFF 3px 7px); border: 1px solid var(--p-borde-campo); border-bottom: 0; }
.producto .p-grafica-ejes { display: flex; gap: 10px; padding: 6px 4px 0; }
.producto .p-grafica-ejes span { flex: 1; text-align: center; font-size: 12px; color: var(--p-texto-2); }
.producto .p-leyenda { display: flex; gap: 14px; font-size: 13px; color: var(--p-texto-2); align-items: center; }
.producto .p-leyenda i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; background: var(--p-primario); vertical-align: -2px; margin-right: 6px; }
.producto .p-leyenda i.p-trama { background: repeating-linear-gradient(135deg, var(--p-borde-campo) 0 2px, #FFFFFF 2px 5px); border: 1px solid var(--p-borde-campo); }

/* Lista de filas con borde entre ellas */
.producto .p-lista { display: flex; flex-direction: column; }
.producto .p-lista > * { padding: 10px 0; border-bottom: 1px solid var(--p-borde); }
.producto .p-lista--8 > * { padding: 8px 0; }
.producto .p-lista > *:last-child { border-bottom: 0; padding-bottom: 0; }
.producto .p-lista > *:first-child { padding-top: 0; }
.producto .p-lista--12 > * { padding: 12px 0; }

/* ---------- Celular: marco de 390 × 760 ---------- */
.producto--celular { width: 390px; height: 760px; }
.producto .p-tel {
    width: 390px; height: 760px; border: 8px solid #1A1C22; border-radius: 44px; background: var(--p-fondo);
    overflow: hidden; display: flex; flex-direction: column; position: relative;
}
.producto .p-tel__pantalla { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 20px 16px 0; gap: 10px; }
.producto .p-tel__pantalla--sin-relleno { padding: 0; gap: 0; }
.producto .p-tel__pie { padding: 12px 16px; background: var(--p-superficie); border-top: 1px solid var(--p-borde); display: flex; flex-direction: column; gap: 8px; align-items: center; }
.producto .p-tel__pie .p-apoyo { text-align: center; }
.producto .p-nav { display: grid; grid-template-columns: repeat(5, 1fr); height: 72px; background: var(--p-superficie); border-top: 1px solid var(--p-borde); padding: 8px 4px 10px; flex: none; }
.producto .p-nav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: 500 12px/1 var(--p-fuente); color: var(--p-texto-2); position: relative; }
.producto .p-nav__icono { display: flex; align-items: center; justify-content: center; width: 56px; height: 30px; border-radius: 999px; }
.producto .p-nav__item--activo { color: var(--p-primario); font-weight: 600; }
.producto .p-nav__item--activo .p-nav__icono { background: var(--p-primario-suave); }
.producto .p-nav__globo { position: absolute; top: 0; left: calc(50% + 4px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--p-error); color: #FFFFFF; font: 600 11px/18px var(--p-fuente); text-align: center; }
.producto .p-tel-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 12px; background: var(--p-superficie); border-bottom: 1px solid var(--p-borde); }
.producto .p-tel-cabecera__nombre { font: 700 17px/1.15 var(--p-fuente-titulo); color: var(--p-primario-profundo); }
.producto .p-tel-cabecera__linea { font-size: 12px; color: var(--p-texto-2); }
.producto .p-menu-boton { display: flex; flex-direction: column; align-items: center; gap: 2px; font: 600 11px/1 var(--p-fuente); color: var(--p-primario); }
.producto .p-volver { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--p-texto-2); }
.producto .p-volver svg { width: 18px; height: 18px; }
.producto .p-accesos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.producto .p-acceso { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; background: var(--p-superficie); border: 1px solid var(--p-borde); border-radius: 12px; font-weight: 600; font-size: 15px; }
.producto .p-acceso small { display: block; font-weight: 400; font-size: 12px; color: var(--p-texto-2); }
.producto .p-accesos--cuatro { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.producto .p-acceso--vertical { position: relative; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 4px; min-height: 72px; font-size: 13px; }
.producto .p-acceso--vertical .p-icono-cuadro { width: 32px; height: 32px; }
.producto .p-acceso--vertical .p-icono-cuadro svg { width: 20px; height: 20px; }
.producto .p-pendiente { display: flex; gap: 12px; align-items: flex-start; }
.producto .p-pendiente__titulo { font-weight: 600; font-size: 15px; line-height: 1.3; }
.producto .p-pendiente__linea { font-size: 13px; color: var(--p-texto-2); line-height: 1.35; margin-top: 1px; }
.producto .p-pago { display: flex; flex-direction: column; gap: 10px; }
.producto .p-pago__valor { font: 700 22px/1 var(--p-fuente); font-variant-numeric: tabular-nums; }
.producto .p-asistencia-fila { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--p-borde); }
.producto .p-asistencia-fila:last-child { border-bottom: 0; }
/* Los tres botones de asistencia van en columnas fijas: el marcado (con ícono) no corre a los demás de fila en fila. */
.producto .p-tres { display: grid; grid-template-columns: 96px 74px 70px; gap: 6px; }
.producto .p-tres .p-marca { min-width: 0; padding: 0 6px; }
.producto .p-marca {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 40px; min-width: 56px; padding: 0 8px; border-radius: 8px;
    border: 1px solid var(--p-borde-campo); background: var(--p-superficie); font: 600 13px/1 var(--p-fuente); color: var(--p-texto);
}
.producto .p-marca svg { width: 16px; height: 16px; }
.producto .p-marca--exito { background: var(--p-exito-fondo); border-color: var(--p-exito); color: var(--p-exito); }
.producto .p-marca--advertencia { background: var(--p-advertencia-fondo); border-color: #B8741A; color: var(--p-advertencia); }
.producto .p-marca--error { background: var(--p-error-fondo); border-color: var(--p-error); color: var(--p-error); }
.producto .p-marca--ancha { min-width: 92px; }
.producto .p-linea-tiempo { display: flex; flex-direction: column; }
.producto .p-hito { display: grid; grid-template-columns: 28px 1fr; gap: 12px; position: relative; padding-bottom: 14px; }
.producto .p-hito::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 0; width: 2px; background: var(--p-borde); }
.producto .p-hito:last-child::before { display: none; }
.producto .p-hito:last-child { padding-bottom: 0; }
.producto .p-hito__titulo { font-weight: 600; font-size: 15px; display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 28px; }
.producto .p-hito__linea { font-size: 13px; color: var(--p-texto-2); line-height: 1.4; }
/* El portal de la comunidad es la aplicación del celular: sin barra de dirección. Cada pantalla abre con la cabecera
   del portal real (rótulo, título y campana) y la barra inferior lleva las pestañas de `tabs.ts`: cinco para quien
   paga (Inicio, Académico, Avisos, Pagos y Más) y cuatro para el docente, que no tiene Pagos. */
.producto .p-nav--cuatro { grid-template-columns: repeat(4, 1fr); }
.producto .p-portal-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.producto .p-portal-cabecera .p-titulo { font-size: 24px; line-height: 1.15; }
.producto .p-portal-campana { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--p-borde); background: var(--p-superficie); color: var(--p-texto); flex: none; }
.producto .p-portal-campana svg { width: 22px; height: 22px; }
.producto .p-portal-campana i { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--p-error); color: #FFFFFF; font: 600 11px/20px var(--p-fuente); font-style: normal; text-align: center; }
/* La bienvenida de Inicio, como en el portal real: tarjeta azul profundo con la institución, la fecha y el saludo en
   Bricolage (el único texto en Bricolage de todo el portal). */
.producto .p-bienvenida { border-radius: 16px; background: var(--p-primario); color: #FFFFFF; padding: 14px 16px 16px; }
.producto .p-bienvenida small { display: block; font-size: 13px; line-height: 1.35; color: var(--p-primario-suave); }
.producto .p-bienvenida .p-saludo { color: #FFFFFF; margin-top: 4px; font-size: 25px; }
/* El sitio público en el celular se ve en el navegador del teléfono: una franja con la dirección arriba. */
.producto .p-tel-direccion { display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; margin: 0; padding: 0 16px; background: var(--p-superficie-2); border-bottom: 1px solid var(--p-borde); font-size: 12px; color: var(--p-texto-2); flex: none; }
.producto .p-tel-direccion svg { width: 13px; height: 13px; }
.producto .p-tel-direccion span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 14px; border-radius: 999px; background: var(--p-superficie); }

/* ---------- Computador: ventana de 1200 ---------- */
.producto--pc { width: 1200px; }
.producto .p-ventana { width: 100%; border: 1px solid var(--p-borde); border-radius: 16px; overflow: hidden; background: var(--p-fondo); display: flex; flex-direction: column; }
.producto .p-ventana__barra { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; background: var(--p-superficie-2); border-bottom: 1px solid var(--p-borde); flex: none; }
.producto .p-ventana__barra i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--p-borde-campo); display: block; }
.producto .p-ventana__url { margin-left: 12px; flex: 1; display: flex; align-items: center; justify-content: center; height: 26px; border-radius: 999px; background: var(--p-superficie); border: 1px solid var(--p-borde); font-size: 12px; color: var(--p-texto-2); max-width: 420px; }
/* El esqueleto del Panel, como el real (DESIGN.md, «Menú lateral del Panel»): menú lateral blanco a la izquierda en
   toda la altura y, a la derecha, la barra superior (institución activa, campana y persona) sobre el contenido. El
   menú lleva el logo de SOFTIA, la institución con «Panel de la institución», la píldora del rol y los grupos de la
   propuesta que ese rol ve; la entrada activa es una píldora azul suave y el dorado nunca entra en el menú. */
.producto .p-panel { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 0; }
.producto .p-contenido { display: flex; flex-direction: column; min-width: 0; }
.producto .p-lateral { background: var(--p-superficie); border-right: 1px solid var(--p-borde); padding: 18px 12px 16px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.producto .p-logo { display: block; width: 128px; height: 40px; margin: 0 0 16px 6px; background: url("../marca/logo_horizontal_color.svg") left center / contain no-repeat; flex: none; }
.producto .p-lateral__inst { display: flex; flex-direction: column; padding: 0 6px 10px; }
.producto .p-lateral__inst b { font: 700 15px/1.25 var(--p-fuente); color: var(--p-primario); }
.producto .p-lateral__inst span { font-size: 13px; line-height: 1.35; color: var(--p-texto-2); }
.producto .p-lateral__rol { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 8px; background: var(--p-superficie-2); font: 600 13px/1 var(--p-fuente); color: var(--p-texto); margin-bottom: 10px; }
.producto .p-lateral__rol svg { width: 16px; height: 16px; }
.producto .p-lateral__item { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px 0 12px; border-radius: 999px; color: var(--p-texto-2); font-weight: 600; white-space: nowrap; }
.producto .p-lateral__item svg { width: 20px; height: 20px; color: var(--p-texto-2); }
.producto .p-lateral__item .p-flecha { margin-left: auto; width: 16px; height: 16px; color: var(--p-borde-campo); }
.producto .p-lateral__item--activo { background: var(--p-primario-suave); color: var(--p-primario); font-weight: 700; }
.producto .p-lateral__item--activo svg { color: var(--p-primario); }
.producto .p-lateral__item--abierto, .producto .p-lateral__item--abierto svg { color: var(--p-primario); font-weight: 700; }
.producto .p-lateral__sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 21px; border-left: 2px solid var(--p-superficie-2); padding-left: 8px; }
.producto .p-lateral__sub span { display: flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 999px; font-size: 14px; color: var(--p-texto-2); white-space: nowrap; }
.producto .p-lateral__sub span.p-lateral__item--activo { background: var(--p-primario-suave); color: var(--p-primario); font-weight: 700; }
.producto .p-superior { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; padding: 0 24px; background: var(--p-superficie); border-bottom: 1px solid var(--p-borde); flex: none; }
.producto .p-superior__inst { display: flex; align-items: center; gap: 12px; }
.producto .p-superior__inst b { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; }
.producto .p-superior__inst small { display: block; font-size: 13px; color: var(--p-texto-2); line-height: 1.3; }
.producto .p-superior__persona { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; }
.producto .p-superior__persona > svg { width: 18px; height: 18px; color: var(--p-texto-2); }
.producto .p-campana { position: relative; display: inline-flex; color: var(--p-texto-2); margin-right: 8px; }
.producto .p-campana i { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--p-error); color: #FFFFFF; font: 600 11px/18px var(--p-fuente); font-style: normal; text-align: center; }
.producto .p-rotulo { font-size: 13px; font-weight: 500; color: var(--p-texto-2); margin-bottom: 2px; }
.producto .p-migas { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--p-texto-2); }
.producto .p-migas svg { width: 14px; height: 14px; }
.producto .p-migas b { font-weight: 500; color: var(--p-enlace); }
/* Selector de periodo: un segmentado como el de la planilla real, con el abierto relleno en primario. */
.producto .p-segmentos { display: inline-flex; padding: 4px; gap: 2px; border: 1px solid var(--p-borde-campo); border-radius: 999px; background: var(--p-superficie); font-size: 13px; white-space: nowrap; }
.producto .p-segmentos span { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 14px; border-radius: 999px; color: var(--p-texto); }
.producto .p-segmentos b { font-weight: 600; }
.producto .p-segmentos svg { width: 14px; height: 14px; color: var(--p-texto-2); }
.producto .p-segmentos .p-segmentos__activo { background: var(--p-primario); color: #FFFFFF; }
.producto .p-main { padding: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.producto .p-encabezado { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.producto .p-acciones { display: flex; align-items: center; gap: 12px; flex: none; }
.producto .p-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.producto .p-lista-detalle { display: grid; grid-template-columns: 1fr 288px; gap: 16px; align-items: start; }
.producto .p-herramientas { display: flex; align-items: center; gap: 16px; padding: 10px 12px; border-bottom: 1px solid var(--p-borde); font-size: 14px; }
.producto .p-herramientas .p-enlace { font-weight: 500; }
.producto .p-alerta { display: grid; grid-template-columns: 24px 32px 1fr auto; align-items: center; gap: 10px; font-size: 15px; }
.producto .p-alerta b { font-size: 17px; text-align: right; font-variant-numeric: tabular-nums; }
.producto .p-alerta svg { color: var(--p-primario); }
.producto .p-alerta--error svg { color: var(--p-error); }
.producto .p-alerta--advertencia svg { color: #8A5A00; }
.producto .p-doc { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.producto .p-doc svg { color: var(--p-texto-2); }
.producto .p-doc b { display: block; font-weight: 600; }
.producto .p-doc small { font-size: 12px; color: var(--p-texto-2); }
.producto .p-foto { display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; background: repeating-linear-gradient(135deg, var(--p-superficie-2) 0 6px, #E3E8F1 6px 12px); color: var(--p-texto-2); font-size: 12px; height: 64px; }
.producto .p-desplegable { justify-content: space-between; }
/* La foto que adjuntó quien reportó: un dibujo sobrio de la puerta con la chapa, no una caja con rótulo. */
.producto .p-foto--chapa { position: relative; height: 96px; padding: 0; overflow: hidden; background: none; }
.producto .p-foto--chapa > svg { width: 100%; height: 100%; stroke: none; }
.producto .p-foto--chapa .p-sello { position: absolute; left: 8px; bottom: 8px; height: 22px; font-size: 12px; background: var(--p-superficie); }

/* ---------- Sitio público ---------- */
.producto .p-sitio { background: var(--p-superficie); }
.producto .p-sitio__aviso { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 40px; background: var(--p-primario-profundo); color: #FFFFFF; font-size: 13px; }
.producto .p-sitio__aviso b { color: var(--p-acento); font-weight: 600; }
.producto .p-sitio__cabecera { display: flex; align-items: center; gap: 16px; height: 72px; padding: 0 40px; border-bottom: 1px solid var(--p-borde); white-space: nowrap; }
.producto .p-sitio__nombre { font: 700 20px/1.1 var(--p-fuente-titulo); color: var(--p-primario-profundo); }
.producto .p-sitio__lema { font-size: 12px; color: var(--p-texto-2); }
.producto .p-sitio__menu { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 500; color: var(--p-texto); white-space: nowrap; }
.producto .p-sitio__menu .p-fila { gap: 4px; }
.producto .p-sitio__menu svg { width: 18px; height: 18px; }
.producto .p-sitio__cuerpo { background: var(--p-fondo); padding: 40px 40px 48px; display: flex; flex-direction: column; gap: 40px; }
.producto .p-portada { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.producto .p-portada__titular { font: 700 46px/1.1 var(--p-fuente-titulo); color: var(--p-primario-profundo); letter-spacing: -0.01em; }
.producto .p-portada__texto { font-size: 17px; color: var(--p-texto-2); line-height: 1.5; max-width: 46ch; }
/* La foto de portada y las de las noticias son ilustraciones del elenco de la landing (assets/ilustraciones) sobre un
   fondo suave: la ruta es relativa a esta hoja, así que sirve igual en la landing, en la galería y en cada maqueta suelta. */
.producto .p-portada__foto { height: 300px; border-radius: 72px 16px 72px 16px; background: url("../ilustraciones/secretaria-720.webp") center 58% / auto 112% no-repeat, linear-gradient(160deg, #DCE6F5, #C3D2EA); }
.producto .p-seccion-titulo { font: 700 24px/1.2 var(--p-fuente); color: var(--p-primario-profundo); }
.producto .p-cinco { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.producto .p-acceso-publico { background: var(--p-superficie); border: 1px solid var(--p-borde); border-radius: 12px; padding: 16px; min-height: 128px; display: flex; flex-direction: column; gap: 10px; }
.producto .p-acceso-publico b { font-size: 15px; line-height: 1.3; }
.producto .p-acceso-publico small { font-size: 13px; color: var(--p-texto-2); line-height: 1.4; }
.producto .p-fecha { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 8px; background: var(--p-acento-suave); color: var(--p-sobre-acento-suave); font: 700 16px/1 var(--p-fuente); flex: none; }
.producto .p-fecha small { font-size: 11px; font-weight: 600; text-transform: lowercase; margin-top: 2px; }
.producto .p-tres-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.producto .p-noticia { background: var(--p-superficie); border: 1px solid var(--p-borde); border-radius: 12px; overflow: hidden; }
.producto .p-noticia__foto { height: 120px; background: linear-gradient(160deg, #DCE6F5, #C3D2EA); background-repeat: no-repeat; }
.producto .p-noticia__foto--familias { background-image: url("../ilustraciones/publico-colegios-320.webp"), linear-gradient(160deg, #DCE6F5, #C3D2EA); background-size: auto 150%, auto; background-position: center 12%, 0 0; }
.producto .p-noticia__foto--jardin { background-image: url("../ilustraciones/publico-jardines-320.webp"), linear-gradient(160deg, #FFF1CC, #F5E2B0); background-size: auto 150%, auto; background-position: center 12%, 0 0; }
.producto .p-noticia__foto--sede { background-image: url("../ilustraciones/sitio-320.webp"), linear-gradient(160deg, #DDF3E6, #C2E4CF); background-size: auto 112%, auto; background-position: center 40%, 0 0; }
.producto .p-noticia__texto { padding: 14px 16px 16px; }
.producto .p-noticia__texto small { display: block; font-size: 12px; color: var(--p-texto-2); margin-bottom: 4px; }
.producto .p-noticia__texto b { display: block; font-size: 16px; line-height: 1.3; }
.producto .p-noticia__texto p { margin: 6px 0 0; font-size: 14px; color: var(--p-texto-2); line-height: 1.45; }
.producto .p-sitio__pie { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 32px 40px 36px; background: var(--p-primario-profundo); color: #FFFFFF; font-size: 13px; line-height: 1.9; }
.producto .p-sitio__pie b { display: block; color: var(--p-acento); font-size: 13px; margin-bottom: 4px; }
/* Al pie del sitio, como en el real: el año, la institución y «Sitio creado con SOFTIA» con el logo negativo pequeño. */
.producto .p-sitio__firma { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.2); color: var(--p-primario-suave); }
.producto .p-sitio__firma > span { display: inline-flex; align-items: center; gap: 8px; }
.producto .p-logo--negativo { width: 96px; height: 30px; margin: 0; background-image: url("../marca/logo_horizontal_negativo_sin_fondo.svg"); }

/* ---------- Hoja carta: boletín ---------- */
.producto--hoja { width: 680px; }
.producto .p-hoja { width: 680px; padding: 36px 40px; background: var(--p-superficie); border: 1px solid var(--p-borde); font-size: 12px; line-height: 1.4; }
.producto .p-hoja .p-tabla { font-size: 12px; }
.producto .p-hoja .p-tabla th { height: 30px; padding: 0 6px; font-size: 11px; position: static; }
.producto .p-hoja .p-tabla td { height: 30px; padding: 2px 6px; font-size: 12px; white-space: normal; }
.producto .p-hoja .p-sello { height: 20px; padding: 0 7px; font-size: 11px; gap: 4px; }
.producto .p-hoja .p-sello svg { width: 12px; height: 12px; }
.producto .p-hoja-datos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 10px 12px; background: var(--p-superficie-2); border-radius: 8px; }
.producto .p-hoja-datos small { display: block; font-size: 10px; color: var(--p-texto-2); }
.producto .p-hoja-datos b { font-size: 13px; }
.producto .p-hoja-resumen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.producto .p-hoja-resumen > div { border: 1px solid var(--p-borde); border-radius: 8px; padding: 8px 10px; }
.producto .p-hoja-resumen small { display: block; font-size: 10px; color: var(--p-texto-2); }
.producto .p-hoja-resumen b { font-size: 13px; }
.producto .p-firma { flex: 1; border-top: 1px solid var(--p-texto); padding-top: 6px; text-align: center; font-size: 11px; color: var(--p-texto-2); }
.producto .p-firma b { display: block; font-size: 12px; color: var(--p-texto); }
.producto .p-firma .p-manuscrita { display: block; font: 500 18px/1 var(--p-fuente-titulo); font-style: italic; color: var(--p-primario); margin: -30px 0 10px; }
.producto .p-qr { flex: none; }

/* ---------- Díptico: celular + Panel en un mismo ancho de 1200 ---------- */
.producto--diptico { display: flex; gap: 24px; align-items: flex-start; }
.producto .p-ventana--diptico { width: 786px; flex: none; min-height: 760px; }
/* En el díptico el Panel mide 786: menú de 232 con filas de 36, letra de 13 y sin barra superior (el celular ya ocupa
   el ancho); así «Participación y atención» cabe con su chevrón. */
.producto .p-panel--estrecho { grid-template-columns: 232px minmax(0, 1fr); }
.producto .p-panel--estrecho .p-lateral { padding: 14px 8px; }
.producto .p-panel--estrecho .p-lateral__item { height: 36px; gap: 8px; padding: 0 8px 0 10px; font-size: 13px; }
.producto .p-panel--estrecho .p-lateral__sub span { font-size: 13px; }
.producto .p-panel--estrecho .p-lateral__sub span { height: 32px; }

.producto .p-tabla--10 th, .producto .p-tabla--10 td { padding-left: 10px; padding-right: 10px; }
.producto .p-tabla--dos-lineas td { height: 48px; padding-top: 4px; padding-bottom: 4px; line-height: 1.3; }