/* Paleta sobria y cálida, acorde al tema */
:root {
  --bs-primary: #6b5b95;
  --bs-primary-rgb: 107, 91, 149;
  --bs-link-color: #6b5b95;
  --bs-link-color-rgb: 107, 91, 149;
  --bs-link-hover-color: #54467a;
  --bs-body-font-family: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-bg: #fbfaf8;
  --suave: #f3f0f7;
  --whatsapp: #25d366;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.font-serif { font-family: 'Lora', Georgia, 'Times New Roman', serif; }
.letter-spacing { letter-spacing: .12em; }

.btn-primary {
  --bs-btn-bg: #6b5b95;
  --bs-btn-border-color: #6b5b95;
  --bs-btn-hover-bg: #5a4b82;
  --bs-btn-hover-border-color: #5a4b82;
  --bs-btn-active-bg: #4d4070;
  --bs-btn-active-border-color: #4d4070;
  --bs-btn-disabled-bg: #6b5b95;
  --bs-btn-disabled-border-color: #6b5b95;
}
.btn-outline-primary {
  --bs-btn-color: #6b5b95;
  --bs-btn-border-color: #6b5b95;
  --bs-btn-hover-bg: #6b5b95;
  --bs-btn-hover-border-color: #6b5b95;
  --bs-btn-active-bg: #5a4b82;
  --bs-btn-active-border-color: #5a4b82;
}

.btn-whatsapp {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--whatsapp);
  --bs-btn-border-color: var(--whatsapp);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1ebe5a;
  --bs-btn-hover-border-color: #1ebe5a;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #19a64e;
}

/* Logo de la portada: se adapta al ancho en celulares */
.logo-portada { width: min(240px, 60vw); height: auto; }

.hero {
  background: linear-gradient(180deg, var(--suave) 0%, var(--bs-body-bg) 100%);
}

.seccion-suave { background: var(--suave); }

.btn-filtro {
  --bs-btn-color: #54467a;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #ddd6ea;
  --bs-btn-hover-bg: var(--suave);
  --bs-btn-hover-border-color: #c9bfdc;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #6b5b95;
  --bs-btn-active-border-color: #6b5b95;
  border-radius: 999px;
  padding-inline: 1.1rem;
}

.badge-tipo {
  background: var(--suave);
  color: #54467a;
  font-weight: 600;
}

/* Las fotos se muestran completas (sin recortes) dentro de su espacio */
.marco-foto { background: #fff; }
.ratio > img.object-fit-contain { padding: .5rem; }

.card-urna { transition: transform .2s ease, box-shadow .2s ease; }
.card-urna:hover { transform: translateY(-4px); box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .08) !important; }
.card-urna img { transition: transform .4s ease; }
.card-urna:hover img { transform: scale(1.04); }

.descripcion-corta {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.descripcion, .texto-multilinea { white-space: pre-line; }

/* Campo anti-spam: fuera de la vista de las personas, visible para robots */
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Línea de tiempo del seguimiento de pedidos */
.linea-tiempo { list-style: none; padding-left: 0; margin: 0; }
.linea-tiempo li { position: relative; padding: 0 0 1rem 1.5rem; border-left: 2px solid #e3def0; margin-left: .4rem; }
.linea-tiempo li:last-child { border-left-color: transparent; }
.linea-tiempo li::before {
  content: ''; position: absolute; left: -7px; top: .3rem;
  width: 12px; height: 12px; border-radius: 50%; background: #c9bfdc;
}
.linea-tiempo li.nota::before { background: #6b5b95; }

.icono-categoria {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--suave); color: #6b5b95; font-size: 1.25rem;
}
.btn-icono { width: 38px; }

.tarjeta-dato { background: #fff; border-radius: .75rem; box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .05); }

.valor {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .04);
}

.miniatura img { width: 72px; height: 72px; opacity: .8; transition: opacity .2s; }
.miniatura:hover img { opacity: 1; }

.foto-actual img { width: 110px; height: 110px; }
.foto-actual:has(input:checked) img { opacity: .35; outline: 3px solid var(--bs-danger); }

/* ---------- Reportes ---------- */
/* Color de las barras: morado de la marca con más saturación (validado para daltonismo y contraste) */
:root { --color-dato: #6a4fb0; }

/* Barra horizontal dentro de una tabla, anclada a la izquierda */
.barra-pista { height: 10px; min-width: 4rem; }
.barra-dato { height: 100%; background: var(--color-dato); border-radius: 0 4px 4px 0; }

/* Gráfico de columnas por mes */
.grafico-meses { display: flex; gap: .5rem; }
.grafico-eje { display: flex; flex-direction: column; justify-content: space-between; height: 180px; text-align: right; min-width: 1.5rem; }
.grafico-columnas {
  flex: 1; display: flex; gap: 2px; min-width: 0;
  background: linear-gradient(#e9e6ef, #e9e6ef) top / 100% 1px no-repeat; /* línea tenue del máximo */
}
.grafico-columna { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; cursor: default; outline-offset: 2px; }
.grafico-area { height: 180px; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid #cfc9da; }
.grafico-barra { width: min(100%, 36px); background: var(--color-dato); border-radius: 4px 4px 0 0; }
.grafico-columna:hover .grafico-barra, .grafico-columna:focus .grafico-barra { filter: brightness(1.15); }
.grafico-etiqueta { text-align: center; white-space: nowrap; overflow: visible; height: 1.5rem; padding-top: .25rem; font-size: .75rem; }
@media (max-width: 575.98px) {
  .etiqueta-secundaria { visibility: hidden; }
}

.footer { background: #2f2a3a; color: #d8d3e3; }
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; }

.whatsapp-flotante {
  position: fixed;
  right: 1.25rem;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--whatsapp);
  color: #fff;
  font-size: 1.75rem;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
  z-index: 1030;
  transition: transform .2s;
}
.whatsapp-flotante:hover { color: #fff; transform: scale(1.08); }