/* ============================================================
   Componentes base — Fase 1
   Píldora de estado, tarjeta de elemento, chip de filtro,
   botón, campo, barras de avance, estado vacío, toast,
   hoja/modal, línea de tiempo, galería.
   ============================================================ */

/* ---------- Píldora de estado ----------
   Regla firme: punto + glifo + etiqueta. Nunca solo color. */
.pildora {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  min-height: 32px;
  padding: 0 var(--e-15) 0 var(--e-1);
  border-radius: var(--r-pill);
  background: var(--e-fondo);
  color: var(--e-texto);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.pildora__punto {
  width: 20px; height: 20px;
  flex: 0 0 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--e-punto);
  color: #FFF;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
}

/* Interactiva: cumple la altura táctil de 48px y abre el menú de estado */
.pildora--accion {
  min-height: var(--tactil);
  padding: 0 var(--e-2) 0 var(--e-15);
  gap: var(--e-15);
  cursor: pointer;
  border-color: color-mix(in srgb, var(--e-punto) 32%, transparent);
}
.pildora--accion:hover { border-color: var(--e-punto); }
.pildora--accion::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .55;
}
.pildora--grande { min-height: 56px; font-size: 15px; padding-inline: var(--e-3) var(--e-15); }
.pildora--grande .pildora__punto { width: 26px; height: 26px; flex-basis: 26px; font-size: 14px; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  min-height: var(--tactil);
  padding: 0 var(--e-3);
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background-color .12s ease, border-color .12s ease;
}
.boton--primario { background: var(--primario); color: var(--sobre-primario); }
.boton--primario:hover { background: #2C2820; }
.boton--secundario { background: var(--fondo-tarjeta); border-color: var(--borde); color: var(--texto); }
.boton--secundario:hover { background: var(--fondo-sutil); }
.boton--plano { color: var(--texto-medio); }
.boton--plano:hover { background: var(--fondo-sutil); }
.boton--bloque { width: 100%; }

/* Botón solo icono: mantiene 48px de área táctil */
.boton-icono {
  width: var(--tactil);
  height: var(--tactil);
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  color: var(--texto-medio);
  flex: none;
}
.boton-icono:hover { background: var(--fondo-sutil); color: var(--texto); }
.boton-icono svg { width: 22px; height: 22px; }

/* ---------- Chip de filtro ---------- */
.chips {
  display: flex;
  gap: var(--e-1);
  overflow-x: auto;
  scrollbar-width: none;
  padding: var(--e-05) var(--e-2);
  margin-inline: calc(var(--e-2) * -1);
  scroll-padding-inline: var(--e-2);
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  min-height: var(--tactil);
  padding: 0 var(--e-2);
  border-radius: var(--r-pill);
  background: var(--fondo-tarjeta);
  border: 1px solid var(--borde);
  color: var(--texto-medio);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  flex: none;
}
.chip:hover { border-color: var(--texto-tenue); }
.chip[aria-pressed="true"] {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--texto);
}
.chip__punto {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--e-punto, var(--texto-tenue));
  flex: none;
}
.chip__glifo { font-size: 12px; opacity: .75; }
.chip__conteo {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--texto);
  background: var(--fondo-sutil);
  border-radius: var(--r-pill);
  padding: 1px 7px;
  font-size: 12px;
}
.chip[aria-pressed="true"] .chip__conteo { background: rgba(23,21,15,.14); }

/* ---------- Campos ---------- */
.campo { display: block; }
.campo__etiqueta {
  display: block;
  margin-bottom: var(--e-1);
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-medio);
}
.campo__control {
  width: 100%;
  min-height: var(--tactil);
  padding: 0 var(--e-2);
  border-radius: var(--r-chico);
  border: 1px solid var(--borde);
  background: var(--fondo-tarjeta);
  color: var(--texto);
}
textarea.campo__control { padding: var(--e-15) var(--e-2); min-height: 96px; line-height: 1.5; }
.campo__control::placeholder { color: var(--texto-tenue); }
.campo__control:focus-visible { outline-offset: 0; border-color: var(--primario); }

/* Buscador con icono y botón de limpiar */
.buscador { position: relative; display: flex; align-items: center; }
.buscador > svg {
  position: absolute; left: var(--e-15);
  width: 20px; height: 20px;
  color: var(--texto-tenue);
  pointer-events: none;
}
.buscador .campo__control { padding-left: 44px; padding-right: var(--tactil); }
.buscador input[type="search"]::-webkit-search-cancel-button { display: none; }
.buscador__limpiar { position: absolute; right: 0; }

/* ---------- Barras de avance ---------- */
.barra {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--fondo-sutil);
  overflow: hidden;
}
.barra__relleno {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--primario);
}

/* Segmentada por estado: cada tramo lleva su color y su etiqueta accesible */
.barra-segmentada {
  display: flex;
  height: 10px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--fondo-sutil);
}
.barra-segmentada__tramo { height: 100%; }

/* ---------- Tarjeta genérica ---------- */
.tarjeta {
  background: var(--fondo-tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--r-grande);
  padding: var(--e-3);
  box-shadow: var(--sombra-1);
}

/* Tarjeta de conteo por estado (Resumen) — filtra al tocarla */
.conteo {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  align-items: flex-start;
  min-height: 96px;
  padding: var(--e-2);
  border-radius: var(--r-medio);
  background: var(--e-fondo);
  border: 1px solid transparent;
  text-align: left;
}
.conteo:hover { border-color: var(--e-punto); }
.conteo__numero { font-size: 30px; font-weight: 800; line-height: 1; color: var(--e-texto); font-variant-numeric: tabular-nums; }
.conteo__etiqueta { font-size: 13px; font-weight: 600; color: var(--e-texto); }
.conteo__cabecera { display: flex; align-items: center; gap: 6px; }

/* ---------- Tarjeta de elemento ----------
   El envoltorio es el contenedor de consulta: cada tarjeta se adapta
   al ancho que le toca, no al del viewport (sección 5 del brief). */
.elemento-slot { container: elemento / inline-size; }

/* Bloques de color plano, sin borde ni sombra: el estado tiñe la
   tarjeta entera. La mezcla con blanco baja el pastel lo justo para
   que el texto siga cómodo y para que dos tarjetas seguidas no
   vibren. */
.tarjeta-elemento {
  display: block;
  width: 100%;
  text-align: left;
  background: color-mix(in srgb, var(--e-fondo, #FFFFFF) 55%, #FFFFFF);
  border: 0;
  border-radius: var(--r-grande);
  padding: var(--e-2);
  transition: background-color .12s ease, box-shadow .12s ease;
}
.tarjeta-elemento:hover { background: var(--e-fondo, var(--fondo-sutil)); }
.tarjeta-elemento[aria-current="true"] {
  box-shadow: 0 0 0 2px var(--primario);
}

.tarjeta-elemento__cuerpo { display: grid; grid-template-columns: 1fr; gap: var(--e-15); }
.tarjeta-elemento__miniatura {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-chico);
  background: rgba(255, 255, 255, .6);
  object-fit: cover;
  border: 0;
}
.tarjeta-elemento__sin-foto {
  display: grid;
  place-items: center;
  color: var(--texto-tenue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tarjeta-elemento__codigo { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--texto-tenue); }
.tarjeta-elemento__nombre {
  font-size: 16px; font-weight: 600; line-height: 1.3;
  margin-block: 2px var(--e-1);
  letter-spacing: -.01em;
}
.tarjeta-elemento__pie {
  display: flex; align-items: center; gap: var(--e-1);
  flex-wrap: wrap; margin-top: var(--e-15);
}
.tarjeta-elemento__meta {
  display: flex; align-items: center; gap: var(--e-1);
  font-size: 13px; color: var(--texto-medio);
  margin-left: auto;
}

/* A partir de 380px de ancho propio, la miniatura pasa al costado */
@container elemento (min-width: 380px) {
  .tarjeta-elemento__cuerpo { grid-template-columns: 104px 1fr; align-items: start; }
  .tarjeta-elemento__miniatura { aspect-ratio: 1; }
}

/* Vista de lista compacta: sin miniatura, una línea por elemento */
.tarjeta-elemento--compacta { padding: var(--e-15) var(--e-2); border-radius: var(--r-chico); }
.tarjeta-elemento--compacta .tarjeta-elemento__cuerpo { grid-template-columns: 1fr auto !important; align-items: center; gap: var(--e-2); }
.tarjeta-elemento--compacta .tarjeta-elemento__miniatura,
.tarjeta-elemento--compacta .tarjeta-elemento__pie { display: none; }
.tarjeta-elemento--compacta .tarjeta-elemento__nombre { margin-block: 0; font-size: 15px; }

/* Distintivos */
.distintivo {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px var(--e-1);
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700;
  background: var(--fondo-sutil);
  color: var(--texto-medio);
}
.distintivo--vencido { background: var(--danado-fondo); color: var(--danado-texto); }
.distintivo--alta    { background: var(--fondo-sutil); color: var(--texto); }

/* ---------- Estado vacío ---------- */
.vacio {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--e-15);
  padding: var(--e-6) var(--e-3);
  color: var(--texto-medio);
}
.vacio__glifo {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--fondo-sutil);
  color: var(--texto-tenue);
}
.vacio__glifo svg { width: 26px; height: 26px; }
.vacio__titulo { font-size: 17px; font-weight: 700; color: var(--texto); }
.vacio__texto { max-width: 36ch; font-size: 14px; }

/* ---------- Toast ---------- */
.toasts {
  position: fixed;
  left: 50%;
  bottom: calc(var(--barra-alto) + env(safe-area-inset-bottom) + var(--e-3));
  transform: translateX(-50%);
  z-index: 60;
  display: grid;
  gap: var(--e-1);
  width: min(92vw, 420px);
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: var(--e-15);
  padding: var(--e-15) var(--e-2);
  border-radius: var(--r-chico);
  background: var(--primario);
  color: var(--sobre-primario);
  box-shadow: var(--sombra-3);
  font-size: 14px; font-weight: 500;
}
@media (min-width: 768px) { .toasts { bottom: var(--e-3); } }

/* ---------- Hoja inferior (móvil) / modal (tablet y escritorio) ---------- */
.hoja {
  padding: 0;
  border: 0;
  background: var(--fondo-tarjeta);
  color: var(--texto);
  box-shadow: var(--sombra-3);
  max-height: 92dvh;
  overflow: auto;
  width: 100%;
  max-width: 100%;
  margin: auto auto 0;
  border-radius: var(--r-grande) var(--r-grande) 0 0;
  padding-bottom: env(safe-area-inset-bottom);
  animation: subir .2s ease both;
}
.hoja::backdrop { background: rgba(23, 21, 15, .42); }
@keyframes subir { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }

@media (min-width: 768px) {
  .hoja {
    margin: auto;
    width: min(560px, 92vw);
    border-radius: var(--r-grande);
    animation: aparecer .18s ease both;
  }
}
.hoja__cabecera {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-2);
  background: var(--fondo-tarjeta);
  border-bottom: 1px solid var(--borde-tenue);
}
.hoja__titulo { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.hoja__cuerpo { padding: var(--e-3) var(--e-2); }
.hoja__asa {
  width: 40px; height: 4px; border-radius: var(--r-pill);
  background: var(--borde);
  margin: var(--e-1) auto 0;
}
@media (min-width: 768px) { .hoja__asa { display: none; } }

/* ---------- Galería de fotos ---------- */
/* ---------- Carrusel de fotos ----------
   El desplazamiento es del navegador (scroll-snap), no de JavaScript:
   el deslizar con el dedo se siente nativo y no hay que reimplementar
   la inercia del sistema. */
.galeria { display: grid; gap: var(--e-15); }

.carrusel {
  position: relative;
  border-radius: var(--r-medio);
  overflow: hidden;
  background: var(--fondo-sutil);
}

.carrusel__pista {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* El desplazamiento suave NO se pone acá: con scroll-behavior: smooth
     en CSS, mover la pista por código se queda en nada en algunos
     motores —la asignación no surte efecto y no llega ni un evento de
     scroll—. Lo decide irA(), que además comprueba que se movió. */
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista:focus-visible { outline: 3px solid var(--foco); outline-offset: -3px; }

.carrusel__lamina {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
}

.carrusel__foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.carrusel__insignia {
  position: absolute;
  left: var(--e-1);
  top: var(--e-1);
  padding: 3px var(--e-1);
  border-radius: var(--r-pill);
  background: var(--acento);
  color: var(--sobre-acento);
  font-size: 11px;
  font-weight: 700;
}

/* Las flechas son para ratón; con el dedo se arrastra */
.carrusel__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--primario);
  font-size: 22px;
  line-height: 1;
  box-shadow: var(--sombra-1);
}
.carrusel__flecha[data-lado="izq"] { left: var(--e-1); }
.carrusel__flecha[data-lado="der"] { right: var(--e-1); }
.carrusel__flecha:hover { background: #FFF; }

.carrusel__contadorEnvase {
  position: absolute;
  right: var(--e-1);
  bottom: var(--e-1);
  padding: 3px var(--e-1);
  border-radius: var(--r-pill);
  background: rgba(28, 41, 75, .82);
  color: #FFF;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Pie: cuándo se tomó y quién */
.carrusel__pie {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  flex-wrap: wrap;
  margin: 0;
  font-size: 13px;
}
.carrusel__fecha { font-weight: 600; color: var(--texto-medio); }
.carrusel__autor {
  padding: 2px var(--e-1);
  border-radius: var(--r-pill);
  background: var(--acento-suave);
  color: var(--acento-fuerte);
  font-size: 12px;
  font-weight: 700;
}

.carrusel__puntos {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.carrusel__punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--borde);
  transition: background-color .12s ease, transform .12s ease;
}
.carrusel__punto[aria-selected="true"] {
  background: var(--primario);
  transform: scale(1.35);
}

.galeria__acciones {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  flex-wrap: wrap;
}

.linea-tiempo { display: grid; gap: var(--e-3); }
.evento { display: grid; grid-template-columns: 28px 1fr; gap: var(--e-15); position: relative; }
.evento::before {
  content: "";
  position: absolute;
  left: 13px; top: 32px; bottom: calc(var(--e-3) * -1);
  width: 2px;
  background: var(--borde);
}
.evento:last-child::before { display: none; }
.evento__marca {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--fondo-sutil);
  color: var(--texto-medio);
  font-size: 13px; font-weight: 700;
  position: relative; z-index: 1;
}
.evento__marca[data-estado] { background: var(--e-punto); color: #FFF; }
.evento__texto { font-size: 14px; line-height: 1.45; }
.evento__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--texto-tenue);
  margin-top: 4px;
}
.evento__separador { opacity: .5; }
.evento__autor { font-weight: 700; color: var(--texto-medio); }

/* La nota va sangrada y con barra: se lee como la explicación de la
   línea de arriba, no como otro movimiento. */
.evento__nota {
  margin-top: 4px;
  padding-left: var(--e-1);
  border-left: 3px solid var(--acento);
  font-size: 13px;
  line-height: 1.45;
  color: var(--texto-medio);
}

/* Agrupación por día */
.dias { display: grid; gap: var(--e-3); }
.dia__titulo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: var(--e-15);
  padding-bottom: var(--e-05);
  border-bottom: 1px solid var(--borde-tenue);
}
.evento__foto {
  margin-top: var(--e-1);
  width: 128px; height: 96px;
  object-fit: cover;
  border-radius: var(--r-chico);
  border: 1px solid var(--borde);
}

/* ---------- Acordeón por ubicación ---------- */
.grupo {
  background: var(--fondo-tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--r-medio);
  overflow: hidden;
}
.grupo + .grupo { margin-top: var(--e-15); }
.grupo__resumen {
  display: flex;
  align-items: center;
  gap: var(--e-15);
  min-height: var(--tactil);
  padding: var(--e-15) var(--e-2);
  cursor: pointer;
  list-style: none;
}
.grupo__resumen::-webkit-details-marker { display: none; }
.grupo__resumen:hover { background: var(--fondo-sutil); }
.grupo__flecha {
  width: 9px; height: 9px; flex: none;
  border-right: 2px solid var(--texto-tenue);
  border-bottom: 2px solid var(--texto-tenue);
  transform: translateY(-2px) rotate(-45deg);
  transition: transform .15s ease;
}
.grupo[open] .grupo__flecha { transform: translateY(-2px) rotate(45deg); }
.grupo__titulo { font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.grupo__avance { margin-left: auto; display: flex; align-items: center; gap: var(--e-15); }
.grupo__barra { width: 84px; }
.grupo__porcentaje { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; }
.grupo__contenido { padding: 0 var(--e-2) var(--e-2); display: grid; gap: var(--e-1); }

/* ---------- Menú emergente (segundo toque del cambio de estado) ---------- */
.menu {
  position: fixed;
  z-index: 80;
  min-width: 232px;
  padding: var(--e-1);
  border-radius: var(--r-medio);
  background: var(--fondo-tarjeta);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-3);
  display: grid;
  gap: 2px;
}
.menu__opcion {
  display: flex; align-items: center; gap: var(--e-15);
  min-height: var(--tactil);
  padding: 0 var(--e-15);
  border-radius: var(--r-chico);
  width: 100%;
  text-align: left;
  font-size: 14px; font-weight: 600;
}
.menu__opcion:hover { background: var(--fondo-sutil); }

/* ---------- Logo de proyecto ----------
   Lo carga Kevin junto al nombre. Cuadrado, recortado, sin fondo propio:
   el logo manda y la interfaz no le pone marco de color. */
.logo-proyecto {
  flex: none;
  border-radius: var(--r-chico);
  object-fit: contain;
  background: var(--fondo-sutil);
}
.logo-proyecto--chico  { width: 28px; height: 28px; border-radius: 8px; }
.logo-proyecto--medio  { width: 40px; height: 40px; }
.logo-proyecto--grande { width: 48px; height: 48px; }

/* Pie fijo de la hoja: las acciones no se pierden al hacer scroll */
.hoja__pie {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: var(--e-1);
  padding: var(--e-2);
  background: var(--fondo-tarjeta);
  border-top: 1px solid var(--borde-tenue);
}
.hoja__pie .boton { flex: 1; }

.boton--peligro { background: var(--danado-texto); color: #FFF; }
.boton--peligro:hover { background: #7A1B3C; }
.boton:disabled { opacity: .45; cursor: not-allowed; }
.boton:disabled:hover { background: var(--primario); }
.boton--peligro:disabled:hover { background: var(--danado-texto); }

/* Miniaturas recién capturadas */
.quitar-foto {
  position: absolute;
  top: -6px; right: -6px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--primario);
  color: var(--sobre-primario);
  font-size: 15px; line-height: 1;
  box-shadow: var(--sombra-2);
}
.marca-principal {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2px 0;
  text-align: center;
  font-size: 9px; font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(23,21,15,.72);
  color: #FFF;
  border-radius: 0 0 var(--r-chico) var(--r-chico);
}