/* ============================================================
   RutaCard CRM - estilos
   Marca: rojo #E20613 sobre fondo claro, pensado para uso
   diario por comerciales no técnicos ("para dummies").
   ============================================================ */

:root{
  --rojo: #E20613;
  --rojo-oscuro: #B8050F;
  --rojo-suave: #FBE6E7;
  --tinta: #16232C;
  --tinta-suave: #5B6B76;
  --gris-borde: #E4E9EB;
  --gris-fondo: #F4F6F7;
  --blanco: #FFFFFF;
  --verde: #1E8E5A;
  --verde-suave: #E9F7EF;
  --azul: #1D5A8A;
  --azul-suave: #E8F1F8;
  --teal: #0E7A6B;
  --teal-suave: #E4F5F2;
  --peligro: #C0392B;
  --peligro-oscuro: #A3311F;
  --sombra-card: 0 1px 2px rgba(22,35,44,.05), 0 1px 1px rgba(22,35,44,.03);
  --sombra-flotante: 0 10px 30px rgba(22,35,44,.12);
  --radio: 12px;
  --radio-sm: 9px;
  --transicion: .15s ease;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  background: var(--gris-fondo);
  color: var(--tinta);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a{ color: inherit; }
h1,h2,h3{ font-family: "Segoe UI", Arial, sans-serif; margin: 0; }

/* Foco visible accesible en todo lo interactivo, sin alterar el look por defecto */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .chip:focus-visible, .alta-row:focus-visible{
  outline: 2px solid var(--rojo);
  outline-offset: 2px;
}

/* ---------- Barra superior ---------- */
.topbar{
  background: var(--rojo);
  color: #fff;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.topbar .brand{ display:flex; align-items:center; gap:12px; }
.topbar .brand img{ height: 30px; width:auto; display:block; }
.topbar .brand .divider{ width:1px; height:22px; background: rgba(255,255,255,.35); }
.topbar .brand .rol{ font-size: 12.5px; color: #FBD7D9; }
.topbar-actions{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
.topbar .logout{
  display:flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:#FBD7D9;
  background:none; border:none; cursor:pointer; text-decoration:none;
  padding: 7px 11px; border-radius: 8px;
  transition: background var(--transicion), color var(--transicion);
}
.topbar .logout:hover{ color:#fff; background: rgba(255,255,255,.14); }

/* ---------- Layout ---------- */
.container{ max-width: 980px; margin: 0 auto; padding: 28px 20px 60px; }
.page-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head.compact{ margin-bottom: 14px; }
.page-head h1{ font-size: 22px; font-weight: 800; color: var(--tinta); }
.page-head p{ margin: 4px 0 0; font-size: 13.5px; color: var(--tinta-suave); }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius: 9px; padding: 11px 18px; font-size: 13.5px; font-weight: 700;
  border: 1px solid transparent; cursor: pointer; text-decoration:none;
  transition: background var(--transicion), border-color var(--transicion), opacity var(--transicion), transform var(--transicion);
}
.btn:active{ transform: scale(.98); }
.btn-primary{ background: var(--rojo); color:#fff; }
.btn-primary:hover{ background: var(--rojo-oscuro); }
.btn-primary:disabled{ opacity:.4; cursor:not-allowed; transform:none; }
.btn-dark{ background: var(--tinta); color:#fff; }
.btn-dark:hover{ background:#233642; }
.btn-outline{ background:#fff; border-color: var(--gris-borde); color: var(--tinta-suave); }
.btn-outline:hover{ background: var(--gris-fondo); border-color:#D4DBDE; }
.btn-danger-outline{ background:#fff; border-color:#F3C6C1; color: var(--peligro); }
.btn-danger-outline:hover{ background: var(--rojo-suave); }
.btn-peligro{ background: var(--peligro); color:#fff; border-color: var(--peligro); }
.btn-peligro:hover{ background: var(--peligro-oscuro); border-color: var(--peligro-oscuro); }
.btn-success{ background: var(--verde); color:#fff; }
.btn-success:hover{ background:#166B44; }
.btn-teal{ background: var(--teal); color:#fff; }
.btn-teal:hover{ background:#0B6357; }
.btn-block{ width:100%; }
.btn-sm{ padding: 8px 12px; font-size: 12.5px; }
.btn-row{ display:flex; gap:8px; flex-wrap:wrap; }
.btn-row .btn{ flex:1; min-width:150px; }

/* ---------- Tarjetas ---------- */
.card{ background:#fff; border:1px solid var(--gris-borde); border-radius: 16px; padding: 22px; margin-bottom: 18px; box-shadow: var(--sombra-card); }
.card + .card{ margin-top: 18px; }
.card-accion{ border:1px solid var(--gris-borde); border-radius: var(--radio); padding:18px; margin-bottom:18px; background:#fff; box-shadow: var(--sombra-card); }
.panel-secundario{ border:1px solid var(--gris-borde); border-radius: var(--radio-sm); padding:16px; margin-top:12px; background: var(--gris-fondo); }

/* ---------- Formularios ---------- */
.field{ margin-bottom: 16px; }
.field label{ display:flex; align-items:center; gap:6px; font-size: 13px; font-weight:700; color: var(--tinta); margin-bottom: 6px; }
.field .hint{ display:block; font-size: 12px; color:#8B9AA1; margin-top: 4px; }
.field .hint-peligro{ color: var(--peligro); font-weight:600; }
input[type=file]{ margin-top:10px; font-size:13px; color: var(--tinta-suave); }
input[type=file]::file-selector-button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius: 9px; padding: 9px 16px; font-size: 13px; font-weight: 700;
  border: 1px solid var(--gris-borde); cursor: pointer;
  background:#fff; color: var(--tinta-suave); font-family: inherit;
  margin-right: 12px;
  transition: background var(--transicion), border-color var(--transicion);
}
input[type=file]::file-selector-button:hover{ background: var(--gris-fondo); border-color:#D4DBDE; }
input[type=file]::-webkit-file-upload-button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius: 9px; padding: 9px 16px; font-size: 13px; font-weight: 700;
  border: 1px solid var(--gris-borde); cursor: pointer;
  background:#fff; color: var(--tinta-suave); font-family: inherit;
  margin-right: 12px;
  transition: background var(--transicion), border-color var(--transicion);
}
input[type=file]::-webkit-file-upload-button:hover{ background: var(--gris-fondo); border-color:#D4DBDE; }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password], select, textarea{
  width: 100%; border: 1px solid #DCE3E6; border-radius: 9px; padding: 10px 13px;
  font-size: 14px; color: var(--tinta); background:#fff; font-family: inherit;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
input:disabled, select:disabled, textarea:disabled{ background: #F7F8F9; color:#7C8990; }
input:focus, select:focus, textarea:focus{ outline: none; border-color: var(--rojo); box-shadow: 0 0 0 3px rgba(226,6,19,.10); }
textarea{ min-height: 80px; resize: vertical; }
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 640px){ .grid-2{ grid-template-columns: 1fr; } }

.section-title{ display:flex; align-items:center; gap:9px; margin: 22px 0 14px; }
.section-title .ico{ width:24px; height:24px; border-radius:6px; background: var(--tinta); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; }
.section-title h3{ font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta); }
.section-title:first-child{ margin-top: 0; }

/* Selector tipo oferta */
.toggle-group{ display:flex; gap:10px; margin-bottom: 16px; }
.toggle-group label{ flex:1; text-align:center; border:1px solid var(--gris-borde); border-radius:9px; padding: 11px; font-size:13px; font-weight:700; color: var(--tinta-suave); cursor:pointer; transition: border-color var(--transicion), background var(--transicion), color var(--transicion); }
.toggle-group input{ display:none; }
.toggle-group input:checked + span{ color: var(--rojo-oscuro); }
.toggle-group label.active{ border-color: var(--rojo); background: var(--rojo-suave); color: var(--rojo-oscuro); }

/* Matrículas */
.plate-row{ display:flex; gap:8px; margin-bottom:10px; }
.plate-list{ display:flex; flex-wrap:wrap; gap:8px; }
.plate-chip{ display:inline-flex; align-items:center; gap:8px; background:#EEF1F2; border-radius:7px; padding:6px 10px; font-size:12.5px; font-weight:600; }
.plate-chip button{ border:none; background:none; color:#8B9AA1; cursor:pointer; font-size:13px; line-height:1; }
.plate-chip button:hover{ color:#C0392B; }

/* ---------- Listado de altas ---------- */
.alta-row{ display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--gris-borde); border-radius:14px; padding:16px 18px; margin-bottom:12px; text-decoration:none; color:inherit; transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion); box-shadow: var(--sombra-card); }
.alta-row:hover{ border-color: rgba(226,6,19,.35); box-shadow: 0 4px 14px rgba(22,35,44,.08); transform: translateY(-1px); }
.alta-row .info{ flex:1; min-width:0; }
.alta-row .id{ font-family: monospace; font-size:12px; color:#8B9AA1; }
.alta-row .empresa{ font-weight:700; font-size:14.5px; margin: 2px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.alta-row .meta{ font-size:12.5px; color:#8B9AA1; }
.alta-row .chev{ color:#AEB9BE; font-size: 18px; transition: transform var(--transicion); }
.alta-row:hover .chev{ transform: translateX(2px); }

.badge{ display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:5px 12px; font-size:12px; font-weight:700; white-space:nowrap; }
.badge .dot{ width:6px; height:6px; border-radius:50%; }
.badge-peligro{ background: var(--peligro); color:#fff; }

/* ---------- Estado de documentos (contrato / SEPA) ---------- */
.doc-status{ border:1px solid var(--gris-borde); border-radius: var(--radio-sm); padding:14px 16px; margin-bottom:12px; }
.doc-status:last-of-type{ margin-bottom:0; }
.doc-status-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.doc-status-nombre{ font-weight:700; font-size:14px; }
.doc-status-firmado{ font-size:12.5px; font-weight:700; color: var(--teal); }
.doc-status-pendiente{ font-size:12.5px; font-weight:700; color: var(--azul); }
.doc-status-acciones{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.enlace-firma{ font-size:12px; font-family: monospace; }

/* ---------- Alertas ---------- */
.alert{ display:flex; gap:12px; align-items:flex-start; border-radius:12px; padding:14px 16px; margin-bottom:18px; font-size:13.5px; }
.alert-danger{ background: var(--rojo-suave); border: 1px solid #F3C6C1; color:#8A2E24; }
.alert-success{ background: var(--verde-suave); border: 1px solid #CDEBD9; color:#1E6B44; }
.alert-info{ background: var(--azul-suave); border: 1px solid #C9DCEA; color:#164B72; }
.alert-warning{ background: #FBE6E7; border: 1px solid #F4C2C5; color:#A3070F; }
.alert-teal{ background: var(--teal-suave); border: 1px solid #BEE5DD; color: var(--teal); }
.alert b{ font-weight:700; }

/* ---------- Pipeline / estado visual ---------- */
.pipeline{ display:flex; align-items:flex-start; width:100%; margin: 8px 0 4px; }
.pipeline .step{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:70px; }
.pipeline .step .pt{ width:12px; height:12px; border-radius:50%; border:2px solid var(--gris-borde); background:#fff; transition: background var(--transicion), border-color var(--transicion); }
.pipeline .step.done .pt{ background: var(--rojo); border-color: var(--rojo); }
.pipeline .step .lbl{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#9AA7AD; text-align:center; }
.pipeline .step.done .lbl{ color: var(--tinta); }
.pipeline .line{ flex:1; height:2px; background: var(--gris-borde); margin-top:5px; transition: background var(--transicion); }
.pipeline .line.done{ background: var(--rojo); }

/* ---------- Filtros ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.chip{ border-radius:999px; padding:7px 14px; font-size:12.5px; font-weight:700; border:1px solid var(--gris-borde); background:#fff; color: var(--tinta-suave); cursor:pointer; text-decoration:none; transition: background var(--transicion), border-color var(--transicion), color var(--transicion); }
.chip:hover{ border-color:#D4DBDE; }
.chip.active{ background: var(--tinta); border-color: var(--tinta); color:#fff; }

/* ---------- Login ---------- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; background: var(--rojo); background-image: radial-gradient(circle at 20% 20%, var(--rojo-oscuro) 0%, var(--rojo) 60%); padding: 20px; }
.login-box{ width:100%; max-width:400px; }
.login-logo{ text-align:center; margin-bottom:26px; }
.login-logo img{ height:46px; width:auto; }
.login-logo p{ color:#FBD7D9; font-size:13.5px; margin-top:8px; }
.login-card{ background:#fff; border-radius:18px; padding:28px 26px; box-shadow: var(--sombra-flotante); }
.login-card h2{ font-size:14px; font-weight:800; margin-bottom:16px; color: var(--tinta); }
.login-error{ background: var(--rojo-suave); color:#8A2E24; border:1px solid #F3C6C1; border-radius:9px; padding:10px 14px; font-size:13px; margin-bottom:14px; }
.login-note{ text-align:center; color:#F6B8BB; font-size:11.5px; margin-top:18px; }
.codigo-2fa{ letter-spacing:6px; font-size:20px; text-align:center; font-weight:700; }
.field-checkbox{ display:flex; align-items:center; gap:8px; margin-bottom:16px; }
.field-checkbox input[type=checkbox]{ width:auto; margin:0; accent-color: var(--rojo); }
.field-checkbox label{ margin:0; font-weight:500; font-size:13px; }
.valor-monoespaciado{ font-family: monospace; font-size:14px; }
.hint-fuerte{ font-weight:600; color: var(--tinta); }
.detalle-error{ font-family: monospace; font-size:12px; white-space:pre-wrap; }
.alta-row.estatica{ cursor:default; }
.alta-row.estatica:hover{ transform:none; box-shadow: var(--sombra-card); }

/* ---------- Documentos adjuntos ---------- */
.file-list{ display:flex; flex-direction:column; gap:2px; border:1px solid var(--gris-borde); border-radius:9px; padding:4px; }
.file-item{ display:flex; align-items:center; gap:9px; padding:8px 10px; font-size:13px; border-radius:6px; cursor:pointer; transition: background var(--transicion); }
.file-item:hover{ background:var(--gris-fondo); }
.file-item input[type=checkbox]{ width:15px; height:15px; accent-color:#C0392B; flex-shrink:0; }
.file-item a{ color:var(--tinta); text-decoration:none; font-weight:600; }
.file-item a:hover{ color: var(--rojo); text-decoration:underline; }

/* ---------- Checkboxes (estaciones) ---------- */
.checkbox-list{ border:1px solid var(--gris-borde); border-radius:9px; padding:6px 4px; max-height:220px; overflow-y:auto; }
.checkbox-item{ display:flex; align-items:center; gap:9px; padding:8px 10px; font-size:13.5px; cursor:pointer; border-radius:6px; transition: background var(--transicion); }
.checkbox-item:hover{ background:var(--gris-fondo); }
.checkbox-item input[type=checkbox]{ width:16px; height:16px; accent-color: var(--rojo); flex-shrink:0; }

/* ---------- Mantenimientos (catálogos) ---------- */
.maint-row{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--gris-borde); transition: opacity var(--transicion); }
.maint-row:last-child{ border-bottom:none; }
.maint-row .nombre{ flex:1; font-size:13.5px; font-weight:600; }
.maint-row.inactivo{ opacity:.6; }
.maint-row.inactivo .nombre{ color:#AEB9BE; text-decoration:line-through; }
.maint-row form{ display:flex; gap:6px; align-items:center; }
.maint-add{ display:flex; gap:8px; margin-top:14px; }
.maint-add input{ flex:1; }
.maint-form-edit{ flex:1; }
.maint-form-edit input[type=text]{ flex:1; }
.grid-2.top{ align-items:flex-start; }
.tab-nav{ display:flex; gap:8px; margin-bottom:18px; }
.tab-nav a{ text-decoration:none; }
.empty{ text-align:center; padding:56px 20px; color:#8B9AA1; font-size:14px; background:#fff; border:1px dashed var(--gris-borde); border-radius: var(--radio); }
.empty .empty-ico{ font-size:26px; display:block; margin-bottom:10px; opacity:.6; }
.mt-0{ margin-top:0; }
.text-right{ text-align:right; }
.flex{ display:flex; }
.flex-center{ display:flex; align-items:center; }
.gap-8{ gap:8px; }
.justify-end{ display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.small-muted{ font-size:12px; color:#8B9AA1; }
.panel-titulo{ font-size:13px; font-weight:700; margin-bottom:12px; color: var(--tinta); }
.k-value{ background: var(--rojo-suave); border:1px solid #F4C2C5; color:#A3070F; border-radius:9px; padding:12px 16px; font-size:13px; margin-bottom:14px; }
.back-link{ display:inline-flex; align-items:center; gap:4px; margin-bottom:16px; font-size:13px; color: var(--tinta-suave); text-decoration:none; transition: color var(--transicion); }
.back-link:hover{ color: var(--rojo); }
.search-field{ max-width:420px; }