/* =========================================================
   Gestor de Instalaciones — Sistema de diseño
   Paleta: grafito de campo + ámbar de aviso + tickets de trabajo
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --graphite-950:#14171b;
  --graphite-900:#1b1f24;
  --graphite-800:#242a31;
  --graphite-700:#323a43;
  --graphite-600:#4a545f;
  --paper:#f4f5f3;
  --paper-dim:#e8e9e6;
  --amber:#f0a202;
  --amber-dark:#c17e00;
  --teal:#2d9cdb;
  --green:#2f9e5b;
  --red:#e0544a;
  --ink:#1b1f24;
  --ink-soft:#5b6470;

  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --radius:10px;
  --shadow-card:0 1px 2px rgba(20,23,27,.06), 0 8px 24px -12px rgba(20,23,27,.18);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}

h1,h2,h3,h4{font-family:var(--font-display);margin:0;letter-spacing:-0.01em;}

.mono{font-family:var(--font-mono);}

/* ---------- Auth screens ---------- */
.auth-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 20% 15%, rgba(240,162,2,.10), transparent 40%),
    var(--graphite-950);
  padding:24px;
}
.auth-card{
  width:100%;
  max-width:400px;
  background:var(--paper);
  border-radius:14px;
  padding:36px 32px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
  position:relative;
  overflow:hidden;
}
.auth-card::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;height:6px;
  background:repeating-linear-gradient(135deg, var(--amber) 0 10px, var(--amber-dark) 10px 20px);
}
.auth-brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:28px;
}
.auth-brand .mark{
  width:38px;height:38px;border-radius:9px;
  background:var(--graphite-900);
  display:flex;align-items:center;justify-content:center;
  color:var(--amber);font-family:var(--font-display);font-weight:700;font-size:18px;
}
.auth-brand .name{font-family:var(--font-display);font-weight:700;font-size:18px;}
.auth-brand .sub{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em;}

.field{margin-bottom:16px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;text-transform:uppercase;letter-spacing:.03em;}
.field input, .field select, .field textarea{
  width:100%;
  padding:11px 13px;
  border:1.5px solid var(--paper-dim);
  border-radius:8px;
  background:#fff;
  font-size:14.5px;
  color:var(--ink);
  transition:border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color:var(--amber);
}
.field-row{display:flex;gap:12px;}
.field-row .field{flex:1;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;
  border-radius:8px;
  border:none;
  font-weight:600;
  font-size:14px;
  transition:transform .1s, box-shadow .15s, background .15s;
}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--graphite-900);color:#fff;width:100%;}
.btn-primary:hover{background:var(--graphite-800);}
.btn-amber{background:var(--amber);color:var(--graphite-950);}
.btn-amber:hover{background:var(--amber-dark);color:#fff;}
.btn-ghost{background:transparent;color:var(--ink-soft);border:1.5px solid var(--paper-dim);}
.btn-ghost:hover{border-color:var(--graphite-600);color:var(--ink);}
.btn-danger{background:transparent;color:var(--red);}
.btn-danger:hover{background:rgba(224,84,74,.1);}
.btn-sm{padding:7px 12px;font-size:12.5px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

.auth-switch{margin-top:18px;text-align:center;font-size:13.5px;color:var(--ink-soft);}
.auth-switch a{color:var(--amber-dark);font-weight:600;}
.error-box{
  background:rgba(224,84,74,.08);
  border:1px solid rgba(224,84,74,.3);
  color:#b33227;
  padding:10px 13px;
  border-radius:8px;
  font-size:13.5px;
  margin-bottom:16px;
  display:none;
}
.error-box.show{display:block;}

/* ---------- App shell ---------- */
.app{
  display:grid;
  grid-template-columns:220px 1fr;
  min-height:100vh;
}
.sidebar{
  background:var(--graphite-950);
  color:#fff;
  padding:22px 16px;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;height:100vh;
}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:0 8px;margin-bottom:30px;}
.sidebar .brand .mark{
  width:34px;height:34px;border-radius:8px;background:var(--amber);
  display:flex;align-items:center;justify-content:center;color:var(--graphite-950);
  font-family:var(--font-display);font-weight:700;
}
.sidebar .brand .name{font-family:var(--font-display);font-weight:700;font-size:15.5px;color:#fff;flex:1;}
.mobile-logout-btn{display:none;}

.notif-wrap{position:relative;}
.notif-bell{
  position:relative;background:transparent;border:none;color:#c7cdd4;font-size:17px;
  padding:6px;border-radius:8px;line-height:1;
}
.notif-bell:hover{background:var(--graphite-800);}
.notif-badge{
  position:absolute;top:-2px;right:-2px;background:var(--amber);color:var(--graphite-950);
  font-size:10px;font-weight:700;border-radius:10px;padding:1px 5px;font-family:var(--font-mono);
  min-width:16px;text-align:center;
}
.notif-dropdown{
  display:none;position:absolute;top:calc(100% + 8px);right:0;width:320px;max-height:400px;
  overflow-y:auto;background:#fff;border-radius:12px;box-shadow:0 20px 50px -12px rgba(0,0,0,.35);
  z-index:50;
}
.notif-dropdown.show{display:block;}
.notif-dropdown-head{
  display:flex;align-items:center;justify-content:space-between;padding:12px 14px;
  border-bottom:1px solid var(--paper-dim);
}
.notif-dropdown-head strong{font-size:13.5px;color:var(--ink);}
.notif-dropdown-head button{background:none;border:none;color:var(--teal);font-size:11.5px;font-weight:600;}
.notif-list{padding:6px;}
.notif-item{
  display:block;width:100%;text-align:left;background:none;border:none;padding:10px 10px;
  border-radius:8px;font-size:12.5px;color:var(--ink);line-height:1.4;cursor:pointer;
}
.notif-item:hover{background:var(--paper);}
.notif-item.unread{background:rgba(240,162,2,.07);}
.notif-item .time{display:block;font-size:11px;color:var(--ink-soft);margin-top:3px;}
.notif-empty{padding:24px 14px;text-align:center;color:var(--ink-soft);font-size:12.5px;}

.nav{display:flex;flex-direction:column;gap:2px;flex:1;}
.nav a{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:8px;
  color:#a9b0b9;font-size:14px;font-weight:500;
}
.nav a:hover{background:var(--graphite-800);color:#fff;}
.nav a.active{background:var(--graphite-800);color:var(--amber);}
.nav .icon{width:18px;text-align:center;font-size:15px;}
.nav-divider{margin:16px 0 6px;padding:0 12px;font-size:10.5px;color:#6b7280;text-transform:uppercase;letter-spacing:.08em;font-weight:700;}

.sidebar-foot{border-top:1px solid var(--graphite-800);padding-top:14px;margin-top:14px;}
.sidebar-user{font-size:13px;color:#9aa2ac;margin-bottom:10px;padding:0 4px;}
.sidebar-user strong{display:block;color:#fff;font-size:13.5px;}

.main{padding:28px 34px 60px;max-width:1180px;}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;flex-wrap:wrap;gap:14px;}
.topbar h1{font-size:23px;}
.topbar .eyebrow{font-size:11.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:4px;}

/* ---------- Stat cards ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(180px,1fr));gap:14px;margin-bottom:28px;}
.stat-card{
  background:#fff;border-radius:var(--radius);padding:18px 18px 16px;
  box-shadow:var(--shadow-card);border-left:4px solid var(--graphite-700);
}
.stat-card.amber{border-left-color:var(--amber);}
.stat-card.green{border-left-color:var(--green);}
.stat-card.red{border-left-color:var(--red);}
.stat-card.teal{border-left-color:var(--teal);}
.stat-card .label{font-size:11.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:8px;}
.stat-card .value{font-family:var(--font-mono);font-size:26px;font-weight:600;}

/* ---------- Job ticket cards ---------- */
.ticket-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(300px,1fr));gap:16px;}
.ticket{
  background:#fff;border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  border-left:4px solid var(--amber);
  position:relative;overflow:hidden;
}
.ticket.completada{border-left-color:var(--green);}
.ticket::after{
  content:"";position:absolute;right:-9px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;border-radius:50%;background:var(--paper);
}
.ticket-body{padding:16px 18px;}
.ticket-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px;}
.ticket-client{font-family:var(--font-display);font-weight:700;font-size:15.5px;}
.ticket-price{font-family:var(--font-mono);font-weight:600;font-size:15px;color:var(--amber-dark);white-space:nowrap;}
.ticket-address{font-size:13.5px;color:var(--ink-soft);margin-bottom:4px;line-height:1.45;}
.ticket-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--ink-soft);margin-top:10px;}
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
}
.badge.pendiente{background:rgba(240,162,2,.14);color:var(--amber-dark);}
.badge.completada{background:rgba(47,158,91,.14);color:var(--green);}
.ticket-divider{border-top:1.5px dashed var(--paper-dim);margin:0 0;}
.ticket-actions{display:flex;gap:8px;padding:12px 18px;flex-wrap:wrap;}

/* ---------- Buttons small icons ---------- */
.btn-icon{background:var(--paper);color:var(--ink-soft);border:1px solid var(--paper-dim);}
.btn-icon:hover{background:var(--paper-dim);color:var(--ink);}
.btn-maps{background:var(--teal);color:#fff;}
.btn-maps:hover{background:#2385bd;}

/* ---------- Panels / cards ---------- */
.panel{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-card);padding:22px 24px;margin-bottom:22px;}
.panel h3{font-size:16px;margin-bottom:14px;}

/* ---------- Filters bar ---------- */
.filters-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;align-items:center;}
.filters-bar input, .filters-bar select{
  padding:9px 12px;border:1.5px solid var(--paper-dim);border-radius:8px;background:#fff;font-size:13.5px;
}
.tabs{display:flex;gap:6px;background:var(--paper-dim);padding:4px;border-radius:9px;width:fit-content;margin-bottom:20px;}
.tab{padding:8px 16px;border-radius:6px;font-size:13.5px;font-weight:600;color:var(--ink-soft);background:transparent;border:none;}
.tab.active{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1);}

/* ---------- Technician chips ---------- */
.tech-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.tech-chip{
  display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 6px;
  border-radius:20px;border:1.5px solid var(--paper-dim);background:#fff;
  font-size:12.5px;font-weight:600;color:var(--ink-soft);
}
.tech-chip:hover{border-color:var(--graphite-600);}
.tech-chip.active{background:var(--graphite-950);border-color:var(--graphite-950);color:#fff;}
.tech-chip .count{
  font-family:var(--font-mono);font-size:10.5px;background:rgba(0,0,0,.08);
  border-radius:10px;padding:1px 6px;
}
.tech-chip.active .count{background:rgba(255,255,255,.18);}
.tech-avatar{
  width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:700;color:#fff;flex-shrink:0;
}
.tech-avatar.lg{width:26px;height:26px;font-size:11px;}

/* ---------- Date nav / view toggle ---------- */
.date-nav{display:flex;align-items:center;gap:6px;}
.date-nav input[type=date]{padding:9px 10px;}
.view-toggle{display:flex;gap:4px;background:var(--paper-dim);padding:3px;border-radius:8px;margin-left:auto;}
.view-btn{padding:7px 12px;border-radius:6px;border:none;background:transparent;font-size:12.5px;font-weight:600;color:var(--ink-soft);}
.view-btn.active{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1);}

.results-summary{font-size:12.5px;color:var(--ink-soft);margin-bottom:12px;}
.results-summary strong{color:var(--ink);}

/* ---------- Compact installations table ---------- */
.install-table{width:100%;border-collapse:collapse;font-size:13px;}
.install-table th{
  text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-soft);padding:8px 10px;border-bottom:2px solid var(--paper-dim);white-space:nowrap;
}
.install-table td{padding:9px 10px;border-bottom:1px solid var(--paper-dim);vertical-align:middle;}
.install-table tbody tr:hover{background:var(--paper);}
.install-table .cell-tech{display:flex;align-items:center;gap:8px;white-space:nowrap;}
.install-table .cell-addr{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.install-table .cell-addr a{color:var(--teal);}
.install-table .badge{cursor:pointer;border:none;}
.install-table .row-actions{display:flex;gap:4px;white-space:nowrap;}
.install-table .row-actions .btn{padding:5px 8px;font-size:11.5px;}

/* ---------- Calendar ---------- */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;}
.cal-dow{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);font-weight:700;text-align:center;padding-bottom:6px;}
.cal-cell{
  min-height:82px;background:#fff;border-radius:8px;padding:8px;
  border:1.5px solid var(--paper-dim);cursor:pointer;transition:border-color .12s, transform .1s;
  display:flex;flex-direction:column;gap:6px;
}
.cal-cell:hover{border-color:var(--amber);}
.cal-cell.empty{background:transparent;border:none;cursor:default;}
.cal-cell.today{border-color:var(--graphite-900);border-width:2px;}
.cal-cell.selected{background:var(--graphite-950);border-color:var(--graphite-950);}
.cal-cell.selected .cal-daynum{color:#fff;}
.cal-daynum{font-family:var(--font-mono);font-size:13px;font-weight:600;}
.cal-count{
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  background:var(--amber);color:var(--graphite-950);
  border-radius:5px;padding:1px 6px;align-self:flex-start;
}
.cal-nav{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.cal-nav .btn-icon{width:34px;height:34px;padding:0;border-radius:8px;}
.cal-month-label{font-family:var(--font-display);font-weight:700;font-size:17px;min-width:170px;text-align:center;text-transform:capitalize;}

/* ---------- OCR ---------- */
.dropzone{
  border:2px dashed var(--paper-dim);
  border-radius:var(--radius);
  padding:40px 20px;
  text-align:center;
  background:#fff;
  transition:border-color .15s, background .15s;
  cursor:pointer;
}
.dropzone:hover, .dropzone.drag{border-color:var(--amber);background:rgba(240,162,2,.04);}
.dropzone .icon{font-size:34px;margin-bottom:10px;}
.dropzone p{color:var(--ink-soft);font-size:13.5px;margin:4px 0 0;}
.progress-wrap{background:var(--paper-dim);border-radius:20px;height:8px;overflow:hidden;margin-top:14px;}
.progress-bar{background:var(--amber);height:100%;width:0%;transition:width .2s;}
.progress-label{font-size:12.5px;color:var(--ink-soft);margin-top:6px;font-family:var(--font-mono);}

.draft-card{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-card);
  padding:16px 18px;margin-bottom:12px;border-left:4px solid var(--teal);
}
.draft-card .field-row{margin-bottom:10px;}
.draft-card .remove-draft{float:right;}

.line-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:8px 10px;border-radius:7px;border:1px solid var(--paper-dim);
  background:#fff;font-size:13.5px;font-family:var(--font-mono);
  cursor:pointer;user-select:none;
}
.line-item:hover{border-color:var(--amber);}
.line-item input{margin-top:3px;}
.line-item.used{opacity:.45;background:var(--paper-dim);text-decoration:line-through;cursor:not-allowed;}
.line-item .idx{color:var(--ink-soft);font-weight:600;min-width:22px;}

/* ---------- Table (billing) ---------- */
table.data-table{width:100%;border-collapse:collapse;font-size:13.5px;}
table.data-table th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-soft);padding:8px 10px;border-bottom:2px solid var(--paper-dim);
}
table.data-table td{padding:10px;border-bottom:1px solid var(--paper-dim);}
table.data-table tr:last-child td{border-bottom:none;}
table.data-table .amount{font-family:var(--font-mono);font-weight:600;text-align:right;}

.empty-state{text-align:center;padding:50px 20px;color:var(--ink-soft);}
.empty-state .icon{font-size:36px;margin-bottom:10px;}

.toast{
  position:fixed;bottom:24px;right:24px;background:var(--graphite-950);color:#fff;
  padding:12px 18px;border-radius:9px;font-size:13.5px;box-shadow:0 12px 30px rgba(0,0,0,.3);
  opacity:0;transform:translateY(10px);transition:opacity .2s, transform .2s;pointer-events:none;z-index:999;
}
.toast.show{opacity:1;transform:translateY(0);}
.toast.error{background:var(--red);}

.modal-overlay{
  position:fixed;inset:0;background:rgba(20,23,27,.55);display:none;
  align-items:center;justify-content:center;z-index:900;padding:20px;
}
.modal-overlay.show{display:flex;}
.modal-box{background:var(--paper);border-radius:14px;padding:26px 26px 22px;max-width:440px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 30px 60px -20px rgba(0,0,0,.5);}
.modal-box h3{margin-bottom:16px;}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px;}

/* =========================================================
   RESPONSIVE — la app se usa sobre todo en móvil, así que estas
   reglas no son un simple "reajuste": rehacen la navegación como
   una barra inferior fija (patrón de app nativa) y apilan todo
   lo que en escritorio va a dos columnas.
   ========================================================= */
@media (max-width: 820px){
  .app{grid-template-columns:1fr;}

  /* ---- Header superior fijo (marca + notificaciones + logout) ---- */
  .sidebar{
    position:fixed;top:0;left:0;right:0;height:auto;z-index:80;
    flex-direction:row;align-items:center;padding:10px 14px;
  }
  .sidebar .brand{margin-bottom:0;gap:8px;}
  .sidebar .brand .mark{width:30px;height:30px;font-size:13px;}
  .sidebar .brand .name{font-size:14px;}
  .mobile-logout-btn{
    display:inline-flex;align-items:center;justify-content:center;
    width:34px;height:34px;border-radius:8px;color:#c7cdd4;font-size:16px;background:transparent;
  }
  .mobile-logout-btn:active{background:var(--graphite-800);}
  .sidebar-foot{display:none;}

  /* ---- Barra de navegación inferior fija ---- */
  .nav{
    position:fixed;bottom:0;left:0;right:0;z-index:80;
    flex-direction:row;justify-content:flex-start;gap:0;
    background:var(--graphite-950);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -4px 20px rgba(0,0,0,.25);
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .nav::-webkit-scrollbar{display:none;}
  .nav a{
    flex-direction:column;gap:3px;flex-shrink:0;min-width:64px;
    padding:6px 8px;border-radius:10px;font-size:10.5px;text-align:center;
  }
  .nav .icon{font-size:19px;width:auto;}
  .nav-divider{display:none;}

  /* Deja hueco arriba y abajo para el header y la barra fijos */
  .main{padding:76px 16px 92px;}

  /* ---- Formularios: una columna en móvil ---- */
  .field-row{flex-direction:column;gap:0;}
  .field-row .field{width:100%;}
  .auth-card{padding:28px 22px;}

  /* ---- Topbar y botones a ancho completo ---- */
  .topbar{gap:12px;}
  .topbar > *:last-child:not(h1){width:100%;}
  .topbar .btn{width:100%;justify-content:center;}

  /* ---- Filtros: apilados y a ancho completo ---- */
  .filters-bar{flex-direction:column;align-items:stretch;}
  .filters-bar input, .filters-bar select{width:100%;}
  .filters-bar .btn{width:100%;justify-content:center;}
  .date-nav{width:100%;}
  .date-nav input[type=date]{flex:1;}
  .view-toggle{margin-left:0;width:100%;}
  .view-btn{flex:1;}

  /* ---- Chips de técnico: carrusel horizontal ---- */
  .tech-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;scrollbar-width:none;}
  .tech-chips::-webkit-scrollbar{display:none;}
  .tech-chip{flex-shrink:0;}

  /* ---- Pestañas: permiten envolver en vez de desbordar ---- */
  .tabs{flex-wrap:wrap;width:100%;}
  .tab{flex:1;text-align:center;}

  /* ---- Tarjetas de instalación a ancho completo ---- */
  .ticket-grid{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:repeat(2, 1fr);}

  /* ---- Calendario: celdas más compactas ---- */
  .cal-cell{min-height:52px;padding:5px;}
  .cal-nav{flex-wrap:wrap;gap:8px;}
  .cal-month-label{min-width:auto;flex:1;}

  /* ---- Notificaciones: desplegable centrado y a ancho de pantalla ---- */
  .notif-dropdown{
    position:fixed;top:60px;left:12px;right:12px;width:auto;max-height:70vh;z-index:85;
  }

  /* ---- Modal a ancho completo con márgenes pequeños ---- */
  .modal-box{padding:22px 18px 18px;}

  /* ---- Tablas con muchas columnas: scroll horizontal táctil ---- */
  table.data-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;}

  /* ---- Botones e inputs con más área táctil ---- */
  .btn{padding:12px 18px;}
  .btn-sm{padding:10px 14px;}
  .field input, .field select, .field textarea{padding:12px 13px;font-size:16px;}
  /* ---- Toast por encima de la barra inferior fija ---- */
  .toast{
    left:16px;right:16px;bottom:calc(76px + env(safe-area-inset-bottom));
    text-align:center;
  }
}

@media (max-width: 480px){
  .main{padding:72px 12px 92px;}
  .stat-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .stat-card{padding:14px;}
  .stat-card .value{font-size:21px;}
  .nav a{min-width:58px;font-size:10px;}
  .auth-card{padding:24px 18px;}
  .install-table th, .install-table td{padding:8px 6px;font-size:12px;}
  .tab{font-size:12px;padding:8px 10px;}
}