/* Concepto: el tablón de anuncios de la Ciudad convertido en un tablero de estado: una fila por proceso, su fase y el último papel publicado. */
:root {
  --bg: #ffffff;
  --bg-alt: #f2f6fa;
  --fg: #142233;
  --muted: #5a6b7d;
  --line: #d9e2ec;
  --mar: #0b2e4f;          /* banda de cabecera */
  --mar-fg: #eaf2fa;
  --celeste: #2a7bbf;      /* azul de la bandera de Melilla */
  --celeste-soft: #e3eff9;
  --abierto: #17804f; --abierto-soft: #e2f4ea;
  --examen: #a86400;  --examen-soft: #fbf0dc;
  --admit: #2a6fb0;   --admit-soft: #e3eef9;
  --result: #55606d;  --result-soft: #eceff2;
  --susp: #b42318;    --susp-soft: #fde8e6;
  --font-display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --bs-body-bg: var(--bg);
  --bs-body-color: var(--fg);
  --bs-emphasis-color: var(--fg);
  --bs-secondary-color: var(--muted);
  --bs-border-color: var(--line);
  --bs-link-color: var(--celeste);
  --bs-link-hover-color: var(--celeste);
  --bs-body-font-family: var(--font-body);
  --bs-heading-color: var(--fg);
  /* Siempre en claro, también con el móvil o el ordenador en modo oscuro (decisión del 03/11/2026). */
  color-scheme: light;
}

body { background: var(--bg); color: var(--fg); font-size: 1rem; line-height: 1.55; }
.wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.wrap > .container { padding-left: 0; padding-right: 0; }
h1, h2, h3, .display-font { font-family: var(--font-display); text-wrap: balance; letter-spacing: -0.01em; }
.mono { font-family: var(--font-mono); font-size: .8125rem; letter-spacing: 0; }
.eyebrow { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.bg-alt { background: var(--bg-alt); }
a { text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--celeste); outline-offset: 2px; }
.tnum { font-variant-numeric: tabular-nums; }

/* Banda superior */
.banda { background: var(--mar); color: var(--mar-fg); }
.banda .navbar { --bs-navbar-color: rgba(234,242,250,.78); --bs-navbar-hover-color: #fff; --bs-navbar-active-color: #fff; --bs-navbar-brand-color: #fff; --bs-navbar-brand-hover-color: #fff; }
.marca { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; }
.marca-sello { width: 34px; height: 34px; border-radius: 8px; background: #fff; color: var(--mar); display: grid; place-items: center; font-size: .78rem; font-weight: 800; line-height: 1; }
.hero h1 { font-weight: 800; font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.6rem); line-height: 1.04; color: #fff; }
.hero h1 em { font-style: normal; color: #9fd0f7; }
.hero .lead { color: rgba(234,242,250,.86); max-width: 38rem; font-size: 1.125rem; }
.hero .lectura { color: rgba(234,242,250,.7); font-size: .875rem; }
.pulso { width: 8px; height: 8px; border-radius: 50%; background: #4cc58a; box-shadow: 0 0 0 0 rgba(76,197,138,.6); animation: pulso 2.4s infinite; }
@keyframes pulso { 70% { box-shadow: 0 0 0 8px rgba(76,197,138,0); } 100% { box-shadow: 0 0 0 0 rgba(76,197,138,0); } }
@media (prefers-reduced-motion: reduce) { .pulso { animation: none; } }

.btn-mel { --bs-btn-bg: #fff; --bs-btn-color: var(--mar); --bs-btn-border-color: #fff; --bs-btn-hover-bg: #dcecf9; --bs-btn-hover-border-color: #dcecf9; --bs-btn-hover-color: var(--mar); --bs-btn-active-bg: #cfe3f5; --bs-btn-active-color: var(--mar); font-weight: 700; }
.btn-linea { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255,255,255,.45); --bs-btn-hover-bg: rgba(255,255,255,.1); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #fff; --bs-btn-active-bg: rgba(255,255,255,.16); --bs-btn-active-color: #fff; font-weight: 600; }
.btn-cel { --bs-btn-bg: var(--celeste); --bs-btn-border-color: var(--celeste); --bs-btn-color: var(--bg); --bs-btn-hover-bg: var(--celeste); --bs-btn-hover-color: var(--bg); --bs-btn-hover-border-color: var(--celeste); --bs-btn-active-bg: var(--celeste); --bs-btn-active-color: var(--bg); font-weight: 700; }

/* Panel «ahora mismo» del hero */
.ahora { background: var(--bg); color: var(--fg); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.25); }
.ahora .cifra { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; line-height: 1; }
.ahora .cifra-l { font-size: .8125rem; color: var(--muted); }
.ahora .sep { border-top: 1px solid var(--line); }
.visitas { color: var(--mar-fg); background: rgba(255,255,255,.12); }
.en-linea { color: var(--abierto); }

/* Chips de estado */
.estado { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 600; padding: .1rem .55rem; border-radius: 999px; white-space: nowrap; }
.estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.e-abierto { color: var(--abierto); background: var(--abierto-soft); }
.e-examen  { color: var(--examen);  background: var(--examen-soft); }
.e-admit   { color: var(--admit);   background: var(--admit-soft); }
.e-result  { color: var(--result);  background: var(--result-soft); }
.e-susp    { color: var(--susp);    background: var(--susp-soft); }
.fuente { display: inline-block; font-family: var(--font-mono); font-size: .72rem; font-weight: 500; padding: .1rem .45rem; border-radius: 4px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }

/* Plazos abiertos */
.plazo { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); height: 100%; }
.plazo .dias { font-family: var(--font-display); font-weight: 800; font-size: 3.25rem; line-height: .9; }
.plazo.urgente .dias { color: var(--susp); }
.plazo .barra { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.plazo .barra span { display: block; height: 100%; background: var(--abierto); }
.plazo.urgente .barra span { background: var(--susp); }

/* Tablero */
.filtros .btn { --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .8rem; --bs-btn-font-size: .875rem; --bs-btn-color: var(--fg); --bs-btn-border-color: var(--line); --bs-btn-hover-bg: var(--bg-alt); --bs-btn-hover-color: var(--fg); --bs-btn-hover-border-color: var(--muted); --bs-btn-active-bg: var(--fg); --bs-btn-active-color: var(--bg); --bs-btn-active-border-color: var(--fg); border-radius: 999px; font-weight: 600; }
.filtros .btn[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.filtros .btn .n { opacity: .6; font-weight: 500; margin-left: .25rem; }
.buscar { max-width: 20rem; }
.tablero { border-top: 1px solid var(--line); }
.op { border-bottom: 1px solid var(--line); }
.op-nombre { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.2; }
.op-org { font-size: .875rem; color: var(--muted); }
.op.suspendida .op-nombre { text-decoration: line-through; text-decoration-color: var(--susp); text-decoration-thickness: 2px; }
.doc-titulo { font-size: .9375rem; line-height: 1.4; }
.doc-fecha { font-size: .8125rem; color: var(--muted); }
.vacio { color: var(--muted); }

/* Línea de fases: las cinco del proceso selectivo */
.fases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.fases li { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.fases .tramo { height: 6px; border-radius: 3px; background: var(--line); }
.fases .et { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fases li.hecha .tramo { background: var(--c); opacity: .45; }
.fases li.actual .tramo { background: var(--c); }
.fases li.actual .et { color: var(--c); font-weight: 700; }
.fases.f-abierto { --c: var(--abierto); }
.fases.f-examen  { --c: var(--examen); }
.fases.f-admit   { --c: var(--admit); }
.fases.f-result  { --c: var(--result); }
.fases.f-susp    { --c: var(--susp); }
@media (max-width: 575.98px) {
  .fases li:not(.actual) .et { visibility: hidden; }
  .fases li.actual .et { overflow: visible; }
}

/* Calendario */
.dia { width: 4.25rem; flex: none; text-align: center; border: 1px solid var(--line); border-radius: 10px; padding-block: .5rem; background: var(--bg); }
.dia .d { font-family: var(--font-display); font-weight: 800; font-size: 1.75rem; line-height: 1; }
.dia .d.palabra { font-size: 1.35rem; line-height: 1.75rem; } /* «Hoy»: letra menor, misma altura que las cifras */
.dia .m { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.dia .m.larga { font-size: .64rem; } /* «MAÑANA»: un poco menor para que no toque el borde */
.dia.hoy { border-color: var(--celeste); }
.dia.hoy .m { color: var(--celeste); font-weight: 700; }
/* Hoy o mañana: el cuadrito toma el color de lo que pasa (rojo si cierra un plazo, ámbar si hay examen, como su punto en
   el calendario); el azul es solo el «hoy» del calendario. */
.dia.urgente { border-color: var(--susp); }
.dia.urgente .m { color: var(--susp); font-weight: 700; }
.dia.examen { border-color: var(--examen); }
.dia.examen .m { color: var(--examen); font-weight: 700; }
.dia.sin { border-style: dashed; }
/* Qué pasa ese día (encima del nombre de la oposición), con el punto y el color de la leyenda del calendario. */
.tipo-ev { display: flex; align-items: center; gap: .4rem; font-size: .8125rem; font-weight: 600; color: var(--muted); }
.tipo-ev::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tipo-examen { color: var(--examen); }
.tipo-fin_plazo { color: var(--abierto); }
.dia.sin .d { font-size: 1.25rem; color: var(--muted); padding-block: .2rem; }
.mes { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.mes .cab { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.mes-nav { width: 2.25rem; font-size: 1.1rem; line-height: 1; }
@media (max-width: 575.98px) {
  #meses.un-mes > :not(.mes-visible) { display: none; }
}
.rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.rejilla .sem { font-size: .7rem; font-weight: 700; text-transform: uppercase; color: var(--muted); text-align: center; padding-bottom: .25rem; }
.celda { aspect-ratio: 1; max-width: 100%; border: 0; border-radius: 8px; background: transparent; color: var(--fg); padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: .85rem; }
.celda.pasado { color: var(--muted); }
.celda.ev { font-weight: 700; cursor: pointer; }
.celda.ev:hover { box-shadow: inset 0 0 0 1px var(--celeste); }
.celda.hoy { box-shadow: inset 0 0 0 2px var(--celeste); font-weight: 700; }
.celda .puntos { display: flex; gap: 2px; height: 6px; }
.celda .puntos i { width: 6px; height: 6px; border-radius: 50%; }
.leyenda { font-size: .8rem; color: var(--muted); }
.leyenda i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .3rem; vertical-align: 0; }

/* Cómo avanza */
.paso .mini { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.paso .mini span { height: 6px; border-radius: 3px; background: var(--line); }
.paso .mini span.on { background: var(--celeste); }
.paso .num { font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--celeste); }
.paso .ahora-n { font-size: .8125rem; font-weight: 600; color: var(--celeste); }

/* Movimientos */
.mov { border-left: 2px solid var(--line); }
.mov-item { position: relative; }
.mov-item::before { content: ""; position: absolute; left: calc(-1.5rem - 6px); top: .45rem; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--celeste); }

/* Fuentes */
.fuente-card { border-top: 3px solid var(--celeste); }
.fuente-card code { color: var(--fg); background: var(--bg-alt); padding: .1rem .35rem; border-radius: 4px; font-family: var(--font-mono); font-size: .78rem; word-break: break-all; }
.punto-lectura { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--abierto); }
.punto-lectura.fallo { background: var(--susp); }

/* OEP */
.oep { border: 1px dashed var(--line); border-radius: 12px; }

/* Avisos */
.avisos { background: var(--celeste-soft); border-radius: 16px; }
.avisos .form-control { background: var(--bg); color: var(--fg); border-color: var(--line); }
.avisos .form-control::placeholder { color: var(--muted); }
.tg { display: inline-flex; align-items: center; gap: .5rem; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: .35rem .8rem .35rem .4rem; font-weight: 600; font-size: .9rem; }
.tg svg { flex: none; }

footer { font-size: .875rem; color: var(--muted); }
section { scroll-margin-top: 1rem; }

/* Estados que no estaban en la maqueta */
.e-convocada { color: var(--celeste); background: var(--celeste-soft); }
.e-cerrado { color: var(--susp); background: var(--susp-soft); }
.e-oep, .e-fin { color: var(--muted); background: var(--bg-alt); }
.fases.f-convocada { --c: var(--celeste); }
.fases.f-cerrado { --c: var(--susp); }
.fases.f-oep, .fases.f-fin { --c: var(--muted); }
.chip { display: inline-block; font-size: .72rem; font-weight: 600; border: 1px solid var(--line); border-radius: 4px; padding: 0 .4rem; color: var(--muted); white-space: nowrap; }
.op-nombre a { color: inherit; text-decoration: none; }
.op-nombre a:hover { text-decoration: underline; }
.filtros-org .btn { --bs-btn-padding-y: .2rem; --bs-btn-padding-x: .7rem; --bs-btn-font-size: .8125rem; }
.ficha-hist li { border-bottom: 1px solid var(--line); }
.ficha-hist li:last-child { border-bottom: 0; }
.ficha-hist .no-rel { opacity: .7; }
.hero-ficha h1 { font-weight: 800; font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.8rem); line-height: 1.08; color: #fff; }
.hero-ficha .meta { color: rgba(234,242,250,.82); }
.hero-ficha .estado { background: #fff; }
.dato { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.dato .v { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; line-height: 1.1; }
.dato .l { font-size: .8125rem; color: var(--muted); }
.breadcrumb { --bs-breadcrumb-divider-color: rgba(234,242,250,.6); --bs-breadcrumb-item-active-color: rgba(234,242,250,.85); }
.breadcrumb a { color: #fff; }
.mas { font-weight: 600; }
.enlace { color: var(--fg); text-decoration: none; }
.enlace:hover { color: var(--fg); text-decoration: underline; }
.mas-plazos { --bs-btn-color: var(--fg); --bs-btn-border-color: var(--line); --bs-btn-hover-bg: var(--bg-alt); --bs-btn-hover-color: var(--fg); --bs-btn-hover-border-color: var(--muted); font-weight: 600; }
/* Volver arriba: redondo, abajo a la derecha; invisible (y fuera del tabulador) hasta que landing.js le pone .visible. */
.subir { --bs-btn-bg: var(--mar); --bs-btn-border-color: var(--mar); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--celeste); --bs-btn-hover-border-color: var(--celeste); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--celeste); --bs-btn-active-border-color: var(--celeste); --bs-btn-active-color: #fff; width: 3rem; height: 3rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; z-index: 1030; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.subir.visible { opacity: 1; visibility: visible; }
/* Panel de próximas fechas, a la derecha del calendario */
.dia-panel { border: 1px solid var(--line); border-top: 3px solid var(--celeste); border-radius: 0 0 12px 12px; background: var(--bg); }
@media (min-width: 992px) {
  .dia-panel { position: sticky; top: 1rem; }
  .dia-lista { max-height: 32.5rem; overflow-y: auto; padding-right: .25rem; }
}
/* Ventana del día: una línea fina entre elemento y elemento */
.modal-lista > div + div { border-top: 1px solid var(--line); }
/* Ficha: número de plazas grande en la cabecera */
.plazas-hero .n { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(3.2rem, 2rem + 4vw, 5rem); line-height: .9; color: #fff; }
.plazas-hero .t { display: block; font-weight: 600; font-size: 1.1rem; color: rgba(234,242,250,.82); }
/* Portada: plazas a la derecha del nombre, en tarjetas de plazo y filas del tablero */
.plazas-mini { flex: none; text-align: center; line-height: 1; }
.plazas-mini .n { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; color: var(--fg); }
.plazas-mini .t { display: block; font-size: .72rem; font-weight: 600; color: var(--muted); margin-top: .15rem; }
.plazas-col { width: 3.6rem; padding-right: .75rem; border-right: 1px solid var(--line); }
.plazas-col .n { font-size: 2.1rem; }
/* Fila del tablero: la etiqueta de estado arriba, desde el borde, y debajo las plazas y el nombre. En escritorio, la
   línea de fases baja lo que ocupa la etiqueta para quedar a la altura del nombre. */
@media (min-width: 992px) { .op .op-fases { padding-top: 1.9rem; } }
/* Título del último documento: como mucho dos líneas; el entero va en el «title» del enlace. */
.doc-recorte { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Plazos abiertos del INGESA: una línea por fecha de fin */
/* Plazos abiertos: lista como «Próximas fechas»; en escritorio, dos columnas que se leen de arriba abajo. */
.plazo-fila { padding-block: .75rem; border-bottom: 1px solid var(--line); break-inside: avoid; }
.plazo-fila .plazas-mini .n { font-size: 1.5rem; }
/* En «Plazos abiertos», las plazas en azul (el verde es la cuenta atrás y el rojo, lo urgente); en el tablero, en negro. */
.plazo .plazas-mini .n, .plazo-fila .plazas-mini .n { color: var(--celeste); }
@media (min-width: 992px) {
  .plazo-lista { columns: 2; column-gap: 3rem; }
}
@media (max-width: 991.98px) {
  .plazo-lista.recortada .plazo-extra { display: none !important; }
}
.text-urgente { color: var(--susp); }