/** ==========================================================================
 * EL PORTAL CON EL «MANUAL DEL SISTEMA WEB 2026» (Eduardo, 07/10/2026)
 *
 * Solo se carga con «Nuevo manual» en Herramientas › Elegir diseño (o en la
 * vista previa de un administrador; cei-2026/diseno.php), la última de todas:
 * gana los empates a las hojas del portal y a las de cada página sin
 * !important. Los tokens no cambian (son ya los de la web); cambia cómo se
 * usan, como en la maqueta docs/propuestas/portal-con-manual-web-2026.html:
 *
 *   1. El botón único de la web (.Global-boton): borde de 1 px, pastilla, se
 *      rellena de negro al pasar. La llamada principal, en Destacado, se
 *      vacía al pasar.
 *   2. Los antetítulos, Size-14 en mayúsculas y gris secundario, sin
 *      asteriscos (los quita cei26_antetitulo() en el marcado).
 *   3. Los títulos de sección, Global-h2 (45, peso 500).
 *   4. Menos láminas grises: la cabecera de página sin lámina, como
 *      .CabeceraPagina, y las tarjetas neutras en blanco con su filete.
 *   5. Los campos de la web: borde --Global-Borde-Campo y radio de imagen.
 *
 * Lo que va sobre color oscuro (la tarjeta de Formación, las áreas oscuras)
 * tiene reglas más específicas en su hoja y se queda como está.
 * ========================================================================== */

/* ── 1. El botón único ─────────────────────────────────────────────────── */

:is(.ParaTi, .Tramite, .Sugerencias, .Mejora) .ParaTi-boton,
.Expediente .Expediente-boton,
.Error404 .Error404-boton {
  padding: 12px 24px;
  border: 1px solid var(--Global-Color-Black);
  background-color: transparent;
  color: var(--Global-Color-Black);
}

:is(.ParaTi, .Tramite, .Sugerencias, .Mejora) .ParaTi-boton:is(:hover, :focus-visible),
.Expediente .Expediente-boton:is(:hover, :focus-visible),
.Error404 .Error404-boton:is(:hover, :focus-visible) {
  border-color: var(--Global-Color-Black);
  background-color: var(--Global-Color-Black);
  color: var(--Global-Color-White);
}

/* La llamada principal: en Destacado, y al pasar se vacía (.Global-boton--destacado) */
:is(.ParaTi, .Tramite, .Sugerencias, .Mejora) .ParaTi-boton--cta,
.Error404 .Error404-boton--destacado {
  border-color: var(--Global-Destacado);
  background-color: var(--Global-Destacado);
  color: var(--Global-Color-White);
}

:is(.ParaTi, .Tramite, .Sugerencias, .Mejora) .ParaTi-boton--cta:is(:hover, :focus-visible),
.Error404 .Error404-boton--destacado:is(:hover, :focus-visible) {
  border-color: var(--Global-Destacado);
  background-color: var(--Global-Color-White);
  color: var(--Global-Destacado);
}

/* El botón de la bienvenida de la home: la llamada principal, al tamaño del
   botón de la web */
.Bienvenida .Bienvenida-boton {
  padding: 12px 24px;
  border: 1px solid var(--Global-Destacado);
  background-color: var(--Global-Destacado);
  color: var(--Global-Color-White);
  font-size: var(--Font-Size-19);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.Bienvenida .Bienvenida-boton:is(:hover, :focus-visible) {
  background-color: var(--Global-Color-White);
  color: var(--Global-Destacado);
}

/* La presentación de Web, debajo de la general: el botón único, con borde
   negro y lleno de negro al pasar (08/10/2026) */
.Bienvenida .Bienvenida-boton--secundario {
  padding: 11px 19px;
  border-color: var(--Global-Color-Black);
  background-color: transparent;
  color: var(--Global-Color-Black);
}

.Bienvenida .Bienvenida-boton--secundario:is(:hover, :focus-visible) {
  background-color: var(--Global-Color-Black);
  color: var(--Global-Color-White);
}

/* «Continúa donde lo dejaste» (la guía del profesor como curso): sobre la
   lámina negra, el botón en blanco (con el botón único en negro no se veía;
   Eduardo, 08/10/2026) */
.Personal .Curso-continuarBoton {
  border-color: var(--Global-Color-White);
  background-color: transparent;
  color: var(--Global-Color-White);
}

.Personal .Curso-continuar:is(:hover, :focus-visible) .Curso-continuarBoton {
  border-color: var(--Global-Color-White);
  background-color: var(--Global-Color-White);
  color: var(--Global-Color-Black);
}

/* JobTeaser lleva su propia pastilla: como estaba */
:is(.ParaTi, .Tramite) .ParaTi-boton--jobteaser {
  border-color: #1a191c;
}

/* ── 2. Los antetítulos ────────────────────────────────────────────────
   Gris secundario solo donde el fondo es blanco (la cabecera de página sin
   lámina, Mi expediente, la 404, los apartados de evaluación y las tarjetas
   que aquí pasan a blanco): sobre las láminas de color (el turquesa del ISIC,
   el lila, el azul…) el gris no se lee y se quedan con el color del texto */

.ParaTi-antetitulo {
  letter-spacing: var(--Font-Letter-spacing-2);
}

.Tramite-cabeceraTexto:not([class*="Personal-capitulo--"]) > .ParaTi-antetitulo,
.Evaluacion-apartado > .ParaTi-antetitulo,
.ParaTi-tarjeta:is(.ParaTi-tarjeta--examenes, .ParaTi-tarjeta--guias, .ParaTi-tarjeta--diploma, .ParaTi-tarjeta--calendario) .ParaTi-antetitulo,
.Expediente .Expediente-antetitulo,
.Error404 .Error404-antetitulo {
  color: var(--Global-Color-Grey-Secondary);
  letter-spacing: var(--Font-Letter-spacing-2);
}

/* ── 3. Los títulos de sección, a 45 ───────────────────────────────────── */

.Expediente .Expediente-subtitulo,
.Tramite > section > h2.ParaTi-tarjetaTitulo,
.Tramite > .Tramite-seccion > h2,
.Evaluacion-apartado > h2.ParaTi-tarjetaTitulo {
  margin-top: 0;
  font-size: var(--Font-Size-45);
  font-weight: var(--Font-Weight-h2-temporal);
  line-height: var(--Font-Line-height-100);
  letter-spacing: var(--Font-Letter-spacing-2);
}

/* El antetítulo pegado al título, como en .CabeceraPagina */
.Evaluacion-apartado > .ParaTi-antetitulo + h2 {
  margin-top: calc(var(--Global-Espacio-TituloContenido) / -2);
}

/* ── 4. Menos láminas grises ───────────────────────────────────────────── */

/* La cabecera de página, sin lámina (= .CabeceraPagina): el texto sobre blanco.
   Las de los capítulos de la guía, con su color de área, se quedan */
.Tramite-cabeceraTexto:not([class*="Personal-capitulo--"]) {
  padding: 0;
  background-color: transparent;
}

/* Las tarjetas neutras de la home, en blanco con su filete */
.ParaTi-tarjeta:is(.ParaTi-tarjeta--examenes, .ParaTi-tarjeta--guias, .ParaTi-tarjeta--diploma, .ParaTi-tarjeta--calendario) {
  border: 1px solid var(--Global-Filete);
  background-color: var(--Global-Color-White);
}

/* Los apartados de Sistema de evaluación, separados por un filete y no por
   el aire solo; los avisos neutros, en blanco con filete */
.Evaluacion-apartado + .Evaluacion-apartado {
  padding-top: var(--Global-Espacio-Grupo);
  border-top: 1px solid var(--Global-Filete);
  border-radius: 0;
}

.Evaluacion-aviso:not(.Evaluacion-aviso--importante) {
  border: 1px solid var(--Global-Filete);
  background-color: var(--Global-Color-White);
}

/* Mi perfil: los formularios sobre blanco, con un filete arriba */
.Perfil .Perfil-bloque {
  padding: var(--Global-Espacio-TituloContenido) 0 0;
  border-top: 1px solid var(--Global-Filete);
  border-radius: 0;
  background-color: transparent;
}

/* ── 5. Los campos de la web ───────────────────────────────────────────── */

/* Los campos, rellenos de gris y sin borde, como los del manual (Eduardo,
   08/10/2026: «los inputs no son grises como los del manual de marca»); al
   enfocar, el filete negro */
.Perfil .Perfil-input,
.Mejora .Mejora-campo {
  border: 1px solid transparent;
  border-radius: var(--Global-Radio-Imagen);
  background-color: var(--Global-Color-Grey);
}

.Perfil .Perfil-input--largo {
  border-radius: var(--Global-Radio-Imagen);
}

.Perfil .Perfil-input:focus-visible,
.Mejora .Mejora-campo:focus-visible {
  border-color: var(--Global-Color-Black);
}

/* El hueco de la imagen de perfil sin foto: iba blanco sobre la lámina gris;
   sin lámina, en gris para que se vea */
.Perfil .Perfil-fotoImagen--vacia {
  background-color: var(--Global-Color-Grey);
}

/* El logo de la cabecera de las guías de licencias (08/10/2026): sin lámina
   de color, el círculo blanco lleva filete para que se vea */
.Tramite-cabeceraLogo {
  border: 1px solid var(--Global-Filete);
}