/* Ordenatec · índice de guías (/blog-licitaciones/)
   Solo añade piezas propias de esta página sobre comun.css; no cambia ninguna regla del sistema.
   Colores, radios, sombras, curvas y letras: los tokens de comun.css (= portada publicada).
   Idea: las guías son documentos, así que son papel. Cada tema lleva un marcador adhesivo de color
   (como los que se pegan en el canto de un expediente). La guía más reciente está encima de la pila.
   Solo se animan transform y opacity, una vez. Con movimiento reducido se ve el estado final. */

[data-gi-pila] [hidden], .gi-todas [hidden] { display: none !important; }

/* ---------- Acento de cada tema (dentro de la paleta de la portada) ----------
   --tema: color del marcador y del punto (gráfico; el tema siempre va también en texto).
   --tema-tinta: el tema como texto sobre papel (≥ 5,5:1 sobre #F4EFE4). */
[data-tema="como-se-licita"] { --tema: #17B8F6; --tema-brillo: rgba(23, 184, 246, .8); --tema-tinta: #0B64F0; }
[data-tema="normativa"] { --tema: #6F97FF; --tema-brillo: rgba(111, 151, 255, .85); --tema-tinta: #1B3C9E; }
[data-tema="obras"] { --tema: #E9B949; --tema-brillo: rgba(233, 185, 73, .85); --tema-tinta: #7A5A00; }
[data-tema="servicios"] { --tema: #8A7CFF; --tema-brillo: rgba(138, 124, 255, .9); --tema-tinta: #2C1F7A; }

/* Marcador adhesivo: asoma 10 px por encima del canto superior; la parte que pisa el papel es translúcida */
.gi-cinta {
  position: absolute; z-index: 1; top: -10px; left: 28px; width: 34px; height: 24px;
  border-radius: 2px 2px 0 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%), var(--tema, #17B8F6);
  box-shadow: 0 -1px 6px -2px var(--tema-brillo, rgba(23, 184, 246, .8));
}
.gi-cinta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: rgba(250, 247, 240, .5); }

/* =========================================================
   ENTRADA: titular + pila de guías
   ========================================================= */
/* mismo eje izquierdo que «Todas las guías», Contacto y las secciones de la portada (1240 px) */
.gi-encabezado { max-width: var(--ancho-pagina); }
.gi-figura { display: flex; justify-content: center; }
.gi-pila { position: relative; width: 100%; max-width: 540px; padding-top: 40px; }
.gi-pila-hoja {
  position: absolute; left: 0; right: 0; top: 40px; bottom: 0; display: block; border-radius: 4px;
  background-color: var(--papel); background-image: var(--grano-papel), linear-gradient(to bottom, var(--papel-a), var(--papel-b)); background-size: 200px 200px, 100% 100%;
  box-shadow: 0 1px 1px rgba(3, 10, 25, .25), 0 6px 12px -4px rgba(3, 10, 25, .35), inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(120, 100, 70, .12);
  transform: var(--t);
}
/* cada hoja de debajo asoma 9 px más que la anterior, con un giro mínimo, como puesta a mano */
.gi-pila-1 { --t: translate(7px, -9px) rotate(.7deg); }
.gi-pila-2 { --t: translate(-9px, -18px) rotate(-1.1deg); }
.gi-pila-3 { --t: translate(11px, -27px) rotate(1.5deg); box-shadow: var(--sombra-papel), inset 0 1px 0 rgba(255, 255, 255, .8); }
.gi-pila-1 .gi-cinta { left: 31%; }
.gi-pila-2 .gi-cinta { left: 52%; }
.gi-pila-3 .gi-cinta { left: 73%; }

/* La guía más reciente: una hoja grande (comun.css .hoja) encima de la pila */
.gi-destacada {
  --t: rotate(-.5deg);
  display: flex; flex-direction: column;
  padding: 40px 44px 34px;
  transform: var(--t);
  transition: transform .25s var(--curva-llegada);
}
/* esquina doblada: detrás quedan las otras hojas, no la noche */
.gi-destacada::before { background: linear-gradient(225deg, var(--forro) 50%, #E9E2D3 50%); }
.gi-destacada::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: var(--sombra-flotante); opacity: 0; transition: opacity .25s var(--curva-llegada); }
.gi-destacada:hover, .gi-destacada:focus-within { transform: translateY(-4px) var(--t); }
.gi-destacada:hover::after, .gi-destacada:focus-within::after { opacity: 1; }
.gi-destacada .gi-meta { margin-top: 8px; }
.gi-destacada-titulo { margin-top: 20px; font-family: var(--f-serif); font-weight: 600; color: var(--tinta); text-wrap: balance; }
.gi-destacada-principal { display: block; font-size: clamp(30px, 2.9vw, 42px); line-height: 1.1; letter-spacing: -0.01em; }
.gi-destacada-resto { display: block; margin-top: 8px; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.3; color: var(--gris-tinta); }
.gi-destacada:hover .gi-destacada-principal { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.gi-destacada-resumen { margin-top: 18px; font-size: 18px; line-height: 1.55; color: var(--texto-papel); max-width: 40ch; }
.gi-destacada-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: auto; padding-top: 28px; font-size: 15px; color: var(--gris-tinta); }
.gi-leer { pointer-events: none; }
.gi-destacada:hover .gi-leer { background: #0A48D8; }

/* Enlace que cubre toda la hoja (un solo punto de tabulación; el título es el nombre del enlace) */
.gi-enlace { color: inherit; text-decoration: none; }
.gi-enlace::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 4px; }
.gi-enlace:focus-visible { outline: none; }
/* el anillo va fuera del papel, sobre la noche: aguamarina (como .guia en comun.css) */
.gi-enlace:focus-visible::after { outline: 3px solid var(--aguamarina); outline-offset: 4px; }

/* Entrada (una vez, cuando llegan los datos). El papel nunca es translúcido sobre la noche (portada, R1):
   la pila aparece opaca y recogida, la última guía se asienta y las de debajo se abren en abanico,
   de modo que sus marcadores asoman uno a uno. Solo transform. */
.anima .gi-pila:not(.es-lista) { visibility: hidden; animation: gi-pila-seguro 0s 2.5s forwards; }
@keyframes gi-pila-seguro { to { visibility: visible; } }
.anima .gi-pila.es-lista > * { animation: gi-pila-abre .95s var(--curva-llegada) backwards; }
.anima .gi-pila.es-lista > .gi-pila-1 { animation-delay: .22s; }
.anima .gi-pila.es-lista > .gi-pila-2 { animation-delay: .34s; }
.anima .gi-pila.es-lista > .gi-pila-3 { animation-delay: .46s; }
.anima .gi-pila.es-lista > .gi-destacada { animation: gi-pila-asienta .9s var(--curva-llegada) backwards; }
@keyframes gi-pila-abre { from { transform: none; } to { transform: var(--t); } }
@keyframes gi-pila-asienta { from { transform: translateY(-12px) rotate(-1.8deg); } to { transform: var(--t); } }

/* =========================================================
   TODAS LAS GUÍAS: barra (titular + buscador), temas y estado
   ========================================================= */
.gi-barra { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); align-items: end; gap: 24px 48px; }
.gi-etiqueta { display: block; margin-bottom: 10px; font-size: 16px; font-weight: 650; color: var(--nav-texto); }
.gi-campo {
  position: relative; display: flex; align-items: center; gap: 4px; min-height: 60px; padding: 0 8px 0 16px;
  border-radius: 14px; background: rgba(12, 35, 71, .72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), var(--sombra-ui);
  transition: box-shadow .2s ease;
}
.gi-campo:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), var(--sombra-ui); }
.gi-campo:focus-within { box-shadow: inset 0 0 0 1.5px var(--aguamarina), 0 0 32px -4px rgba(23, 184, 246, .45), var(--sombra-ui); }
.gi-lupa { width: 22px; height: 22px; margin-right: 8px; }
.gi-q {
  flex: 1 1 auto; min-width: 0; height: 56px; padding: 0; border: 0; background: transparent;
  font: inherit; font-size: 18px; font-weight: 500; color: var(--blanco); caret-color: var(--aguamarina);
  -webkit-appearance: none; appearance: none; text-overflow: ellipsis;
}
.gi-q::placeholder { color: var(--tenue); opacity: 1; }
/* Nuevo (pasada de responsive): el texto de ejemplo entero, sin «…», también en el teléfono. A 18 px mide 286 px
   y el campo deja 234 px a 320, 274 a 360 y 288 a 375: solo el ejemplo se ajusta al ancho (14–18 px, 18 desde 409 px).
   Holgura: 4 % a 320, 7–10 % de 344 a 390 y 11 % o más desde 412. Lo que se escribe sigue a 18 px (iOS no amplía
   la página al enfocar). */
.gi-q::placeholder { font-size: clamp(14px, 4.4vw, 18px); }
.gi-q::-webkit-search-cancel-button, .gi-q::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
/* el foco del campo se ve en su caja (aro aguamarina de 1,5 px + brillo); el del botón «Buscar», en el botón */
.gi-q:focus-visible { outline: none; }
@supports selector(:has(*)) {
  .gi-campo:focus-within { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), var(--sombra-ui); }
  .gi-campo:has(.gi-q:focus) { box-shadow: inset 0 0 0 1.5px var(--aguamarina), 0 0 32px -4px rgba(23, 184, 246, .45), var(--sombra-ui); outline: 3px solid rgba(23, 184, 246, .35); outline-offset: 3px; }
}
.gi-borrar {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--nav-texto); cursor: pointer;
}
.gi-borrar svg { width: 20px; height: 20px; }
.gi-borrar:hover { color: var(--blanco); background: rgba(255, 255, 255, .08); }
.gi-enviar { flex: none; border: 0; cursor: pointer; font-family: inherit; }

/* Temas: comun.css .filtro + un punto con el color de su tema. Sin JS no filtran: no se muestran */
.gi-filtros { margin-top: 36px; }
html:not(.js) .gi-filtros { display: none; }
.gi-punto { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--tema); box-shadow: 0 0 8px var(--tema-brillo); transition: box-shadow .2s ease; }
.filtro[aria-pressed="true"] .gi-punto { box-shadow: 0 0 0 2px rgba(11, 27, 51, .08); }
.gi-estado-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px; min-height: 44px; margin-top: 14px; }
.gi-estado { font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--tenue); font-variant-numeric: tabular-nums; }
.gi-en-texto { font-size: 16px; }

/* =========================================================
   HOJAS: una por guía (comun.css .guia = tarjeta de guía de la portada)
   ========================================================= */
.gi-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; margin-top: 40px; }
.gi-item { display: flex; min-width: 0; }
.guia.gi-hoja { width: 100%; gap: 0; min-height: 0; padding: 30px 28px 24px; }
.gi-hoja::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: var(--sombra-flotante); opacity: 0; transition: opacity .2s var(--curva-llegada); }
.gi-hoja:hover::after, .gi-hoja:focus-within::after { opacity: 1; }
.gi-hoja:focus-within { transform: translateY(-4px); }
.gi-meta { margin-top: 0; }
.gi-tema { color: var(--tema-tinta, var(--aguamarina-tinta)); }
.guia-titulo.gi-titulo { margin-top: 10px; font-size: 22px; line-height: 1.22; color: var(--tinta); text-wrap: balance; }
/* resumen entero (pasada de responsive): el corte a dos líneas con «…» dejaba frases a medias y, con letra
   grande o de reserva, cortaba más; el pie (fecha y minutos) sigue alineado abajo con margin-top: auto */
.gi-resumen { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--texto-papel); }
/* la guía más reciente ya está en la pila: su hoja solo aparece al filtrar o buscar (guias.js pone .es-filtrada) */
.gi-lista:not(.es-filtrada) > .gi-item-reciente { display: none; }
.gi-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: auto; padding-top: 22px; font-size: 15px; line-height: 1.3; color: var(--gris-tinta); }
.gi-pie time { white-space: nowrap; }
.gi-min { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.gi-reloj { width: 16px; height: 16px; flex: none; }
/* hoja estrecha (3 columnas a 1024 px, o 320 px): fecha y minutos, uno debajo del otro en todas */
.guia.gi-hoja { container-type: inline-size; }
@container (max-width: 270px) { .gi-pie { flex-direction: column; align-items: flex-start; gap: 4px; } }

/* Entrada escalonada de las hojas (una vez, al entrar en pantalla; --i lo pone guias.js).
   Como papeles que se reparten sobre la mesa: opacos, bajan 22 px con un giro mínimo y se asientan.
   Sin opacidad: nunca hay papel translúcido sobre la noche (portada, R1). */
.gi-item { --giro: .7deg; }
.gi-item:nth-child(2n) { --giro: -.5deg; }
.gi-item:nth-child(3n) { --giro: .35deg; }
.anima .gi-item:not(.es-vista) { transform: translateY(22px) rotate(var(--giro)); }
.anima .gi-item.es-vista { animation: gi-entra .8s var(--curva-llegada) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
/* Al filtrar: las hojas se vuelven a repartir (respuesta a la acción, 35 ms entre una y otra) */
.anima .gi-item.es-vista.gi-refresca { animation: gi-refresca .5s var(--curva-llegada) backwards; animation-delay: calc(var(--j, 0) * 35ms); }
@keyframes gi-entra { from { transform: translateY(22px) rotate(var(--giro)); } to { transform: none; } }
@keyframes gi-refresca { from { transform: translateY(12px) rotate(var(--giro)); } to { transform: none; } }

/* Sin resultados */
.gi-vacio { margin-top: 40px; padding: 36px 0 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.gi-vacio-texto { font-size: 19px; line-height: 1.5; color: var(--suave); max-width: 40ch; }
.gi-vacio-acciones { margin-top: 24px; }
.gi-vacio-borrar { border: 0; background: transparent; cursor: pointer; font-family: inherit; }

/* =========================================================
   MEDIDAS
   ========================================================= */
@media (min-width: 1024px) {
  .gi-destacada { min-height: 420px; }
}
@media (max-width: 1023px) {
  .gi-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gi-barra { grid-template-columns: minmax(0, 1fr); }
  .gi-pila { max-width: 560px; }
  .gi-figura { justify-content: flex-start; }
}
@media (max-width: 1023px) and (min-width: 701px) {
  .gi-buscador { max-width: 560px; }
}
@media (max-width: 700px) {
  .gi-pila { padding-top: 34px; }
  .gi-pila-hoja { top: 34px; }
  .gi-destacada { padding: 30px 24px 24px; min-height: 0; }
  .gi-destacada-principal { font-size: clamp(26px, 7.4vw, 32px); }
  .gi-destacada-resto { font-size: 18px; }
  .gi-destacada-resumen { font-size: 17px; }
  /* la pila, más recogida: nada se sale del margen de 16 px */
  .gi-pila-1 { --t: translate(4px, -8px) rotate(.6deg); }
  .gi-pila-2 { --t: translate(-4px, -16px) rotate(-.9deg); }
  .gi-pila-3 { --t: translate(5px, -24px) rotate(1.1deg); }
  .gi-destacada { --t: rotate(-.35deg); }
  /* una sola fila de temas que se desliza dentro de su franja: los resultados suben y la página no se mueve */
  .gi-filtros {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin: 20px calc(var(--margen) * -1) -8px; padding: 8px var(--margen); scroll-padding-inline: var(--margen);
  }
  .gi-filtros::-webkit-scrollbar { display: none; }
  .gi-filtros .filtro { flex: none; padding: 0 14px; }
}
@media (max-width: 599px) {
  /* la pila, 8 px más estrecha por cada lado: las hojas de debajo no rozan el borde de la pantalla */
  .gi-pila { max-width: calc(100% - 16px); margin-left: auto; margin-right: auto; }
  .gi-lista { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 32px; }
  .guia.gi-hoja { padding: 28px 22px 22px; }
  .gi-cinta { left: 22px; }
  .gi-pila-1 .gi-cinta { left: 33%; }
  .gi-pila-2 .gi-cinta { left: 54%; }
  .gi-pila-3 .gi-cinta { left: 75%; }
}
/* en el teléfono se busca al escribir y con la tecla «Buscar» del teclado: el campo gana el ancho del botón */
@media (max-width: 479px) {
  .gi-enviar { display: none; }
  .gi-campo { padding-right: 4px; }
}
@media (max-width: 359px) {
  .gi-destacada-pie .gi-leer { width: 100%; }
}

/* =========================================================
   MOVIMIENTO REDUCIDO, CONTRASTE ALTO E IMPRESIÓN
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .gi-destacada, .gi-destacada::after, .gi-hoja::after, .gi-campo, .gi-punto { transition: none; }
  .gi-destacada:hover, .gi-destacada:focus-within { transform: var(--t); }
  .gi-hoja:focus-within { transform: none; }
}
@media (prefers-contrast: more) {
  .gi-cinta { box-shadow: none; }
  .gi-campo { box-shadow: inset 0 0 0 1.5px var(--blanco); }
}
@media print {
  .gi-pila-hoja, .gi-buscador, .gi-filtros, .gi-estado-fila .gi-estado, .gi-cinta, .gi-leer { display: none !important; }
  .gi-destacada { transform: none; }
  .anima .gi-item, .anima .gi-pila > * { transform: none !important; animation: none !important; }
  .anima .gi-pila { visibility: visible !important; }
}

[data-tema="suministros"] { --tema: #0D8EF2; --tema-tinta: #0B64F0; }