:root{
  --bg:#ffffff; --surface:#f8fafc; --card:#ffffff; --border:#e5e7eb;
  --text:#0f172a; --muted:#64748b; --primary:#2563eb; --primary-acc:#06b6d4;
  --good:#16a34a; --bad:#dc2626; --soft-green:#e8f5e9; --soft-red:#ffe4e6;
  --chip:#f1f5f9; --chip-text:#0f172a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--primary);text-decoration:none}
.container{max-width:1180px;margin:24px auto;padding:0 16px}

/* Topbar */
.topbar.simple{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);background:#fff}
.brand-row{display:flex;align-items:center;gap:10px;font-weight:700}
.brand-title{letter-spacing:.2px}
.logo-dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-acc))}
.top-actions{display:flex;gap:8px}

/* Chips */
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:var(--chip);color:var(--chip-text);border-radius:999px;font-size:12px;font-weight:600;border:1px solid #0001;box-shadow:0 1px 2px #0001}
.chip.soft{background:#f8fafc}
.chip .chip-dot{width:8px;height:8px;border-radius:50%;background:var(--dot,#94a3b8)}
.chip.ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.chip.small{padding:4px 8px;font-size:11px}
.chip.danger{border-color:#fecaca;color:#b91c1c}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:12px 16px}
.chips.compact{margin:0}

/* Cards & headings */
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:0 6px 18px #0000000d;margin-bottom:18px;overflow:hidden}
.card-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--border)}
.title{margin:0;font-size:20px}
/* Gradient title + reusable gradient text */
.title.gradient, .color-hint{
  background: linear-gradient(to right, #2563eb 10%, #06b6d4 55%, #ff70a6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.card-head-left{display:flex;align-items:center;gap:16px}
.date-picker input[type=date]{background:#fff;color:var(--text);border:1px solid #c7d2fe;padding:10px 12px;border-radius:12px;box-shadow:0 1px 2px #0001}

/* Calendar */
.calendar-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 8px 12px 12px;
  background:
    linear-gradient(to right, rgba(0,0,0,0.08), rgba(0,0,0,0)) left/12px 100% no-repeat,
    linear-gradient(to left,  rgba(0,0,0,0.08), rgba(0,0,0,0)) right/12px 100% no-repeat;
  background-attachment: local, local;
}
/* Hora + 4 vehículos con ancho mínimo para forzar scroll en móviles */
.calendar.pretty{
  display:grid;
  grid-template-columns: 84px repeat(4, minmax(180px, 1fr));
  gap:10px;
  padding:6px 0;
}
.header-cell{font-size:12px;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--border)}
.veh-head .veh-pill{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border:1px dashed #e5e7eb;border-radius:999px;background:#fff;color:#111}
.time-cell{padding:0 8px;display:flex;align-items:center;justify-content:flex-start}
.time-chip{display:inline-flex;align-items:center;gap:6px;background:#f1f5f9;color:#0f172a;border:1px solid #e2e8f0;padding:6px 10px;border-radius:999px;font-size:12px;box-shadow:0 1px 2px #0001}

/* Sticky header/first column */
.calendar.pretty .header-cell.sticky-top{
  position: sticky; top: 0; z-index: 3;
  background: #ffffff; box-shadow: inset 0 -1px 0 #e5e7eb;
}
.calendar.pretty .time-cell.sticky-col,
.calendar.pretty .header-cell.time-col.sticky-col{
  position: sticky; left: 0; z-index: 4;
  background: #ffffff; border-right: 1px solid #eef2f7;
}

/* Cells */
.cell{display:flex;align-items:center;justify-content:center;width:100%;padding:12px;border-radius:14px;border:1px solid var(--border);cursor:pointer;font-weight:700;letter-spacing:.2px;transition:all .18s ease-in-out;background:#fff}
.pill{border-radius:999px}
.cell.available{ background: #e8f7ee; border-color: #8ee4b5; color: #0f5132; }
.cell.available:hover{ transform:translateY(-1px); box-shadow: 0 6px 16px rgba(16,185,129,.25); }
.cell.occupied{ background: #ffe7ea; border-color: #f5a3ae; color: #7a1320; }
.cell.occupied:hover{ transform:translateY(-1px); box-shadow: 0 6px 16px rgba(239,68,68,.21); }

/* Legend & footer */
.legend{display:flex;gap:12px;color:var(--muted)}
.footer{padding:24px;text-align:center;color:var(--muted)}

/* Auth / forms / buttons */
.auth-body{display:grid;place-items:center;min-height:100vh;background:radial-gradient(1000px 400px at 100% 100%,#e2e8f0 0%,#ffffff 55%)}
.auth-card{width:min(560px,92vw);background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:0 10px 30px #00000012;padding:24px}
.muted{color:var(--muted)} .small{font-size:12px}
.alert{margin:12px 0;padding:12px;border-radius:12px;border:1px solid var(--border)}
.alert.success{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}
.alert.error{background:#fef2f2;color:#991b1b;border-color:#fecaca}
.form{display:grid;gap:12px}
.form input,.form select,.form textarea{width:100%;padding:12px;border-radius:12px;border:1px solid var(--border);background:#ffffff;color:var(--text)}
.form .btn{margin-top:4px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:999px;background:linear-gradient(135deg,#2563eb,#06b6d4);border:0;color:#fff;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 12px 20px #2563eb33}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn.danger{background:linear-gradient(135deg,#dc2626,#ef4444);border:0}

/* Admin layout */
.grid-admin{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3, 1fr);gap:12px}
.full{grid-column:1/-1}
.table{display:grid;padding:12px}
.tr{display:grid;grid-template-columns:1.2fr .7fr .7fr 1.2fr 1fr 1fr .8fr;gap:8px;padding:10px 0;border-bottom:1px solid var(--border)}
.tr.head{color:var(--muted);font-size:12px}

/* Modal */
.modal::backdrop{background:rgba(0,0,0,.35)}
.modal{border:none;border-radius:16px;padding:0;max-width:520px;width:92vw}
.modal-content{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px}
.modal-actions{display:flex;justify-content:flex-end;margin-top:12px}

/* A11y */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Responsive tweaks */
@media (max-width: 900px){
  .date-picker input[type=date]{ padding: 10px 14px; border-radius: 999px; }
}
@media (max-width: 680px){
  .card-header{ flex-direction: column; align-items: flex-start; gap: 10px; }
  .legend{ margin-top: 4px; }
}