/* ============================================================
   ACTORES S.C.G — Ficha de PROGRAMA
   Detalle público de un beneficio del Plan General Asistencial

   Viene de `actores_web/assets/programa.css`. Lo que cambió al traerla: se
   quitó `.demo-note` (era el aviso de "esto es una maqueta") y se agregó, al
   final, lo que la ficha de verdad necesita y la maqueta no tenía —un
   programa real trae requisitos condicionales, formatos para descargar y
   beneficios con los que choca—.
   ============================================================ */

.pchip{display:inline-block; background:var(--ink); color:#fff; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:6px 13px; border-radius:20px; margin-bottom:16px}

/* Arriba y abajo, y nada a los lados: la maqueta escribía `padding:70px 0 90px`
   y con eso pisaba el `padding:0 30px` de `.wrap` —va después en la cascada—,
   de modo que por debajo de 1220px el texto se pegaba al borde de la pantalla.
   No se notaba en el monitor donde se dibujó. */
.pwrap{display:grid; grid-template-columns:1fr 350px; gap:46px; align-items:start; padding-top:70px; padding-bottom:90px}
.pmain > :first-child{margin-top:0}
.pmain .lead{font-size:20px; font-weight:500; color:var(--ink); line-height:1.55; margin:0 0 26px}
.pmain h2{font-family:var(--font-display); font-weight:600; font-size:26px; margin:42px 0 14px}
.pmain p{font-size:17px; line-height:1.7; color:#26261f; margin:0 0 18px}

.cond-list{list-style:none; padding:0; margin:0}
.cond-list li{position:relative; padding-left:30px; margin-bottom:13px; font-size:16px; line-height:1.5; color:#26261f}
.cond-list li::before{content:""; position:absolute; left:0; top:11px; width:14px; height:2px; background:var(--accent)}
.req-list{list-style:none; padding:0; margin:0}
.req-list li{position:relative; padding-left:34px; margin-bottom:13px; font-size:16px; color:#26261f; line-height:1.45}
.req-list li::before{content:"✓"; position:absolute; left:0; top:0; width:22px; height:22px; background:var(--orange-100); color:var(--orange-700); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700}

/* auto-fit y no repeat(3,1fr) como en la maqueta: hay programas del PGA con
   cifra para dos categorías y no para las tres, y una sola columna estirada a
   un tercio del ancho deja la fila coja. */
.montos{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:20px 0 6px}
.monto{border-radius:16px; padding:24px 18px; color:#fff; text-align:center}
.monto b{font-family:var(--font-display); font-weight:700; font-size:32px; display:block; line-height:1}
.monto span{font-size:11px; letter-spacing:.08em; text-transform:uppercase; opacity:.92; display:block; margin-top:7px}
.monto small{display:block; margin-top:8px; font-size:12px; opacity:.85}
.monto.m1{background:#F7A987} .monto.m2{background:#F5814E} .monto.m3{background:var(--accent)}
.montos-note{font-size:13px; color:var(--g2); margin-top:12px}
@media(max-width:520px){.montos{grid-template-columns:1fr}}

.psteps{counter-reset:s; margin:16px 0 0; padding:0; list-style:none}
.psteps li{position:relative; padding-left:46px; margin-bottom:18px; font-size:16px; color:#26261f; line-height:1.5}
.psteps li::before{counter-increment:s; content:counter(s); position:absolute; left:0; top:-2px; width:32px; height:32px; border-radius:50%; background:var(--orange-100); color:var(--orange-700); font-family:var(--font-display); font-weight:700; display:flex; align-items:center; justify-content:center; font-size:15px}

/* ---- Aside (ficha + aplicar) ---- */
.paside{position:sticky; top:88px; display:flex; flex-direction:column; gap:18px}
.ficha{border:1px solid var(--line); border-radius:18px; padding:26px 24px; background:#fff}
.ficha h4{font-family:var(--font-display); font-weight:600; font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:var(--g2); margin:0 0 16px}
.frow2{display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-top:1px solid var(--line); font-size:14px}
.frow2:first-of-type{border-top:none}
.frow2 .k{color:var(--g2)}
.frow2 .v{font-weight:600; text-align:right; color:var(--ink)}
.apply-box{border-radius:18px; padding:28px 24px; background:var(--ink); color:#fff; text-align:center; overflow:hidden; position:relative}
.apply-box .lockrow{display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#9b9a94; font-weight:700; margin-bottom:16px}
.apply-box .lockrow svg{width:15px; height:15px; fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round}
.apply-box .btn{width:100%; justify-content:center}
.apply-box p{font-size:13px; color:#9b9a94; margin:14px 0 0; line-height:1.5}
@media(max-width:860px){.pwrap{grid-template-columns:1fr} .paside{position:static}}

/* ============================================================
   Lo que la maqueta no tenía

   Ahí los requisitos eran cuatro frases sueltas y todas iguales. Un programa
   de verdad los trae con matices que cambian lo que el visitante tiene que
   reunir: unos son condicionales, otros los cumple el área y no él, y otros
   traen un formato en blanco para descargar.
   ============================================================ */

/* Un requisito del área —la visita domiciliaria, la cita con la trabajadora
   social— no lleva el ✓ de «esto lo consigues tú»: no está en su mano. */
.req-list li.del-area::before{content:"↻"; background:var(--paper); color:var(--g2); border:1px solid var(--line); font-size:11px}
.req-list li .rcond{display:block; margin-top:3px; font-size:13.5px; font-style:italic; color:var(--g2)}
.req-list li .rfmt{display:inline-block; margin-top:5px; font-size:13.5px; font-weight:600; color:var(--accent); border-bottom:1px solid var(--accent); padding-bottom:1px}
.req-list li .rfmt:hover{opacity:.7}

/* Los beneficios con los que choca. Son fichas hermanas, así que se enlazan:
   quien lee «es excluyente con el subsidio de desempleo» quiere ver cuál de
   los dos le conviene, y ese es justo el momento de dejarlo comparar. */
.pcross{display:flex; flex-wrap:wrap; gap:10px; margin:0}
.pcross a{display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:600; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:40px; padding:9px 17px; transition:border-color .25s, transform .3s var(--ease)}
.pcross a:hover{border-color:var(--accent); transform:translateY(-2px)}

/* La letra pequeña del PGA: ninguna ayuda asistencial es un derecho
   adquirido. Va al pie de la ficha y no en el hero porque quien llega aquí
   ya viene leyendo, y porque es lo último que conviene recordar antes de
   irse a reunir seis documentos. */
.pnote{margin-top:44px; padding:18px 22px; background:var(--paper); border:1px solid var(--line); border-radius:14px; font-size:13.5px; line-height:1.6; color:var(--g2)}
.pnote b{color:var(--ink)}

/* El aviso de estado en la caja de aplicar (abre el 1/3, cerró el 30/6, no se
   pide por formulario). Sustituye al botón, así que ocupa su sitio. */
.apply-box .pstate{font-size:14.5px; font-weight:600; color:#fff; margin:0; line-height:1.5}
.apply-box form{margin:0}

/* ============================================================
   La ficha dentro de la cuenta del socio

   Es la misma pantalla —mismo cuerpo, mismo partial— con una columna de
   acción distinta: en vez de la puerta de entrada, su cifra, lo que no le
   cuadra y el botón de postularse. Por eso vive en esta hoja y no en una
   aparte: dos hojas para el mismo documento es como empezaron a separarse
   las dos fichas.
   ============================================================ */

/* La columna de la tabla de montos que le toca. Se resalta en vez de esconder
   las otras dos: la cifra se entiende dentro de la escala, y así la tabla es
   la misma que ve cualquiera en el sitio. */
.monto.mia{box-shadow:0 0 0 3px var(--ink); position:relative}
.monto.mia::after{content:"★"; position:absolute; top:9px; right:12px; font-size:13px; opacity:.9}
.montos-mia{margin:12px 0 0; font-size:13.5px; font-weight:600; color:var(--ink)}
.montos-mia::before{content:"★ "; color:var(--accent)}

/* Su cifra, en pesos y arriba de la columna. */
.pcifra{font-family:var(--font-display); font-weight:700; font-size:32px; line-height:1; color:var(--ink); margin:0}
.pcifra-sub{font-size:13.5px; color:var(--g2); margin:6px 0 0}
.pcifra-nota{font-size:13px; line-height:1.55; color:var(--g2); margin:12px 0 0}

/* Lo que no le cuadra, dicho antes de que reúna seis documentos. No bloquea:
   quien decide es el Comité, que puede otorgar igual. */
.pavisos{border:1px solid #FCD34D; background:#FFFBEB; border-radius:18px; padding:22px 24px; color:#78350F}
.pavisos .pav-tit{font-family:var(--font-display); font-weight:700; font-size:16px; margin:0 0 10px}
.pavisos .pav-tit::before{content:"!"; display:inline-flex; align-items:center; justify-content:center; width:19px; height:19px; margin-right:8px; border-radius:50%; background:#B45309; color:#fff; font-size:12px; vertical-align:-3px}
.pavisos ul{list-style:none; padding:0; margin:0}
.pavisos li{position:relative; padding-left:18px; margin-bottom:9px; font-size:14.5px; line-height:1.5}
.pavisos li::before{content:""; position:absolute; left:0; top:9px; width:8px; height:2px; background:#B45309}
.pavisos .pav-pie{font-size:12.5px; line-height:1.55; margin:14px 0 0; opacity:.85}