/* ===== Tokens (identidad de Fundación del Valle) =====================
   Verde FdV #00ab97 y naranja #fabc61, tomados de fundaciondelvalle.org.
   Para texto y botones se usa un verde más oscuro (#00806f) que cumple
   el contraste mínimo de lectura sobre blanco. */
:root {
  --fdv-verde: #00ab97;
  --fdv-naranja: #fabc61;
  --fdv-morado: #796da1;
  --fdv-azul: #203a6a;
  --fondo: #f4f7f6;
  --superficie: #ffffff;
  --superficie-2: #edf3f2;
  --borde: #d8e2df;
  --texto: #1f2524;
  --texto-2: #5c6866;
  --marca: #00806f;
  --marca-fuerte: #00695c;
  --marca-suave: #dff3f0;
  --acento: #fabc61;
  --acento-suave: #fef2df;
  --ok: #2e7d4f;   --ok-suave: #e2f3e8;
  --aviso: #8a5a00; --aviso-suave: #fdf0d6;
  --error: #b3364f; --error-suave: #fbe6ea;
  --info: #203a6a; --info-suave: #e6ebf4;
  --radio: 12px;
  --sombra: 0 1px 2px rgb(0 0 0 / .05), 0 4px 14px rgb(0 60 52 / .06);
  --fuente: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #101615; --superficie: #18201f; --superficie-2: #202a28; --borde: #31403d;
    --texto: #e6eeec; --texto-2: #a5b3b0; --marca: #3cc9b5; --marca-fuerte: #6fdccb;
    --marca-suave: #173532; --acento-suave: #3a2d17; --ok: #7bc88a; --ok-suave: #1e3323;
    --aviso: #e7b65a; --aviso-suave: #3a2f17; --error: #f08aa0; --error-suave: #3d1f26;
    --info: #9db6e6; --info-suave: #1d2a3b; --sombra: none; color-scheme: dark;
  }
}

/* ===== Base ========================================================== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 14.5px/1.55 var(--fuente); background: var(--fondo); color: var(--texto); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; font-weight: 600; }
h1 { font-size: 1.45rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
a { color: var(--marca); }
p { margin: 0 0 .75rem; }
main { max-width: 1180px; margin: 0 auto; padding: 1.25rem 1rem 4rem; }
main:focus { outline: none; }
.saltar { position: absolute; left: -999px; }
.saltar:focus { left: 1rem; top: .5rem; z-index: 20; background: var(--superficie); padding: .5rem; }
[hidden] { display: none !important; }
.muted { color: var(--texto-2); }
.peq { font-size: .85rem; }
.fila { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.fila.entre { justify-content: space-between; }
.pila > * + * { margin-top: 1rem; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* ===== Barra superior ================================================ */
.barra {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 1.25rem;
  padding: .5rem 1rem; background: #ffffff; border-bottom: 4px solid var(--fdv-verde);
  box-shadow: 0 1px 0 var(--fdv-naranja);
}
.marca { display: flex; align-items: center; gap: .6rem; color: #1f2524; text-decoration: none; flex-shrink: 0; }
.marca img { height: 34px; width: auto; display: block; }
.marca-app { font-weight: 600; font-size: .85rem; letter-spacing: .08em; color: #00806f; border-left: 2px solid var(--fdv-naranja); padding-left: .6rem; }
.menu { display: flex; gap: .25rem; flex: 1; overflow-x: auto; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.pestanas { scrollbar-width: thin; }
@media (max-width: 900px) { .barra .usuario .nombre { display: none; } }
.menu a { padding: .45rem .75rem; border-radius: 8px; color: #4a5654; text-decoration: none; white-space: nowrap; font-weight: 500; }
.menu a:hover { background: #dff3f0; color: #00695c; }
.menu a[aria-current="page"] { color: #00695c; box-shadow: inset 0 -3px 0 var(--fdv-verde); border-radius: 8px 8px 0 0; }
.barra .usuario { color: #4a5654; }
.barra button.enlace { color: #00806f; }
@media (max-width: 640px) { .marca img { height: 26px; } .marca-app { display: none; } }
.usuario { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--texto-2); }
@media (max-width: 640px) { .usuario .nombre { display: none; } }

/* ===== Botones y formularios ======================================== */
button, .boton {
  font: inherit; display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  border: 1px solid var(--borde); background: var(--superficie); color: var(--texto);
  padding: .5rem .9rem; border-radius: 8px; text-decoration: none; min-height: 40px;
}
button:hover, .boton:hover { background: var(--superficie-2); }
button.primario, .boton.primario { background: var(--marca); border-color: var(--marca); color: #fff; }
button.primario:hover { background: var(--marca-fuerte); }
@media (prefers-color-scheme: dark) { button.primario { color: #0f1413; } }
button.peligro { color: var(--error); border-color: currentColor; }
button.enlace { border: 0; background: none; color: var(--marca); padding: .25rem; min-height: 0; }
button:disabled { opacity: .55; cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; }

label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .25rem; }
input, select, textarea {
  font: inherit; width: 100%; padding: .5rem .65rem; border: 1px solid var(--borde);
  border-radius: 8px; background: var(--superficie); color: var(--texto); min-height: 40px;
}
textarea { min-height: 80px; resize: vertical; }
.campos { display: grid; gap: .9rem 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.campos .ancho { grid-column: 1 / -1; }
.ayuda { font-size: .82rem; color: var(--texto-2); margin-top: .2rem; }

/* ===== Tarjetas, pestañas, tablas =================================== */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem; box-shadow: var(--sombra); }
.tarjeta > h2:first-child, .tarjeta > .fila:first-child { margin-bottom: .75rem; }
.rejilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
a.tarjeta { color: inherit; text-decoration: none; display: block; }
a.tarjeta:hover { border-color: var(--marca); }

.pestanas { display: flex; gap: .25rem; border-bottom: 1px solid var(--borde); margin: 1rem 0; overflow-x: auto; }
.pestanas a { padding: .6rem .9rem; color: var(--texto-2); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
.pestanas a[aria-current="page"] { color: var(--marca-fuerte); border-bottom-color: var(--marca); font-weight: 600; }

.tabla-envoltura { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { padding: .55rem .7rem; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
th { background: var(--superficie-2); font-weight: 600; font-size: .82rem; color: var(--texto-2); position: sticky; top: 0; }
tr:last-child td { border-bottom: 0; }

dl.datos { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: .4rem 1rem; margin: 0; }
dl.datos dt { color: var(--texto-2); font-size: .88rem; }
dl.datos dd { margin: 0; }
@media (max-width: 560px) { dl.datos { grid-template-columns: 1fr; } dl.datos dd { margin-bottom: .5rem; } }

/* ===== Etiquetas de estado ========================================== */
.chip { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--superficie-2); color: var(--texto-2); white-space: nowrap; }
.chip.ok { background: var(--ok-suave); color: var(--ok); }
.chip.aviso { background: var(--aviso-suave); color: var(--aviso); }
.chip.error { background: var(--error-suave); color: var(--error); }
.chip.info { background: var(--info-suave); color: var(--info); }

.barra-progreso { height: 6px; border-radius: 3px; background: var(--superficie-2); overflow: hidden; }
.barra-progreso > span { display: block; height: 100%; background: var(--fdv-verde); border-radius: 3px; }
.chip.acento { background: var(--acento-suave); color: var(--aviso); }
h2 .chip.info, .chip.info { font-weight: 600; }

.alerta { border-radius: var(--radio); padding: .75rem 1rem; border: 1px solid; }
.alerta.aviso { background: var(--aviso-suave); color: var(--aviso); }
.alerta.error { background: var(--error-suave); color: var(--error); }
.alerta.info { background: var(--info-suave); color: var(--info); }
.alerta.ok { background: var(--ok-suave); color: var(--ok); }
.alerta ul { margin: .25rem 0 0; padding-left: 1.2rem; }

/* ===== Acceso ======================================================== */
.acceso { max-width: 420px; margin: 7vh auto 0; }
.acceso .tarjeta { padding: 1.75rem; border-top: 5px solid var(--fdv-verde); }
.acceso header { text-align: center; margin-bottom: 1.25rem; }
.logo-acceso { width: min(260px, 80%); height: auto; display: block; margin: 0 auto 1rem; }
@media (prefers-color-scheme: dark) { .logo-acceso { background: #fff; padding: .6rem; border-radius: 8px; } }

/* ===== Avisos flotantes y diálogos ================================== */
.avisos { position: fixed; right: 1rem; bottom: 1rem; display: grid; gap: .5rem; z-index: 30; max-width: calc(100vw - 2rem); }
.aviso-flotante { background: var(--texto); color: var(--fondo); padding: .65rem 1rem; border-radius: 8px; box-shadow: var(--sombra); }
.aviso-flotante.error { background: var(--error); color: #fff; }
dialog { border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.25rem; background: var(--superficie); color: var(--texto); width: min(520px, calc(100vw - 2rem)); }
dialog::backdrop { background: rgb(0 0 0 / .4); }

/* ===== Cuadrícula mensual (indicadores y actividades) ================ */
table.cuadricula th, table.cuadricula td { padding: .25rem .3rem; white-space: nowrap; }
table.cuadricula tbody th { position: sticky; left: 0; background: var(--superficie); z-index: 1; max-width: 14rem; white-space: normal; }
table.cuadricula th.corte { background: var(--marca-suave); color: var(--marca-fuerte); }

/* ===== Tablero de compromisos ======================================== */
.tablero { display: grid; gap: .75rem; grid-template-columns: repeat(4, minmax(220px, 1fr)); overflow-x: auto; align-items: start; }
@media (max-width: 900px) { .tablero { grid-template-columns: repeat(4, 78vw); } }
.columna-tablero { background: var(--superficie-2); border-radius: var(--radio); padding: .6rem; min-height: 8rem; display: grid; gap: .5rem; align-content: start; }
.columna-tablero.sobre { outline: 3px dashed var(--fdv-verde); outline-offset: -3px; }
.columna-tablero h3 { margin: 0 0 .2rem; font-size: .95rem; }
.tarjeta-compromiso { background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid var(--fdv-verde); border-radius: 8px;
  padding: .55rem .65rem; display: grid; gap: .35rem; cursor: pointer; box-shadow: var(--sombra); }
.tarjeta-compromiso:hover { border-color: var(--marca); }
.tarjeta-compromiso.vencida { border-left-color: var(--error); }
.tarjeta-compromiso.arrastrando { opacity: .5; }
.tarjeta-compromiso .texto { font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== Panel de pendientes ============================================ */
.pendientes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 1rem 0; }
.pendientes ul { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .88rem; }
.pendientes li + li { margin-top: .25rem; }

.vacio { text-align: center; padding: 2.5rem 1rem; color: var(--texto-2); }
.cargando { padding: 2rem; text-align: center; color: var(--texto-2); }