/* ══════════ Agenda (sistema visual, 29/09/2026) ══════════
   Cabecera común: la banda (SIS.banda), la barra con el mes y el ¿Quién? y
   la tira de cumpleaños. La pieza propia es el calendario: celdas blancas con
   los renglones de cada día sobre el pastel de su tipo (tablero SisFirma
   «Agenda · el día con sus planes»). Lo demás —panel del día, formulario,
   To do list— son cajas, rótulos y botones del sistema. Aquí va lo de móvil
   y lo común; lo de escritorio, en 15-escritorio.css. */

/* ── La barra: ‹ mes año › a la izquierda y el ¿Quién? a la derecha ── */
.agenda-barra{ justify-content:space-between }
.cal-nav{ display:flex; align-items:center; gap:6px; min-width:0 }
.cal-nav h2{ margin:0; font-family:var(--f-tit); font-weight:800; font-size:1.15rem; letter-spacing:-.01em; text-transform:capitalize; display:flex; gap:2px; min-width:0 }
/* El título es un desplegable doble (mes + año) disfrazado de título: mismo
 * tipo y peso, sin marco hasta que pasas por encima. En móvil el suelo de
 * 16px de 01-base.css no aplica a estos select porque son navegación, no un
 * campo que dispare el teclado — pero se dejan por encima del umbral de zoom
 * igualmente al heredar del h2. */
.cal-nav h2 select{
  font:inherit; text-transform:inherit; color:inherit; background:transparent;
  border:1.5px solid transparent; border-radius:var(--r-s); padding:2px; cursor:pointer; max-width:100%;
}
.cal-nav h2 select:hover, .cal-nav h2 select:focus-visible{ border-color:var(--borde); background:var(--sup) }
.cal-nav .sis-btn-icono{ width:var(--h-s); height:var(--h-s); font-size:1.1rem; line-height:1 }
.cal-nav .sis-btn-icono:hover{ border-color:var(--tx) }
@media (max-width:899px){
  /* En móvil el mes ocupa su fila (‹ título hoy ›) y el ¿Quién? baja debajo. */
  .agenda-barra .cal-nav{ flex:1 1 100%; justify-content:space-between }
  .cal-nav h2{ flex:1; justify-content:center }
}

/* ── El calendario: la pieza propia ── */
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px }
.cal-dow{ font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tx3); text-align:center; padding:4px 0 }
.celda{
  position:relative; min-height:46px; padding:3px 4px; box-sizing:border-box; cursor:pointer;
  background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-s); font-size:.72rem;
}
.celda:hover{ border-color:var(--borde) }
.celda.fuera{ visibility:hidden }
/* De viaje: el pastel de Viajes, que es lo que dice la leyenda. */
.celda.viaje{ background:#E3F0E8; border-color:#BFD8C8 }
.celda .bandera-fondo{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:.4; overflow:hidden; pointer-events:none; border-radius:var(--r-s); line-height:1;
}
.celda .bandera-fondo .bandera-img{ width:70%; height:auto }
.celda .num, .celda .icos{ position:relative; z-index:1 }
.celda .num{ font-family:var(--f-tit); font-weight:800; font-size:.8rem; color:var(--tx) }
.celda .icos{ font-size:.72rem; line-height:1.15; letter-spacing:-1px; display:block; margin-top:1px }
/* Los resaltes comunes: hoy, borde en el acento; el día tocado, 2 px de tinta
   (y si es hoy, manda el tocado en el borde y el número sigue en el acento). */
.celda.hoy{ border:2px solid var(--acento); padding:2px 3px }
.celda.hoy .num{ color:var(--acento) }
.celda.sel{ border:2px solid var(--tx); padding:2px 3px }
/* Los renglones escritos de cada día y los nombres largos de la semana son
   de escritorio (15-escritorio.css); en móvil, los iconos y la inicial. */
.cal-cosas, .cal-dow .largo{ display:none }


/* ── El panel del día ── */
.sis-caja.dia-panel{ margin-top:12px; gap:8px }
.dia-viaje{ margin:0; font-size:13px; color:var(--tx2) }
.dia-viaje-abrir{ background:none; border:0; padding:0; font:inherit; color:var(--tinta); text-decoration:underline; text-underline-offset:3px; cursor:pointer; text-align:left }
.dia-viaje-abrir:hover, .dia-viaje-abrir:focus-visible{ color:var(--sello) }
.dia-viaje .bandera-img{ width:16px; height:auto; vertical-align:-2px; border-radius:2px }
.dia-vacio{ margin:0; font-size:13px; color:var(--tx2) }
.dia-item{ display:flex; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--borde-s) }
.dia-item:last-child{ border-bottom:0; padding-bottom:0 }
.dia-item:first-child{ padding-top:0 }
.dia-item .ico{ flex-shrink:0; align-self:baseline }
/* Título arriba; debajo, en pequeño, el dónde y las notas si las hay. */
.dia-item-cuerpo{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; font-size:14px }
.dia-item-cuerpo i{ font-style:normal; font-size:12.5px; color:var(--tx2); overflow-wrap:break-word }
.dia-editar{ flex-shrink:0 }
/* La hora de un plan, en el acento: es lo que ordena el día. */
.dia-hora{ font-family:var(--f-mono); font-size:12px; font-weight:600; color:var(--acento); margin-right:2px }
/* El × y el ↩: iconos pequeños y discretos; el borrado pregunta antes. */
.sis-btn-icono.agenda-x{ width:var(--h-s); height:var(--h-s); border-color:transparent; color:var(--tx3); font-size:1rem }
.sis-btn-icono.agenda-x:hover{ border-color:var(--borde); color:var(--tx) }
.sis-btn-icono.agenda-x[data-del]:hover, .sis-btn-icono.agenda-x[data-tarea-del]:hover{ color:var(--error); border-color:var(--error) }

/* ── Los formularios de la Agenda (plan y tarea) ──
   form.alta (02-viajes.css) viste TODOS sus botones como el botón viejo (mono,
   mayúsculas, relleno de tinta) y con más especificidad que .sis-btn; aquí
   cada botón del sistema vuelve a su forma. Los campos, sobre blanco. */
form.agenda-form{
  margin:12px 0 0; padding:16px 18px; gap:8px;
  background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-l);
}
form.agenda-form .sis-caja-tit{ margin-bottom:2px }
form.agenda-form .sis-btn, form.tareas-alta .sis-btn{
  height:var(--h-m); padding:0 14px; border:1.5px solid var(--tx); border-radius:var(--r-m);
  background:var(--sup); color:var(--tx); font-family:var(--f-txt); font-weight:600; font-size:14px; letter-spacing:0; text-transform:none;
}
form.agenda-form .sis-btn.principal, form.tareas-alta .sis-btn.principal{ background:var(--acento); border-color:var(--acento); color:#FFF }
form.agenda-form .sis-btn.s, form.tareas-alta .sis-btn.s{ height:var(--h-s); padding:0 12px; font-size:13px }
form.agenda-form .sis-acciones{ margin-top:8px }
form.agenda-form input:not([type="checkbox"]), form.agenda-form select, form.agenda-form.alta textarea,
form.tareas-alta input, form.tareas-alta select{
  background:var(--sup); border-color:var(--borde); border-radius:var(--r-m);
}
form.agenda-form input:focus, form.agenda-form select:focus, form.agenda-form.alta textarea:focus,
form.tareas-alta input:focus, form.tareas-alta select:focus{ outline:2px solid var(--acento); outline-offset:1px }
form.agenda-form label.plan-quien{ margin:4px 0 2px }
form.agenda-form label.plan-quien span, .plan-suave{ text-transform:none; letter-spacing:0; color:var(--tx3) }
/* Los chips de personas (checkboxes de chipsPersonasForm y los de «¿Quién
   va?» del viaje), con la forma de los chips del sistema. */
form.agenda-form .chip-check span, form.agenda-form.alta .vj-chip{
  height:var(--h-s); box-sizing:border-box; display:inline-flex; align-items:center; padding:0 12px;
  border-radius:var(--r-pill); border:1.5px solid var(--borde); border-style:solid; background:var(--sup); color:var(--tx);
  font-family:var(--f-txt); font-size:13px; font-weight:400; letter-spacing:0; text-transform:none;
}
form.agenda-form .chip-check input:checked + span, form.agenda-form.alta .vj-chip.on{
  background:var(--tx); border-color:var(--tx); color:#FFF; font-weight:600;
}
form.agenda-form .chip-check input:focus-visible + span{ outline:2px solid var(--acento); outline-offset:1px }
form.agenda-form .chips-check, form.agenda-form .vj-chips{ gap:6px }

/* ── Tal día como hoy: la entrada a Memoria ──
   Es la pieza de Memoria y lleva su superficie oscura, igual que en la
   columna derecha de escritorio (que la sustituye desde 1440 px). */
.agenda-memoria{
  display:flex; align-items:center; gap:12px; margin:12px 0 0; padding:14px 16px; cursor:pointer;
  background:var(--noche); color:#E8ECF2; border-radius:var(--r-l);
}
.agenda-memoria:hover{ filter:brightness(1.12) }
.agenda-memoria > div{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px }
.agenda-memoria .sis-rotulo{ color:var(--aviso) }
.agenda-memoria p{ margin:0; font-size:13px; line-height:1.4; color:#C9D2DE }
.agenda-memoria-ir{ flex-shrink:0; font-family:var(--f-tit); font-weight:800; font-size:1.2rem; color:var(--aviso) }

/* ── To do list ──
   Al marcar una tarea no se borra, se firma: el tic pregunta quién.
   Maqueta: referencia/lienzo/TodoAgenda.html (18/10/2026). */
.tareas-caja{ margin-top:12px }
.td{ background:#FFFDF8; border:1.5px solid var(--tx); border-radius:20px; padding:18px 18px 14px; box-shadow:0 8px 24px rgba(27,42,65,.08) }
.td-cab{ display:flex; align-items:center; gap:10px; margin-bottom:12px }
.td-cab h3{ margin:0; font-family:var(--f-tit); font-weight:800; font-size:22px; letter-spacing:-.02em; color:var(--tx) }
.td-n{ display:inline-grid; place-items:center; min-width:26px; height:26px; padding:0 8px; border-radius:13px; background:var(--tx); color:#fff; font:600 13px var(--f-mono) }
.td-hechas-l{ margin-left:auto; border:0; background:none; padding:4px 0; font:inherit; font-size:13px; color:var(--tx2); text-decoration:underline; text-underline-offset:3px; cursor:pointer }

/* El alta: una línea; al tocarla, quién y para cuándo */
.td-nueva{ box-sizing:border-box; display:flex; align-items:center; gap:10px; width:100%; min-height:46px; padding:0 14px; border:1.5px dashed var(--borde); border-radius:14px; background:#fff; color:var(--tx3); font:inherit; font-size:15px; text-align:left; cursor:pointer }
.td-nueva:hover{ border-color:var(--tx2); color:var(--tx2) }
.td-nueva .mas{ width:22px; height:22px; border-radius:50%; background:var(--acento); color:#fff; display:grid; place-items:center; font-weight:700; font-size:16px; line-height:1; flex-shrink:0 }
form.td-nueva.abierta{ flex-direction:column; align-items:stretch; gap:10px; padding:10px 12px; border:1.5px solid var(--tx); color:var(--tx); cursor:default; margin:0; box-shadow:none }
form.td-nueva.abierta > input[name="texto"]{ border:0; outline:0; padding:4px 2px; font:inherit; font-size:15.5px; background:transparent; color:var(--tx); height:auto }
.td-opc{ display:flex; flex-wrap:wrap; gap:6px; align-items:center }
.td-opc small{ font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tx3); margin-right:2px }
.td-acc{ display:flex; justify-content:flex-end; gap:6px }
.td-quien{ border:0; background:none; padding:0; border-radius:16px; cursor:pointer }
.td-quien .td-chip{ height:30px; font-size:13px; border:1.5px solid transparent }
.td-quien.sel .td-chip{ border-color:var(--tx) }
.td-quien:focus-visible{ outline:2px solid var(--acento); outline-offset:2px }
.td-fecha{ display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 4px 0 10px; border-radius:16px; background:var(--sup2); border:1px solid var(--borde-s); color:var(--tx2); font-size:13px }
.td-fecha input{ border:0; background:transparent; font:inherit; font-size:13px; color:var(--tx); height:28px; padding:0; width:auto }

/* Las etiquetas: quién (con su color) y para cuándo */
.td-chip{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px 0 3px; border-radius:12px; font-size:12px; font-weight:600; white-space:nowrap }
.td-chip .av{ width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font:600 9.5px var(--f-mono); color:#fff }
.td-quien .td-chip .av{ width:22px; height:22px; font-size:11px }
.td-chip.j{ background:#DCE8F7; color:#2759B8 } .td-chip.j .av{ background:#2759B8 }
.td-chip.m{ background:#F8E2EB; color:#A63E66 } .td-chip.m .av{ background:#A63E66 }
.td-chip.a{ background:#E9E3F4; color:#5B43A6 } .td-chip.a .av{ background:#5B43A6 }
.td-chip.o{ background:var(--neutro-suave); color:var(--tx2) } .td-chip.o .av{ background:var(--tx2) }
.td-dia{ display:inline-flex; align-items:center; height:24px; padding:0 9px; border-radius:12px; font-size:12px; font-weight:600; background:var(--sup2); color:var(--tx2); border:1px solid var(--borde-s); white-space:nowrap }
.td-dia.tarde{ background:var(--error-suave); color:var(--error); border-color:transparent }
.td-dia.hoy{ background:var(--acento-suave); color:var(--acento); border-color:transparent }

/* Los grupos y cada tarea */
.td-grupo{ margin-top:14px }
.td-grupo > small{ display:flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--tx3); margin-bottom:2px }
.td-grupo > small::after{ content:""; flex:1; height:1px; background:var(--borde-s) }
.td-grupo.tarde > small{ color:var(--error) }
.td-t{ display:flex; align-items:flex-start; gap:12px; padding:10px 4px; border-radius:12px; position:relative }
.td-t + .td-t, .td-pop + .td-t{ border-top:1px dashed var(--borde-s) }
.td-t:hover{ background:var(--sup2) }
.td-caja{ flex-shrink:0; width:26px; height:26px; margin-top:1px; padding:0; border-radius:8px; border:2px solid var(--tx); background:#fff; cursor:pointer }
.td-caja:hover{ background:var(--ok-suave); border-color:var(--ok) }
.td-t.marcando{ background:var(--ok-suave) }
.td-t.marcando .td-caja{ background:var(--ok); border-color:var(--ok) }
.td-txt{ flex:1; min-width:0 }
.td-txt b{ display:block; font-weight:500; font-size:15.5px; line-height:1.3; color:var(--tx); overflow-wrap:anywhere }
.td-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px }
.td-mas{ flex-shrink:0; border:0; background:none; color:var(--tx3); font-size:18px; line-height:1; padding:2px 6px; border-radius:8px; cursor:pointer; opacity:0 }
.td-t:hover .td-mas, .td-h:hover .td-mas, .td-mas[aria-expanded="true"], .td-mas:focus-visible{ opacity:1 }
.td-mas:hover{ background:rgba(27,42,65,.08) }
@media (hover:none){ .td-mas{ opacity:.7 } }
.td-menu{ position:absolute; right:4px; top:36px; z-index:5; min-width:180px; background:#fff; border:1.5px solid var(--tx); border-radius:12px; padding:4px; box-shadow:0 10px 26px rgba(27,42,65,.18) }
.td-menu button{ display:block; width:100%; text-align:left; border:0; background:none; padding:9px 10px; border-radius:8px; font:inherit; font-size:14px; color:var(--tx); cursor:pointer }
.td-menu button:hover{ background:var(--sup2) }
.td-menu button.peligro{ color:var(--error) }

/* «¿Quién la ha hecho?»: un globo bajo la tarea */
.td-pop{ position:relative; margin:4px 0 8px 22px; background:#fff; border:1.5px solid var(--tx); border-radius:16px; padding:12px; box-shadow:0 10px 26px rgba(27,42,65,.16) }
.td-pop::before{ content:""; position:absolute; top:-8px; left:8px; width:14px; height:14px; background:#fff; border-left:1.5px solid var(--tx); border-top:1.5px solid var(--tx); transform:rotate(45deg) }
.td-pop p{ margin:0 0 8px; font-family:var(--f-tit); font-weight:800; font-size:15px; color:var(--tx) }
.td-vacio{ margin:14px 0 0; font-size:14px; color:var(--tx2) }

/* Lo hecho: tachado y firmado a mano */
.td-hechas{ margin-top:14px; padding-top:12px; border-top:1.5px solid var(--tx) }
.td-hechas-cab{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px }
.td-hechas-cab b{ font-family:var(--f-tit); font-weight:800; font-size:15px; color:var(--tx) }
.td-hechas-cab button{ border:0; background:none; padding:2px 0; font:inherit; font-size:12.5px; color:var(--tx2); text-decoration:underline; text-underline-offset:3px; cursor:pointer }
.td-h{ display:flex; align-items:center; gap:12px; padding:6px 4px; position:relative; border-radius:10px }
.td-h:hover{ background:var(--sup2) }
.td-caja.hecha{ width:22px; height:22px; border-radius:7px; background:var(--ok); border-color:var(--ok); color:#fff; display:grid; place-items:center; font-size:13px; font-weight:700; cursor:default }
.td-h-txt{ flex:1; min-width:0; font-size:14px; color:var(--tx3); text-decoration:line-through; text-decoration-color:rgba(95,108,102,.5); overflow-wrap:anywhere }
.td-firma{ font-family:'Caveat',cursive; font-style:normal; font-weight:600; font-size:19px; color:var(--ok); white-space:nowrap; transform:rotate(-3deg) }
.td-h .td-menu{ top:30px }

/* 🎂 El recordatorio de cumpleaños al entrar (src/avisos/AvisoCumple.tsx) */
.cumple-capa{ position:fixed; inset:0; z-index:3500; background:rgba(27,42,65,.5); display:grid; place-items:center; padding:20px; animation:cumpleFondo .2s ease-out }
.cumple-caja{ position:relative; width:min(380px, 100%); background:#FFFDF8; color:#1B2A41; border:1.5px solid #1B2A41; border-radius:22px;
  padding:26px 22px 18px; text-align:center; box-shadow:0 24px 60px rgba(27,42,65,.35); animation:cumpleEntra .32s cubic-bezier(.2,.9,.3,1.2) }
.cumple-x{ position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%; border:0; background:transparent; color:#4A5A72; font-size:17px; cursor:pointer }
.cumple-x:hover{ background:rgba(27,42,65,.08) }
.cumple-tarta{ position:relative; width:104px; height:104px; margin:0 auto 10px; border-radius:50%; background:#FFF3D6; border:1.5px solid #1B2A41; display:grid; place-items:center; font-size:56px; line-height:1 }
.cumple-tarta span{ position:absolute; width:10px; height:10px; border-radius:3px; animation:cumpleConfeti 2.4s ease-in-out infinite }
.cumple-tarta .c1{ background:#B04E2E; top:-6px; left:14px; transform:rotate(20deg) }
.cumple-tarta .c2{ background:#6B4FB8; top:6px; right:-8px; transform:rotate(-15deg); animation-delay:.4s }
.cumple-tarta .c3{ background:#2F6FED; bottom:4px; left:-10px; border-radius:50%; animation-delay:.8s }
.cumple-tarta .c4{ background:#E9A23B; bottom:-8px; right:16px; transform:rotate(40deg); animation-delay:1.2s }
.cumple-tarta .c5{ background:#3E8E5E; top:40px; left:-14px; width:7px; height:7px; border-radius:50%; animation-delay:1.6s }
.cumple-hoy{ margin:0; font-family:var(--f-mono); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#B04E2E }
.cumple-nombre{ margin:4px 0 0; font-family:var(--f-tit); font-weight:800; font-size:30px; letter-spacing:-.02em; line-height:1.1 }
.cumple-nombre.varios{ font-size:22px }
.cumple-edad{ margin:4px 0 0; font-family:'Caveat',cursive; font-size:26px; color:#4A5A72 }
.cumple-edad b{ font-family:var(--f-tit); font-size:24px; color:#1B2A41 }
.cumple-felicitar{ margin:16px auto 0; min-width:200px; justify-content:center }
.cumple-lista{ list-style:none; margin:14px 0 0; padding:0; text-align:left; display:flex; flex-direction:column; gap:8px }
.cumple-lista li{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; background:#FFF3D6; border-radius:12px }
.cumple-lista small{ color:#4A5A72 }
.cumple-pie{ display:flex; justify-content:center; gap:8px; margin-top:16px; padding-top:14px; border-top:1px dashed #D9D4C7 }
@keyframes cumpleFondo{ from{ opacity:0 } to{ opacity:1 } }
@keyframes cumpleEntra{ from{ opacity:0; transform:scale(.9) translateY(10px) } to{ opacity:1; transform:none } }
@keyframes cumpleConfeti{ 0%,100%{ translate:0 0 } 50%{ translate:0 -6px } }
@media (prefers-reduced-motion:reduce){ .cumple-capa, .cumple-caja, .cumple-tarta span{ animation:none } }

/* Deslizar entre meses: el gesto horizontal es del calendario, el vertical de la página */
.cal-grid{ touch-action:pan-y }
.cal-entra-sig{ animation:calEntraSig .22s ease-out }
.cal-entra-ant{ animation:calEntraAnt .22s ease-out }
@keyframes calEntraSig{ from{ opacity:.3; transform:translateX(28px) } to{ opacity:1; transform:none } }
@keyframes calEntraAnt{ from{ opacity:.3; transform:translateX(-28px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ .cal-entra-sig, .cal-entra-ant{ animation:none } }