/* =====================================================================
   VISTA PÚBLICA - Registro de deudores del Cementerio Municipal
   Archivo : cem_publico.css
   Ubica   : public_html/scp/cementerio/assets/cem_publico.css
   Entrega : 5

   Complementa a cem_estilos.css. Solo agrega lo propio de la cara
   pública: portada, estadísticas y fichas.

   Los gráficos son barras hechas con CSS. Sin librerías: cargan al
   instante, funcionan sin internet y se imprimen bien.
   ===================================================================== */

/* --- Portada -------------------------------------------------------- */
.portada {
  background: linear-gradient(160deg,
              color-mix(in srgb, var(--vino) 10%, transparent) 0%,
              transparent 70%);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--vino);
  border-radius: var(--radio);
  padding: 1.8rem 1.6rem;
  margin-bottom: 1.5rem;
}
.portada h1 {
  font-size: 1.9rem;
  margin-bottom: .6rem;
}
.portada p {
  font-size: 1.02rem;
  color: var(--texto-medio);
  max-width: 62ch;
  margin: 0 0 .7rem;
}
.portada p:last-child { margin-bottom: 0; }

/* --- Buscador destacado --------------------------------------------- */
.buscador {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.4rem;
  margin-bottom: 1.5rem;
}
.buscador-fila {
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end;
}
.buscador-fila .crece { flex: 1 1 260px; }
.buscador input[type=search] {
  font-size: 1.05rem;
  padding: .7rem .9rem;
}

/* --- Barras de estadística (sin librerías) -------------------------- */
.barras { margin: .6rem 0 0; }
.barra-item {
  display: grid;
  grid-template-columns: minmax(90px, 150px) 1fr auto;
  gap: .7rem;
  align-items: center;
  padding: .3rem 0;
}
.barra-rot { font-size: .85rem; color: var(--texto-medio); text-align: right; }
.barra-caja {
  background: var(--superficie2);
  border-radius: 3px;
  height: 20px;
  overflow: hidden;
}
.barra-val {
  height: 100%;
  background: linear-gradient(90deg, var(--vino), var(--vino-cla));
  border-radius: 3px;
  min-width: 2px;
  transition: width .4s ease;
}
.barra-item.oro .barra-val {
  background: linear-gradient(90deg, var(--oro-osc), var(--oro));
}
.barra-num {
  font-size: .88rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 4.5ch; text-align: right;
}

/* --- Resultados ----------------------------------------------------- */
.resultado {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: .9rem 1.1rem;
  margin-bottom: .7rem;
  background: var(--superficie);
  display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap;
}
.resultado:hover { border-color: var(--vino); }
.resultado .datos { flex: 1 1 260px; }
.resultado .nombre {
  font-family: var(--display);
  font-size: 1.12rem; font-weight: 600;
  margin-bottom: .15rem;
}
.resultado .ubic { font-size: .88rem; color: var(--texto-medio); }
.resultado .deuda { font-size: .85rem; color: var(--texto-tenue); margin-top: .3rem; }
.resultado .acc { margin-left: auto; text-align: right; }

/* --- Ficha ---------------------------------------------------------- */
.ficha-tit {
  font-family: var(--display);
  font-size: 1.6rem;
  margin: 0 0 .2rem;
}
.ficha-sub { color: var(--texto-medio); margin: 0 0 1rem; }

/* --- Nota legal al pie ---------------------------------------------- */
.nota-legal {
  border-top: 1px solid var(--borde);
  margin-top: 2rem; padding-top: 1rem;
  font-size: .82rem; color: var(--texto-tenue);
  line-height: 1.6;
}
.nota-legal strong { color: var(--texto-medio); }

/* --- Aviso de vista previa (solo administradores) ------------------- */
.previa {
  background: var(--alerta-fondo);
  border: 1px dashed var(--alerta);
  color: var(--alerta);
  border-radius: var(--radio);
  padding: .7rem 1rem;
  margin-bottom: 1.2rem;
  font-size: .9rem;
}

/* --- Navegación pública --------------------------------------------- */
.nav-pub {
  display: flex; gap: .3rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 1.5rem;
}
.nav-pub a {
  padding: .6rem 1rem;
  font-size: .92rem; font-weight: 500;
  color: var(--texto-medio);
  border-bottom: 2px solid transparent;
}
.nav-pub a:hover { color: var(--vino); text-decoration: none; }
.nav-pub a.activo { color: var(--vino); border-bottom-color: var(--vino); font-weight: 600; }

@media (max-width: 620px) {
  .portada { padding: 1.2rem 1rem; }
  .portada h1 { font-size: 1.5rem; }
  .barra-item { grid-template-columns: minmax(70px, 110px) 1fr auto; gap: .5rem; }
  .barra-rot { font-size: .78rem; }
}

@media print {
  .buscador, .nav-pub, .previa, .btn { display: none !important; }
}