/* El calendario de «Mi semana». Los colores salen de las variables de siempre y
   respetan su significado: el violeta es lo que el vendedor hace (una junta
   agendada), lo gris lo que ya pasó o se canceló. El naranja (freno, pendiente)
   y el magenta (el coach) no se usan aquí: el tipo de junta se distingue por
   su marca, no por un color que diga otra cosa. */
.calendario { margin-bottom: 16px; }

.cal-barra { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.cal-barra .subpestanas { margin: 0; }
.cal-navegar, .cal-saltar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cal-saltar select { width: auto; }
.cal-barra button[aria-disabled="true"] { opacity: .5; cursor: default; }
/* Con el prefijo del panel: `.panel h3` pesa más que una clase sola y le quitaría su tamaño, su color y su margen. */
.calendario .cal-titulo { font-size: 18px; color: var(--texto); margin: 10px 0 2px; }
.cal-cuerpo { margin-top: 8px; }
.cal-cuerpo:focus-visible { outline: none; }

/* El pedido de un periodo (o de un día) que no llegó: se dice y se ofrece reintentar. */
.cal-fallo, .cal-fallo-del-dia { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cal-fallo, .cal-fallo-del-dia:not(:empty) { margin: 0 0 8px; }
.cal-fallo p, .cal-fallo-del-dia p { margin: 0; color: var(--texto); font-size: 13px; }

/* La cuadrícula: siete columnas de lunes a domingo. Cada día es una sola celda
   que se alcanza con el tabulador (las flechas mueven entre ellas). */
.cal-fila { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-encabezado { padding: 4px 6px; font-size: 12px; font-weight: 600; color: var(--tenue); text-transform: uppercase; }
.cal-mes[aria-busy="true"] .cal-dia, .cal-semana[aria-busy="true"] .cal-columna { opacity: .6; }

.cal-dia, .cal-columna {
  min-width: 0; padding: 4px 6px; border: 1px solid var(--borde); margin: 0 -1px -1px 0; background: var(--superficie);
  cursor: pointer; display: grid; align-content: start; gap: 3px;
}
.cal-dia { min-height: 98px; }
.cal-dia:hover, .cal-columna:hover { background: var(--acento-suave); }
.cal-dia:focus-visible, .cal-columna:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; position: relative; }
.cal-vecino { background: var(--fondo); color: var(--tenue); }
/* Un día fuera del rango de juntas no admite ninguna: se ve apagado, como un control sin uso, y su nombre accesible lo dice. */
.cal-sin-alcance { opacity: .55; }
.cal-numero { font-size: 13px; font-weight: 600; justify-self: start; min-width: 22px; text-align: center; border-radius: 999px; padding: 0 4px; }
.cal-hoy .cal-numero { background: var(--acento); color: var(--fondo); }
/* Relativa: se pinta encima de las vecinas, que con el margen negativo de la cuadrícula le taparían el borde derecho y el de abajo. */
.cal-hoy { border-color: var(--acento); position: relative; }

/* Una junta en el mes: la marca de su tipo y «hora empresa». Cancelada va
   tachada y atenuada; realizada, con su palomita. */
.cal-renglon {
  display: flex; flex-wrap: wrap; gap: 0 4px; align-items: baseline; min-width: 0; font-size: 12px; line-height: 1.35;
  padding: 1px 4px; border-left: 3px solid var(--acento); background: var(--acento-suave); border-radius: 0 4px 4px 0;
}
.cal-marca { font-size: 10px; color: var(--acento); flex: none; }
.cal-texto { min-width: 0; flex: 1 1 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); }
.cal-hecha { color: var(--tenue); font-weight: 700; }
.cal-equipo { flex: 1 0 100%; font-size: 11px; color: var(--tenue); }
.cal-cancelada { opacity: var(--apagado); border-left: 3px dashed var(--tenue); background: none; }
.cal-cancelada .cal-texto, .cal-cancelada .cal-empresa { text-decoration: line-through; }
.cal-realizada { border-left-color: var(--tenue); background: none; }
.cal-realizada .cal-marca { color: var(--tenue); }
.cal-mas { font-size: 12px; font-weight: 600; color: var(--acento); }

/* La semana: siete columnas con TODAS las juntas del día. */
.cal-semana .cal-fila { align-items: stretch; }
.cal-columna { min-height: 160px; align-content: start; }
.cal-columna-titulo { display: flex; gap: 6px; align-items: baseline; color: var(--tenue); font-size: 12px; text-transform: uppercase; }
.cal-detalle { display: grid; gap: 1px; font-size: 13px; padding: 4px 6px; border-left: 3px solid var(--acento); background: var(--acento-suave); border-radius: 0 6px 6px 0; overflow-wrap: anywhere; }
.cal-detalle-cabeza { display: flex; gap: 6px; align-items: baseline; }
.cal-detalle .nota { font-size: 12px; }
.cal-empresa { font-weight: 600; }
.cal-detalle .cal-equipo { flex: none; }

/* El diálogo de un día, con su velo. */
.cal-velo {
  position: fixed; inset: 0; z-index: 50; display: flex; justify-content: center; align-items: flex-start;
  padding: 5vh 16px; overflow-y: auto; background: var(--velo);
}
.cal-caja {
  width: min(760px, 100%); background: var(--superficie); color: var(--texto); border: 1px solid var(--borde);
  border-radius: 10px; padding: 16px; box-shadow: 0 10px 40px var(--sombra);
}
.cal-caja:focus-visible { outline: 2px solid var(--acento); }
.cal-caja-cabecera { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-caja-cabecera h3 { margin: 0; font-size: 17px; color: var(--texto); }
.cal-oferta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.cal-oferta .cal-formulario { flex: 1 1 100%; border-top: 1px solid var(--borde); padding-top: 10px; }
.cal-formulario h4 { margin: 0 0 8px; font-size: 14px; color: var(--texto); }
.cal-formulario .acciones { display: flex; gap: 6px; flex-wrap: wrap; }
.cal-cuenta { margin-bottom: 8px; }

@media (max-width: 900px) {
  .cal-semana .cal-fila { grid-template-columns: 1fr; }
  .cal-columna { min-height: 0; }
  .cal-dia { min-height: 72px; }
}
.cal-titulo::first-letter, .cal-caja-cabecera h3::first-letter { text-transform: uppercase; }