/* ====== Base ====== */
:root{
  --bg: #0c0f14;
  --card: #10151d;
  --muted: #94a3b8;
  --text: #e6edf7;
  --primary: #10d320;
  --primary-2: #0aa51a;
  --soft: #3b82f6;
  --soft-2: #2563eb;
  --warn: #f59e0b;
  --warn-2: #d97706;
  --ghost: #1f2937;
  --border: #233043;
  --ring: #3b82f680;
  --shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.02) inset;
  --radius: 18px;

  /* fondo estándar para campos oscuros */
  --field-bg: #0e141d;

  /* Sugerir a los navegadores UI oscura en controles nativos */
  color-scheme: dark;
}

*{ box-sizing: border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 0% 0%, #142133 0%, transparent 60%),
    radial-gradient(900px 400px at 100% 0%, #1a2940 0%, transparent 60%),
    var(--bg);
}

/* ====== Layout ====== */
.container{
  width: min(1100px, 92vw);
  margin: 28px auto;
}
h1{
  margin: 0 0 4px;
  font-weight: 800;
  letter-spacing: .3px;
  font-size: clamp(26px, 2.6vw, 36px);
}
.subtitle{ color: var(--muted); margin: 4px 0 0 }

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}
.card-title{
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
}

.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px }
.grid-3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px }
@media (max-width: 900px){
  .grid-3,.grid-2{ grid-template-columns: 1fr }
}

/* ====== Fields ====== */
.field{ display:flex; flex-direction: column; gap: 8px }
.label{ font-weight: 600; color: #cbd5e1 }
.hint{ color: var(--muted) }

/* Input base (siempre oscuro y texto blanco) */
.input{
  width: 100%;
  padding: 12px 14px;
  background: var(--field-bg) !important;
  border: 1px solid #213047;
  border-radius: 14px;
  color: #fff !important;
  outline: none;
  transition: border .2s, box-shadow .2s, background .2s;
}
.input::placeholder{ color: #8da2b8 !important }
.input:focus{ border-color: var(--soft); box-shadow: 0 0 0 4px var(--ring) }
.input.read{ background: #0b1118 !important; color:#fff !important }

/* Mini input (para tablas/compacto) */
.input.mini{
  padding: 9px 12px;
  border-radius: 12px;
}

/* Forzar estilo cuando el valor se llena por JS o autofill */
.input[readonly],
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus{
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
  caret-color: #fff !important;
  background: var(--field-bg) !important;
  /* cubrir el amarillo de autofill con el color del campo */
  box-shadow: 0 0 0px 1000px var(--field-bg) inset !important;
  transition: background-color 9999s ease-in-out 0s !important;
}

/* Selección/combos (siempre oscuros y texto blanco) */
.row-combo{ display:flex; gap: 10px; align-items: center }
.mini-combo{
  min-width: 84px;
  padding: 10px 8px;
  border-radius: 12px;
  background: var(--field-bg) !important;
  border: 1px solid #213047;
  color: #fff !important;
  font-weight: 700;
  text-align: center;
  outline: none;
}
.mini-combo:focus{ border-color: var(--soft); box-shadow: 0 0 0 4px var(--ring) }

/* ====== SearchSelect ====== */
.ss{ position: relative }
.ss-inputwrap{ position: relative }
.ss-input{
  width: 100%;
  padding: 12px 14px;
  background: var(--field-bg) !important;
  border: 1px solid #213047;
  border-radius: 14px;
  color: #fff !important;
  outline: none;
}
.ss-input::placeholder{ color: #8da2b8 !important }
.ss-input.readonly{ font-size: .95rem }
.ss-input:focus{ border-color: var(--soft); box-shadow: 0 0 0 4px var(--ring) }
.ss-list{
  position: absolute; left:0; right:0; top: calc(100% + 6px);
  background: #0d121a;
  border: 1px solid #213047;
  border-radius: 14px;
  max-height: 220px; overflow: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  z-index: 10;
}
.ss-item{
  padding: 10px 12px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.03);
  color: #fff;
}
.ss-item:hover{ background: #0f1b2b }
.ss-empty{ padding: 12px; color: var(--muted) }
.hidden{ display:none }

.note{ margin: 10px 2px; color: var(--muted) }

/* ====== Buttons ====== */
.btn{
  border: 1px solid transparent;
  background: var(--ghost);
  color: var(--text);
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .05s ease, background .2s, border .2s, box-shadow .2s;
  user-select: none;
}
.btn:active{ transform: translateY(1px) }
.btn.primary{ background: linear-gradient(180deg, var(--primary), var(--primary-2)); }
.btn.primary:hover{ box-shadow: 0 0 0 4px rgba(16,211,32,.18) }
.btn.soft{ background: linear-gradient(180deg, var(--soft), var(--soft-2)); }
.btn.warn{ background: linear-gradient(180deg, var(--warn), var(--warn-2)); }
.btn.ghost{ background: #0e141d; border-color: #223149 }
.btn.ghost.copied{ outline: 2px solid #22c55e }
.btn.tiny{
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 12px;
}
.btn.full{ width: 100% }
.fullw{ width: 100% }

/* fila de acciones como 2 columnas: [anticipo] [botones] */
.actions{
  margin-top: 6px;
  display: grid;                 /* antes: flex */
  grid-template-columns: 1fr 1fr;/* mitad y mitad */
  gap: 12px;
  align-items: end;
}

/* el campo de anticipo ocupa la 1.a columna */
.actions .field.half{
  grid-column: 1; 
  min-width: 0;
}

/* los botones van en la 2.a columna, pegados al borde derecho del campo */
.actions-buttons{
  grid-column: 2;
  display: flex;
  gap: .5rem;
  align-items: flex-end;
  justify-content: flex-start;   /* clave: ya NO usamos margin-left:auto */
  flex-wrap: wrap;
}

/* responsive: a 1 columna */
@media (max-width: 900px){
  .actions{ grid-template-columns: 1fr; }
  .actions-buttons{ justify-content: flex-end; }
}


/* ====== Botón Plan de Contingencia (estados) ====== */
#btn-pc.btn.warn {
  transition: filter .2s, opacity .2s, box-shadow .2s, transform .05s;
}
#btn-pc.btn.warn.ready:not([disabled]) {
  box-shadow: 0 0 0 3px rgba(255,165,0,0.18), 0 6px 18px rgba(255,165,0,0.15);
  filter: saturate(1.05);
}
#btn-pc.btn.warn.off,
#btn-pc.btn.warn:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
  filter: grayscale(.15);
}
#btn-pc.btn.warn.ready:not([disabled]):active {
  transform: translateY(1px);
}

/* ====== Output rows ====== */
.output{ display:flex; gap:10px; align-items: center }

/* ====== Dividers ====== */
.divider{
  border: none; height: 1px; background: linear-gradient(90deg, transparent, #223149, transparent);
  margin: 18px 0;
}

/* ====== Modal ====== */
dialog{
  border: none;
  background: transparent;
  padding: 0;
}
.modal-card{
  width: min(520px, 92vw);
  background: #0f1520;
  border: 1px solid #223149;
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
  color: #fff; /* asegurar texto blanco en toda la tarjeta */
}
.modal-head{
  padding: 16px 18px; border-bottom: 1px solid #1f2a3d;
  color: #fff; /* títulos en blanco */
}
.modal-head h3{ color:#fff; margin:0; }
.modal-body{
  padding: 18px; display:flex; gap:14px; align-items:center;
  color: #fff; /* textos en blanco */
}
.modal-body p{ color:#fff; margin:0; }
.modal-actions{
  padding: 12px 18px; border-top: 1px solid #1f2a3d; display:flex; justify-content:flex-end; gap:10px
}

/* Spinner con mejor contraste en oscuro */
.spinner{
  width: 22px; height: 22px;
  border: 3px solid #2a3c57;          /* aro base más visible */
  border-top-color: #ffffff;           /* punta blanca visible */
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin{ to { transform: rotate(360deg) } }

/* ====== Toasts ====== */
.toast{
  position: fixed; left: 50%; transform: translateX(-50%) translateY(10px);
  bottom: 14px; padding: 12px 16px; border-radius: 12px; color: #0b1220;
  background: #e2e8f0; font-weight: 700; opacity: 0; transition: .25s;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  z-index: 60;
}
.toast.show{ opacity: 1; transform: translateX(-50%) translateY(0) }
.toast.ok{ background: #bbf7d0 }
.toast.warn{ background: #fde68a }
.toast.err{ background: #fecaca }

/* ====== Splash ====== */
#splash{
  position: fixed; inset: 0; display:grid; place-items:center;
  background: radial-gradient(800px 400px at 50% 20%, rgba(34,52,73,.35), transparent 60%), var(--bg);
  z-index: 100;
  transition: opacity .35s ease, visibility .35s ease;
}
#splash.hide{ opacity: 0; visibility: hidden }
.splash-card{
  background: #0f1520; border:1px solid #223149; padding: 24px 26px; border-radius: 16px; box-shadow: var(--shadow);
  display:flex; gap:12px; align-items:center;
  color:#fff; /* textos blancos en el splash también */
}
.splash-card p{ margin:0; color: #fff }

/* ====== Footer ====== */
.footer{ text-align:center; color: var(--muted); margin-top: 18px }

.row-combo {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.row-combo .input {
  flex: 1;
  min-width: 0;
}
.row-combo .btn {
  white-space: nowrap;
}
/* --- Reenvío centrado --- */
.center-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.reenvio-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-top: 6px;
}

.reenvio-wrap .input.mini {
  width: 220px;              /* ancho más pequeño */
  text-align: center;
}

.reenvio-wrap .btn {
  padding: 12px 16px;
  white-space: nowrap;
}

/* En pantallas pequeñas, que no se rompa */
@media (max-width: 500px) {
  .reenvio-wrap {
    flex-direction: column;
    gap: 8px;
  }
  .reenvio-wrap .input.mini {
    width: 100%;
  }
}
/* === Login Overlay (dark, consistente con el proyecto) === */
.login-overlay {
  position: fixed; inset: 0;
  background:
    radial-gradient(900px 420px at 50% 15%, rgba(34,52,73,.35), transparent 60%),
    rgba(2,6,23,.75);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  z-index: 9999;
  transition: opacity .25s ease, visibility .25s ease;
}
.login-overlay.hide { opacity: 0; visibility: hidden; }

/* tarjeta = mismo ADN que .modal-card / .card */
.login-card {
  width: min(420px, 92vw);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  display: grid;
  gap: 12px;
  color: #fff;              /* asegurar contraste */
  animation: loginIn .22s ease;
}
@keyframes loginIn { from { transform: translateY(6px); opacity:.85 } to { transform: translateY(0); opacity:1 } }

.login-card h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #fff;
}
.login-sub {
  margin: -2px 0 6px 0;
  color: var(--muted);
}

/* inputs ya heredan .input (dark) — solo ajustamos spacing */
#login-usuario, #login-pass {
  width: 100%;
}

/* acciones */
.btn.full { width: 100%; }

/* mensajes */
.hint.muted { color: var(--muted); }
.hint.err   { color: #fecaca; }
.hint.ok    { color: #bbf7d0; }

/* efecto error (shake) */
@keyframes shakeX {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}
.login-card.error { animation: shakeX .4s ease; }

/* botón “disabled” visual coherente */
#login-btn:disabled {
  opacity: .7;
  cursor: not-allowed;
  filter: grayscale(.08);
}
.center{
  display: flex;
  width: 100%;           /* asegura ancho completo */
  justify-content: center;
}
.input-with-icon {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem;
  align-items: center;
}

.icon-btn {
  padding: .4rem .55rem;
  border: 1px solid #223149;
  border-radius: 8px;
  background: #0f1520;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.icon-btn:hover { background: #2b5dff; }
.icon-btn:disabled { opacity:.6; cursor:not-allowed; }

/* ====== NUEVO: Filtros por fecha/placa y tabla ====== */
.top-gap{ margin-top: 10px; }

.table-wrap{
  margin-top: 8px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  box-shadow: var(--shadow);
}

.table{
  width: 100%;
  border-collapse: collapse;
  min-width: 820px;
}
.table th, .table td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-align: left;
  vertical-align: middle;
  color: #e6edf7;
}
.table thead th{
  font-weight: 800;
  font-size: 13px;
  color: #cbd5e1;
  background: #0f1520;
  position: sticky;
  top: 0;
  z-index: 1;
}
.table tbody tr:hover{
  background: #0f1b2b;
}
.table-input{
  min-width: 140px;
}
.table td.action{
  white-space: nowrap;
}
.table td .btn.tiny{
  margin: 0;
}

/* inputs numéricos en celdas compactas */
.table .input.mini{
  width: 100%;
  max-width: 160px;
}

/* responsive helper para scroll suave en móviles */
@media (max-width: 600px){
  .table{ min-width: 700px; }
}
/* Reenvío en una sola fila: texto + input + botón */
.reenvio-inline{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;           /* permite bajar ordenadamente en pantallas pequeñas */
}
.reenvio-inline .label{
  margin: 0;
  white-space: nowrap;       /* evita que el texto se parta */
}
.reenvio-inline .input.mini{
  width: 220px;              /* mismo ancho compacto que usabas */
}

/* En móviles: apila pero mantiene el orden natural (texto, input, botón) */
@media (max-width: 600px){
  .reenvio-inline{
    flex-direction: column;
    align-items: stretch;
  }
  .reenvio-inline .input.mini{ width: 100%; }
  .reenvio-inline .label{ align-self: flex-start; }
}
/* Botón de "Traer" en la sección Fecha/Placa, más pequeño */
#btn-traer-viaje {
  padding: 8px 12px;      /* altura y ancho reducidos */
  font-size: 14px;        /* texto un poco más pequeño */
  border-radius: 10px;    /* esquinas ligeramente más compactas */
  font-weight: 600;
}

/* En pantallas pequeñas que mantenga la buena proporción */
@media (max-width: 600px) {
  #btn-traer-viaje {
    width: 100%;
  }
}

/* === Fila del título con acciones (logout a la derecha) === */
.header-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Variante cuadrada para el icono de logout (mismo ADN visual) */
.icon-btn.logout{
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  font-weight: 800;
}
.icon-btn.logout:hover{
  box-shadow: 0 0 0 4px var(--ring);
}