/* ============================================================================
   FullCarro Blog · blog.css — primitivas de layout, header, footer, botones
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

.fc-container {
  max-width: var(--ancho-contenedor);
  margin: 0 auto;
  padding: 0 var(--esp-5);
}

/* ── Header ──────────────────────────────────────────────────────────── */
.fc-header {
  background: var(--navy);
  height: var(--alto-cabecera);
  display: flex;
  align-items: center;
}
.fc-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.fc-header__logo {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: var(--texto-lg);
  color: var(--blanco);
  text-decoration: none;
}
.fc-header__logo span { color: var(--acento); }
.fc-header__logo em { font-style: normal; font-weight: 400; opacity: .75; }
.fc-header__nav {
  display: none;
  gap: var(--esp-5);
}
.fc-header__nav a {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-size: var(--texto-sm);
  transition: color 160ms var(--ease-out-fuerte);
}
.fc-header__nav a:hover { color: var(--acento); }
@media (min-width: 768px) {
  .fc-header__nav { display: flex; }
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.fc-footer {
  background: var(--navy);
  color: rgba(255,255,255,.7);
  padding: var(--esp-8) 0;
  margin-top: var(--esp-12);
}
.fc-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  font-size: var(--texto-sm);
}
.fc-footer a { color: rgba(255,255,255,.85); }
.fc-footer__nav { display: flex; flex-wrap: wrap; gap: var(--esp-4); }

/* ── Botones y enlaces con feedback instantáneo ─────────────────────── */
.fc-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-5);
  border-radius: var(--radio);
  border: none;
  background: var(--acento);
  color: var(--blanco);
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: var(--texto-base);
  cursor: pointer;
  text-decoration: none;
  transition: transform 160ms var(--ease-out-fuerte), background 160ms ease;
}
.fc-boton:hover { background: var(--acento-oscuro); }
.fc-boton:active { transform: scale(0.97); }

.fc-boton--fantasma {
  background: transparent;
  border: 1px solid var(--linea);
  color: var(--tinta);
}
.fc-boton--fantasma:hover { background: var(--gris-suave); }

@media (prefers-reduced-motion: reduce) {
  .fc-boton { transition: background 160ms ease; }
  .fc-boton:active { transform: none; }
}

/* ── Tarjeta base (reutilizada por el grid de índice/categoría) ────────*/
.fc-card {
  background: var(--blanco);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .fc-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-md);
  }
}
.fc-card__imagen { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--gris-suave); }
.fc-card__cuerpo { padding: var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-2); flex: 1; }
.fc-card__categoria {
  display: inline-block;
  background: var(--acento-suave);
  color: var(--acento-oscuro);
  border: 1px solid var(--acento-suave-borde);
  font-size: var(--texto-xs);
  font-weight: 600;
  padding: 2px var(--esp-2);
  border-radius: var(--radio-full);
  width: fit-content;
}
.fc-card__titulo { font-family: var(--fuente-display); font-size: var(--texto-md); color: var(--navy); margin: 0; }
.fc-card__meta { font-size: var(--texto-xs); color: var(--gris); }

/* ── Hero de búsqueda (índice) ──────────────────────────────────────── */
.fc-hero {
  background: linear-gradient(180deg, var(--navy) 0%, #16294d 100%);
  padding: var(--esp-10) 0 var(--esp-8);
}
.fc-hero__inner { display: flex; flex-direction: column; gap: var(--esp-5); align-items: center; text-align: center; }
.fc-hero .fc-titulo-hero { color: var(--blanco); }
.fc-hero__form { width: 100%; max-width: 480px; }
.fc-hero__buscar {
  width: 100%;
  padding: var(--esp-4) var(--esp-5);
  border-radius: var(--radio-full);
  border: none;
  font-size: var(--texto-md);
  font-family: var(--fuente-cuerpo);
}
.fc-hero__chips { display: flex; flex-wrap: wrap; gap: var(--esp-2); justify-content: center; }
.fc-chip {
  padding: var(--esp-2) var(--esp-4);
  border-radius: var(--radio-full);
  background: rgba(255,255,255,.1);
  color: var(--blanco);
  text-decoration: none;
  font-size: var(--texto-sm);
  transition: background 160ms ease;
}
.fc-chip:hover { background: rgba(255,255,255,.2); }

/* ── Grid de tarjetas (índice y categoría) ──────────────────────────── */
.fc-seccion { padding: var(--esp-10) var(--esp-5); }
.fc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-5);
  /* Sin esto, una tarjeta sin imagen destacada se estira a la altura de sus
     vecinas y queda un bloque blanco vacío debajo del texto. */
  align-items: start;
}
@media (min-width: 768px) { .fc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fc-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── Artículo ────────────────────────────────────────────────────────── */
.fc-articulo { max-width: 780px; padding: var(--esp-8) var(--esp-5); }
.fc-breadcrumbs { font-size: var(--texto-xs); color: var(--gris); margin-bottom: var(--esp-4); }
.fc-breadcrumbs a { color: var(--gris); }
.fc-articulo__cabecera { margin-bottom: var(--esp-5); }
.fc-articulo__meta { display: flex; gap: var(--esp-3); font-size: var(--texto-sm); color: var(--gris); }
.fc-articulo__imagen { width: 100%; border-radius: var(--radio-md); margin: var(--esp-5) 0; }
.fc-articulo__cuerpo { font-size: var(--texto-md); line-height: 1.75; max-width: 680px; }
.fc-articulo__cuerpo h2 { margin-top: var(--esp-8); }

/* ── Ficha DTC (elemento distintivo) ────────────────────────────────── */
.fc-dtc-ficha {
  display: flex;
  align-items: center;
  gap: var(--esp-5);
  background: var(--navy);
  color: var(--blanco);
  border-radius: var(--radio-md);
  padding: var(--esp-5);
  margin: var(--esp-5) 0;
}
.fc-dtc-ficha__codigo { font-size: 36px; color: var(--acento); }
.fc-dtc-ficha__nombre { margin: 0; font-size: var(--texto-base); }

/* ── Tabla de contenidos (acordeón móvil / lista desktop) ───────────── */
.fc-toc {
  background: var(--gris-suave);
  border-radius: var(--radio);
  padding: var(--esp-4);
  margin: var(--esp-5) 0;
}
.fc-toc summary { font-weight: 600; cursor: pointer; }
.fc-toc ul { margin: var(--esp-3) 0 0; padding-left: var(--esp-5); }
.fc-toc__nivel-3 { margin-left: var(--esp-4); font-size: var(--texto-sm); }
@media (min-width: 1024px) {
  .fc-toc { position: sticky; top: var(--esp-5); float: right; width: 240px; margin-left: var(--esp-8); }
}

/* ── Rating ──────────────────────────────────────────────────────────── */
.fc-rating { margin: var(--esp-8) 0; padding: var(--esp-5); background: var(--gris-suave); border-radius: var(--radio-md); text-align: center; }
.fc-rating__form { display: flex; justify-content: center; gap: var(--esp-1); }
.fc-rating__estrella {
  background: none; border: none; font-size: 28px; color: var(--linea); cursor: pointer;
  transition: transform 150ms ease-out, color 150ms ease;
}
.fc-rating__estrella:hover, .fc-rating__estrella:active { color: var(--acento); transform: scale(1.15); }
.fc-rating__resumen { display: block; margin-top: var(--esp-2); font-size: var(--texto-sm); color: var(--gris); }

/* ── Comentarios ─────────────────────────────────────────────────────── */
.fc-comentarios { margin: var(--esp-8) 0; }
.fc-comentario { padding: var(--esp-3) 0; border-bottom: 1px solid var(--linea); }
.fc-comentario__autor { font-weight: 600; margin: 0; }
.fc-comentario__texto { margin: var(--esp-1) 0 0; color: var(--tinta); }

/* ── Relacionados y compartir ────────────────────────────────────────── */
.fc-relacionados { margin: var(--esp-8) 0; }
.fc-compartir { display: flex; align-items: center; gap: var(--esp-3); margin: var(--esp-8) 0; }

@media (prefers-reduced-motion: reduce) {
  .fc-rating__estrella { transition: color 150ms ease; }
  .fc-rating__estrella:hover, .fc-rating__estrella:active { transform: none; }
}

/* ── Pico y Placa ────────────────────────────────────────────────────────── */
.fc-pyp-grid { display: grid; grid-template-columns: 1fr; gap: var(--esp-4); }
@media (min-width: 768px) { .fc-pyp-grid { grid-template-columns: repeat(2, 1fr); } }
.fc-pyp-card { background: var(--blanco); border-radius: var(--radio-md); box-shadow: var(--sombra); padding: var(--esp-5); }
.fc-pyp-card--libre { background: var(--exito-bg); }
.fc-pyp-card__cabecera { display: flex; align-items: center; gap: var(--esp-2); margin-bottom: var(--esp-3); }
.fc-pyp-card__cabecera h3 { margin: 0; font-size: var(--texto-base); }
.fc-pyp-card__placas { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin: var(--esp-2) 0; }
.fc-pyp-placa {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radio-sm);
  background: var(--peligro-bg); color: var(--peligro-texto);
  font-size: var(--texto-lg);
}
.fc-pyp__libre { color: var(--exito-texto); font-weight: 600; }
.fc-pyp-card__nota { font-size: var(--texto-xs); color: var(--gris); margin-top: var(--esp-2); }

/* ── Página estática ─────────────────────────────────────────────────── */
.fc-pagina-estatica { max-width: 780px; padding: var(--esp-8) var(--esp-5); }

/* ── Paginación de categorías ────────────────────────────────────────── */
.fc-paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-4);
  margin-top: var(--esp-10);
  flex-wrap: wrap;
}
.fc-paginacion__cuenta { font-size: var(--texto-sm); color: var(--gris); }

/* ── Mapa de enlaces del pie (descubrimiento interno) ────────────────── */
.fc-footer__mapa {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-8);
  padding-bottom: var(--esp-8);
  margin-bottom: var(--esp-6);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (min-width: 768px) { .fc-footer__mapa { grid-template-columns: 1fr 2fr; } }
.fc-footer__titulo {
  font-family: var(--fuente-display);
  font-size: var(--texto-base);
  color: var(--blanco);
  margin: 0 0 var(--esp-3);
}
.fc-footer__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--texto-sm);
  line-height: 1.9;
}
.fc-footer__lista a { color: rgba(255,255,255,.7); text-decoration: none; }
.fc-footer__lista a:hover { color: var(--acento); }
@media (min-width: 560px) { .fc-footer__lista--columnas { columns: 2; } }
@media (min-width: 1024px) { .fc-footer__lista--columnas { columns: 3; } }

/* ── Otras ciudades de pico y placa (malla temática) ─────────────────── */
.fc-pyp-otras { margin-top: var(--esp-10); padding-top: var(--esp-6); border-top: 1px solid var(--linea); }
.fc-pyp-otras h2 { font-size: var(--texto-lg); margin-bottom: var(--esp-4); }
.fc-pyp-otras__lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--esp-2);
  font-size: var(--texto-sm);
}
.fc-pyp-otras__lista a {
  display: inline-block;
  padding: var(--esp-2) var(--esp-3);
  background: var(--gris-suave);
  border-radius: var(--radio-full);
  color: var(--tinta);
  text-decoration: none;
}
.fc-pyp-otras__lista a:hover { background: var(--acento-suave); color: var(--acento-oscuro); }

/* ── Páginas de cuenta (registro, login, restablecer) ────────────────── */
.fc-cuenta {
  max-width: 460px;
  padding: var(--esp-10) var(--esp-5);
}
.fc-cuenta__intro { color: var(--gris); font-size: var(--texto-base); }
.fc-cuenta__pie { margin-top: var(--esp-5); font-size: var(--texto-sm); }

.fc-form { display: flex; flex-direction: column; gap: var(--esp-2); margin-top: var(--esp-5); }
.fc-form label { font-size: var(--texto-sm); font-weight: 600; color: var(--navy); margin-top: var(--esp-3); }
.fc-form input {
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-md);
}
.fc-form input:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.fc-form .fc-boton { margin-top: var(--esp-5); }

.fc-alerta {
  background: var(--aviso-bg);
  color: var(--aviso-texto);
  border-radius: var(--radio);
  padding: var(--esp-3) var(--esp-4);
  font-size: var(--texto-sm);
  margin: var(--esp-4) 0;
}

/* ── Formulario de comentario al pie del artículo ────────────────────── */
.fc-comentar { display: flex; flex-direction: column; gap: var(--esp-2); margin-top: var(--esp-6); }
.fc-comentar__quien { font-size: var(--texto-sm); color: var(--gris); margin: 0; }
.fc-comentar__label { font-size: var(--texto-sm); font-weight: 600; color: var(--navy); }
.fc-comentar textarea {
  width: 100%;
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-md);
  resize: vertical;
}
.fc-comentar textarea:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.fc-comentar .fc-boton { align-self: flex-start; }

/* ── Estado de cuenta en el header (comentarista) ────────────────────── */
.fc-header__cuenta {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  font-size: var(--texto-sm);
}
.fc-header__cuenta-nombre { color: rgba(255,255,255,.85); }
.fc-header__cuenta-entrar {
  color: rgba(255,255,255,.85);
  text-decoration: none;
}
.fc-header__cuenta-entrar:hover { color: var(--acento); }
.fc-header__logout { margin: 0; }
.fc-header__logout-boton {
  background: none;
  border: none;
  color: rgba(255,255,255,.85);
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-sm);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.fc-header__logout-boton:hover { color: var(--acento); }

/* ── Placa de edición de país ────────────────────────────────────────── */
.fc-placa-caja { position: relative; }
.fc-placa-caja > summary { list-style: none; cursor: pointer; }
.fc-placa-caja > summary::-webkit-details-marker { display: none; }

.fc-placa {
  display: inline-flex;
  align-items: center;
  height: 26px;
  border: 1.5px solid rgba(255,255,255,.5);
  border-radius: var(--radio-sm);
  overflow: hidden;
}
.fc-placa__codigo {
  background: #1b3a6b;
  color: var(--blanco);
  font-size: var(--texto-xs);
  padding: 0 7px;
  height: 100%;
  display: flex;
  align-items: center;
}
.fc-placa__nombre { color: var(--blanco); font-size: var(--texto-sm); padding: 0 8px; }
.fc-placa__flecha { color: rgba(255,255,255,.6); padding-right: 7px; font-size: 10px; }
.fc-placa-caja[open] .fc-placa { border-color: var(--acento); }

.fc-ediciones {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: var(--z-cabecera);
  min-width: 240px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-md);
  padding: var(--esp-3);
}
.fc-ediciones__titulo {
  font-size: var(--texto-xs);
  color: var(--gris);
  letter-spacing: .06em;
  margin: 0 0 var(--esp-2);
  text-transform: uppercase;
}
.fc-ediciones__opcion {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2);
  border-radius: var(--radio-sm);
  text-decoration: none;
}
.fc-ediciones__opcion:hover { background: var(--gris-suave); }
.fc-ediciones__opcion.is-actual { background: var(--acento-suave); }
.fc-ediciones__codigo {
  font-size: var(--texto-xs);
  background: var(--gris-suave);
  color: var(--tinta);
  padding: 2px 6px;
  border-radius: 3px;
}
.fc-ediciones__nombre { flex: 1; font-size: var(--texto-sm); color: var(--navy); }
.fc-ediciones__cuenta { font-size: var(--texto-xs); color: var(--gris); }

.fc-header__market {
  background: var(--acento);
  color: #3d2a10;
  font-size: var(--texto-sm);
  padding: 6px 12px;
  border-radius: var(--radio-sm);
  text-decoration: none;
  margin-left: auto;
}
@media (min-width: 768px) { .fc-header__market { margin-left: 0; } }

/* ── Ajuste de integración: 5 hijos en .fc-header__inner (antes 2-3) ────
   La placa y el botón de Marketplace se suman al logo y a la cuenta.
   Sin este gap, en móvil (donde el margin-left:auto del Marketplace junta
   todo lo que sigue del logo en un solo bloque) la placa, el botón y el
   enlace de cuenta quedaban pegados entre sí sin aire. */
.fc-header__inner { gap: var(--esp-2); }
.fc-placa-caja, .fc-header__market { flex-shrink: 0; }

/* ── Franja de última hora (solo si hay algo de menos de 48 h) ───────── */
.fc-ahora { background: #16294d; border-top: 1px solid rgba(255,255,255,.08); }
.fc-ahora__inner { display: flex; align-items: center; gap: var(--esp-3); padding: 7px var(--esp-5); }
.fc-ahora__sello {
  background: var(--acento);
  color: #3d2a10;
  font-size: 10px;
  letter-spacing: .08em;
  padding: 2px 7px;
  border-radius: 3px;
  flex-shrink: 0;
}
.fc-ahora__titular {
  color: rgba(255,255,255,.82);
  font-size: var(--texto-xs);
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fc-ahora__titular:hover { color: var(--acento); }

/* ── Hero de tablero (fecha + pico y placa de hoy + códigos) ─────────── */
.fc-tablero__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-4);
  width: 100%;
  flex-wrap: wrap;
}
.fc-tablero__fecha { color: rgba(255,255,255,.6); font-size: var(--texto-xs); }

.fc-tablero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-3);
  width: 100%;
  margin-top: var(--esp-5);
}
@media (min-width: 620px) { .fc-tablero { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }

.fc-tablero__tarjeta {
  background: var(--blanco);
  border-radius: var(--radio-md);
  padding: var(--esp-4);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  text-decoration: none;
}
.fc-tablero__etiqueta { font-size: var(--texto-xs); color: var(--gris); }
.fc-tablero__placas { display: flex; flex-wrap: wrap; gap: var(--esp-1); }
.fc-tablero__placa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 30px;
  border-radius: var(--radio-sm);
  background: var(--peligro-bg);
  color: var(--peligro-texto);
  font-size: var(--texto-lg);
}
.fc-tablero__pie { font-size: var(--texto-xs); color: var(--gris); }
.fc-tablero__pie a { color: var(--gris); }
.fc-tablero__codigo {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-sm);
  font-size: var(--texto-md);
}
.fc-tablero__codigo:focus { outline: 2px solid var(--acento); outline-offset: 1px; }