:root { --guinda:#7B1E3A; --fondo:#f6f2f3; --texto:#222; --gris:#666; --ok:#1d9a6c; --aviso:#d98e04; --azul:#2f6fdb; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; font-family: Arial, Helvetica, sans-serif; color:var(--texto); background:var(--fondo); }
header { background:var(--guinda); color:#fff; padding:10px 14px; display:flex; align-items:center; justify-content:space-between; }
header h1 { font-size:16px; margin:0; } header a { color:#fff; font-size:13px; }
#mapa { width:100%; height:42vh; }
.tarjeta { background:#fff; margin:10px; padding:14px; border-radius:12px; box-shadow:0 1px 4px rgba(0,0,0,.12); }
.tarjeta h2 { margin:0 0 8px; font-size:16px; color:var(--guinda); }
label { display:block; font-size:13px; margin:10px 0 4px; color:var(--gris); }
input, select, textarea { width:100%; padding:10px; font-size:15px; border:1px solid #ccc; border-radius:8px; background:#fff; }
button { padding:12px 14px; font-size:15px; border:0; border-radius:10px; background:var(--guinda); color:#fff; cursor:pointer; }
button.sec { background:#e9e1e4; color:var(--guinda); } button.ok { background:var(--ok); } button.mal { background:#b3261e; }
button:disabled { opacity:.5; } .fila { display:flex; gap:8px; } .fila > * { flex:1; }
.aviso { background:#fff4d6; border:1px solid #f0d58c; border-radius:8px; padding:10px; font-size:13px; margin:10px 0; }
.alerta { background:#fde8e6; border:1px solid #f0b4ae; border-radius:8px; padding:10px; font-size:14px; margin:10px 0; }
.estado { font-size:18px; font-weight:bold; margin:4px 0 8px; } .sub { color:var(--gris); font-size:13px; }
.chip { display:inline-block; padding:2px 8px; border-radius:10px; font-size:12px; background:#e9e1e4; margin-right:4px; }
.pin { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:17px; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.4); }
.estrellas button { font-size:26px; padding:4px 8px; background:transparent; color:#e0a800; }
table { width:100%; border-collapse:collapse; font-size:12px; } th, td { text-align:left; padding:4px 6px; border-bottom:1px solid #eee; } th { color:var(--guinda); }
.panelgrid { display:grid; grid-template-columns: 1fr 360px; height:calc(100% - 92px); } .panelgrid #mapa { height:100%; } .lateral { overflow:auto; padding:8px; }
@media (max-width: 800px) { .panelgrid { grid-template-columns: 1fr; height:auto; } .panelgrid #mapa { height:45vh; } }
.pie { font-size:11px; color:var(--gris); padding:10px 14px 24px; text-align:center; }
nav.menu { display:flex; gap:8px; overflow-x:auto; background:#fff; border-bottom:1px solid #e3d9dc; padding:0 10px; height:48px; align-items:center; box-shadow:0 1px 3px rgba(0,0,0,.06); scrollbar-width:none; }
nav.menu::-webkit-scrollbar { display:none; }
nav.menu a { display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; white-space:nowrap; padding:7px 14px; border-radius:999px; font-size:14px; font-weight:600; color:#7B1E3A; background:#f6eef1; border:1px solid #ead9df; text-decoration:none; }
nav.menu a:hover { background:#ecdde3; }
nav.menu a.actual { background:#7B1E3A; border-color:#7B1E3A; color:#fff; }
@media (min-width: 801px) { nav.menu { justify-content:center; } }
header a[href="/"] { display:none; }
/* ---- pantalla del cliente: tres opciones grandes y fáciles de tocar ---- */
.opciones { display:flex; flex-direction:column; gap:10px; }
.opcion { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:14px; min-height:68px; background:#fff; color:var(--texto); border:2px solid #e3d9dc; border-radius:14px; }
.opcion .ico { font-size:30px; line-height:1; }
.opcion .tit { font-size:17px; font-weight:bold; display:block; }
.opcion .pre { font-size:13px; color:var(--gris); display:block; margin-top:2px; }
.opcion .monto { margin-left:auto; font-size:18px; font-weight:bold; color:var(--guinda); white-space:nowrap; }
.opcion.elegida { border-color:var(--guinda); background:#f9eef2; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.chips button { padding:10px 16px; background:#fff; color:var(--texto); border:2px solid #e3d9dc; border-radius:999px; font-size:15px; }
.chips button.elegida { border-color:var(--guinda); background:#f9eef2; color:var(--guinda); font-weight:bold; }
.chips input { width:110px; }
.resumen { margin-top:12px; padding:10px 12px; background:#f6f2f3; border-radius:10px; font-size:14px; }
.btn-grande { width:100%; padding:16px; font-size:18px; font-weight:bold; border-radius:14px; }
.mini-mapa { height:20vh; min-height:150px; border-radius:12px; margin:0 10px; overflow:hidden; }
.sw { display:inline-block; width:14px; height:14px; border-radius:50%; border:1px solid #888; margin-right:6px; vertical-align:-2px; }