/* estilos.css — Carbon Detailing Admin
   Tema carbon: oscuro, alto contraste, botones grandes (uso desde el celular) */

:root{
  --fondo:#0e1116; --tarjeta:#171c24; --borde:#2a3140;
  --texto:#f2f4f8; --texto2:#9aa4b5;
  --acento:#f5b52e;
  --ok:#2fbf71;
  --alerta:#e2574c;
  --radio:16px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; padding:0}
body{
  background:var(--fondo); color:var(--texto);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100dvh;
}
.contenedor{max-width:520px; margin:0 auto; padding:16px 16px 48px}

/* ---------- Encabezado ---------- */
.encabezado{display:flex; align-items:center; justify-content:space-between; padding:10px 0}
.logo{font-weight:900; letter-spacing:.14em; font-size:14px; color:var(--texto2); text-transform:uppercase; text-decoration:none}
.logo b{color:var(--acento)}
.paso-indicador{display:flex; gap:6px}
.punto{width:22px; height:5px; border-radius:3px; background:#232a36}
.punto.activo{background:var(--acento)}

/* ---------- Avisos ---------- */
.aviso-datos{display:none; font-size:12.5px; color:var(--acento);
  background:rgba(245,181,46,.08); border:1px solid rgba(245,181,46,.25);
  border-radius:10px; padding:7px 12px; margin-bottom:8px; line-height:1.4}
.aviso{font-size:13.5px; background:rgba(245,181,46,.08); border:1px solid rgba(245,181,46,.3);
  color:var(--texto); border-radius:10px; padding:9px 12px; margin-top:12px; line-height:1.45}

/* ---------- Tipografía de pasos ---------- */
.titulo-paso{font-size:22px; margin:14px 0 2px; line-height:1.25}
.sub-paso{color:var(--texto2); font-size:14.5px; margin:2px 0 14px; line-height:1.45}

/* ---------- Tarjetas de opción ---------- */
.grilla-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.tarjeta-opcion{
  background:var(--tarjeta); border:1.5px solid var(--borde); border-radius:var(--radio);
  padding:16px; margin-top:10px; cursor:pointer; user-select:none}
.grilla-2 .tarjeta-opcion{margin-top:0; text-align:center}
.tarjeta-opcion:active{transform:scale(.985)}
.tarjeta-opcion.sel{border-color:var(--acento); background:rgba(245,181,46,.07)}
.tarjeta-opcion .icono{font-size:30px; margin-bottom:6px}
.tarjeta-opcion .nombre{font-weight:700; font-size:16px; line-height:1.3}
.tarjeta-opcion .detalle{color:var(--texto2); font-size:13.5px; margin-top:3px; line-height:1.4}
.fila-opcion{display:flex; justify-content:space-between; align-items:center; gap:12px}
.precio-ref{font-weight:800; font-size:14.5px; white-space:nowrap; color:var(--texto)}

.etiqueta-info{display:inline-block; font-size:11px; font-weight:700; color:var(--acento);
  background:rgba(245,181,46,.12); padding:2px 7px; border-radius:99px; margin-left:4px; vertical-align:middle}
.etiqueta-alerta{display:inline-block; font-size:11px; font-weight:700; color:#ff9d94;
  background:rgba(226,87,76,.15); padding:3px 8px; border-radius:99px; white-space:nowrap}

/* ---------- Botones ---------- */
button{font-family:inherit; border:none; border-radius:14px; cursor:pointer;
  width:100%; min-height:56px; font-size:17px; font-weight:700; margin-top:14px;
  display:flex; align-items:center; justify-content:center; gap:8px}
button:active{transform:scale(.985)}
.btn-acento{background:var(--acento); color:#1a1200}
.btn-sec{background:#232a36; color:var(--texto); font-weight:600; font-size:15.5px; min-height:50px}
.btn-wa{background:#25d366; color:#06230f}
.volver{background:none; border:none; color:var(--texto2); font-size:15px; width:auto;
  min-height:auto; margin:6px 0 0; padding:6px 0; font-weight:600; justify-content:flex-start}

/* ---------- Resultado ---------- */
.tarjeta{background:var(--tarjeta); border:1px solid var(--borde); border-radius:var(--radio);
  padding:20px; margin-top:14px}
.centro{text-align:center}
.precio-grande{font-size:34px; font-weight:800; margin:8px 0 4px; letter-spacing:-.01em}
.resultado .detalle{color:var(--texto2); font-size:14px; margin-top:2px}
.icono-grande{font-size:44px; margin-bottom:6px}
.resultado-deriva h2{margin:6px 0}

.desglose{margin-top:16px; border-top:1px solid var(--borde); padding-top:10px}
.desglose summary{color:var(--texto2); font-size:14px; cursor:pointer; padding:6px 0}
.fila-desglose{display:flex; justify-content:space-between; gap:12px;
  font-size:13.5px; padding:6px 0; border-bottom:1px dashed var(--borde)}
.fila-desglose span:first-child{color:var(--texto2)}
.fila-desglose:last-child{border-bottom:none; font-weight:700}
.fila-desglose:last-child span:first-child{color:var(--texto)}

/* ---------- Dashboard ---------- */
.tarjeta-modulo{display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit;
  background:var(--tarjeta); border:1.5px solid var(--borde); border-radius:var(--radio);
  padding:18px; margin-top:12px}
.tarjeta-modulo:active{transform:scale(.985)}
.tarjeta-modulo .icono{font-size:32px}
.tarjeta-modulo .nombre{font-weight:800; font-size:17px}
.tarjeta-modulo .detalle{color:var(--texto2); font-size:13.5px; margin-top:2px; line-height:1.4}
.tarjeta-modulo.deshabilitado{opacity:.45; pointer-events:none}
.proximamente{font-size:11px; font-weight:700; color:var(--texto2);
  background:#232a36; padding:3px 8px; border-radius:99px; margin-left:6px}

/* ---------- Formularios (datos del cliente) ---------- */
.campo-label{display:block; font-size:14px; color:var(--texto2); margin:14px 0 6px}
.campo{width:100%; background:#0f141b; border:1.5px solid var(--borde); color:var(--texto);
  font-size:18px; font-weight:600; padding:14px; border-radius:12px; outline:none}
.campo:focus{border-color:var(--acento)}
.link-skip{display:block; text-align:center; color:var(--texto2); font-size:14px;
  margin:16px auto 0; text-decoration:underline; background:none; border:none;
  min-height:auto; width:auto; font-weight:400}

/* ---------- Estado de guardado ---------- */
.estado-guardado{margin-top:8px; min-height:22px}
.chip-ok{display:inline-block; font-size:12.5px; font-weight:700; color:var(--ok);
  background:rgba(47,191,113,.12); padding:4px 10px; border-radius:99px}
.chip-fallo{display:inline-block; font-size:12.5px; font-weight:700; color:#ff9d94;
  background:rgba(226,87,76,.15); padding:4px 10px; border-radius:99px}
.btn-mini{min-height:38px; font-size:13.5px; width:auto; display:inline-flex;
  padding:0 16px; margin:8px auto 0}

/* ---------- Historial ---------- */
.fila-historial{cursor:pointer}
.fila-historial summary{list-style:none; display:flex; justify-content:space-between;
  align-items:center; gap:10px; padding:14px 16px}
.fila-historial summary::-webkit-details-marker{display:none}
.fila-historial .cuerpo{padding:0 16px 14px; border-top:1px solid var(--borde)}
.texto-wa{white-space:pre-wrap; font-size:13px; color:var(--texto2);
  background:#0f141b; border-radius:10px; padding:12px; margin-top:10px; line-height:1.5}