/* ==========================================================================
   Don Esquite POS — MÓDULO AGENDA (Fase 5)
   Lista de eventos, tarjeta de evento y panel del punto de venta activo.
   ========================================================================== */

.eventos__lista {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  min-height: 0;
}

/* Encabezado de cada grupo (En curso / Próximos / Pasados) */
.eventos__grupo {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) 0 0;
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}
.eventos__grupo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

/* ==========================================================================
   TARJETA DE EVENTO
   ========================================================================== */
.evento {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: var(--sh-sm);
  text-align: left;
  width: 100%;
  animation: entraFila var(--t-normal) var(--ease-out) both;
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.evento:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); }
.evento:active { transform: translateY(0) scale(0.99); }

/* El día, como hoja de calendario */
.evento__fecha {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 56px; height: 60px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  flex-shrink: 0;
}
.evento__dia {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.evento__mes {
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.evento__cuerpo { min-width: 0; }
.evento__nombre {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.evento__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  margin-top: 3px;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.evento__meta span { display: inline-flex; align-items: center; gap: 5px; }
.evento__meta svg { width: 14px; height: 14px; }

.evento__acciones { display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0; }

/* Evento activo: se nota de lejos */
.evento[data-estado="activo"] {
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 2px var(--brand), var(--sh-sm);
}
.evento[data-estado="activo"] .evento__fecha { background: var(--brand); color: var(--on-brand); }
.evento[data-estado="activo"] .evento__mes { color: var(--on-brand); opacity: 0.85; }
.evento[data-estado="activo"] .evento__nombre { color: var(--brand-text); }

/* Ya pasó */
.evento[data-estado="cerrado"] { opacity: 0.66; }
.evento[data-estado="cerrado"]:hover { opacity: 1; }

/* Hoy */
.evento__hoy {
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--warning-soft);
  color: var(--warning);
  font-size: var(--text-2xs);
  font-weight: 800;
  white-space: nowrap;
}

/* ==========================================================================
   PANEL DEL PUNTO DE VENTA ACTIVO
   ========================================================================== */
.punto {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-4);
}

.punto__caja {
  padding: var(--s-5) var(--s-4);
  border-radius: var(--r-md);
  background: var(--surface-2);
  text-align: center;
}
.punto__caja--activo { background: var(--brand); color: var(--on-brand); box-shadow: var(--sh-brand); }
.punto__caja small {
  display: block;
  font-size: var(--text-2xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  opacity: 0.8;
}
.punto__caja strong {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: var(--text-xl); font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}
.punto__caja .punto__sub { font-size: var(--text-sm); font-weight: 500; opacity: 0.85; margin-top: 2px; }

.punto__dato {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.punto__dato svg { width: 17px; height: 17px; color: var(--text-muted); flex-shrink: 0; margin-top: 2px; }
.punto__dato small {
  display: block;
  font-size: var(--text-2xs); font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
}
.punto__dato span { font-size: var(--text-md); font-weight: 600; line-height: var(--leading-snug); }

/* ==========================================================================
   FORMULARIO DE EVENTO
   ========================================================================== */
.form-evento { display: flex; flex-direction: column; gap: var(--s-4); }
.form-evento__fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }

.form-evento input[type="datetime-local"] {
  font-variant-numeric: tabular-nums;
}

/* Cajeros asignados */
.cajeros-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cajero-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 6px;
  border-radius: var(--r-full);
  background: var(--brand-soft);
  color: var(--brand-text);
  font-size: var(--text-sm);
  font-weight: 700;
}
.cajero-chip__av {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: var(--r-full);
  background: var(--brand); color: var(--on-brand);
  font-size: 10px; font-weight: 800;
}
.cajero-chip button {
  display: grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: var(--r-full);
  color: currentColor;
  opacity: 0.6;
}
.cajero-chip button:hover { opacity: 1; }
.cajero-chip button svg { width: 12px; height: 12px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 920px) {
  .eventos__lista { padding: var(--s-3); padding-bottom: 92px; gap: var(--s-2); }
  .evento { grid-template-columns: 48px 1fr; gap: var(--s-3); padding: var(--s-3); }
  .evento__fecha { width: 48px; height: 52px; }
  .evento__nombre { font-size: var(--text-md); }
  .evento__acciones { grid-column: 1 / -1; justify-content: flex-end; }
  .form-evento__fila { grid-template-columns: 1fr; }

  #panelEvento {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 88dvh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    box-shadow: 0 -12px 44px rgba(0, 0, 0, 0.28);
    transform: translateY(101%);
    transition: transform var(--t-slow) var(--ease-out);
    z-index: 520;
    visibility: hidden;
  }
  #panelEvento.abierto { transform: translateY(0); visibility: visible; }
}

/* ==========================================================================
   TARJETA DE GOOGLE CALENDAR
   Vive debajo del punto de venta, en el panel derecho de la Agenda.
   ========================================================================== */
.cal-tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: var(--surface-1);
}

.cal-tarjeta__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.cal-tarjeta__head svg { width: 18px; height: 18px; flex: none; }

.cal-tarjeta__txt {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

.cal-tarjeta__txt code {
  font-family: var(--font-mono, monospace);
  font-size: 0.92em;
  padding: 1px 5px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-secondary);
}

/* Conectado: el borde verde se gana, no se regala. */
.cal-tarjeta--ok {
  border-color: var(--success-soft, var(--hairline));
  background: var(--success-softer, var(--surface-1));
}
.cal-tarjeta--ok .cal-tarjeta__head { color: var(--success-text, var(--text-primary)); }

/* Sin configurar: no es un error del usuario, así que no se pinta de rojo. */
.cal-tarjeta--apagada { opacity: 0.75; }

/* ==========================================================================
   SELECTOR DE PERSONAL DEL EVENTO
   Reemplaza al campo de texto libre donde se escribía el nombre a mano.
   ========================================================================== */
.selector-personal { position: relative; margin-top: var(--s-2); }

.selector-personal__btn {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  min-height: 44px;              /* objetivo táctil */
  padding: var(--s-2) var(--s-3);
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}

.selector-personal__btn:hover { border-color: var(--brand); background: var(--brand-softer); }
.selector-personal__btn > span { flex: 1; min-width: 0; }
.selector-personal__btn svg { width: 18px; height: 18px; flex: none; color: var(--text-muted); }

/* La flecha gira al abrir: dice si la lista está desplegada sin leer nada. */
.selector-personal__btn[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }
.selector-personal__btn svg:last-child { transition: transform var(--t-fast) var(--ease-out); }

.selector-personal__lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 260px;             /* con mucha gente, se hace scroll adentro */
  overflow-y: auto;
  margin-top: var(--s-2);
  padding: var(--s-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-0);
}

.selector-personal__lista[hidden] { display: none; }

.selector-personal__aviso {
  margin: 0;
  padding: var(--s-2);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .selector-personal__btn,
  .selector-personal__btn svg:last-child { transition: none; }
}

/* ==========================================================================
   CALENDARIO DEL MES  (panel grande de la Agenda)
   ========================================================================== */
.agenda-cal { padding: var(--s-3) var(--s-4) var(--s-4); }

.cal-mes { display: flex; flex-direction: column; gap: var(--s-3); height: 100%; }

.cal-mes__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.cal-mes__titulo {
  flex: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  text-transform: capitalize;
}

/* Una sola flecha en el set de iconos: la de "anterior" se voltea. */
.cal-mes__atras svg { transform: rotate(180deg); }

.cal-mes__semana,
.cal-mes__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.cal-mes__semana span {
  padding: 2px 0;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps, .08em);
  color: var(--text-muted);
}

.cal-mes__grid { flex: 1; grid-auto-rows: minmax(84px, 1fr); }

.cal-dia {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 0;
  padding: 4px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  overflow: hidden;
}

/* Los días de relleno del mes anterior y el siguiente no se esconden: quitarlos
   rompería la grilla. Se apagan para que no compitan con el mes de verdad. */
.cal-dia--fuera { background: transparent; border-color: transparent; }
.cal-dia--fuera .cal-dia__num { opacity: .35; }

.cal-dia--hoy { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.cal-dia--hoy .cal-dia__num { color: var(--brand-text); font-weight: 700; }

.cal-dia__num { font-size: var(--text-xs); color: var(--text-secondary); padding-left: 2px; }

.cal-dia__eventos {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
  min-height: 0;
}

/* --- el evento dentro de su día --- */
.cal-ev {
  display: flex;
  align-items: baseline;
  gap: 4px;
  width: 100%;
  padding: 3px 6px;
  border: 0;
  border-left: 3px solid var(--brand);
  border-radius: var(--r-sm);
  background: var(--brand-softer);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-xs);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}

.cal-ev:hover { background: var(--brand-soft); }
.cal-ev__hora { font-weight: 700; flex: none; }
.cal-ev__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cal-ev--activo { border-left-color: var(--success); background: var(--success-softer, var(--brand-softer)); }

/* Ya pasó: gris y apagado, pero se sigue pudiendo abrir para consultarlo. */
.cal-ev--cerrado {
  border-left-color: var(--text-faint, var(--hairline));
  background: var(--surface-2);
  color: var(--text-muted);
  opacity: .65;
}
.cal-ev--cerrado .cal-ev__nombre { text-decoration: line-through; }
.cal-ev--cerrado:hover { opacity: .85; background: var(--surface-2); }

.cal-mes__vacio {
  margin: 0;
  padding: var(--s-3);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

/* ==========================================================================
   PRÓXIMOS EVENTOS  (panel derecho)
   ========================================================================== */
.proximos { display: flex; flex-direction: column; gap: var(--s-2); }

.proximo {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-1);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out);
}

.proximo:hover { border-color: var(--brand); }
.proximo[data-estado="activo"] { border-color: var(--success); background: var(--success-softer, var(--surface-1)); }

.proximo__fecha {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 42px;
  flex: none;
  padding: 4px 0;
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  color: var(--brand-text);
}

.proximo__dia { font-size: var(--text-lg); font-weight: 700; line-height: 1; }
.proximo__mes { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }

.proximo__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.proximo__nombre {
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.proximo__meta { font-size: var(--text-xs); color: var(--text-muted); }
.proximo__lugar {
  display: flex; align-items: center; gap: 4px;
  font-size: var(--text-xs); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.proximo__lugar svg { width: 12px; height: 12px; flex: none; }

.proximos__vacio {
  margin: 0 0 var(--s-4);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--text-muted);
  text-align: center;
}

/* El punto de venta pasó a segundo plano: sigue estando, pero ya no es lo
   primero que se ve en este panel. */
.punto--compacto { margin-top: var(--s-4); }

@media (max-width: 900px) {
  .cal-mes__grid { grid-auto-rows: minmax(64px, 1fr); }
  .cal-ev__hora { display: none; }
}

/* ==========================================================================
   SELECTOR DE FECHA Y HORA  (reemplaza al datetime-local del navegador)
   ========================================================================== */
.fechahora { position: relative; }

.fechahora__btn {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-0);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out);
}

.fechahora__btn:hover,
.fechahora__btn[aria-expanded="true"] { border-color: var(--brand); }
.fechahora__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.fechahora__txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fechahora__btn svg { width: 18px; height: 18px; flex: none; color: var(--text-muted); }
.fechahora--vacio .fechahora__txt { color: var(--text-muted); }

.fechahora__panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  min-width: 320px;
  padding: var(--s-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  /* `--surface-1` es el fondo de tarjeta; `--surface-0` es el de la app
     (#eef0f4 en claro), y con ése el calendario se veía gris y sucio sobre
     un panel blanco. En oscuro no se notaba porque los dos son oscuros. */
  background: var(--surface-1);
  box-shadow: var(--sombra-lg, 0 12px 40px rgba(0, 0, 0, .18));
}

.fechahora__velo { display: none; }
.fechahora__velo[hidden] { display: none; }

.fechahora__panel[hidden] { display: none; }

/* EN EL CELULAR EL PANEL SE SUELTA DE LA PÁGINA.
   Colgado del campo con `position: absolute`, cualquier contenedor con
   scroll o con overflow lo recorta: en el Historial el calendario salía
   cortado a la mitad, porque el panel del módulo se desplaza. `fixed` lo
   saca de esa caja y lo centra en la pantalla, que además es como se
   comportan los selectores del sistema en un teléfono. */
@media (max-width: 720px) {
  .fechahora__panel {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    min-width: 0;
    width: min(92vw, 360px);
    max-height: 85vh;
    overflow-y: auto;
    z-index: 960;                /* por encima de la barra y de los paneles */
  }

  /* Un velo detrás, para que se lea que lo de atrás está esperando. Va como
     elemento aparte y por debajo del panel; tocarlo cierra el calendario. */
  .fechahora__velo:not([hidden]) {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 959;
  }
}

.fh-cuerpo { display: flex; gap: var(--s-3); }

/* --- calendario --- */
.fh-cal { flex: 1; min-width: 0; }

.fh-cal__head { display: flex; align-items: center; gap: var(--s-1, 4px); margin-bottom: var(--s-2); }
.fh-cal__titulo {
  flex: 1;
  text-align: center;
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: capitalize;
}
.fh-atras svg { transform: rotate(180deg); }

.fh-cal__semana,
.fh-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

.fh-cal__semana span {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  padding-bottom: 2px;
}

.fh-dia {
  aspect-ratio: 1;
  min-height: 30px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}

.fh-dia:hover { background: var(--surface-2); }
.fh-dia--fuera { color: var(--text-faint, var(--text-muted)); opacity: .45; }
.fh-dia--hoy { box-shadow: inset 0 0 0 1.5px var(--brand); font-weight: 700; }
.fh-dia[aria-pressed="true"] { background: var(--brand); color: #fff; font-weight: 700; }
.fh-dia[aria-pressed="true"]:hover { background: var(--brand); }

/* --- hora y minutos --- */
.fh-hora { display: flex; gap: 4px; }

.fh-hora__col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 48px;
  max-height: 232px;      /* deja ver ~7 filas: se entiende que hay más abajo */
  overflow-y: auto;
  padding-right: 2px;
  border-left: 1px solid var(--hairline);
  padding-left: 4px;
}

.fh-num {
  flex: none;
  padding: 5px 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}

.fh-num:hover { background: var(--surface-2); }
.fh-num[aria-pressed="true"] { background: var(--brand); color: #fff; font-weight: 700; }

.fh-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
}

@media (prefers-reduced-motion: reduce) {
  .fechahora__btn, .fh-dia, .fh-num { transition: none; }
}

/* ==========================================================================
   RETORNO DE INVENTARIO AL CERRAR UN EVENTO
   ========================================================================== */
.retorno {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 340px;
  overflow-y: auto;
  margin-top: var(--s-3);
  padding-right: 2px;
}

.retorno__fila {
  display: grid;
  grid-template-columns: 1fr 96px 34px;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2);
  border-radius: var(--r-sm);
  background: var(--surface-1);
}

.retorno__nombre {
  font-size: var(--text-sm);
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.retorno__cant { text-align: right; font-variant-numeric: tabular-nums; min-height: 40px; }
.retorno__unidad { font-size: var(--text-xs); color: var(--text-muted); }