:root {
  /* Marca: turquesa como color principal, dorado como secundario, blanco de fondo.
     El turquesa #40E0D0 es muy claro para poner texto blanco encima, así que se
     usa como acento y la barra/los botones llevan sus versiones oscuras.
     Todas las combinaciones están comprobadas para que el texto se lea bien. */
  --turquesa:        #40E0D0;   /* el color de marca, para acentos */
  --turquesa-medio:  #0C7C72;   /* botones (blanco encima: 5.07:1) */
  --turquesa-oscuro: #0B5F58;   /* barra superior y títulos (7.52:1) */
  --turquesa-tinte:  #EAFBF8;   /* fondos suaves: cabeceras de tabla */

  --dorado:          #EFBF04;   /* acento secundario */
  --dorado-oscuro:   #6F5A00;   /* dorado legible sobre blanco (6.69:1) */
  --dorado-texto:    #3A2E00;   /* texto encima del dorado (7.72:1) */
  --dorado-tinte:    #FFF9E3;

  --fondo:  #ffffff;
  --borde:  #dbe6e4;
  --texto:  #1b2524;
  --suave:  #5c6b69;            /* textos de ayuda (5.58:1) */
  --rojo:   #b3261e;

  --gris:   #f4f8f8;            /* separador muy suave, casi blanco */
}

* { box-sizing: border-box; }

html {
  /* Evita que el celular agrande el texto por su cuenta */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texto);
  background: var(--fondo);
  /* Red de seguridad: nada debe empujar la página a lo ancho. Lo que sea
     más ancho que la pantalla (tablas, árbol) se desplaza dentro de su
     propia caja, no arrastrando toda la página. */
  overflow-x: hidden;
}

/* ------------------------------ Barra superior ------------------------------ */
.topbar {
  background: var(--turquesa-oscuro);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.topbar nav { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.topbar a { color: white; text-decoration: none; font-size: 0.95rem; }
.topbar a.brand { font-weight: 800; font-size: 1.15rem; color: var(--dorado); letter-spacing: 0.03em; }
.topbar a:hover { text-decoration: underline; }

.logout-form { display: flex; align-items: center; gap: 0.75rem; }
.logout-form span { font-size: 0.9rem; opacity: 0.85; }
.logout-form button {
  background: transparent; border: 1px solid rgba(255,255,255,0.5); color: white;
  padding: 0.3rem 0.75rem; border-radius: 4px; cursor: pointer;
}

.container { max-width: 1080px; margin: 0 auto; padding: 1.5rem; }

.page-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 1rem; gap: 1rem; flex-wrap: wrap;
}
.acciones { display: flex; gap: 0.5rem; align-items: center; }

h1 { color: var(--turquesa-oscuro); margin: 0 0 0.3rem; font-size: 1.6rem; }
h2 { color: var(--turquesa-medio); font-size: 1.15rem; margin-top: 1.8rem; }
h3 { font-size: 1rem; color: var(--turquesa-medio); }

section { margin-bottom: 1.2rem; }

/* --------------------------------- Botones --------------------------------- */
.btn {
  background: var(--turquesa-medio); color: white; padding: 0.5rem 1rem; border-radius: 6px;
  text-decoration: none; font-size: 0.9rem; border: none; cursor: pointer;
  display: inline-block;
}
.btn:hover { background: var(--turquesa-oscuro); }
.btn-secundario { background: white; color: var(--turquesa-medio); border: 1px solid var(--turquesa-medio); }
.btn-peligro {
  background: white; color: var(--rojo); border: 1px solid var(--rojo);
  padding: 0.45rem 0.9rem; border-radius: 6px; cursor: pointer; font-size: 0.85rem;
}
.link-btn {
  background: none; border: none; color: var(--turquesa-medio); text-decoration: underline;
  cursor: pointer; padding: 0; font-size: 0.85rem;
}
.zona-peligro { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--borde); }

/* --------------------------------- Tablas ---------------------------------- */
/* Cada tabla vive dentro de una caja que se desplaza de lado en pantallas
   angostas. Así el celular nunca termina con media pantalla en blanco. */
.tabla-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: white;
  border: 1px solid var(--borde);
  border-radius: 8px;
  margin-bottom: 0.5rem;
}
.tabla {
  width: 100%; border-collapse: collapse; background: white;
  min-width: 34rem;
}
.tabla th, .tabla td {
  padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--borde); text-align: left;
  white-space: nowrap;
}
.tabla tr:last-child td { border-bottom: none; }
.tabla th { background: var(--turquesa-tinte); font-size: 0.8rem; text-transform: uppercase; color: var(--turquesa-oscuro); letter-spacing: 0.02em; }
.tabla tr.inactivo { opacity: 0.55; }
.tabla a { color: var(--turquesa-medio); text-decoration: none; }
.tabla a:hover { text-decoration: underline; }
/* Columnas de texto libre: estas sí pueden partirse en varias líneas. */
.tabla .celda-larga { white-space: normal; min-width: 14rem; }
.acciones-tabla { display: flex; gap: 0.75rem; }

/* Lo mismo para cualquier bloque ancho que no sea una tabla (el árbol). */
.bloque-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* El aviso de "desliza la tabla" lo enciende el script de foot.ejs, solo
   cuando la tabla de verdad no entra en la pantalla. */
.pista-tabla { display: none; font-size: 0.78rem; color: var(--suave); margin: 0.1rem 0 1rem; }
.tabla-scroll.hay-scroll + .pista-tabla,
.bloque-scroll.hay-scroll + .pista-tabla { display: block; }

.resumen { color: var(--suave); font-size: 0.9rem; }

/* -------------------------------- Búsqueda --------------------------------- */
.search-form { margin-bottom: 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.search-form input[type=text] { flex: 1; min-width: 200px; padding: 0.5rem; border: 1px solid var(--borde); border-radius: 6px; }
.search-form select, .search-form button { padding: 0.5rem; border: 1px solid var(--borde); border-radius: 6px; }

.filtros { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filtros a {
  color: var(--turquesa-medio); text-decoration: none; font-size: 0.85rem;
  padding: 0.25rem 0.7rem; border: 1px solid var(--borde); border-radius: 20px; background: white;
}
.filtros a.filtro-activo { background: var(--turquesa-medio); color: white; border-color: var(--turquesa-medio); }

.buscador { width: 100%; padding: 0.5rem; border: 1px solid var(--borde); border-radius: 6px; margin: 0.5rem 0; }

/* ------------------------------- Formularios ------------------------------- */
.formulario { display: flex; flex-direction: column; gap: 0.9rem; max-width: 600px; }
.formulario label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; font-weight: 600; }
.formulario input, .formulario select, .formulario textarea {
  padding: 0.5rem; border: 1px solid var(--borde); border-radius: 6px; font: inherit; font-weight: normal;
  /* Sin esto, un <select> con opciones largas estira el formulario y
     termina desbordando la pantalla del celular. */
  width: 100%; max-width: 100%;
}
.formulario textarea { min-height: 70px; }
.formulario fieldset {
  border: 1px solid var(--borde); border-radius: 8px; padding: 1rem;
  display: flex; flex-direction: column; gap: 0.9rem; background: white;
  /* Los fieldset se niegan por defecto a encogerse más allá de su contenido */
  min-width: 0;
}
.formulario label, .formulario p { min-width: 0; }
.formulario > button[type=submit] {
  background: var(--turquesa-medio); color: white; border: none; padding: 0.75rem 1rem;
  border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer;
  align-self: flex-start; min-width: 10rem;
}
.formulario > button[type=submit]:hover { background: var(--turquesa-oscuro); }
.formulario legend { font-weight: 700; color: var(--turquesa-medio); padding: 0 0.4rem; }
.fila-doble { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.fila-doble label { flex: 1; min-width: 160px; }

.checkbox { flex-direction: row !important; align-items: center; gap: 0.5rem !important; font-weight: normal !important; }
.checkbox input { width: auto; }

.ayuda { font-size: 0.8rem; color: var(--suave); font-weight: normal; }

.error { color: var(--rojo); background: #fdecea; border: 1px solid #f5c6c2; padding: 0.6rem 0.9rem; border-radius: 6px; }

.campo-fecha { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; font-weight: 600; max-width: 320px; }
.campo-fecha input { padding: 0.5rem; border: 1px solid var(--borde); border-radius: 6px; }

.lista-checkboxes {
  max-height: 300px; overflow-y: auto; background: white;
  border: 1px solid var(--borde); border-radius: 8px; padding: 0.7rem;
  margin-bottom: 0.8rem;
}
.lista-checkboxes .checkbox { display: flex; padding: 0.25rem 0; }

.inline-form { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; flex-wrap: wrap; }
.inline-form select, .inline-form input, .inline-form button {
  padding: 0.45rem; border: 1px solid var(--borde); border-radius: 6px;
}

/* ---------------------------------- Fichas --------------------------------- */
.ficha {
  background: white; padding: 1rem; border-radius: 8px; border: 1px solid var(--borde);
}
.ficha p { margin: 0.3rem 0; }

.titulo-con-foto { display: flex; gap: 1rem; align-items: center; }
.etiquetas { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.3rem 0 0; }

.tag {
  font-size: 0.7rem; background: #eef2f1; color: #445350;
  padding: 0.15rem 0.55rem; border-radius: 10px; vertical-align: middle;
  display: inline-block;
}
.tag-lider { background: var(--dorado); color: var(--dorado-texto); font-weight: 600; }

.avatar {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  display: inline-block; vertical-align: middle; background: #cfeeea;
}
.avatar-grande { width: 72px; height: 72px; }
.avatar-vacio { background: linear-gradient(135deg, #cfeeea, #a9ddd7); }
.foto-preview {
  max-width: 160px; border-radius: 8px; display: block; margin-bottom: 0.5rem;
}

.lista-discipulos { columns: 2; list-style-position: inside; padding-left: 0; }
@media (max-width: 600px) { .lista-discipulos { columns: 1; } }

/* ---------------------------------- Árbol ----------------------------------
   Árbol de arriba hacia abajo: cada nivel es una fila centrada bajo su padre.
   Las líneas que unen a padres e hijos se dibujan con ::before y ::after,
   sin imágenes ni JavaScript.
   -------------------------------------------------------------------------- */
.arbol, .arbol ul {
  display: flex; justify-content: center; align-items: flex-start;
  list-style: none; margin: 0; padding: 0;
}
/* max-content evita que el árbol se comprima dentro de la caja que se desliza */
.arbol { width: max-content; margin: 0 auto; padding: 0.5rem 0 1.5rem; }
.arbol ul { position: relative; padding-top: 1.7rem; }
.arbol li {
  position: relative; padding: 1.7rem 0.35rem 0; text-align: center;
  /* Columna centrada: así la tarjeta del padre queda justo encima del
     travesaño de sus hijos, aunque la rama de abajo sea más ancha. */
  display: flex; flex-direction: column; align-items: center;
}

/* Las dos mitades del travesaño horizontal sobre cada hijo */
.arbol li::before, .arbol li::after {
  content: ''; position: absolute; top: 0; right: 50%;
  width: 50%; height: 1.7rem; border-top: 2px solid var(--borde);
}
.arbol li::after { right: auto; left: 50%; border-left: 2px solid var(--borde); }
/* Hijo único: le basta la línea vertical del padre */
.arbol li:only-child { padding-top: 0; }
.arbol li:only-child::before, .arbol li:only-child::after { display: none; }
/* Los extremos no llevan travesaño hacia afuera */
.arbol li:first-child::before, .arbol li:last-child::after { border: 0 none; }
.arbol li:last-child::before { border-right: 2px solid var(--borde); border-radius: 0 6px 0 0; }
.arbol li:first-child::after { border-radius: 6px 0 0 0; }
/* La línea que baja del padre hacia la fila de hijos */
.arbol ul ul::before {
  content: ''; position: absolute; top: 0; left: 50%;
  width: 0; height: 1.7rem; border-left: 2px solid var(--borde);
}
/* La primera fila no cuelga de nadie: sin conectores. Importa porque puede
   haber más de una raíz (varias personas sin líder asignado). */
.arbol > ul { padding-top: 0; }
.arbol > ul > li { padding-top: 0; }
.arbol > ul > li::before, .arbol > ul > li::after { display: none; }

/* --- La tarjeta de cada persona --- */
.nodo {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  width: 8.5rem; padding: 0.7rem 0.5rem;
  background: white; border: 1px solid var(--borde); border-radius: 12px;
  text-decoration: none; color: var(--texto);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nodo:hover {
  border-color: var(--turquesa); box-shadow: 0 2px 8px rgba(11,95,88,0.14);
}
.nodo-foto {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  background: #cfeeea; border: 2px solid var(--turquesa-tinte);
}
.nodo-foto-vacia { background: linear-gradient(135deg, #cfeeea, #a9ddd7); }
.nodo-nombre {
  font-size: 0.82rem; font-weight: 600; line-height: 1.25;
  color: var(--turquesa-oscuro);
}
.nodo-gen { font-size: 0.7rem; color: var(--suave); }
.nodo-lider {
  font-size: 0.62rem; font-weight: 600; line-height: 1;
  background: var(--dorado); color: var(--dorado-texto);
  padding: 0.2rem 0.45rem; border-radius: 10px;
}
.nodo-inactivo { opacity: 0.5; }

/* Listas de enlaces sueltos dentro del contenido (avisos, ayudas) */
.lista-enlaces a { color: var(--turquesa-medio); }

@media (max-width: 640px) {
  .nodo { width: 7rem; padding: 0.55rem 0.4rem; }
  .nodo-foto { width: 46px; height: 46px; }
  .nodo-nombre { font-size: 0.76rem; }
}

/* ---------------------------------- Login ---------------------------------- */
.login-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;   /* en el celular descuenta la barra del navegador */
  padding: 1.25rem;
  background: linear-gradient(150deg, var(--turquesa-oscuro), #08403C 55%, var(--turquesa-medio));
}
.login-card {
  background: white; padding: 2.25rem 1.9rem; border-radius: 12px;
  width: 100%; max-width: 24rem;
  display: flex; flex-direction: column; gap: 1.1rem;
}
.login-marca {
  text-align: center; margin: 0; color: var(--turquesa-oscuro);
  font-size: 2.1rem; font-weight: 800; letter-spacing: 0.05em;
}
.login-card h1 { text-align: center; margin: 0 0 0.5rem; font-size: 1.25rem; color: var(--suave); font-weight: 600; }
.login-card label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; font-weight: 600; }
/* 1rem evita que el celular haga zoom al tocar el campo */
.login-card input {
  padding: 0.7rem; border: 1px solid var(--borde); border-radius: 8px;
  font-size: 1rem; font-family: inherit;
}
.login-card button {
  background: var(--turquesa-medio); color: white; border: none; padding: 0.8rem; border-radius: 8px;
  font-weight: 600; font-size: 1rem; cursor: pointer; margin-top: 0.2rem;
}
.login-card button:hover { background: var(--turquesa-oscuro); }

/* ------------------------------ Roles y bitácora --------------------------- */
.tag-rol {
  background: #3f3f46; color: white; text-transform: capitalize;
  letter-spacing: 0.02em;
}
.topbar .tag-rol { font-size: 0.7rem; margin-left: 0.35rem; }

.filtro-inline {
  display: inline-flex; flex-direction: column; gap: 0.2rem;
  font-size: 0.78rem; color: #666;
}
.filtro-inline select { padding: 0.45rem; border: 1px solid var(--borde); border-radius: 6px; }

/* ---------------------------- Página de inicio ----------------------------- */
.secciones {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
.seccion {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  background: var(--turquesa-oscuro);
  box-shadow: 0 1px 3px rgba(0,0,0,0.14);
}
.seccion-imagen {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 0.25s ease;
}
.seccion:hover .seccion-imagen { transform: scale(1.05); }
/* Velo oscuro abajo, para que el nombre se lea sobre cualquier foto */
.seccion::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0) 60%);
}
.seccion-nombre {
  position: absolute; left: 1rem; right: 1rem; bottom: 0.85rem; z-index: 1;
  color: white; font-size: 1.15rem; font-weight: 700; line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* ------------------------------- Tablet ------------------------------------ */
@media (max-width: 900px) {
  .container { padding: 1.1rem; }
  .topbar { padding: 0.7rem 1.1rem; }
  .lista-discipulos { columns: 2; }
}

/* ------------------------------- Celular ----------------------------------- */
@media (max-width: 640px) {
  .topbar {
    padding: 0.6rem 0.9rem;
    gap: 0.45rem;
  }
  .topbar nav { gap: 0.9rem; row-gap: 0.35rem; }
  .topbar a { font-size: 0.92rem; }
  .topbar a.brand { width: 100%; font-size: 1.15rem; }
  /* El nombre y el botón de salir ocupan su propia línea, a lo ancho */
  .logout-form { width: 100%; justify-content: space-between; }

  .container { padding: 0.9rem; }

  h1 { font-size: 1.35rem; }
  h2 { font-size: 1.05rem; margin-top: 1.4rem; }

  .page-header { gap: 0.7rem; }
  .page-header .acciones { width: 100%; }
  /* Botones a lo ancho: más fáciles de tocar con el dedo */
  .page-header .acciones .btn,
  .page-header .acciones form,
  .page-header .acciones form button { flex: 1; text-align: center; }

  .titulo-con-foto { gap: 0.75rem; }
  .avatar-grande { width: 56px; height: 56px; }

  .tabla th, .tabla td { padding: 0.55rem 0.7rem; }
  /* La foto se sacrifica: en el celular vale más el ancho */
  .tabla .col-foto { display: none; }

  .search-form { gap: 0.45rem; }
  .search-form input[type=text] { min-width: 0; flex: 1 1 100%; }
  .search-form select { flex: 1; }

  .formulario { max-width: none; }
  .formulario fieldset { padding: 0.9rem 0.8rem; }
  /* 1rem evita el zoom automático al tocar un campo en el celular */
  .formulario input, .formulario select, .formulario textarea { font-size: 1rem; }
  .fila-doble { gap: 0.7rem; }
  .fila-doble label { min-width: 100%; }

  .inline-form { width: 100%; }
  .inline-form select { flex: 1 1 100%; }

  .lista-discipulos { columns: 1; }
  .filtro-inline { width: 100%; }

  .secciones { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
  .seccion-nombre { font-size: 0.95rem; left: 0.7rem; right: 0.7rem; bottom: 0.6rem; }
}

/* --------------------------------- Marca ----------------------------------- */
.topbar { border-bottom: 3px solid var(--dorado); }
.topbar a.brand {
  display: inline-flex; align-items: center; gap: 0.5rem;
}
/* El logo va solo, sin el nombre al lado, así que se le da algo más de aire */
.brand-logo {
  width: 40px; height: 40px; border-radius: 9px; object-fit: contain;
  display: block;
}
.login-logo {
  width: 112px; height: 112px; border-radius: 26px; object-fit: contain;
  display: block; margin: 0 auto 0.4rem;
}

/* Foco visible en turquesa: hace falta para quien navega con el teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--turquesa);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Toques del dorado como color secundario */
.filtros a.filtro-activo { background: var(--dorado); color: var(--dorado-texto); border-color: var(--dorado); }
.formulario legend { color: var(--turquesa-oscuro); }
.ficha { border-left: 4px solid var(--turquesa); }
.seccion { background: var(--turquesa-oscuro); }

@media (max-width: 640px) {
  .brand-logo { width: 34px; height: 34px; }
  .login-logo { width: 92px; height: 92px; }
}

/* --------------------------------- Filtros --------------------------------- */
.filtros-form {
  display: flex; flex-wrap: wrap; gap: 0.6rem 0.8rem; align-items: flex-end;
  margin-bottom: 1rem; padding: 0.9rem 1rem;
  background: var(--turquesa-tinte); border: 1px solid var(--borde); border-radius: 10px;
}
.filtros-form .filtro-inline { flex: 1 1 9rem; }
.filtros-form .filtro-ancho { flex: 2 1 14rem; }
.filtros-form input[type=text] {
  padding: 0.45rem; border: 1px solid var(--borde); border-radius: 6px;
  font: inherit; font-weight: normal; width: 100%;
}
.filtros-form select { width: 100%; }
.filtro-botones { display: flex; align-items: center; gap: 0.8rem; }
.filtro-botones button {
  background: var(--turquesa-medio); color: white; border: none;
  padding: 0.5rem 1.1rem; border-radius: 6px; font-weight: 600; cursor: pointer;
}
.filtro-botones button:hover { background: var(--turquesa-oscuro); }

@media (max-width: 640px) {
  .filtros-form { padding: 0.8rem; gap: 0.55rem 0.5rem; }
  /* Dos por fila: si no, cinco desplegables se comen la pantalla entera
     antes de que se vea un solo resultado. */
  .filtros-form .filtro-inline { flex: 1 1 calc(50% - 0.25rem); }
  .filtros-form .filtro-ancho { flex: 1 1 100%; }
  .filtros-form input[type=text], .filtros-form select { font-size: 1rem; }
  .filtro-botones { width: 100%; }
  .filtro-botones button { flex: 1; }
}