/* =========================================================
   LA AGENDA DEL PANEL (/panel/agenda) — public/js/panel-agenda.js
   Todo con el prefijo pag- y las variables de styles.css: la agenda tiene que
   sentirse la misma casa que el resto del panel.
   ========================================================= */

/* ---------- Un color por tipo ----------
   El color dice QUÉ es antes de leerlo: una entrega (dinero que entra) no se
   puede confundir de un vistazo con una llamada. `--pag-c` es el color fuerte
   (icono, borde) y `--pag-f` el fondo suave. Los tres últimos no son citas:
   vienen de su propia tabla. */
.pag-t-visita { --pag-c: #2563eb; --pag-f: #eff6ff; }
.pag-t-entrega { --pag-c: #15803d; --pag-f: #f0fdf4; }
.pag-t-taller { --pag-c: #b45309; --pag-f: #fffbeb; }
.pag-t-llamada { --pag-c: #7c3aed; --pag-f: #f5f3ff; }
.pag-t-papeles { --pag-c: #0f766e; --pag-f: #f0fdfa; }
.pag-t-otro { --pag-c: #475569; --pag-f: #f8fafc; }
.pag-t-prueba { --pag-c: #ea580c; --pag-f: #fff7ed; }
.pag-t-reserva_caduca { --pag-c: #be185d; --pag-f: #fdf2f8; }
.pag-t-seguimiento { --pag-c: #4338ca; --pag-f: #eef2ff; }

.pag { transition: opacity .15s; }
.pag.pag-cargando { opacity: .55; pointer-events: none; }
.pag-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Arriba: lo atrasado y lo de hoy ---------- */
.pag-arriba { margin-bottom: 1rem; }
.pag-arriba:empty { display: none; }
.pag-arriba.pn-dos { margin-top: 0; }
.pag-atrasado { border-color: #fecaca; background: linear-gradient(180deg, #fff5f5, var(--card) 70px); }
.pag-atrasado .pn-caja-cab h2 svg { color: var(--danger); }
.pag-atrasado .pn-caja-cab h2 { color: #991b1b; }
.pag-nada { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .92rem; padding: .3rem 0; }
.pag-nada svg { width: 18px; height: 18px; color: #cbd5e1; flex: none; }

/* ---------- Una cosa de la agenda, entera ---------- */
.pag-items { list-style: none; display: flex; flex-direction: column; }
.pag-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: .75rem; padding: .8rem 0; border-top: 1px solid var(--line); }
.pag-items > .pag-item:first-child { border-top: 0; padding-top: .2rem; }
.pag-hora { font-weight: 800; font-variant-numeric: tabular-nums; font-size: .95rem; padding-top: .1rem; color: var(--ink); }
.pag-sin-hora { font-weight: 600; font-size: .72rem; color: var(--muted); line-height: 1.25; }
.pag-tarde .pag-hora { color: var(--danger); }
.pag-cuerpo { min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.pag-l1 { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; min-width: 0; }
.pag-tipo { display: inline-flex; align-items: center; gap: .3rem; background: var(--pag-f); color: var(--pag-c); border-radius: 999px; padding: .12rem .55rem .12rem .45rem; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.pag-tipo svg { width: 14px; height: 14px; }
.pag-titulo { font-size: .98rem; min-width: 0; overflow-wrap: anywhere; }
.pag-meta { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .83rem; color: var(--muted); }
.pag-meta > * { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; }
.pag-meta svg { width: 14px; height: 14px; flex: none; }
.pag-meta a { color: var(--ink); font-weight: 600; }
.pag-meta a:hover { color: var(--accent); }
.pag-del { color: var(--danger); font-weight: 600; }
.pag-nota { font-size: .88rem; color: var(--ink); background: var(--bg); border-radius: 10px; padding: .4rem .6rem; overflow-wrap: anywhere; white-space: pre-line; }
.pag-cerrada .pag-titulo { color: var(--muted); text-decoration: line-through; text-decoration-color: #cbd5e1; }
.pag-cerrada .pag-hora, .pag-cerrada .pag-tipo { opacity: .6; }

.pag-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; margin-top: .2rem; }
.pag-contacto, .pag-botones { display: flex; flex-wrap: wrap; gap: .35rem; }
.pag-botones { margin-left: auto; }
.pag-acciones .btn svg { width: 15px; height: 15px; }
.pag-acciones .btn.pag-solo-ic, .pag-nav .pag-solo-ic { padding-left: .55rem; padding-right: .55rem; }
.pag-peligro:hover { color: var(--danger); border-color: #fecaca; background: #fff5f5; }
.pag-de-otro { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--muted); }
.pag-de-otro svg { width: 14px; height: 14px; }
@media (max-width: 520px) {
  .pag-item { grid-template-columns: 48px minmax(0, 1fr); gap: .6rem; }
  .pag-botones { margin-left: 0; }
}

/* ---------- La barra: vista, semana y vendedor ---------- */
.pag-barra { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; margin: 1.2rem 0 .8rem; }
.pag-barra .pn-chip { display: inline-flex; align-items: center; gap: .35rem; }
.pag-barra .pn-chip svg { width: 15px; height: 15px; }
.pag-nav { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.pag-nav .btn svg { width: 16px; height: 16px; margin: 0; }
.pag-rango { font-size: .95rem; margin-left: .35rem; white-space: nowrap; }
.pag-filtro { display: inline-flex; align-items: center; gap: .4rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0 .3rem 0 .6rem; color: var(--muted); max-width: 100%; }
.pag-filtro svg { width: 16px; height: 16px; flex: none; }
.pag-filtro select { border: 0; background: transparent; padding: .45rem .3rem; font-weight: 600; color: var(--ink); min-width: 0; max-width: 220px; cursor: pointer; }
.pag-filtro:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 106, 19, .15); }
.pag-filtro select:focus { outline: none; }
@media (max-width: 640px) {
  .pag-barra { gap: .6rem; }
  .pag-nav { width: 100%; }
  .pag-rango { margin-left: auto; font-size: .88rem; }
  .pag-filtro { width: 100%; }
  .pag-filtro select { max-width: none; flex: 1; }
}

/* ---------- La semana: siete columnas ---------- */
.pag-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.pag-dia { background: var(--card); border: 1px solid var(--line); border-radius: 14px; min-height: 190px; display: flex; flex-direction: column; min-width: 0; }
.pag-dia-cab { display: flex; align-items: baseline; gap: .3rem; padding: .5rem .55rem .45rem; border-bottom: 1px solid var(--line); position: relative; min-width: 0; }
.pag-dia-sem { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.pag-dia-num { font-size: 1.15rem; line-height: 1; font-variant-numeric: tabular-nums; }
.pag-dia-rel { display: none; font-size: .75rem; font-weight: 700; color: var(--accent-dark); }
.pag-dia-mas { margin-left: auto; align-self: center; width: 26px; height: 26px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; flex: none; opacity: .7; }
.pag-dia-mas svg { width: 15px; height: 15px; }
.pag-dia:hover .pag-dia-mas, .pag-dia-mas:focus-visible { opacity: 1; }
.pag-dia-mas:hover { background: var(--accent-soft); color: var(--accent); border-color: #ffd9c2; }
.pag-dia-items { display: flex; flex-direction: column; gap: 5px; padding: .45rem; flex: 1; min-width: 0; }
.pag-libre { color: #cbd5e1; font-size: .78rem; text-align: center; margin: auto 0; }
.pag-dia.pag-es-hoy { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pag-dia.pag-es-hoy .pag-dia-cab { background: var(--accent-soft); border-radius: 13px 13px 0 0; border-bottom-color: #ffd9c2; }
.pag-dia.pag-es-hoy .pag-dia-num, .pag-dia.pag-es-hoy .pag-dia-sem { color: var(--accent-dark); }
.pag-dia.pag-pasado { background: #fafbfd; }
.pag-dia.pag-pasado .pag-dia-num { color: var(--muted); }

.pag-chip { display: flex; flex-direction: column; gap: .05rem; width: 100%; text-align: left; background: var(--pag-f); border: 0; border-left: 3px solid var(--pag-c); border-radius: 8px; padding: .35rem .45rem; cursor: pointer; font: inherit; color: var(--ink); min-width: 0; transition: filter .12s, box-shadow .12s; }
.pag-chip:hover { filter: brightness(.97); box-shadow: 0 2px 8px -4px rgba(15, 23, 42, .35); }
.pag-chip:focus-visible { outline: 2px solid var(--pag-c); outline-offset: 1px; }
.pag-chip-l1 { display: flex; align-items: center; gap: .3rem; font-size: .74rem; color: var(--pag-c); min-width: 0; }
.pag-chip-l1 svg { width: 13px; height: 13px; flex: none; }
.pag-chip-l1 b { font-variant-numeric: tabular-nums; }
.pag-chip-tipo { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pag-chip-l1 b + .pag-chip-tipo { display: none; }   /* con hora, la hora manda; el tipo ya lo dicen el icono y el color */
.pag-chip-l2 { font-size: .8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pag-chip.pag-cerrada { opacity: .55; }
.pag-chip.pag-cerrada .pag-chip-l2 { text-decoration: line-through; }
.pag-chip.pag-tarde { box-shadow: inset 0 0 0 1px #fecaca; background: #fff5f5; }

/* Entre 900 y 1150 px, con el menú del panel al lado, siete columnas quedan
   justas: se aprieta el relleno antes que cortar los nombres. */
@media (max-width: 1150px) {
  .pag-dia-items { padding: .35rem; }
  .pag-chip { padding: .3rem .38rem; }
}

/* En el teléfono siete columnas son siete tiras de 40 px: la semana pasa a ser
   una lista de días, con el día a la izquierda y lo suyo a la derecha. */
@media (max-width: 900px) {
  .pag-semana { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pag-dia { min-height: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr); }
  .pag-dia-cab { flex-direction: column; align-items: center; justify-content: flex-start; gap: .1rem; border-bottom: 0; border-right: 1px solid var(--line); padding: .55rem .3rem; text-align: center; }
  .pag-dia.pag-es-hoy .pag-dia-cab { border-radius: 13px 0 0 13px; border-right-color: #ffd9c2; }
  .pag-dia-rel { display: block; font-size: .66rem; }
  .pag-dia-mas { margin: .25rem 0 0; opacity: 1; background: var(--bg); }
  .pag-dia-items { padding: .45rem; }
  .pag-libre { text-align: left; margin: auto 0; padding-left: .2rem; }
  .pag-chip { flex-direction: row; align-items: center; gap: .5rem; padding: .45rem .55rem; }
  .pag-chip-l1 { flex: none; }
  .pag-chip-l1 b + .pag-chip-tipo { display: inline; }
  .pag-chip-l2 { flex: 1; min-width: 0; }
}
@media (max-width: 400px) {
  .pag-chip-l1 b + .pag-chip-tipo { display: none; }
}

/* ---------- La lista: 30 días, agrupados por día ---------- */
.pag-lista { display: flex; flex-direction: column; gap: .8rem; }
.pag-grupo { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1.1rem; }
.pag-grupo.pag-es-hoy { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pag-grupo-tit { display: flex; align-items: center; gap: .5rem; font-size: .92rem; margin-bottom: .45rem; }
.pag-grupo-rel { color: var(--accent-dark); }
.pag-grupo-rel + span { color: var(--muted); font-weight: 600; }
.pag-grupo-tit b { margin-left: auto; background: var(--bg); color: var(--muted); border-radius: 999px; padding: 0 .5rem; font-size: .75rem; }
@media (max-width: 520px) { .pag-grupo { padding: .7rem .8rem; } }

/* ---------- Ventanas ---------- */
.pag-items-ventana .pag-item { padding-top: 0; }
.pag-form textarea { min-height: 76px; }
.pag-label { display: block; font-size: .82rem; font-weight: 600; color: var(--muted); margin-bottom: .35rem; }
.pag-pista { display: block; font-size: .74rem; color: var(--muted); margin-top: .25rem; }
.pag-form .field { margin-bottom: .75rem; }

/* El tipo de la cita: seis botones con su icono y su color, en vez de un
   desplegable. Se elige de un toque y se ve de un vistazo lo que se eligió. */
.pag-tipos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .4rem; }
.pag-tipo-op { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .6rem .3rem; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--muted); background: var(--card); text-align: center; transition: border-color .12s, background .12s, color .12s; min-width: 0; }
.pag-tipo-op span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pag-tipo-op svg { width: 20px; height: 20px; color: var(--pag-c); }
.pag-tipo-op input { position: absolute; opacity: 0; pointer-events: none; }
.pag-tipo-op:hover { border-color: #cbd5e1; }
.pag-tipo-op:has(input:checked) { border-color: var(--pag-c); background: var(--pag-f); color: var(--pag-c); box-shadow: 0 0 0 1px var(--pag-c); }
.pag-tipo-op:has(input:focus-visible) { outline: 2px solid var(--pag-c); outline-offset: 2px; }
@media (max-width: 640px) { .pag-tipos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }