/* =============================================================================
   Agendas — estilos.
   Pensado primero para ESCRITORIO: el contenido vive en un contenedor de
   ancho máximo 1180px centrado; la matriz usa columnas por empleado. En
   pantallas angostas todo colapsa a una columna sin romperse.
   ========================================================================== */

:root {
  --fondo: #f6f7f9;
  --superficie: #ffffff;
  --borde: #e3e6ea;
  --texto: #1d2530;
  --texto-suave: #6a7686;
  --primario: #2f6fed;
  --primario-oscuro: #2258c4;
  --peligro: #c0392b;
  /* Colores de la matriz por nivel de preferencia (Smart Slots) */
  --nivel-1: #2e9e5b;      /* verde: horario preferido */
  --nivel-2: #d9a514;      /* ámbar */
  --nivel-3: #d97b14;      /* naranja */
  --nivel-null: #9aa4b1;   /* gris: libre sin preferencia */
  --radio: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--fondo);
  color: var(--texto);
}

.oculto { display: none !important; }

/* --- Contenedor de escritorio -------------------------------------------- */
.contenedor {
  max-width: 1180px;        /* ancho cómodo en monitores de escritorio */
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Pantalla de acceso ---------------------------------------------------- */
.pantalla-centrada {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 28px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

.tarjeta-acceso { width: 400px; max-width: 92vw; }
.tarjeta-acceso h1 { margin: 0 0 4px; }
.subtitulo { margin: 0 0 18px; color: var(--texto-suave); }

.pestanas { display: flex; gap: 6px; margin-bottom: 16px; }
.pestana {
  flex: 1; padding: 8px; border: 1px solid var(--borde);
  background: var(--fondo); border-radius: 8px; cursor: pointer;
}
.pestana.activa { background: var(--primario); color: #fff; border-color: var(--primario); }

/* --- Formularios ----------------------------------------------------------- */
.formulario { display: flex; flex-direction: column; gap: 12px; }
.formulario label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.formulario input, .formulario select {
  padding: 9px 10px; border: 1px solid var(--borde);
  border-radius: 8px; font-size: 14px; background: #fff;
}

/* Variante en línea (jornadas, alta de usuario): campos lado a lado en
   escritorio, apilados en móvil */
.formulario-inline {
  flex-direction: row; align-items: flex-end; flex-wrap: wrap; gap: 14px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 16px; margin-bottom: 18px;
}
.formulario-inline label { min-width: 140px; }

.boton-primario {
  padding: 10px 16px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--primario); color: #fff; font-size: 14px;
}
.boton-primario:hover { background: var(--primario-oscuro); }
.boton-secundario {
  padding: 8px 14px; border: 1px solid var(--primario); border-radius: 8px;
  background: #fff; color: var(--primario); cursor: pointer; font-size: 13px;
}
.boton-plano {
  padding: 8px 12px; border: 0; background: none; color: var(--texto-suave);
  cursor: pointer; font-size: 13px;
}
.boton-peligro { color: var(--peligro); }

.mensaje-error {
  color: var(--peligro); font-size: 14px; margin-top: 10px;
}
.aviso { color: var(--texto-suave); }

/* --- Cabecera --------------------------------------------------------------- */
.cabecera {
  background: var(--superficie); border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 5;
}
.cabecera-inner {
  display: flex; align-items: center; gap: 22px; height: 58px;
}
.logo { font-weight: 700; font-size: 18px; }
.nav { display: flex; gap: 4px; flex: 1; }
.nav-item {
  border: 0; background: none; padding: 8px 12px; border-radius: 8px;
  cursor: pointer; font-size: 14px; color: var(--texto-suave);
}
.nav-item.activa { background: var(--fondo); color: var(--texto); font-weight: 600; }
.usuario-zona { display: flex; align-items: center; gap: 10px; font-size: 14px; }

/* --- Paneles ---------------------------------------------------------------- */
.panel { padding: 26px 0 60px; }
.barra-panel {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; gap: 12px; flex-wrap: wrap;
}
.barra-panel h2 { margin: 0; font-size: 20px; }
.controles { display: flex; gap: 10px; align-items: center; }
.controles input[type="date"] {
  padding: 8px; border: 1px solid var(--borde); border-radius: 8px;
}

/* --- Leyenda y chips de nivel ------------------------------------------------ */
.leyenda { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.chip {
  font-size: 12px; color: #fff; padding: 3px 10px; border-radius: 999px;
}
.chip.nivel-1, .franja.nivel-1 { background: var(--nivel-1); }
.chip.nivel-2, .franja.nivel-2 { background: var(--nivel-2); }
.chip.nivel-3, .franja.nivel-3 { background: var(--nivel-3); }
.chip.nivel-null, .franja.nivel-null { background: var(--nivel-null); }

/* --- Matriz de disponibilidad -------------------------------------------------
   Rejilla de columnas por empleado; cada columna lista sus franjas de 1 h.
   En escritorio caben varias columnas; en móvil colapsa a una. */
.matriz {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}
.columna-empleado {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 14px;
}
.columna-empleado h4 { margin: 0 0 2px; font-size: 15px; }
.estado-sync { font-size: 12px; color: var(--texto-suave); margin: 0 0 10px; }
.franja {
  color: #fff; border-radius: 7px; padding: 7px 10px; font-size: 13px;
  margin-bottom: 6px; cursor: pointer; border: 0; width: 100%; text-align: left;
}
.franja:hover { filter: brightness(.93); }

/* --- Listas (citas, jornadas, equipo) --------------------------------------- */
.lista { display: flex; flex-direction: column; gap: 10px; }
.item-lista {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
.item-lista .principal { font-weight: 600; }
.item-lista .secundario { color: var(--texto-suave); font-size: 13px; }
.item-lista.cancelada { opacity: .55; text-decoration: line-through; }

.etiqueta-rol {
  font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  background: var(--fondo); border: 1px solid var(--borde);
  padding: 2px 8px; border-radius: 999px; color: var(--texto-suave);
}

/* Sub-lista de preferencias dentro de una jornada */
.prefs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; width: 100%; }
.pref-mini {
  font-size: 12px; color: #fff; padding: 3px 8px; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 6px;
}
.pref-mini button { border: 0; background: none; color: #fff; cursor: pointer; padding: 0; }
.form-pref { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.form-pref input, .form-pref select {
  padding: 5px 7px; border: 1px solid var(--borde); border-radius: 6px; font-size: 13px;
}

/* --- Modal -------------------------------------------------------------------- */
.modal {
  position: fixed; inset: 0; background: rgba(20,26,35,.45);
  display: flex; align-items: center; justify-content: center; z-index: 20;
}
.modal-tarjeta { width: 440px; max-width: 94vw; }

/* --- Ajustes para pantallas angostas ------------------------------------------ */
@media (max-width: 720px) {
  .cabecera-inner { flex-wrap: wrap; height: auto; padding: 10px 0; }
  .formulario-inline { flex-direction: column; align-items: stretch; }
}