/* ============================================================
   LOS OLIVOS CARTAGENA — Tablero de Obituarios
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600&family=Comfortaa:wght@300;400;700&display=swap');

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

/* Animación logo */
@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  45%      { transform: translateY(-8px); }
}
.hero-logo { animation: flotar 5s ease-in-out infinite; }

/* Subtítulo con líneas decorativas */
.texto-lineas { display: flex; align-items: center; gap: 10px; }
.texto-lineas::before,
.texto-lineas::after {
  content: '';
  height: 1px;
  width: clamp(16px, 2vw, 40px);
  background: #a183b5;
  opacity: 0.7;
  flex-shrink: 0;
}

/* ── TABLA ── */
.tabla-head,
.fila {
  display: grid;
  grid-template-columns:
    180px
    1fr
    minmax(90px, 9vw)
    minmax(130px, 16vw)
    minmax(105px, 10vw)
    minmax(130px, 16vw);
}

.th {
  padding: clamp(8px,1vw,20px) clamp(8px,1.1vw,20px);
  display: flex;
  align-items: center;
  gap: clamp(4px,0.4vw,8px);
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: clamp(0.55rem,0.62vw,2.2rem);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #ffffff;
  border-right: 1px solid rgba(255,255,255,0.12);
  white-space: nowrap;
}
.th:last-child { border-right: none; }

.fila {
  border-bottom: 1px solid #e8dff0;
  transition: background 0.2s;
  animation: entrar 0.35s ease both;
}
.fila:hover { background: #ede6f5 !important; }
.fila:last-child { border-bottom: none; }

@keyframes entrar {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

.td {
  padding: clamp(8px,1vw,20px) clamp(8px,1.1vw,20px);
  display: flex;
  align-items: center;
  border-right: 1px solid #e8dff0;
  overflow: hidden;
}
.td:last-child { border-right: none; }
.td:has(.sala-badge) { justify-content: center; padding-left: clamp(6px,0.6vw,12px); padding-right: clamp(6px,0.6vw,12px); }

.sala-badge {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: clamp(0.6rem,0.7vw,1.6rem);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #3e2455;
  background: #ffffff;
  border: 1.5px solid #3e2455;
  border-radius: 20px;
  padding: clamp(4px,0.4vw,10px) clamp(8px,0.7vw,16px);
  text-align: center;
  width: 100%;
  max-width: 100%;
  box-shadow: 0 2px 6px rgba(62,36,85,0.12);
  word-break: break-word;
  hyphens: auto;
  overflow-wrap: anywhere;
}

.nombre-wrap {
  display: flex;
  align-items: center;
  gap: clamp(6px,0.8vw,16px);
  overflow: hidden;
}
.nombre-icono {
  width: clamp(24px,2.6vw,72px);
  height: clamp(24px,2.6vw,72px);
  border-radius: 50%;
  background: #3e2455;
  display: flex; align-items: center; justify-content: center;
  color: #ffffff;
  font-size: clamp(0.6rem,0.75vw,2.6rem);
  flex-shrink: 0;
}
.nombre-texto {
  font-size: clamp(0.82rem,1vw,3.4rem);
  color: #240e36;
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
}

.fecha-texto {
  font-size: clamp(0.7rem,0.85vw,3rem);
  font-family: 'Comfortaa', sans-serif;
  color: #77608b;
  width: 100%;
  text-align: center;
}

.serv { display: flex; flex-direction: column; gap: 2px; }
.serv-hora  { font-size: clamp(0.78rem,1vw,3.5rem); font-family: 'Comfortaa', sans-serif; color: #3e2455; }
.serv-lugar {
  font-size: clamp(0.62rem,0.75vw,2.6rem);
  color: #77608b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 22ch;
}

/* Badges destino final */
.destino-badge {
  font-family: 'Raleway', sans-serif;
  font-size: clamp(0.62rem,0.75vw,2.6rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 20px;
  padding: clamp(3px,0.3vw,8px) clamp(8px,0.8vw,20px);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(62,36,85,0.12);
}
.destino-inhum {
  color: #3e2455;
  background: #ffffff;
  border: 1.5px solid #3e2455;
}
.destino-crem {
  color: #7a3800;
  background: #fff4ec;
  border: 1.5px solid #c8692a;
}

.sin-datos { padding: clamp(40px,8vw,80px) 20px; text-align: center; }
.sin-datos i { font-size: clamp(2.5rem,5vw,4.5rem); color: #a183b5; display: block; margin-bottom: 14px; animation: flotar 5s ease-in-out infinite; }
.sin-datos p { font-size: clamp(0.85rem,1.2vw,1.1rem); color: #77608b; }

/* ── MÓVIL < 640px — tarjetas apiladas ── */
@media (max-width: 640px) {
  .tabla-head { display: none; }
  .fila {
    display: flex; flex-direction: column;
    padding: 14px 16px; gap: 6px;
    border-left: 3px solid #3e2455;
  }
  .td { padding: 2px 0; border-right: none; overflow: visible; }
  .nombre-texto { white-space: normal; font-size: 0.88rem; }
  .serv-hora    { font-size: 0.82rem; }
  .serv-lugar   { white-space: normal; max-width: none; font-size: 0.68rem; }
  .sala-badge   { font-size: 0.68rem; }
  .fecha-texto  { font-size: 0.7rem; text-align: left; }
  .destino-badge { font-size: 0.65rem; }
  .nombre-icono { width: 28px; height: 28px; font-size: 0.7rem; }
}

/* ── TABLET 641–1024px ── */
@media (min-width: 641px) and (max-width: 1024px) {
  .tabla-head, .fila {
    grid-template-columns: 80px 1fr 80px minmax(110px,1fr) minmax(110px,1fr) minmax(110px,1fr);
  }
}

/* ── TV / PANTALLAS GRANDES ≥ 1600px ──
   En TVs 4K el viewport puede ser 3000-4000px de ancho.
   Sin este límite, las columnas con vw se inflan exageradamente
   y la columna "Sala" queda sin espacio para su texto. */
@media (min-width: 1600px) {
  .tabla-head, .fila {
    grid-template-columns:
      minmax(200px, 12vw)
      minmax(380px, 1fr)
      minmax(120px, 7vw)
      minmax(180px, 11vw)
      minmax(150px, 9vw)
      minmax(200px, 12vw);
  }
  .sala-badge   { font-size: clamp(0.75rem, 0.95vw, 1.3rem); }
  .destino-badge { font-size: clamp(0.7rem, 0.85vw, 1.2rem); }
  .fecha-texto  { font-size: clamp(0.8rem, 0.95vw, 1.3rem); }
  .serv-hora    { font-size: clamp(0.85rem, 1.05vw, 1.5rem); }
  .serv-lugar   { font-size: clamp(0.7rem, 0.85vw, 1.2rem); }
  .nombre-texto { font-size: clamp(0.95rem, 1.15vw, 1.6rem); }
}

#registros               { scrollbar-width: none; }
#registros::-webkit-scrollbar { display: none; }

::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f0ebf7; }
::-webkit-scrollbar-thumb { background: #3e2455; border-radius: 4px; }