/* /public/css/estilos.css */
/* Mobile-first, responsive, tema claro/oscuro, estilo corporativo */

:root{
  --radio: 18px;
  --radio2: 14px;
  --sombra: 0 14px 40px rgba(0,0,0,.12);

  /* Tipografía */
  --fuente: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Espaciados */
  --p1: 10px;
  --p2: 14px;
  --p3: 18px;

  /* Tema CLARO (default) */
  --fondo: #f3f5ff;
  --fondo2:#eef0ff;
  --tarjeta: rgba(255,255,255,.86);
  --borde: rgba(15, 25, 60, .10);
  --texto: #0f1a33;
  --muted: rgba(15, 26, 51, .68);

  /* Marca */
  --primario: #2b63ff;
  --primarioHover:#2453d8;
  --peligro:#ff4d4d;

  /* Chips/badges */
  --chip: rgba(43,99,255,.10);
  --chipTxt:#1b44b8;
  --macro: rgba(255,153,0,.14);
  --macroTxt:#7a4a00;
  --gav: rgba(38,197,112,.14);
  --gavTxt:#0c5a2f;
}

/* Tema OSCURO */
html[data-tema="oscuro"]{
  --fondo: #0b1220;
  --fondo2:#0e1730;
  --tarjeta: rgba(18, 26, 43, .92);
  --borde: rgba(232,238,252,.14);
  --texto: #e8eefc;
  --muted: rgba(232,238,252,.70);

  --chip: rgba(43,99,255,.16);
  --chipTxt:#cfe0ff;
  --macro: rgba(255,153,0,.18);
  --macroTxt:#ffe2b5;
  --gav: rgba(38,197,112,.18);
  --gavTxt:#c9ffe2;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  font-family: var(--fuente);
  color: var(--texto);
  min-height:100vh;

  background:
    radial-gradient(1200px 800px at 20% 0%, rgba(43,99,255,.16), transparent 56%),
    radial-gradient(900px 600px at 85% 10%, rgba(255,77,77,.10), transparent 60%),
    linear-gradient(180deg, var(--fondo), var(--fondo2));
}

/* Contenedor: centrado SIEMPRE */
.contenedor{
  width:100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 16px 12px 26px;
}

/* Tarjetas */
.tarjeta{
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--p3);
  box-shadow: var(--sombra);
  backdrop-filter: blur(10px);
}

h2{
  margin: 0 0 10px;
  font-size: 18px;
}
h3{
  margin: 14px 0 10px;
  font-size: 14px;
  color: var(--texto);
}
.muted{ color: var(--muted); }

/* Topbar */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.logo{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}
.logo img{
  width: 36px;
  height: 36px;
  display:block;
  border-radius: 12px;
}
.titulo{
  font-weight: 800;
  font-size: 15px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

/* Botones */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radio2);
  border: 1px solid var(--borde);
  background: rgba(255,255,255,.12);
  color: var(--texto);
  text-decoration:none;
  font-weight: 800;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
.btn:hover{ filter: brightness(.98); }
.btn-primario{
  background: var(--primario);
  border-color: rgba(255,255,255,.10);
  color: #fff;
}
.btn-primario:hover{ background: var(--primarioHover); }
.btn-fantasma{
  background: transparent;
}

/* Inputs */
label{
  font-size: 12px;
  color: var(--muted);
}
input[type="date"]{
  width:100%;
  padding: 10px 12px;
  border-radius: var(--radio2);
  border: 1px solid var(--borde);
  background: rgba(255,255,255,.10);
  color: var(--texto);
  outline:none;
}

/* Layout */
.grid{ display:grid; gap: 12px; }
.grid-2{ grid-template-columns: 1fr; gap: 12px; }

/* En desktop, dos columnas y centrado bonito */
@media (min-width: 860px){
  .contenedor{ padding-top: 18px; }
  .grid-2{ grid-template-columns: 1.6fr 1fr; align-items:start; }
}

/* Redes: ICONO SOLO (compacto) */
.lista-iconos{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Cada red es un botón redondo con el icono/letra */
.item-icono{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: rgba(255,255,255,.14);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color: var(--texto);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
.item-icono:hover{ transform: translateY(-1px); }
/* Iconos PNG dentro del botón */
.item-icono img{
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

.item-icono:hover img{
  transform: scale(1.05);
  transition: transform .15s ease;
}

/* Dirección: se muestra debajo completa */
.bloque-direccion{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radio2);
  border: 1px solid var(--borde);
  background: rgba(255,255,255,.12);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}

.bloque-direccion a{
  color: var(--texto);
  text-decoration: none;
  font-weight: 600;
}

.bloque-direccion a:hover{
  text-decoration: underline;
}

/* Horarios: cápsulas compactas en columna */
.lista-horarios{
  display:grid;
  gap: 8px;
}
.horario{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radio2);
  border: 1px solid var(--borde);
  background: rgba(255,255,255,.10);
}
.horario .ico{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(43,99,255,.10);
  border: 1px solid var(--borde);
}
.horario .t1{ font-weight: 900; font-size: 13px; }
.horario .t2{ font-size: 12px; color: var(--muted); }

/* Cultos list */
.culto{
  display:flex;
  align-items:flex-start;   /* antes center */
  justify-content:space-between;
  gap: 10px;
  padding: 12px 12px;
  border-radius: var(--radio2);
  border: 1px solid var(--borde);
  background: rgba(255,255,255,.10);
}
.fecha{
  font-weight: 900;
  font-size: 13px;
}

/* Badges */
.badge{
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid var(--borde);
  background: var(--chip);
  color: var(--chipTxt);
}
.badge.macro{ background: var(--macro); color: var(--macroTxt); }
.badge.gavillas{ background: var(--gav); color: var(--gavTxt); }

/* Alertas */
.alerta{
  padding: 10px 12px;
  border-radius: var(--radio2);
  border: 1px solid var(--borde);
  background: rgba(255,255,255,.10);
  font-size: 12px;
}
.alerta.err{
  border-color: rgba(255,77,77,.35);
  background: rgba(255,77,77,.12);
}

/* Footer */
.footer{
  margin-top: 14px;
  text-align:center;
  font-size: 12px;
  color: var(--muted);
}

.select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--borde);
  background: var(--fondo);
  color: var(--texto);
}

/* ===========================
   Selector de fecha – Cultos
   =========================== */

.filtro-fecha{
  width: 100%;
}

#fecha-culto-select{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--borde);
  background: var(--tarjeta);
  color: var(--texto);
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  appearance: none;
  cursor: pointer;
}

/* Flechita custom */
#fecha-culto-select{
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

#fecha-culto-select:hover{
  border-color: var(--primario);
}

#fecha-culto-select:focus{
  outline: none;
  border-color: var(--primario);
  box-shadow: 0 0 0 2px rgba(43,99,255,.18);
}

/* Desktop: darle más presencia */
@media (min-width: 860px){
  .filtro-fecha{
    max-width: 420px;
  }
}

input[type="text"],
input[type="password"]{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--borde);
  background: rgba(255,255,255,.12);
  color: var(--texto);
  font-size:14px;
}