/* Lavadero de motos — estilos */
:root {
  --fondo: #f3f5f8;
  --carta: #ffffff;
  --texto: #18212f;
  --suave: #667085;
  --borde: #e3e7ee;
  --marca: #0e7490;
  --marca-osc: #155e75;
  --barra: #0b1220;
  --amarillo: #d97706; --amarillo-f: #fef3c7;
  --azul: #2563eb;     --azul-f: #dbeafe;
  --morado: #7c3aed;   --morado-f: #ede9fe;
  --verde: #059669;    --verde-f: #d1fae5;
  --rojo: #dc2626;     --rojo-f: #fee2e2;
  --wa: #25d366;
  --radio: 12px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
}
a { color: var(--marca); }
h1 { font-size: 1.45rem; margin: 0 0 .5rem; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
code { background: var(--fondo); padding: 1px 5px; border-radius: 4px; font-size: .85em; }

/* Barra superior */
.topbar { background: var(--barra); color: #fff; position: sticky; top: 0; z-index: 10; }
.topbar-in { max-width: 1280px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.marca { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.marca-icono { font-size: 1.3rem; }
.quien { display: flex; align-items: center; gap: 10px; font-size: .88rem; flex-wrap: wrap; }
.quien-nombre { font-weight: 600; }
.topbar .enlace-sutil { color: #b6c2d6; }
.menu { max-width: 1280px; margin: 0 auto; padding: 0 12px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu a { color: #cbd5e1; text-decoration: none; padding: 9px 12px; white-space: nowrap; border-bottom: 3px solid transparent; font-size: .92rem; }
.menu a:hover { color: #fff; }
.menu a.activo { color: #fff; border-bottom-color: #22d3ee; font-weight: 600; }

.rol { font-size: .72rem; padding: 2px 8px; border-radius: 99px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.rol-dueno { background: #fde68a; color: #78350f; }
.rol-admin { background: #bae6fd; color: #0c4a6e; }
.rol-lavador { background: #bbf7d0; color: #14532d; }

.contenido { max-width: 1280px; margin: 0 auto; padding: 18px 16px 40px; }
.pie { text-align: center; color: var(--suave); font-size: .8rem; padding: 20px; }

/* Tarjetas y estructura */
.card { background: var(--carta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; box-shadow: var(--sombra); margin-bottom: 16px; }
.card-estrecha { max-width: 640px; margin-left: auto; margin-right: auto; }
.encabezado { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.encabezado h1 { margin: 0; }
.encabezado-sm h2 { margin: 0; }
.acciones-enc { display: flex; gap: 8px; }
.rejilla-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.rejilla-gastos { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 820px) { .rejilla-gastos { grid-template-columns: 1fr; } }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--marca); color: #fff; border: 0; border-radius: 9px; padding: 10px 16px;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--marca-osc); }
.btn-sec { background: #eef2f6; color: var(--texto); }
.btn-sec:hover { background: #e2e8f0; }
.btn-sm { padding: 6px 11px; font-size: .86rem; }
.btn-block { width: 100%; }
.btn-grande { padding: 14px; font-size: 1.05rem; }
.btn-fin { background: var(--azul); }
.btn-fin:hover { background: #1d4ed8; }
.btn-cobrar { background: var(--verde); }
.btn-cobrar:hover { background: #047857; }
.btn-peligro { background: var(--rojo-f); color: var(--rojo); }
.btn-peligro:hover { background: #fecaca; }
.btn-wa { background: var(--wa); color: #073b1d; }
.btn-wa:hover { background: #1ebe5b; }
.enlace-sutil { color: var(--suave); font-size: .88rem; text-decoration: none; }
.enlace-sutil:hover { text-decoration: underline; }
.enlace-boton { background: none; border: 0; color: var(--marca); cursor: pointer; font: inherit; font-size: .86rem; padding: 4px 0; }
.enlace-boton:hover { text-decoration: underline; }

/* Formularios */
.form { display: flex; flex-direction: column; gap: 12px; }
.form label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: .9rem; }
input, select, textarea {
  font: inherit; font-weight: 400; color: var(--texto); background: #fff;
  border: 1px solid #cfd6e0; border-radius: 9px; padding: 9px 11px; width: 100%; min-width: 0;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #67e8f9; border-color: var(--marca); }
input[readonly] { background: var(--fondo); }
textarea { resize: vertical; }
.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .fila-2 { grid-template-columns: 1fr; } }
.form-linea { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.form-linea input, .form-linea select { width: auto; flex: 1 1 150px; }
.form-tabla input, .form-tabla select { padding: 6px 9px; flex: 1 1 110px; }
.input-corto { max-width: 120px; }
.input-placa { font-size: 1.6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; text-align: center; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.input-sufijo { display: flex; align-items: center; border: 1px solid #cfd6e0; border-radius: 9px; overflow: hidden; background: #fff; }
.input-sufijo input { border: 0; border-radius: 0; }
.input-sufijo span { padding: 0 11px; color: var(--suave); background: var(--fondo); align-self: stretch; display: flex; align-items: center; font-weight: 400; }
.en-linea { display: inline; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.filtros input { flex: 1 1 220px; width: auto; }
.filtros select { width: auto; }

.tipos { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.tipos legend { font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.tipo-opcion { position: relative; border: 2px solid var(--borde); border-radius: 11px; padding: 12px; cursor: pointer; display: flex !important; flex-direction: column; gap: 2px !important; }
.tipo-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.tipo-opcion:has(input:checked) { border-color: var(--marca); background: #ecfeff; }
.tipo-nombre { font-weight: 600; }
.tipo-precio { color: var(--marca); font-weight: 800; font-size: 1.1rem; }

/* Avisos */
.aviso { padding: 11px 14px; border-radius: 10px; margin-bottom: 12px; font-size: .92rem; }
.aviso-ok { background: var(--verde-f); color: #065f46; }
.aviso-error { background: var(--rojo-f); color: #991b1b; }
.aviso-wa { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #dcfce7; border: 1px solid #86efac; padding: 12px 14px; border-radius: 10px; margin-bottom: 12px; font-weight: 600; color: #14532d; }
.txt-error { color: var(--rojo); }
.vista-wa { background: #e7fbe9; border-radius: 10px; padding: 10px 12px; font-size: .88rem; margin-top: -4px; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi { background: var(--carta); border: 1px solid var(--borde); border-left: 4px solid #94a3b8; border-radius: 10px; padding: 10px 12px; box-shadow: var(--sombra); }
.kpi span { display: block; font-size: .78rem; color: var(--suave); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.kpi b { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.kpi-amarillo { border-left-color: var(--amarillo); }
.kpi-azul { border-left-color: var(--azul); }
.kpi-morado { border-left-color: var(--morado); }
.kpi-verde { border-left-color: var(--verde); }
.kpi-rojo { border-left-color: var(--rojo); }
.kpi-neto { border-left-color: var(--barra); background: var(--barra); color: #fff; }
.kpi-neto span { color: #94a3b8; }

/* Tablero por columnas */
.columnas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; align-items: start; }
@media (max-width: 960px) { .columnas { grid-template-columns: 1fr; } }
.columna { background: #e9edf3; border-radius: var(--radio); padding: 12px; border-top: 4px solid; }
.columna h2 { display: flex; align-items: center; gap: 8px; font-size: .98rem; }
.columna h2 small { margin-left: auto; background: #fff; border-radius: 99px; padding: 1px 9px; font-size: .82rem; }
.punto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.col-asignar { border-top-color: var(--amarillo); } .col-asignar .punto { background: var(--amarillo); }
.col-proceso { border-top-color: var(--azul); }     .col-proceso .punto { background: var(--azul); }
.col-cobro { border-top-color: var(--morado); }     .col-cobro .punto { background: var(--morado); }
.moto { background: var(--carta); border-radius: 10px; padding: 11px; margin-bottom: 9px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 5px; }
.moto-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .82rem; }
.moto-det { font-size: .92rem; }
.moto-form { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; align-items: center; }
.moto-form select { flex: 1; padding: 7px 9px; }
.metodo { display: flex; align-items: center; gap: 5px; font-size: .88rem; border: 1px solid var(--borde); border-radius: 8px; padding: 5px 9px; cursor: pointer; }
.metodo input { width: auto; }
.metodo:has(input:checked) { border-color: var(--verde); background: var(--verde-f); }
.grande { font-size: 1.1rem; }
.vacio { color: var(--suave); text-align: center; font-size: .9rem; padding: 14px 0; margin: 0; }

/* Placa estilo Colombia (amarilla) */
.placa { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 800; letter-spacing: .08em; background: #facc15; color: #111; border: 2px solid #111; border-radius: 6px; padding: 2px 9px; font-size: 1.05rem; }
.placa-sm { font-size: .85rem; padding: 1px 6px; border-width: 1.5px; }

/* Tablas */
.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); border-bottom: 1px solid var(--borde); padding: 8px; white-space: nowrap; }
.tabla td { border-bottom: 1px solid var(--borde); padding: 8px; vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tr.inactivo td { opacity: .55; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nowrap { white-space: nowrap; }

.badge { display: inline-block; font-size: .75rem; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: #e5e7eb; color: #374151; white-space: nowrap; }
.est-pendiente_asignar { background: var(--amarillo-f); color: #92400e; }
.est-en_proceso { background: var(--azul-f); color: #1e40af; }
.est-pendiente_cobro { background: var(--morado-f); color: #5b21b6; }
.est-pagado { background: var(--verde-f); color: #065f46; }

/* Periodos */
.periodos { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.chip { padding: 6px 14px; border-radius: 99px; background: #fff; border: 1px solid var(--borde); text-decoration: none; color: var(--texto); font-size: .88rem; font-weight: 600; }
.chip.activo { background: var(--barra); color: #fff; border-color: var(--barra); }
.rango { display: flex; gap: 6px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.rango input { width: auto; padding: 5px 8px; }

/* Barras día a día */
.barras { display: flex; flex-direction: column; gap: 6px; }
.barra-fila { display: grid; grid-template-columns: 80px 1fr 170px; gap: 10px; align-items: center; font-size: .86rem; }
.barra-pista { background: #eef2f6; border-radius: 6px; height: 14px; overflow: hidden; }
.barra { display: block; height: 100%; background: var(--marca); border-radius: 6px; }
.barra-val { color: var(--suave); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .barra-fila { grid-template-columns: 70px 1fr; } .barra-val { grid-column: 1 / -1; text-align: left; } }

/* Login */
.login-caja { max-width: 380px; margin: 8vh auto 0; background: var(--carta); border-radius: 16px; padding: 28px; box-shadow: 0 10px 30px rgba(16, 24, 40, .1); text-align: center; }
.login-caja .form { text-align: left; margin-top: 14px; }
.login-logo { font-size: 2.6rem; }

/* Lavador */
.tarjeta-lavador { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.tarjeta-lavador h1 { margin: 0; }
.avatar { width: 54px; height: 54px; border-radius: 50%; background: var(--marca); color: #fff; display: grid; place-items: center; font-size: 1.5rem; font-weight: 800; }

.zona-peligro { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--borde); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.muted { color: var(--suave); }
.pequeno { font-size: .84rem; }
.centro { text-align: center; }
.input-placa::placeholder { font-size: 1rem; letter-spacing: 0; font-weight: 400; font-family: system-ui, sans-serif; }

/* ===== RedLav ===== */
:root { --rojo-marca: #e11d48; }
.logo-redlav { font-weight: 900; letter-spacing: -.03em; font-size: 1.15rem; line-height: 1; display: inline-flex; }
.logo-red { color: var(--rojo-marca); }
.logo-lav { color: inherit; }
.logo-sm { font-size: 1.15rem; }
.logo-xs { font-size: .85rem; }
.logo-xl { font-size: 2.6rem; color: var(--texto); }
.topbar .logo-lav { color: #fff; }
.marca-sep { width: 1px; height: 18px; background: #334155; margin: 0 4px; }
.marca-negocio { font-weight: 600; font-size: .98rem; }
.topbar .menu a.activo { border-bottom-color: var(--rojo-marca); }
.topbar-super { background: #1a0b12; }
.rol-super { background: #fecdd3; color: #881337; }
.franja-soporte { background: #fde68a; color: #78350f; text-align: center; padding: 8px 12px; font-size: .9rem; position: sticky; top: 0; z-index: 11; }
.franja-soporte a { color: #78350f; font-weight: 700; }
.aviso-alerta { background: var(--amarillo-f); color: #92400e; }
.aviso a { color: inherit; font-weight: 700; }
.sus-activo { background: var(--verde-f); color: #065f46; }
.sus-por_vencer { background: var(--amarillo-f); color: #92400e; }
.sus-vencido { background: #ffedd5; color: #9a3412; }
.sus-bloqueado, .sus-suspendido { background: var(--rojo-f); color: #991b1b; }
.encabezado h1 .badge { vertical-align: middle; margin-left: 6px; }
.card-credenciales { border: 2px solid var(--wa); background: #f0fdf4; }
pre.credenciales { white-space: pre-wrap; background: #fff; border: 1px solid var(--borde); border-radius: 9px; padding: 12px; font: 14px/1.5 ui-monospace, Menlo, monospace; }
.kpi small { display: block; font-size: .78rem; }
.kpi-txt { font-size: 1rem !important; }
.vacio-grande { text-align: center; padding: 30px 10px; }
.mt { margin-top: 22px; }
.sin-margen { margin: 0; }
.pie .logo-redlav { vertical-align: -1px; }