/* ============================================================
   agenda.css  –  Pantalla de agendamiento
   Depende de: base.css (variables, reset, fuentes)
   FullCalendar se sobreescribe al final de este archivo
   ============================================================ */

/* ── LAYOUT ──────────────────────────────────────────────── */
.ag-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 16px 80px;
}

.ag-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 768px) {
  .ag-grid {
    grid-template-columns: 1fr;
  }
}

/* ── TARJETA BASE ────────────────────────────────────────── */
.ag-card {
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.ag-card-head {
  background: var(--c-card);
  border-bottom: 1.5px solid var(--c-border);
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.ag-card-head i {
  font-size: 17px;
  color: var(--c-accent);
}

.ag-card-head span {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--c-text);
}

.ag-body {
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

/* ── CAMPOS DEL FORMULARIO ───────────────────────────────── */
/* Reutiliza .base-label, .base-input, .base-select de base.css */

.ag-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Dos campos en fila (fecha+hora, placa+celular, etc.) */
.ag-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Campo "Otros" que aparece dinámicamente */
.ag-empresa-otro {
  margin-top: 6px;
}

/* ── BOTÓN AGENDAR ───────────────────────────────────────── */
/* Reutiliza .op-cta-btn.accent de base.css */
.ag-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 58px;
  background: var(--c-accent);
  color: #000;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 4px;
  transition: background var(--trans), transform .1s;
  -webkit-user-select: none;
  user-select: none;
}
.ag-submit-btn:hover  { background: var(--c-accent-dk); }
.ag-submit-btn:active { transform: scale(.97); background: var(--c-accent-dk); }
.ag-submit-btn i      { font-size: 22px; }

/* ── LEYENDA DEL CALENDARIO ──────────────────────────────── */
.ag-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid var(--c-border);
}

.ag-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.ag-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.ag-legend-dot.cargue   { background: #1e2a4a; border: 1px solid var(--c-accent2); }
.ag-legend-dot.descargue { background: #2a2010; border: 1px solid var(--c-accent); }

/* ── SOBREESCRITURA DE FULLCALENDAR ──────────────────────── */
/*
  FullCalendar tiene sus propios colores claros.
  Los sobreescribimos para que encaje con el sistema oscuro.
*/
#calendar {
  --fc-border-color:        var(--c-border);
  --fc-daygrid-event-dot-width: 8px;
  --fc-today-bg-color:      rgba(245, 166, 35, .12);
  --fc-neutral-bg-color:    var(--c-card);
  --fc-page-bg-color:       var(--c-surface);
  --fc-highlight-color:     rgba(59, 130, 246, .15);

  /* Texto */
  --fc-event-text-color:    #fff;
  color: var(--c-text);
}

/* Header del calendario (mes, botones prev/next) */
.fc .fc-toolbar {
  padding: 4px 0 12px;
  gap: 8px;
  flex-wrap: wrap;
}

.fc .fc-toolbar-title {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-text);
}

.fc .fc-button {
  background: var(--c-card) !important;
  border: 1.5px solid var(--c-border) !important;
  color: var(--c-muted) !important;
  font-family: var(--font-head) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  border-radius: var(--radius-sm) !important;
  padding: 6px 14px !important;
  box-shadow: none !important;
  transition: border-color var(--trans), color var(--trans) !important;
}

.fc .fc-button:hover {
  border-color: var(--c-accent) !important;
  color: var(--c-accent) !important;
}

.fc .fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background: var(--c-border) !important;
  color: var(--c-text) !important;
}

/* Cabecera de días (L M X J V S D) */
.fc .fc-col-header-cell {
  background: var(--c-card);
  border-color: var(--c-border) !important;
  padding: 6px 0;
}

.fc .fc-col-header-cell-cushion {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-muted);
  text-decoration: none;
}

/* Celdas de días */
.fc .fc-daygrid-day {
  background: var(--c-surface);
  border-color: var(--c-border) !important;
  transition: background var(--trans);
}

.fc .fc-daygrid-day:hover {
  background: var(--c-card);
}

.fc .fc-daygrid-day-number {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--c-muted);
  text-decoration: none;
  padding: 4px 6px;
}

/* Día de hoy */
.fc .fc-day-today {
  background: rgba(245, 166, 35, .08) !important;
}

.fc .fc-day-today .fc-daygrid-day-number {
  background: var(--c-accent);
  color: #000;
  border-radius: 6px;
  padding: 2px 7px;
}

/* Eventos: cargue = azul, descargue = naranja */
.fc .fc-event {
  border: none !important;
  border-radius: 4px !important;
  font-family: var(--font-head) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  padding: 1px 5px !important;
  cursor: pointer;
}

.fc .fc-event.cargue-event {
  background: #1e2a4a !important;
  color: var(--c-accent2) !important;
  border-left: 3px solid var(--c-accent2) !important;
}

.fc .fc-event.descargue-event {
  background: #2a2010 !important;
  color: var(--c-accent) !important;
  border-left: 3px solid var(--c-accent) !important;
}

/* Scroll en la vista de lista */
.fc .fc-list-event:hover td {
  background: var(--c-card) !important;
}

.fc .fc-list-day-cushion {
  background: var(--c-card) !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--c-muted) !important;
  font-size: 12px !important;
}