/* ============================================================
   ACTORES S.C.G — SER SOCIO
   La solicitud de afiliación vista por quien la hace. Se carga
   junto a site.css y trabajo.css, de donde salen el hero oscuro
   (.vhero), la rejilla de la ficha (.vficha) y todo el
   formulario (.vform, .vcampo, .varchivo, .vlegal).

   Aquí va solo lo que no existía: el recorrido numerado, la
   lista de requisitos con su estado, y la bitácora. La página
   del solicitante no es una ficha de lectura como la de una
   convocatoria —es un expediente que se trabaja durante
   semanas—, y eso es lo que pide marcado propio.
   ============================================================ */

/* ============================================================
   1. LA PÁGINA DE ENTRADA  (/ser-socio)
   ------------------------------------------------------------
   Prefijo `ss-`. Sigue la anatomía de ESTILO-VISUAL §6: cabecera
   naranja, bandas que alternan papel y blanco, y el cierre.

   La primera versión era una sola columna de texto con una lista
   numerada, y se leía plana porque LO ERA: doce párrafos con el
   mismo peso obligan a leerlo todo para encontrar lo que uno
   venía a buscar. Lo que arregla eso no es decorar, es dar
   jerarquía distinta a cosas que responden preguntas distintas
   —qué gano, si califico, cuánto trabajo es, qué me piden—.
   ============================================================ */

.ss-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}

/* Los dos sellos de la cabecera: sin costo y plazo de respuesta.
   Sobre el naranja del hero van en tinta con fondo translúcido blanco, no en
   blanco sólido: una píldora blanca ahí compite con los botones, que es lo que
   tiene que ganar. */
.ss-sellos{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.ss-sellos span{display:inline-flex; align-items:center; gap:8px; padding:8px 15px;
  border-radius:40px; background:rgba(255,255,255,.28); border:1px solid rgba(255,255,255,.4);
  font-size:13px; font-weight:600; color:var(--ink)}
.ss-sellos svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}

/* Las bandas, alternando. El orden importa: dos bandas seguidas del mismo
   color hacen que la página se lea como un solo bloque largo, que es
   exactamente el problema que había. */
.ss-porque{background:var(--paper)}
.ss-quien{background:#fff}
.ss-proceso{background:var(--paper)}
.ss-requisitos{background:#fff}
.ss-form{background:var(--ink)}
.ss-dudas{background:var(--paper)}

/* ====== POR QUÉ AFILIARTE ====== */
.ss-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,320px), 1fr)); gap:22px}

.ss-card{background:#fff; border:1px solid var(--line); border-radius:22px; padding:26px;
  transition:transform .35s var(--ease), box-shadow .35s, border-color .25s}
.ss-card:hover{transform:translateY(-4px); border-color:rgba(14,14,12,.24);
  box-shadow:0 28px 50px -34px rgba(0,0,0,.55)}
.ss-card h3{font-family:var(--font-display); font-weight:600; font-size:20px; line-height:1.2;
  margin:16px 0 8px; color:var(--ink)}
.ss-card p{font-size:14.5px; line-height:1.6; color:var(--g2); margin:0}

/* El icono en su cuadro, 46 px y radio 14, como manda el sistema. */
.ss-ico{width:46px; height:46px; border-radius:14px; background:var(--orange-50);
  display:grid; place-items:center; color:var(--orange-700)}
.ss-ico svg{width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}

/* ====== ¿ESTO ES PARA TI? ====== */
.ss-dos{display:grid; grid-template-columns:1fr 1fr; gap:22px}
@media(max-width:820px){.ss-dos{grid-template-columns:1fr}}

.ss-caja{background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:26px}
.ss-caja h3{display:flex; align-items:center; gap:12px; font-family:var(--font-display);
  font-weight:600; font-size:20px; margin:0 0 16px; color:var(--ink)}

/* El número de la caja: mismo gesto que el `.ss-sn` del formulario, para que se
   lean como el mismo sistema de pasos y no como dos inventos. */
.ss-n{flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--orange); color:var(--ink); font-size:14px; font-weight:700}

.ss-lista{list-style:none; margin:0; padding:0}
.ss-lista li{position:relative; padding:0 0 12px 30px; font-size:15px; line-height:1.55; color:var(--g2)}
.ss-lista li:last-child{padding-bottom:0}
/* La palomita se dibuja con bordes en vez de traer un SVG por viñeta: son
   cuatro por caja y un icono en línea por cada una es marcado de más. */
.ss-lista li::before{content:""; position:absolute; left:2px; top:5px; width:11px; height:6px;
  border-left:2px solid var(--orange); border-bottom:2px solid var(--orange);
  transform:rotate(-45deg)}
.ss-lista strong{color:var(--ink); font-weight:600}

/* El aviso de la otra sociedad. No es letra pequeña: es lo que hace que
   rechacen a alguien después de haberlo entregado todo, así que se ve. */
.ss-aviso{display:flex; gap:18px; margin-top:22px; padding:24px;
  background:var(--orange-50); border:1px solid var(--orange-100); border-radius:22px}
.ss-aviso-ico{flex:0 0 auto; width:44px; height:44px; border-radius:14px; background:#fff;
  display:grid; place-items:center; color:var(--orange-700)}
.ss-aviso-ico svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}
.ss-aviso h3{font-family:var(--font-display); font-weight:600; font-size:19px; margin:0 0 6px; color:var(--ink)}
.ss-aviso p{margin:0; font-size:14.5px; line-height:1.6; color:rgba(14,14,12,.76)}
@media(max-width:640px){.ss-aviso{flex-direction:column; gap:14px}}

/* ====== EL RECORRIDO ====== */
.ss-pasos{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,260px), 1fr)); gap:20px}

.ss-paso{position:relative; background:#fff; border:1px solid var(--line); border-radius:20px; padding:24px;
  transition:transform .35s var(--ease), border-color .25s}
.ss-paso:hover{transform:translateY(-4px); border-color:rgba(14,14,12,.24)}
.ss-paso h3{font-family:var(--font-display); font-weight:600; font-size:18px; line-height:1.25;
  margin:14px 0 8px; color:var(--ink)}
.ss-paso p{font-size:14px; line-height:1.6; color:var(--g2); margin:0}

/* El número grande y en naranja translúcido: ordena de un vistazo sin competir
   con el titular del paso, que es lo que hay que leer. */
.ss-pn{font-family:var(--font-display); font-weight:700; font-size:38px; line-height:1;
  color:color-mix(in srgb, var(--orange) 30%, #fff)}

/* ====== LO QUE HAY QUE ENTREGAR ====== */
.ss-reqs{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,300px), 1fr)); gap:16px}

.ss-req{background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:22px;
  display:flex; flex-direction:column; transition:border-color .25s, background .25s}
.ss-req:hover{border-color:rgba(14,14,12,.24); background:#fff}
/* Los dos condicionales se marcan con una línea naranja a la izquierda: no se
   le piden a todo el mundo, y mezclados con los demás parecen obligatorios. */
.ss-req.opcional{border-left:3px solid var(--orange)}

.ss-req-cab{display:flex; align-items:flex-start; gap:11px; margin-bottom:8px}
.ss-req-cab i{color:var(--orange-700); font-size:16px; margin-top:2px}
.ss-req-cab h3{font-family:var(--font-display); font-weight:600; font-size:17px; line-height:1.25;
  margin:0; color:var(--ink)}
.ss-req p{font-size:13.5px; line-height:1.55; color:var(--g2); margin:0 0 14px}
.ss-req-formato{margin-top:auto; font-size:11px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--g1)}
.ss-req-formato em{font-style:normal; color:var(--orange-700)}

/* ====== EL FORMULARIO ======
   Sobre tinta y no sobre papel: es el final del recorrido y tiene que pesar
   como tal. Todo lo de arriba explica; esto es donde se actúa. */
.ss-form{color:#fff}
.ss-form-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:52px; align-items:start}
@media(max-width:960px){.ss-form-grid{grid-template-columns:1fr; gap:34px}}

.ss-form-lado{position:sticky; top:110px}
@media(max-width:960px){.ss-form-lado{position:static}}
.ss-form-lado .lab{color:rgba(255,255,255,.7)}
.ss-form-lado .lab::before{background:var(--orange)}
.ss-form-lado h2{color:#fff}
.ss-form-lado h2 em{color:var(--orange)}
.ss-form-intro{font-size:16px; line-height:1.65; color:rgba(255,255,255,.72); margin:14px 0 28px; max-width:38ch}

.ss-seguro{display:flex; gap:14px; padding:16px 0; border-top:1px solid rgba(255,255,255,.12)}
.ss-seguro span{flex:0 0 auto; width:36px; height:36px; border-radius:11px;
  background:rgba(255,255,255,.08); display:grid; place-items:center; color:var(--orange)}
.ss-seguro svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}
.ss-seguro div{font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.66)}
.ss-seguro b{display:block; color:#fff; font-weight:600; margin-bottom:2px}
/* Las dos promesas pesan más que las tres seguridades: son las que deciden si
   alguien empieza, no si termina. El icono en naranja lleno las separa. */
.ss-seguro.promesa span{background:var(--orange); color:var(--ink)}
.ss-seguro.promesa b{font-size:14.5px}

.ss-form-caja{background:#fff; border-radius:26px; padding:34px; color:var(--ink)}
@media(max-width:640px){.ss-form-caja{padding:24px; border-radius:20px}}

/* Los bloques numerados. Partir el formulario en cuatro tramos cortos y con
   nombre es lo que lo hace parecer abarcable: catorce campos seguidos son un
   trámite, cuatro preguntas de tres campos son una conversación. */
.ss-bloque{padding-bottom:24px; margin-bottom:24px; border-bottom:1px solid var(--line)}
.ss-legend{display:flex; align-items:center; gap:11px; font-family:var(--font-display);
  font-weight:600; font-size:17px; margin:0 0 18px; color:var(--ink)}
.ss-sn{flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--orange); color:var(--ink); font-size:12.5px; font-weight:700; font-family:var(--font-ui)}

/* La etiqueta pertenece al campo que tiene DEBAJO, y para que se lea así la
   distancia a su propio campo (7 px) tiene que ser mucho menor que la que la
   separa del campo de arriba. Con `gap:16px` la proporción era 2:1 y no
   alcanzaba: el ojo leía la etiqueta como el pie del campo anterior. Las filas
   van a 24 —más del triple— y las columnas se quedan en 16, que ahí no hay
   nada que confundir. */
.ss-campos{display:grid; grid-template-columns:1fr 1fr; column-gap:16px; row-gap:24px}
.ss-campos + .ss-campos{margin-top:24px}
.ss-campo.ancho{grid-column:1 / -1}
@media(max-width:640px){.ss-campos{grid-template-columns:1fr}}

.ss-campo label{display:block; font-size:12.5px; font-weight:600; color:var(--g2); margin-bottom:7px}
.ss-campo input, .ss-campo select{width:100%; height:50px; padding:0 15px;
  border:1px solid var(--line); border-radius:12px; background:#fff;
  font-family:var(--font-ui); font-size:15px; color:var(--ink);
  transition:border-color .25s, box-shadow .25s}
.ss-campo input::placeholder{color:var(--g1)}
.ss-campo input:focus, .ss-campo select:focus{outline:0; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--orange-100)}
.ss-campo input.mal-borde, .ss-campo select.mal-borde{border-color:var(--orange-700)}

/* El aviso del caso que la lista no ofrece —hoy, el menor de edad—. No es un
   error: es una salida. Por eso va en la caja tranquila del sitio y no en el
   rojo de la validación, que le diría a quien lo lee que hizo algo mal. */
.ss-nota{margin:12px 0 0; padding:13px 16px; border-radius:12px;
  background:var(--orange-50); border:1px solid var(--orange-100);
  font-size:13.5px; line-height:1.6; color:var(--ink)}
.ss-nota a{font-weight:600; color:var(--orange-700); border-bottom:1px solid currentColor}
.ss-pista{display:block; font-size:12.5px; color:var(--g2); margin-top:6px}
.ss-campo .mal, .ss-form-caja > .mal{display:block; font-size:13px; color:var(--orange-700);
  font-weight:600; margin-top:6px}
/* El asterisco de obligatorio, discreto: si grita, la mitad opcional parece un
   descuido en vez de una elección. */
.ss-req-marca{color:var(--orange-700)}

.ss-marca{display:flex; gap:11px; align-items:flex-start; font-size:14px; line-height:1.55;
  color:var(--g2); padding:9px 0}
.ss-marca input{margin-top:2px; flex:0 0 auto; width:17px; height:17px; accent-color:var(--orange)}
.ss-marca strong{color:var(--ink); font-weight:600}
.ss-marca.legal{font-size:12.5px; line-height:1.5; color:var(--g1); padding-top:4px}
.ss-marca a{color:var(--orange-700); font-weight:600; text-decoration:underline; text-underline-offset:2px}

.ss-enviar{margin-top:24px}
.ss-enviar .btn{width:100%; justify-content:center}
/* El pie del botón. Se llamaba `.ss-nota` como la caja naranja de más arriba
   —dos intenciones en un mismo nombre— y heredaba de ella el fondo, el borde y
   el relleno: la línea del código salía metida en una caja de aviso que nadie
   pidió, y la caja del menor salía en gris y centrada. */
.ss-envio-nota{display:block; margin-top:12px; font-size:12.5px; color:var(--g1); text-align:center}

.ss-exito{margin-bottom:20px; padding:14px 16px; border-radius:14px;
  background:var(--orange-50); border:1px solid var(--orange-100);
  font-size:14px; color:var(--orange-700); font-weight:600}

/* ====== DUDAS ====== */
.ss-faq{max-width:78ch; margin:0 auto}
.ss-faq details{border-bottom:1px solid var(--line); padding:4px 0}
.ss-faq summary{cursor:pointer; list-style:none; padding:20px 34px 20px 0; position:relative;
  font-family:var(--font-display); font-weight:600; font-size:18px; line-height:1.35; color:var(--ink)}
.ss-faq summary::-webkit-details-marker{display:none}
.ss-faq summary:hover{color:var(--orange-700)}
/* El signo se hace con dos barras y una rota: un «+» que se vuelve «−» sin
   depender de que la fuente de iconos haya cargado. */
.ss-faq summary::after, .ss-faq summary::before{content:""; position:absolute; right:6px; top:50%;
  width:14px; height:2px; background:var(--orange); transition:transform .25s var(--ease)}
.ss-faq summary::before{transform:rotate(90deg)}
.ss-faq details[open] summary::before{transform:rotate(0)}
.ss-faq details p{margin:0 0 22px; padding-right:34px; font-size:15.5px; line-height:1.7; color:var(--g2)}

.ss-cierre{text-align:center; margin-top:48px}
.ss-cierre p{font-family:var(--font-display); font-size:22px; color:var(--ink); margin:0 0 16px}

/* ============================================================
   2. EL EXPEDIENTE DEL SOLICITANTE
   ------------------------------------------------------------
   Las tres pantallas de dentro (prefijo `se-`): volver por
   código, mi solicitud y la ficha.

   Las tres se pasaron a la anatomía de la página de entrada
   —cabecera naranja con espiral y trama, bandas alternando papel
   y blanco, cierre—. Abrían con el hero oscuro de la ficha de
   una convocatoria, y el corte se veía justo donde peor se ve:
   se pulsa «Ya empecé una» en una página naranja y se aterrizaba
   en una negra. Se justificaba diciendo que son pantallas de
   detalle, y eso es cierto de una ficha de convocatoria —se
   entra, se lee y se sale—; pero esto es un trámite de semanas
   al que se vuelve una y otra vez, y para quien está dentro no
   son dos sitios, son el mismo.

   Lo que sí cambia respecto de la entrada es a qué se dedica
   cada banda. Allá el orden contesta «¿esto es para mí?»; aquí
   contesta la única pregunta que trae a alguien de vuelta: QUÉ
   ME TOCA HACER AHORA. Por eso el estado va en la cabecera —se
   ve sin bajar—, lo devuelto va primero y en rojo, y el envío
   cierra sobre tinta, que es como el sistema marca el final de
   un recorrido (ver `.ss-form`).
   ============================================================ */

/* ---------- La cabecera ----------
   Los sellos van en tinta sobre blanco translúcido, no en blanco sólido ni en
   color: es la misma receta de `.perfil-chip` del área del socio, y existe
   porque blanco sobre el naranja de marca no pasa AA. El estado, que sí tiene
   color propio, lo lleva en un punto y no en el fondo: así se distingue de un
   vistazo sin sacar del sistema al resto de la banda. */
.se-sellos{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.se-sellos span{display:inline-flex; align-items:center; gap:9px; padding:8px 15px;
  border-radius:40px; background:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.75);
  font-size:13px; font-weight:600; color:var(--ink)}
.se-sellos .punto{flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:var(--ink)}
.se-sellos code{font-family:ui-monospace, monospace; font-weight:700; letter-spacing:.06em}

/* El color del punto sale del mismo catálogo que las pastillas: un estado
   nuevo en config no puede quedarse sin color y salir invisible. */
.se-sellos .gray{background:var(--g2)}
.se-sellos .blue{background:#1c4e8a}
.se-sellos .cyan{background:#12656f}
.se-sellos .indigo{background:#3f36a5}
.se-sellos .violet{background:#5b2ca0}
.se-sellos .purple{background:#6d2073}
.se-sellos .amber{background:#8a5a08}
.se-sellos .orange{background:var(--orange-700)}
.se-sellos .green{background:#1c6b33}
.se-sellos .red{background:#a32020}

/* ---------- Las bandas ----------
   Alternando, como en la entrada. El envío va sobre tinta por lo mismo que el
   formulario de allá: es el final del recorrido y tiene que pesar como tal. */
.se-ruta{background:var(--paper)}
.se-datos{background:#fff}
.se-docs{background:var(--paper)}
.se-enviar{background:var(--ink); color:#fff}
.se-fin{background:#fff}

/* Los avisos de sesión. Estaban resueltos con `style=` en la vista —tres
   colores escritos a mano— y por eso no se parecían a nada del sistema. */
/* Sin aire abajo y en el mismo papel que el recorrido: las dos bandas se leen
   como una sola con el aviso encima, en vez de como dos zonas de papel
   seguidas, que es lo que el sistema evita al alternar. */
.se-avisos{background:var(--paper); padding:44px 0 0}
.se-aviso{display:flex; align-items:flex-start; gap:12px; padding:14px 18px; border-radius:16px;
  font-size:14px; line-height:1.55; font-weight:600; margin-bottom:14px}
.se-aviso:last-child{margin-bottom:0}
.se-aviso.bien{background:#e6f5ea; border:1px solid #bfe3c9; color:#1c6b33}
.se-aviso.ojo{background:#fdf1dc; border:1px solid #f0d9a8; color:#8a5a08}

/* ---------- El recorrido ----------
   Nueve etapas. Se hereda de `.vpasos` la columna numerada, y encima va lo
   único que esta pantalla necesita y aquélla no: cuál está hecha, cuál es la
   de ahora y cuáles faltan. Sin esa marca son nueve renglones grises iguales
   que no contestan «¿por dónde voy?», que es para lo que se mira. */
.se-etapas{list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,210px), 1fr)); gap:14px}

.se-etapa{position:relative; padding:16px 18px; border-radius:16px;
  background:#fff; border:1px solid var(--line); font-size:14px; line-height:1.4; color:var(--g1)}
.se-etapa b{display:block; font-weight:600}
.se-etapa .marca{display:block; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; margin-bottom:5px; color:var(--g1)}

.se-etapa.hecha{color:#1c6b33; border-color:#bfe3c9; background:#f4fbf6}
.se-etapa.hecha .marca{color:#1c6b33}
/* La de ahora, en tinta y con el borde del acento: es la única que hay que
   encontrar de un vistazo. */
.se-etapa.aqui{color:var(--ink); border-color:var(--accent); background:#fff;
  box-shadow:0 0 0 3px var(--orange-100)}
.se-etapa.aqui .marca{color:var(--orange-700)}

/* ---------- El envío, sobre tinta ---------- */
.se-enviar .lab{color:rgba(255,255,255,.7)}
.se-enviar .lab::before{background:var(--orange)}
.se-enviar h2.sec{color:#fff}
.se-enviar h2.sec em{color:var(--orange)}
.se-enviar-caja{background:#fff; color:var(--ink); border-radius:26px; padding:34px; max-width:62ch}
.se-enviar-caja p{font-size:15px; line-height:1.65; color:var(--g2); margin:0 0 20px}
.se-enviar-caja strong{color:var(--ink); font-weight:600}
@media(max-width:640px){.se-enviar-caja{padding:24px; border-radius:20px}}

/* ---------- El cierre ---------- */
/* La bitácora y el botón de salir. Van juntos y al final porque son las dos
   cosas que se hacen cuando ya no queda nada que entregar. */
.se-fin-grid{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr); gap:44px; align-items:start}
@media(max-width:900px){.se-fin-grid{grid-template-columns:1fr; gap:30px}}
.se-salir{background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:24px}
.se-salir h3{font-family:var(--font-display); font-weight:600; font-size:19px; margin:0 0 6px; color:var(--ink)}
.se-salir p{font-size:14px; line-height:1.6; color:var(--g2); margin:0 0 18px}
.se-salir .btn{width:100%; justify-content:center}
/* Los dos datos con los que se vuelve: documento y fecha de nacimiento. Van en
   una lista y no en un párrafo porque lo que se hace con ellos es MIRARLOS —la
   fecha es justo la que uno no recuerda haber tecleado—, y en una frase
   corrida hay que leer para encontrarlos. */
.se-llave{list-style:none; margin:0 0 16px; padding:0; display:grid; gap:8px}
.se-llave li{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 14px;
}
.se-llave span{font-size:12px; font-weight:600; color:var(--g2)}
.se-llave b{font-family:ui-monospace, monospace; font-size:15px; font-weight:700;
  letter-spacing:.04em; color:var(--ink); white-space:nowrap}
.se-llave b.falta{font-family:inherit; letter-spacing:0; color:#c0392b}

.se-llave-falta{font-size:13px; color:#c0392b !important; margin:0 0 16px !important}
.se-llave-falta a{color:inherit; text-decoration:underline}

/* El código, ya de rebaja: dejó de ser la llave y es solo el nombre del caso.
   Se queda porque sigue siendo lo que se dicta por teléfono, pero en letra
   pequeña y debajo de lo que sí abre. */
.se-llave-ref{font-size:12.5px !important; color:var(--g1) !important}

/* El código se lee para copiarlo a mano: monoespaciado y espaciado, que es lo
   que distingue un cero de una O cuando alguien lo apunta en un papel. */
.se-salir code{display:inline-block; background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:2px 8px; font-family:ui-monospace, monospace; font-size:13px; font-weight:700;
  letter-spacing:.06em; color:var(--ink)}

/* El botón que cierra un bloque de la tarjeta de estado. Estaba resuelto con
   un `style="margin-top:14px"` en la vista. */
.se-accion{margin:16px 0 0}

/* ============================================================
   VOLVER A LA SOLICITUD  (/ser-socio/mi-solicitud)
   ------------------------------------------------------------
   Dos campos y nada más: el documento y la fecha de nacimiento
   del titular. La cabecera es la misma de las otras dos
   pantallas —el sistema no tiene un hero para páginas cortas—,
   así que lo que la sostiene es su texto: aquí es donde se
   explica de quién son esos dos datos, que es lo que se falla
   cuando la solicitud se abrió para un menor de edad.
   ============================================================ */
.se-entrar{background:var(--paper)}

/* Al pie del formulario, separado por una línea para que no se
   lea como parte de él: a dónde escribir si no lo reconoce. */
.se-perdi{margin:22px 0 0; padding-top:20px; border-top:1px solid var(--line);
  text-align:center; font-size:14.5px; color:var(--g2)}
.se-perdi a{color:var(--orange-700); font-weight:600}
.se-perdi a:hover{text-decoration:underline}
.se-entrar-caja{max-width:520px; margin:0 auto; background:#fff; border:1px solid var(--line);
  border-radius:26px; padding:34px}
@media(max-width:640px){.se-entrar-caja{padding:24px; border-radius:20px}}
.se-entrar-caja form{margin-top:22px; display:flex; flex-direction:column; gap:24px}
.se-entrar-caja .btn{width:100%; justify-content:center}

/* ============================================================
   LA FICHA  (/ser-socio/{codigo}/ficha)
   ------------------------------------------------------------
   El documento de cinco páginas, en una sola columna centrada.
   No lleva rejilla de dos columnas: es un formulario largo que
   se llena en varias sentadas, y una barra lateral al lado solo
   le quitaría ancho a los campos.
   ============================================================ */
.se-ficha{background:var(--paper)}
.se-columna{max-width:780px; margin:0 auto; width:100%}

/* El `fieldset` existe para poder deshabilitar la ficha entera de una vez
   cuando ya está firmada. Su marco de navegador no pinta nada. */
.se-limpio{border:0; padding:0; margin:0; min-width:0}

/* Los rótulos que parten un bloque en dos —«Tus redes», «Otras sociedades»—.
   Son más pequeños que el título del bloque a propósito: dividen, no abren. */
.se-subtitulo{font-size:12.5px; font-weight:700; color:var(--ink); margin:28px 0 8px}
.se-subtitulo + .se-nota{margin-top:-4px}
.se-nota{font-size:12.5px; line-height:1.55; color:var(--g2); margin:0 0 10px}

/* Un rótulo o un grupo abre algo nuevo, así que separa MÁS que dos campos
   seguidos: 28 contra los 24 de una fila. Si empatan, deja de leerse dónde
   termina una pregunta y empieza la siguiente. */
.se-grupo{margin-top:28px}

/* El cierre del formulario: cuántos datos faltan y el botón. Centrado porque
   es el final de una columna larga y ahí no hay nada más compitiendo. */
.se-guardar{text-align:center}
.se-guardar .vayuda{margin:0 0 14px}
.se-volver{text-align:center; margin:18px 0 0}
.se-volver a{font-size:13.5px; color:var(--orange-700); font-weight:600}
.se-volver a:hover{text-decoration:underline}

/* Aquí vivía `.vhero.sinfoto`, que apagaba el degradado del hero oscuro y le
   centraba el texto. Se retiró con el último hero oscuro de este recorrido: las
   cuatro pantallas abren ya con `.phero`, y una regla que no aplica a nada es
   la que alguien copia después creyendo que hace falta. El hero oscuro sigue
   entero en `trabajo.css`, que es de donde salió y donde lo usan las
   convocatorias. */

/* ====== EL RECORRIDO ====== */
.vpasos{counter-reset:paso; list-style:none; margin:0 0 22px; padding:0}
.vpasos li{counter-increment:paso; position:relative; padding:0 0 20px 46px}
.vpasos li::before{content:counter(paso); position:absolute; left:0; top:-2px;
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--orange-50); color:var(--orange-700);
  font-family:var(--font-display); font-weight:700; font-size:14px}
/* La línea que une un paso con el siguiente. En el último no, o quedaría
   colgando hacia el vacío. */
.vpasos li:not(:last-child)::after{content:""; position:absolute; left:14.5px; top:32px; bottom:2px;
  width:1px; background:var(--line)}
.vpasos li b{display:block; color:var(--ink)}

/* ====== EXPEDIENTE: LA CABECERA DE ESTADO ====== */
.vestado{background:#fff; border:1px solid var(--line); border-radius:22px; padding:24px; margin-bottom:22px}
.vestado .codigo{display:inline-block; background:var(--paper); border:1px solid var(--line); border-radius:8px;
  padding:5px 11px; font-family:ui-monospace, monospace; font-size:14px; font-weight:700;
  letter-spacing:.06em; color:var(--ink)}
.vestado h2{font-family:var(--font-display); font-weight:600; font-size:24px; margin:12px 0 6px}
.vestado p{font-size:14.5px; line-height:1.6; color:var(--g2); margin:0}

/* La pastilla de estado. Los colores salen de config/ser-socio.php, así que
   están todos aunque hoy no se usen todos: un estado nuevo no puede quedarse
   sin color y salir invisible. */
.vpill{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:30px;
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase}
.vpill.gray{background:rgba(14,14,12,.07); color:var(--g2)}
.vpill.blue{background:#e7f0fb; color:#1c4e8a}
.vpill.cyan{background:#e2f4f6; color:#12656f}
.vpill.indigo{background:#eceafb; color:#3f36a5}
.vpill.violet{background:#f2eafb; color:#5b2ca0}
.vpill.purple{background:#f6e9f7; color:#6d2073}
.vpill.amber{background:#fdf1dc; color:#8a5a08}
.vpill.orange{background:var(--orange-50); color:var(--orange-700)}
.vpill.green{background:#e6f5ea; color:#1c6b33}
.vpill.red{background:#fbeaea; color:#a32020}

/* ====== EXPEDIENTE: LOS REQUISITOS ====== */
.vreq{background:#fff; border:1px solid var(--line); border-radius:20px; padding:20px 22px; margin-bottom:14px}
/* Devuelto se ve de lejos: es lo único que el solicitante tiene que hacer. */
.vreq.devuelto{border-color:color-mix(in srgb, #c0392b 45%, #fff); background:#fffafa}
.vreq.conforme{background:linear-gradient(0deg, rgba(28,107,51,.03), rgba(28,107,51,.03)), #fff}

.vreq-cab{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap}
.vreq-cab h3{font-family:var(--font-display); font-weight:600; font-size:18px; margin:0 0 4px; color:var(--ink)}
.vreq-ayuda{font-size:13.5px; line-height:1.55; color:var(--g2); margin:0; max-width:62ch}

.vreq-tiene{display:flex; align-items:center; gap:9px; margin-top:14px; padding:11px 14px;
  background:var(--paper); border:1px solid var(--line); border-radius:12px; font-size:13.5px}
.vreq-tiene b{font-weight:600; color:var(--ink); word-break:break-all}
.vreq-tiene span{color:var(--g1); font-size:12px}

/* El motivo de devolución. Es lo más importante de la pantalla cuando
   aparece: sin él, el solicitante reenvía el mismo archivo. */
.vmotivo{margin-top:14px; padding:13px 15px; border-radius:12px;
  background:#fbeaea; border:1px solid color-mix(in srgb, #c0392b 25%, #fff)}
.vmotivo b{display:block; font-size:11.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:#a32020; margin-bottom:4px}
.vmotivo p{margin:0; font-size:14px; line-height:1.55; color:#7d2020}

.vreq form{margin-top:14px; display:flex; flex-direction:column; gap:12px}
.vreq .btn{align-self:flex-start}

/* ------------------------------------------------------------
   LA ENTREGA DE UN DOCUMENTO
   ------------------------------------------------------------
   Antes de esto, la tarjeta de un requisito enseñaba el nombre del
   archivo en una línea gris (`.vreq-tiene`) y debajo, siempre
   abierta, la caja de subir. Dos cosas fallaban:

     · No había forma de VER lo entregado. El solicitante mandaba
       su cédula escaneada a un sitio donde no volvía a aparecer, y
       para salir de dudas sobre si se había equivocado de archivo
       tenía que subir otro.
     · Ocho cajas de subida abiertas a la vez hacen que la pantalla
       se lea como si no hubieras entregado nada.

   `.ventregado` es lo primero: el archivo con cara —miniatura si
   es imagen, el icono de su requisito si no—, lo que pesa, cuándo
   llegó, y los dos verbos que hacen falta: verlo y cambiarlo.
------------------------------------------------------------ */

.ventregado{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:14px; padding:12px 14px;
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
}

/* La miniatura. Cuadrada y recortada: los retratos llegan en
   vertical y en horizontal, y una fila que cambia de alto según lo
   que subió cada uno se lee como un error. */
.ventregado-vista{
  flex:0 0 auto;
  width:54px; height:54px; border-radius:11px;
  display:grid; place-items:center;
  background:var(--white); border:1px solid var(--line);
  overflow:hidden; color:var(--g2); gap:2px;
}
.ventregado-vista img{width:100%; height:100%; object-fit:cover; display:block}
.ventregado-vista em{
  font-style:normal; font-size:9px; font-weight:800;
  letter-spacing:.08em; color:var(--g1); margin-top:2px;
}

.ventregado-datos{flex:1 1 220px; min-width:0}
.ventregado-datos b{
  display:block; font-weight:600; font-size:14px; color:var(--ink);
  word-break:break-all; line-height:1.35;
}
.ventregado-datos span{display:block; font-size:12px; color:var(--g1); margin-top:2px}

/* El archivo está en la base pero no en el disco. Pasa cuando se
   restaura una copia de la base sin el disco al lado, y callarlo
   deja al solicitante mirando un nombre que no abre nada. */
.ventregado-perdido{color:#c0392b !important; font-weight:600}

.ventregado-acc{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.ventregado-acc a,
.ventregado-acc button{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:999px;
  border:1px solid var(--line); background:var(--white);
  color:var(--ink); font-family:inherit; font-size:12.5px; font-weight:700;
  cursor:pointer; white-space:nowrap;
  transition:border-color .2s, color .2s;
}
.ventregado-acc a:hover,
.ventregado-acc button:hover{border-color:var(--accent); color:var(--orange-700)}
/* Los iconos van en SVG y no en Font Awesome: el layout del sitio público NO
   la carga —solo la cargan el panel y el área del socio—, así que un
   `<i class="fa-...">` aquí no pinta absolutamente nada. Es el mismo trazo del
   resto del sitio: sin relleno, 1.6 de grosor, esquinas redondas. */
.ventregado-acc svg, .ventregado-vista svg, .vreq-ok svg, .velegido-quitar svg{
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
  flex:0 0 auto;
}
.ventregado-acc svg{width:14px; height:14px; color:var(--accent)}
.ventregado-vista svg{width:22px; height:22px; color:var(--g2)}
.vreq-ok svg{width:16px; height:16px}
.velegido-quitar svg{width:13px; height:13px}

/* El acuse de recibo, dentro de la tarjeta. El aviso de sesión sale
   arriba del todo y desde el sexto requisito no se ve; esto sale
   donde estabas mirando. */
.vreq-ok{
  display:flex; align-items:center; gap:9px;
  margin:12px 0 0; padding:9px 13px; border-radius:11px;
  background:#EFF9F1; border:1px solid #CFE9D6;
  color:#1B7A3E; font-size:13px; font-weight:600;
}
.vreq-ok i{font-size:13px}

/* ---------- Elegir el archivo ---------- */

/* La caja de subir, mientras se arrastra algo por encima. Ya era
   una zona de soltar —el input la cubre entera—, pero sin señal
   nadie lo sabía. */
.varchivo.encima{border-color:var(--accent); background:var(--orange-50)}

/* Lo que acabas de elegir, todavía sin mandar. Es la pieza que le
   faltaba a la pantalla: hasta ahora, elegir un archivo no movía
   nada en ninguna parte. Va en naranja y no en verde a propósito
   —todavía no ha llegado a ningún sitio—. */
/* `hidden` es un ATRIBUTO, y el `display:none` que le pone el navegador lo
   pisa cualquier `display` que venga de una clase. Sin esta línea, la caja de
   «lo que acabas de elegir» se pinta vacía desde que carga la página: un
   rectángulo naranja con un cuadro y un botón dentro, y ningún archivo. Vale
   para todo lo que aquí se enciende y se apaga con `hidden`. */
.velegido[hidden], .ventregado[hidden], .vreq-form[hidden]{display:none}

.velegido{
  display:flex; align-items:center; gap:12px;
  margin-top:10px; padding:10px 12px;
  background:var(--orange-50); border:1px solid var(--orange-100); border-radius:13px;
}

.velegido-vista{
  flex:0 0 auto;
  width:44px; height:44px; border-radius:10px;
  display:grid; place-items:center;
  background:var(--white); border:1px solid var(--orange-100);
  overflow:hidden;
}
.velegido-vista img{width:100%; height:100%; object-fit:cover; display:block}
.velegido-vista em{
  font-style:normal; font-size:9px; font-weight:800;
  letter-spacing:.08em; color:var(--orange-700);
}

.velegido-datos{flex:1 1 auto; min-width:0}
.velegido-datos b{
  display:block; font-weight:600; font-size:13.5px; color:var(--ink);
  word-break:break-all; line-height:1.35;
}
.velegido-datos span{display:block; font-size:12px; color:var(--orange-700); margin-top:1px}

.velegido-quitar{
  flex:0 0 auto;
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--orange-100); background:var(--white);
  color:var(--g2); font-size:12px; cursor:pointer;
  transition:background .2s, color .2s;
}
.velegido-quitar:hover{background:var(--accent); color:#fff; border-color:var(--accent)}

/* El mensaje de «esto no cabe» / «esto no es un PDF». Lo escribe el
   servidor cuando el envío llega, y entregas.js cuando lo caza
   antes de subir; el hueco es el mismo para que no salte la
   tarjeta según quién de los dos hable. */
.vreq-form .mal[hidden]{display:none}

/* ---------- Los botones ---------- */
.vreq-botones{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.vreq-botones .btn{align-self:auto}

/* Mientras sube. El botón dice «Subiendo…» y se apaga; el resto del
   formulario deja de aceptar clics para que no se cambie el archivo
   a mitad del envío. */
.vreq form.subiendo{opacity:.7; pointer-events:none}
.vreq-botones .btn:disabled{opacity:.45; cursor:not-allowed}

/* `.vreq form` es `display:flex` con `gap`, y el bloque de cambiar
   mete un nivel más por el medio. Sin esto, el formulario recién
   abierto se pegaba al archivo entregado. */
.vreq-form{margin-top:14px}
.vreq-form form{margin-top:0}

@media(max-width:560px){
  .ventregado{gap:11px}
  .ventregado-acc{width:100%}
  .ventregado-acc a, .ventregado-acc button{flex:1 1 auto; justify-content:center}
}

/* ====== EXPEDIENTE: EL REPERTORIO ======

   Era una tabla de cuatro columnas, calcada del Word del área. Dejó de serlo
   cuando la pregunta del capítulo se volvió condicional: un campo que aparece y
   desaparece no cabe en una celda —la cabecera seguiría diciendo «Capítulo»
   sobre una columna medio vacía— y siete columnas no caben en un teléfono ni
   con scroll horizontal. Cada producción es ahora una ficha.

   La ficha se lee de un vistazo porque los campos van agrupados por lo que
   contestan: qué obra es (título, año, clase, productora) arriba, y quién fuiste
   en ella (personaje, cómo participaste, cuál) abajo. */

.vobra{border:1px solid var(--line); border-radius:16px; padding:18px 18px 16px; margin:0 0 12px;
  background:var(--paper); min-width:0}
.vobra:focus-within{border-color:var(--accent); background:#fff}

/* El número de la ficha. Es lo que hace que «Producción 3: falta el año» se
   pueda encontrar sin contar hacia abajo con el dedo. */
/* `float:left` más `width:100%` es lo que hace que un `legend` se comporte como
   un bloque normal: sin eso, el navegador lo encaja DENTRO del borde superior y
   le abre una muesca al recuadro redondeado. */
.vobra-num{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--g1); padding:0; margin:0 0 14px; float:left; width:100%}

/* Doce columnas para poder decir «el año ocupa un cuarto» sin inventarse anchos
   por campo. Por debajo de 620 se apila todo: en un teléfono, el título y el
   año uno al lado del otro dejan el título en cuatro caracteres.

   ⚠ EL `clear` NO ES ADORNO, Y QUITARLO ROMPE LA PANTALLA ENTERA.

   El `legend` de arriba va con `float:left; width:100%` para que no se encaje
   en el borde del recuadro (ver `.vobra-num`). Un contenedor `grid` establece
   contexto de formato de bloque, y un contexto de formato de bloque NO se
   solapa con un float: se estrecha a lo que queda libre. Como el float ocupa
   el 100%, lo que queda libre es CERO.

   Medido: sin `clear`, la rejilla mide 0px de ancho y se va a la derecha del
   todo; los ocho campos salen apilados en una columna de 90px fuera de la
   tarjeta. Con `clear`, 850px y el título en sus 8 columnas. */
.vobra-rejilla{display:grid; grid-template-columns:repeat(12, 1fr); column-gap:14px; row-gap:16px;
  clear:both}
.vobra-titulo{grid-column:span 8}
.vobra-anio{grid-column:span 4}
.vobra-tipo{grid-column:span 5}
.vobra-productora{grid-column:span 7}
.vobra-personaje{grid-column:span 5}
.vobra-alcance{grid-column:span 4}
.vobra-temporada, .vobra-capitulo{grid-column:span 3}
@media(max-width:620px){.vobra-rejilla > *{grid-column:1 / -1}}

/* Los campos condicionales se esconden con el atributo `hidden` y no con una
   clase, para que sin JavaScript estén simplemente los que el servidor decidió.
   `site.css` no le da display a `[hidden]` en todos los casos, así que se dice. */
.vobra-rejilla > [hidden]{display:none}

.vobra .vcampo{margin:0; min-width:0}
.vobra .vcampo label{font-size:12px; font-weight:600; color:var(--g2); margin-bottom:6px; display:block}
.vobra input, .vobra select{width:100%; height:42px; padding:0 12px; border-radius:10px;
  border:1px solid var(--line); background:#fff; font-family:var(--font-ui); font-size:14px; color:var(--ink)}
.vobra input:focus, .vobra select:focus{outline:0; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--orange-100)}
/* El color del error lo pone `trabajo.css` (`.vcampo .mal`), que esta pantalla
   ya carga. Aquí solo se añade lo que allí no había: el borde de un `select`
   —el repertorio es el primer formulario del recorrido que valida dos—. */
.vobra select.mal-borde{border-color:#c0392b}
.vobra .mal{margin-top:6px}

/* «si la recuerdas»: lo opcional se dice en la etiqueta y no con un asterisco
   en lo obligatorio. Son ocho campos y siete lo son; marcar los siete es ruido,
   marcar el uno es información. */
.vopc{font-weight:400; text-transform:none; letter-spacing:0; color:var(--g1)}

/* El aviso de repetida. Ámbar y no rojo a propósito: no impide guardar, porque
   la misma obra dos veces puede ser verdad. */
.vobra-repe{margin:12px 0 0; padding:9px 12px; border-radius:9px; font-size:12.5px; line-height:1.45;
  background:var(--orange-100, #fdf0e4); color:var(--ink); border:1px solid var(--orange, #f0a35e)}

.vobra-pie{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:4px 0 16px}
.vobra-mas{display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:999px;
  border:1px dashed var(--line); background:transparent; cursor:pointer;
  font-family:var(--font-ui); font-size:13px; font-weight:600; color:var(--g2)}
.vobra-mas:hover{border-color:var(--accent); border-style:solid; color:var(--ink); background:#fff}
.vobra-mas svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
.vobra-cuenta{font-size:12.5px; color:var(--g1)}
.vobra-nota{font-size:12px; color:var(--g1); margin:0 0 14px; line-height:1.5}

/* ====== LA FICHA ====== */
/* Los bloques del documento de cinco páginas. Reusan la caja de .vreq porque
   son lo mismo en pantalla: una tarjeta blanca con su título y su formulario. */
.vbloque{background:#fff; border:1px solid var(--line); border-radius:22px; padding:28px; margin-bottom:18px;
  counter-increment:bloque}
.vbloque > .vayuda{font-size:13.5px; line-height:1.55; color:var(--g2); margin:0 0 24px; max-width:62ch;
  padding-left:38px}

/* Los bloques se numeran solos con un contador CSS, sin tocar el marcado.
   No es virtuosismo: QUÉ bloques salen depende del tipo de ficha —el heredero
   abre con el causante, el menor cambia el manager por su representante— así
   que un número escrito a mano estaría mal en dos de los tres casos. El
   contador cuenta lo que de verdad se pintó.

   Y numerar importa aquí más que en otros sitios: son ocho cajas largas y sin
   número no hay forma de decir «me quedé en la cuatro» ni de notar que se
   avanza. */
.vform{counter-reset:bloque}
.vbloque > h3{display:flex; align-items:center; gap:12px;
  font-family:var(--font-display); font-weight:600; font-size:20px; margin:0 0 4px; color:var(--ink)}
.vbloque > h3::before{content:counter(bloque); flex:0 0 auto;
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--orange); color:var(--ink);
  font-family:var(--font-ui); font-size:12.5px; font-weight:700}

/* Dos y tres columnas para los campos que se leen juntos —ciudad y país, banco
   y número de cuenta—. Por debajo de 640 se apilan: en un teléfono, dos campos
   uno al lado del otro no caben sin encoger la letra. */
/* El aire ENTRE filas, que es lo que hace que esto se lea como preguntas y no
   como una planilla. La regla es la misma de la solicitud: la etiqueta va a
   7 px de su campo y a 24 del campo de arriba, así que se agarra sola al que
   le toca. Antes eran 16 de rejilla y 18 entre rejillas —dos veces y media el
   hueco de la etiqueta, demasiado poco—, y un `.vcampo` suelto entre dos
   rejillas —«Dirección», justo encima de «Ciudad»— no tenía margen ninguno:
   ahí la etiqueta quedaba PEGADA al campo anterior, a cero. */
.vdos{display:grid; grid-template-columns:1fr 1fr; column-gap:16px; row-gap:24px; margin-bottom:24px}
.vtres{display:grid; grid-template-columns:1fr 1fr 1fr; column-gap:16px; row-gap:24px; margin-bottom:24px}
.vbloque > .vcampo{margin-bottom:24px}
.vbloque > .vdos:last-child, .vbloque > .vtres:last-child, .vbloque > .vcampo:last-child{margin-bottom:0}
@media(max-width:640px){.vdos, .vtres{grid-template-columns:1fr}}

/* El rótulo de un grupo repetido —«Contacto 1», «Producción 2»—. Sin él, dos
   filas idénticas seguidas parecen un fallo de la página. */
.vrepe{font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--g1); margin:0 0 8px}
.vrepe + .vtres, .vrepe + .vdos{margin-bottom:30px}

/* Estos tres nacieron sin `height`, y se notaba fuera de la ficha: en «Volver a
   mi solicitud» hay dos campos, uno al lado del otro, y el de la fecha medía
   21px contra los 46 del documento —un renglón hundido con el calendario
   apretado contra el borde—. Dentro de la ficha no se veía porque `.vbloque`
   (abajo) les pone 50px a todos, así que el hueco solo asomaba donde no hay
   `.vbloque`. Los 46 y el 14.5 son los de `trabajo.css`, que es de donde sale
   `.vcampo`: aquí solo se completa su contrato para los tipos que le faltaban. */
.vcampo select, .vcampo input[type=date], .vcampo input[type=number]{
  width:100%; height:46px; padding:0 14px; border-radius:12px; border:1px solid var(--line);
  background:var(--paper); font-family:var(--font-ui); font-size:14.5px; color:var(--ink);
  transition:border-color .25s, box-shadow .25s}
.vcampo select:focus, .vcampo input[type=date]:focus{outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--orange-100); background:#fff}

/* Un campo de fecha vacío escribe `dd/mm/aaaa` en tinta, así que al lado de un
   `placeholder` gris se lee como si ya tuviera algo puesto. Mientras esté
   vacío es `:invalid` —lleva `required`—, y ahí el texto va en gris como
   cualquier otro marcador de posición; en cuanto se escribe una fecha vuelve a
   tinta él solo. Es de WebKit y no hay equivalente en otros motores: donde no
   aplique, el campo se ve como se veía. */
.vcampo input[type=date]:invalid::-webkit-datetime-edit{color:var(--g1)}

/* El calendario nativo se pinta gris y sin señal de que se pueda pulsar. */
.vcampo input[type=date]::-webkit-calendar-picker-indicator{
  cursor:pointer; opacity:.55; transition:opacity .2s}
.vcampo input[type=date]:hover::-webkit-calendar-picker-indicator,
.vcampo input[type=date]:focus::-webkit-calendar-picker-indicator{opacity:1}

/* Dentro de la ficha, los campos van a los 50 px del sistema (ESTILO-VISUAL
   §7.2) y no a los 46 que trae `trabajo.css`. No es capricho: son cerca de
   sesenta campos seguidos, y cuatro píxeles por campo son los que separan un
   formulario que se puede llenar de uno que aprieta. Va acotado a `.vbloque`
   para no tocar las entregas del expediente, que son cuatro y están bien. */
.vbloque .vcampo input, .vbloque .vcampo select{height:50px; font-size:15px}
.vbloque .vcampo label{font-size:12.5px; font-weight:600; color:var(--g2); margin-bottom:7px}

/* Sí / No. Tres estados en realidad: sin marcar es «no contestado», que no es
   lo mismo que «no» cuando después hay que reclamarle el dato. */
.vsino{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--line)}
.vsino:last-of-type{border-bottom:0}
.vsino > span{font-size:14px; color:var(--ink); flex:1}
.vsino .ops{display:flex; gap:6px; flex:0 0 auto}
.vsino label{display:inline-flex; align-items:center; gap:5px; padding:6px 13px; border-radius:30px;
  border:1px solid var(--line); background:var(--paper); font-size:12.5px; font-weight:600;
  color:var(--g2); cursor:pointer}
.vsino input{accent-color:var(--orange)}
.vsino label:has(input:checked){border-color:var(--accent); background:var(--orange-50); color:var(--orange-700)}

/* Cuántos datos faltan. Va arriba y abajo del formulario: es largo, y quien
   llega al final no debería tener que subir para saber si terminó. */
.vfaltan{border-radius:16px; padding:18px 20px; font-size:14px; line-height:1.55; margin-bottom:20px}
.vfaltan.hay{background:#fdf1dc; border:1px solid #f0d9a8; color:#8a5a08}
.vfaltan.nada{background:#e6f5ea; border:1px solid #bfe3c9; color:#1c6b33}

/* Lo que falta, como fichas y no como una frase con comas. Diez nombres de
   campo separados por comas son un párrafo que hay que leer entero para saber
   si el tuyo está; sueltos se cuentan de un vistazo. */
.vfaltan-lista{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px}
.vfaltan-lista span{padding:5px 12px; border-radius:30px; background:rgba(255,255,255,.7);
  border:1px solid #f0d9a8; font-size:12.5px; font-weight:600; color:#8a5a08}
.vfaltan b{font-weight:700}

/* ====== EXPEDIENTE: LA BITÁCORA ====== */
.vbit{list-style:none; margin:0; padding:0}
.vbit li{position:relative; padding:0 0 16px 22px; border-left:1px solid var(--line)}
.vbit li:last-child{border-left-color:transparent; padding-bottom:0}
.vbit li::before{content:""; position:absolute; left:-4.5px; top:5px; width:8px; height:8px;
  border-radius:50%; background:var(--line)}
.vbit li.suyo::before{background:var(--orange)}
.vbit b{display:block; font-size:13.5px; color:var(--ink)}
.vbit span{display:block; font-size:11.5px; color:var(--g1); margin-top:1px}
.vbit em{display:block; font-style:normal; font-size:13px; color:var(--g2); margin-top:5px}

@media(max-width:640px){
  .vreq{padding:18px}
  .vestado{padding:20px}
}