/* =====================================================================
   Contenedores 2000 - estilos base
   ===================================================================== */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../vendor/fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../vendor/fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../vendor/fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../vendor/fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../vendor/fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  --brand-dark: #085041;
  --brand-green: #1D9E75;
  --brand-green-soft: #e6f5ef;
  --brand-danger: #c1432b;
  --brand-warning: #d99a2b;
  --sidebar-width: 250px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  /* Red de seguridad: si algún elemento se pasa de ancho por error, que
     se recorte en vez de arrastrar a toda la página (y con ella, al
     menú lateral del móvil) a ensancharse más de lo que cabe en pantalla.
     No afecta a las zonas con su propio scroll horizontal a propósito
     (como el calendario), solo evita que la PÁGINA ENTERA se desborde. */
  overflow-x: hidden;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: #f4f7f6;
  color: #17281f;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, h5, h6, .fw-brand { font-weight: 700; }
.text-brand { color: var(--brand-dark); }
.bg-brand { background-color: var(--brand-dark) !important; }
.bg-brand-green { background-color: var(--brand-green) !important; }
.btn-brand {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
  color: #fff;
}
.btn-brand:hover, .btn-brand:focus { background-color: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-outline-brand {
  border-color: var(--brand-green);
  color: var(--brand-dark);
}
.btn-outline-brand:hover { background-color: var(--brand-green); color: #fff; }

a { color: var(--brand-dark); }

/* ---------------------------------------------------------------------
   LOGIN
   --------------------------------------------------------------------- */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--brand-dark), var(--brand-green));
  padding: 1rem;
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 18px;
  padding: 2rem 1.75rem;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.login-logo {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 1.4rem;
  margin: 0 auto 1rem;
}

/* ---------------------------------------------------------------------
   LAYOUT ADMIN (sidebar)
   --------------------------------------------------------------------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-width);
  background: var(--brand-dark);
  color: #dff2ea;
  flex-shrink: 0;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  overflow-y: auto;
  z-index: 1040;
  transition: transform .25s ease;
}
.sidebar .brand {
  display: flex; align-items: center; gap: .6rem;
  padding: 1.1rem 1.2rem;
  color: #fff;
  font-weight: 800;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.sidebar .brand .logo-mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--brand-green);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
}
.sidebar nav { padding: .75rem 0; }
.sidebar .nav-link {
  color: #cfe9de;
  padding: .65rem 1.2rem;
  display: flex; align-items: center; gap: .7rem;
  border-left: 3px solid transparent;
  font-weight: 500;
  font-size: .95rem;
}
.sidebar .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar .nav-link.active {
  background: rgba(255,255,255,.1);
  color: #fff;
  border-left-color: var(--brand-green);
  font-weight: 600;
}
.sidebar .nav-link .icon { width: 20px; text-align: center; }
.sidebar .nav-footer {
  padding: 1rem 1.2rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .8rem;
  color: #a9d3c3;
}

.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-width: 0;
  padding: 1.25rem 1.5rem 3rem;
}

.topbar-mobile {
  display: none;
  align-items: center;
  justify-content: space-between;
  background: var(--brand-dark);
  color: #fff;
  padding: .7rem 1rem;
  position: sticky; top: 0; z-index: 1030;
}
.topbar-mobile button { color: #fff; background: transparent; border: none; font-size: 1.4rem; }

.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1035;
}

@media (max-width: 991.98px) {
  /* El menú lateral, en vez de "esconderse fuera de la pantalla" con
     transform (que depende de que el navegador calcule bien el ancho
     real de toda la página — y si algo más se desborda, como una tabla
     ancha sin su propio scroll, el cálculo sale mal y el menú se queda
     visible ocupando sitio), directamente DEJA DE EXISTIR en el flujo
     de la página con display:none. Así es imposible que ocupe espacio,
     pase lo que pase en el resto de la pantalla. */
  .sidebar { display: none; }
  .sidebar.open { display: block; }
  /* El fallo real de "el topbar ocupa la mitad de la pantalla": .app-shell
     es un flex EN FILA, y .topbar-mobile es hermano directo de
     .main-content dentro de ese flex -- en fila, se repartían el ancho
     entre los dos en vez de que el topbar quedara arriba del todo y el
     contenido debajo. En columna, cada uno ocupa su fila entera. */
  .app-shell { flex-direction: column; }
  .main-content { margin-left: 0; padding: 1rem .85rem 2.5rem; width: 100%; }
  .topbar-mobile { display: flex; width: 100%; }
  .sidebar-backdrop.show { display: block; }
}

@media (max-width: 767.98px) {
  /* El calendario (vista día) se desplaza en horizontal por las columnas
     de cada chófer: las hacemos algo más estrechas y con scroll táctil
     suave, en vez de intentar meterlas todas apretadas. */
  .cal-grid { -webkit-overflow-scrolling: touch; }
  .driver-col { min-width: 200px; flex-basis: 200px; }

  /* Los checkbox/radio "en línea" (días de la semana, tipo de repetición...)
     necesitan más aire para no fallar al tocarlos con el dedo. */
  .form-check-inline { margin-right: .9rem; margin-bottom: .4rem; }

  /* Los botones del pie de los modales (Eliminar, Guardar...) se apilan
     a ancho completo en vez de quedar en una fila apretada. */
  .modal-footer { flex-direction: column-reverse; align-items: stretch; }
  .modal-footer > * { margin: 0 0 .4rem 0 !important; width: 100%; }
  .modal-footer > div { display: flex; flex-direction: column; gap: .4rem; width: 100%; }

  /* Las alertas de alquiler (Dashboard) llevan un grupo de insignia +
     "Registrar cobro" + "Reiniciar alerta" que, si no puede partirse en
     varias líneas, obliga a toda la tarjeta (y arrastra a toda la
     página) a ensancharse más de lo que cabe en el móvil — el síntoma
     es que el menú lateral deja de esconderse, como si el navegador
     "viera" la pantalla más ancha de lo que es. Dejamos que ese grupo
     también se parta en líneas, y apilamos todo en vertical, a ancho
     completo, para que quepa siempre sin forzar nada. */
  .alert-rental { flex-direction: column; align-items: stretch !important; }
  .alert-rental > div:last-child { flex-wrap: wrap; }
  .alert-rental form { width: 100%; }
  .alert-rental form button { width: 100%; }
}

/* ---------------------------------------------------------------------
   TARJETAS / PANELES GENERALES
   --------------------------------------------------------------------- */
.card { border: 1px solid #e4ece8; border-radius: 14px; }
.card-header { background: #fff; border-bottom: 1px solid #e4ece8; font-weight: 700; color: var(--brand-dark); }
.stat-card { border-radius: 14px; padding: 1.1rem 1.25rem; background: #fff; border: 1px solid #e4ece8; }
.stat-card .stat-value { font-size: 1.8rem; font-weight: 800; color: var(--brand-dark); }
.stat-card .stat-label { color: #5b6f66; font-size: .85rem; }

.badge-libre { background: var(--brand-green-soft); color: var(--brand-green); }
.badge-ocupado { background: #fdecea; color: var(--brand-danger); }
.badge-pendiente { background: #fdf3e0; color: var(--brand-warning); }
.badge-baja { background: #e9e9e9; color: #666; }

.alert-rental { border-left: 4px solid var(--brand-danger); background: #fff5f4; }
.alert-rental.level-1 { border-left-color: var(--brand-warning); background: #fffaf0; }
.alert-truck { border-left: 4px solid var(--brand-dark); background: #f1f7f5; }

/* ---------------------------------------------------------------------
   CALENDARIO (vista admin, columnas por chófer)
   --------------------------------------------------------------------- */
.cal-toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.cal-grid { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 1rem; align-items: flex-start; }
.driver-col {
  background: #fff;
  border: 1px solid #e4ece8;
  border-radius: 14px;
  min-width: 230px;
  flex: 1 0 230px;
  display: flex;
  flex-direction: column;
}
.driver-col.on-absence { opacity: .55; }
.driver-col-header {
  padding: .7rem .9rem;
  border-bottom: 3px solid var(--driver-color, var(--brand-green));
  border-radius: 14px 14px 0 0;
}
.driver-col-header .driver-name { font-weight: 700; color: var(--brand-dark); }
.driver-col-header .driver-hours { font-size: .8rem; color: #5b6f66; }
.driver-col-body {
  position: relative;
  min-height: 900px; /* 06:00 - 22:00 en incrementos */
  background-image: repeating-linear-gradient(to bottom, #f0f4f2 0, #f0f4f2 1px, transparent 1px, transparent 60px);
}
.hour-label {
  position: absolute; left: 0; font-size: .68rem; color: #9db3aa;
  padding-left: 4px; width: 100%; pointer-events: none;
}
.service-block {
  position: absolute;
  left: 6px; right: 6px;
  border-radius: 8px;
  padding: .35rem .5rem;
  font-size: .78rem;
  color: #fff;
  background: var(--driver-color, var(--brand-green));
  overflow: hidden;
  cursor: grab;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.service-block.status-hecho { opacity: .55; }
.service-block .svc-type { font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; gap: 4px; }
.service-block .svc-albaran { font-weight: 400; font-size: .68rem; opacity: .85; white-space: nowrap; }
.service-block .svc-client { display: block; opacity: .9; }
.service-block.dragging { opacity: .4; }
.driver-col-body.drag-over { background-color: #eaf7f1; }
.unassigned-col .driver-col-header { border-bottom-color: #b7c6c0; }

/* ---------------------------------------------------------------------
   VISTA CHÓFER (móvil, lista vertical)
   --------------------------------------------------------------------- */
.driver-app-header {
  background: var(--brand-dark);
  color: #fff;
  padding: 1rem 1.1rem 1.4rem;
  border-radius: 0 0 18px 18px;
}
.driver-service-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e4ece8;
  padding: 1rem;
  margin-bottom: .9rem;
  box-shadow: 0 2px 10px rgba(8,80,65,.06);
}
.driver-service-card .time-badge {
  font-weight: 800; color: var(--brand-dark); font-size: 1.05rem;
}
.driver-service-card.done { opacity: .6; }
.driver-service-card .action-btn { min-width: 44px; min-height: 44px; }
.driver-tabbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #fff; border-top: 1px solid #e4ece8;
  display: flex; z-index: 1030;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.driver-tabbar a {
  flex: 1; text-align: center; padding: .6rem 0; font-size: .75rem;
  color: #5b6f66; text-decoration: none;
}
.driver-tabbar a.active { color: var(--brand-green); font-weight: 700; }
.offline-banner {
  background: var(--brand-warning); color: #221a00; text-align: center;
  font-size: .8rem; padding: .35rem; display: none;
}
.offline-banner.show { display: block; }

/* Botones grandes táctiles */
.btn-touch { min-height: 46px; font-weight: 600; }

@media (max-width: 575.98px) {
  .stat-card .stat-value { font-size: 1.5rem; }
}