/* Sistema comercial San Francisco · estilos compartidos (login y app) */
:root {
  --t: #0A8F8C; --tq: #2CC5C3; --d: #05302F; --bg: #F3F7F7; --line: #DCE7E7; --g: #5D7372; --g2: #8FA3A2;
  --red: #E5484D; --or: #F5A524; --ok: #18A058; --txt: #10302F; --card: #fff;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: Inter, 'Segoe UI', system-ui, sans-serif; color: var(--txt); background: var(--bg); font-size: 14px; -webkit-font-smoothing: antialiased; }
a { color: var(--t); }
button, input, select, textarea { font: inherit; color: inherit; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 13px; border-radius: 9px; font-weight: 600; font-size: 13px; background: var(--t); color: #fff; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { filter: brightness(1.07); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.l { background: #E8F5F5; color: var(--t); }
.btn.wa { background: #25D366; }
.btn.osc { background: var(--d); }
.btn.rojo { background: #FDE8E8; color: #B42318; }
.btn.chico { padding: 5px 9px; font-size: 12px; }
.badge { display: inline-block; padding: 3px 9px; border-radius: 99px; font-weight: 700; font-size: 11.5px; white-space: nowrap; }
.b-caliente { background: #FDE8E8; color: #C62828; } .b-tibio { background: #FFF3DC; color: #A86300; } .b-frio { background: #E6F0FA; color: #2B5C8A; }
.b-ok { background: #E3F6EC; color: #127A43; } .b-gris { background: #EEF3F3; color: var(--g); }
.muted { color: var(--g); }
input[type=text], input[type=password], input[type=tel], input[type=number], input[type=datetime-local], input[type=search], select, textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--t); box-shadow: 0 0 0 3px rgba(10,143,140,.12); }
label { font-weight: 600; font-size: 13px; display: block; margin-bottom: 5px; }
.error { background: #FDE8E8; color: #9B1C1C; border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.aviso { background: #E8F5F5; color: var(--d); border-radius: 10px; padding: 10px 12px; font-size: 13px; }