/* =============================================================
   PORTAL DEL CLIENTE — assets/css/portal.css
   Paleta consistente con el sitio: naranja + slate oscuro
   ============================================================= */
:root{
  --pt-brand:   #ff6a3d;
  --pt-brand-2: #ffb547;
  --pt-bg:      #f8fafc;
  --pt-card:    #ffffff;
  --pt-border:  #e2e8f0;
  --pt-text:    #0f172a;
  --pt-muted:   #64748b;
  --pt-soft:    #f1f5f9;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--pt-bg);
  color:var(--pt-text);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:'Space Grotesk',sans-serif; margin:0; letter-spacing:-.01em; }
a{ color:var(--pt-brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
code{
  font-family:ui-monospace,SFMono-Regular,monospace;
  background:var(--pt-soft);
  padding:1px 6px;
  border-radius:4px;
  font-size:.85em;
}

/* ===========================================================
   LOGIN
   =========================================================== */
.portal-login{ background:linear-gradient(135deg,#fff7f2 0%,#f8fafc 100%); }
.pl-wrap{
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
}
.pl-visual{
  background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);
  color:#fff;
  padding:50px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
}
.pl-visual::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,106,61,.15) 0, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255,181,71,.10) 0, transparent 50%);
}
.pl-brand{
  position:relative;
  display:flex; align-items:center; gap:10px;
  color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:700;
}
.pl-brand .mark{
  width:40px; height:40px;
  background:linear-gradient(135deg,var(--pt-brand),var(--pt-brand-2));
  border-radius:10px;
  display:grid; place-items:center;
  color:#fff;
}
.pl-quote{ position:relative; }
.pl-quote h2{
  font-size:2.4rem;
  line-height:1.15;
  margin-bottom:14px;
  font-weight:600;
}
.pl-quote p{ color:#cbd5e1; max-width:380px; font-size:1.05rem; }
.pl-features{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 24px;
}
.pl-feat{
  display:flex; align-items:center; gap:10px;
  color:#cbd5e1; font-size:.9rem;
}
.pl-feat span{
  width:32px; height:32px;
  background:rgba(255,255,255,.06);
  border-radius:8px;
  display:grid; place-items:center;
}
.pl-form-wrap{
  display:grid; place-items:center;
  padding:40px;
}
.pl-form{ width:100%; max-width:380px; }
.pl-form h1{ font-size:1.8rem; margin-bottom:8px; }
.pl-sub{ color:var(--pt-muted); margin-bottom:24px; }
.pl-alert{
  background:#fee2e2; color:#991b1b;
  padding:12px 14px; border-radius:8px;
  font-size:.9rem; margin-bottom:16px;
}
.pl-help{
  text-align:center;
  margin-top:24px;
  color:var(--pt-muted);
  font-size:.88rem;
}
.pl-help p{ margin:6px 0; }
@media (max-width:900px){
  .pl-wrap{ grid-template-columns:1fr; }
  .pl-visual{ padding:30px; min-height:auto; }
  .pl-quote h2{ font-size:1.6rem; }
  .pl-features{ display:none; }
}

/* ===========================================================
   APP (sidebar + main)
   =========================================================== */
.pt-app{ display:flex; min-height:100vh; }

.pt-sidebar{
  width:260px;
  background:#0f172a;
  color:#cbd5e1;
  padding:20px 14px;
  display:flex; flex-direction:column;
  flex-shrink:0;
  position:sticky; top:0;
  height:100vh;
  overflow-y:auto;
}
.pt-brand{
  display:flex; align-items:center; gap:10px;
  color:#fff;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  padding:0 8px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.pt-brand .mark{
  width:34px; height:34px;
  background:linear-gradient(135deg,var(--pt-brand),var(--pt-brand-2));
  border-radius:8px;
  display:grid; place-items:center;
  color:#fff; font-size:.95rem;
}
.pt-customer{
  display:flex; align-items:center; gap:12px;
  padding:14px 8px;
  margin:8px 0 8px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.pt-customer-avatar{
  width:40px; height:40px;
  border-radius:10px;
  background:linear-gradient(135deg,#3b82f6,#8b5cf6);
  display:grid; place-items:center;
  color:#fff; font-weight:700;
  flex-shrink:0;
}
.pt-customer-info strong{
  display:block; color:#fff; font-size:.92rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:170px;
}
.pt-customer-info span{
  display:block; color:#64748b; font-size:.78rem;
  font-family:ui-monospace,monospace;
}
.pt-nav{ padding:8px 0; }
.pt-link{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  color:#cbd5e1;
  border-radius:8px;
  font-size:.93rem;
  margin-bottom:2px;
  transition:background .15s, color .15s;
}
.pt-link:hover{ background:rgba(255,255,255,.05); color:#fff; text-decoration:none; }
.pt-link.active{
  background:linear-gradient(90deg, rgba(255,106,61,.15), rgba(255,106,61,0));
  color:#fff;
  border-left:3px solid var(--pt-brand);
  padding-left:9px;
}
.pt-link .ico{ width:20px; text-align:center; }
.pt-badge{
  margin-left:auto;
  background:var(--pt-brand);
  color:#fff;
  font-size:.7rem;
  padding:2px 7px;
  border-radius:10px;
  font-weight:600;
}
.pt-badge-warn{ background:#f59e0b; }
.pt-divider{
  height:1px; background:rgba(255,255,255,.08);
  margin:14px 4px;
}
.pt-bottom{
  margin-top:auto;
  display:flex; align-items:center; gap:10px;
  padding:12px 8px;
  border-top:1px solid rgba(255,255,255,.08);
}
.pt-user{ flex:1; min-width:0; }
.pt-user strong{ color:#fff; font-size:.85rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pt-user span{ color:#64748b; font-size:.75rem; }
.pt-logout{
  color:#64748b; padding:6px 10px; border-radius:6px;
}
.pt-logout:hover{ background:rgba(255,255,255,.05); color:#fff; text-decoration:none; }

.pt-main{
  flex:1;
  padding:32px 40px;
  min-width:0;
}

/* ===========================================================
   COMPONENTES
   =========================================================== */
.pt-topbar{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:20px; margin-bottom:28px; flex-wrap:wrap;
}
.pt-topbar h1{ font-size:1.9rem; }
.pt-sub{ color:var(--pt-muted); margin-top:6px; font-size:.95rem; }

/* Botones */
.btn-portal-primary{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,var(--pt-brand),var(--pt-brand-2));
  color:#fff;
  padding:11px 22px;
  border:0; border-radius:8px;
  font-weight:600; font-size:.92rem;
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 4px 14px rgba(255,106,61,.25);
  transition:transform .15s, box-shadow .15s;
}
.btn-portal-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(255,106,61,.35);
  text-decoration:none;
  color:#fff;
}
.btn-portal-ghost{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent;
  color:var(--pt-text);
  border:1.5px solid var(--pt-border);
  padding:10px 20px;
  border-radius:8px;
  font-weight:600; font-size:.92rem;
  cursor:pointer; text-decoration:none;
}
.btn-portal-ghost:hover{ border-color:var(--pt-brand); color:var(--pt-brand); text-decoration:none; }
.btn-portal-ghost-sm{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.85rem; padding:7px 14px;
  border:1px solid var(--pt-border);
  border-radius:6px;
  color:var(--pt-text);
  background:#fff;
}
.btn-portal-ghost-sm:hover{ border-color:var(--pt-brand); color:var(--pt-brand); text-decoration:none; }

/* Inputs */
.input,.select,.textarea{
  width:100%;
  padding:10px 14px;
  border:1.5px solid var(--pt-border);
  border-radius:8px;
  font:inherit;
  background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.input:focus,.select:focus,.textarea:focus{
  outline:none;
  border-color:var(--pt-brand);
  box-shadow:0 0 0 3px rgba(255,106,61,.12);
}
.textarea{ resize:vertical; min-height:90px; line-height:1.5; }
.field{ margin-bottom:16px; }
.field label{
  display:block;
  font-size:.85rem;
  font-weight:600;
  margin-bottom:6px;
  color:#334155;
}
.pt-grid-2-form{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* Alertas */
.pt-alert{
  padding:12px 16px;
  border-radius:8px;
  margin-bottom:18px;
  font-size:.92rem;
  border:1px solid;
}
.pt-alert-ok{ background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.pt-alert-error{ background:#fee2e2; border-color:#fecaca; color:#991b1b; }

/* Cards */
.pt-card{
  background:var(--pt-card);
  border:1px solid var(--pt-border);
  border-radius:12px;
  padding:0;
  margin-bottom:20px;
  overflow:hidden;
}
.pt-card-head{
  padding:18px 22px;
  border-bottom:1px solid var(--pt-border);
  display:flex; justify-content:space-between; align-items:center;
}
.pt-card-head h3{ font-size:1.05rem; }
.pt-card-body{ padding:22px; }
.pt-card > h3{ padding:18px 22px 14px; font-size:1.05rem; }
.pt-card > .pt-list,
.pt-card > .pt-empty{ padding:0 22px 22px; }
.pt-link-mini{ font-size:.85rem; font-weight:600; }

/* KPI */
.pt-kpis{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  margin-bottom:24px;
}
.pt-kpi{
  background:var(--pt-card);
  border:1px solid var(--pt-border);
  border-radius:12px;
  padding:18px;
  display:flex; align-items:center; gap:14px;
}
.pt-kpi-ico{
  width:46px; height:46px;
  border-radius:10px;
  background:var(--pt-soft);
  display:grid; place-items:center;
  font-size:1.4rem;
  flex-shrink:0;
}
.pt-kpi-num{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.5rem;
  font-weight:700;
  line-height:1.1;
}
.pt-kpi-label{
  color:var(--pt-muted);
  font-size:.83rem;
  margin-top:2px;
}
.pt-kpi-warn   { border-color:#fed7aa; background:#fff7ed; }
.pt-kpi-warn   .pt-kpi-ico{ background:#ffedd5; }
.pt-kpi-danger { border-color:#fecaca; background:#fef2f2; }
.pt-kpi-danger .pt-kpi-ico{ background:#fee2e2; }

/* Grid 2 columnas */
.pt-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:20px;
}

/* Listas dentro de cards */
.pt-list{ display:flex; flex-direction:column; }
.pt-list-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 0;
  gap:14px;
  border-bottom:1px solid var(--pt-border);
  color:var(--pt-text);
}
.pt-list-item:last-child{ border-bottom:0; }
.pt-list-item:hover{ text-decoration:none; }
.pt-list-title{ font-weight:600; font-size:.95rem; }
.pt-list-sub{ color:var(--pt-muted); font-size:.83rem; margin-top:3px; }

.pt-empty{
  padding:30px 22px;
  text-align:center;
  color:var(--pt-muted);
}
.pt-empty-card{ text-align:center; padding:50px 30px; }
.pt-empty-ico{ font-size:3rem; margin-bottom:14px; }
.pt-empty-card h3{ font-size:1.2rem; margin-bottom:8px; }
.pt-empty-card p{ color:var(--pt-muted); max-width:420px; margin:0 auto 18px; }

/* Filtros (tabs) */
.pt-filters{
  display:flex;
  gap:6px;
  margin-bottom:20px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--pt-border);
}
.pt-filter{
  padding:10px 16px;
  color:var(--pt-muted);
  border-bottom:2px solid transparent;
  font-size:.9rem; font-weight:500;
  margin-bottom:-1px;
}
.pt-filter:hover{ color:var(--pt-text); text-decoration:none; }
.pt-filter.active{
  color:var(--pt-brand);
  border-bottom-color:var(--pt-brand);
  font-weight:600;
}
.pt-filter span{
  margin-left:6px;
  background:var(--pt-soft);
  padding:1px 8px;
  border-radius:10px;
  font-size:.78rem;
}
.pt-filter.active span{ background:#ffedd5; color:var(--pt-brand); }

/* Status badges */
.pt-status{
  display:inline-block;
  padding:3px 10px;
  border-radius:20px;
  font-size:.75rem;
  font-weight:600;
  text-transform:capitalize;
  background:var(--pt-soft);
  color:var(--pt-text);
}
.pt-status-abierto,
.pt-status-programada,
.pt-status-pendiente{ background:#dbeafe; color:#1e40af; }
.pt-status-en_proceso,
.pt-status-en_curso,
.pt-status-confirmada,
.pt-status-activo{ background:#fef3c7; color:#92400e; }
.pt-status-espera_cliente{ background:#fde68a; color:#78350f; }
.pt-status-resuelto,
.pt-status-completada,
.pt-status-pagado{ background:#d1fae5; color:#065f46; }
.pt-status-cerrado,
.pt-status-cancelado,
.pt-status-cancelada,
.pt-status-no_asistio,
.pt-status-inactivo{ background:#e5e7eb; color:#374151; }
.pt-status-vencido,
.pt-status-moroso{ background:#fee2e2; color:#991b1b; }
.pt-status-parcial,
.pt-status-pausado{ background:#fed7aa; color:#9a3412; }
.pt-status-proximo{ background:#e0e7ff; color:#3730a3; }

/* Prioridades */
.pt-prio{
  display:inline-block;
  padding:2px 8px;
  border-radius:4px;
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.pt-prio-baja   { background:#dbeafe; color:#1e40af; }
.pt-prio-media  { background:#e5e7eb; color:#374151; }
.pt-prio-alta   { background:#fed7aa; color:#9a3412; }
.pt-prio-urgente{ background:#fee2e2; color:#991b1b; }

/* Tags pequeñas */
.pt-tag{
  display:inline-block;
  padding:2px 8px;
  border-radius:4px;
  font-size:.72rem;
  font-weight:600;
  background:var(--pt-soft);
  color:#475569;
  margin-top:4px;
}
.pt-tag-ok    { background:#d1fae5; color:#065f46; }
.pt-tag-warn  { background:#fed7aa; color:#9a3412; }
.pt-tag-danger{ background:#fee2e2; color:#991b1b; }
.pt-tag-muted { background:#e5e7eb; color:#6b7280; }

/* Tabla */
.pt-table-wrap{ overflow-x:auto; }
.pt-table{
  width:100%;
  border-collapse:collapse;
}
.pt-table th{
  text-align:left;
  font-size:.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--pt-muted);
  padding:14px 16px;
  border-bottom:1px solid var(--pt-border);
  background:#f8fafc;
}
.pt-table td{
  padding:14px 16px;
  border-bottom:1px solid var(--pt-border);
  font-size:.92rem;
}
.pt-table tbody tr:last-child td{ border-bottom:0; }
.pt-table tbody tr:hover{ background:#fafafa; }
.pt-row-danger{ background:rgba(239,68,68,.04); }

.pt-section-h{
  font-size:1.1rem;
  margin:0 0 16px;
  color:#334155;
}

/* ===========================================================
   SERVICIOS
   =========================================================== */
.pt-services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(310px, 1fr));
  gap:18px;
}
.pt-service-card{
  background:#fff;
  border:1px solid var(--pt-border);
  border-radius:12px;
  padding:22px;
  transition:transform .2s, box-shadow .2s;
}
.pt-service-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}
.pt-service-pausado{ opacity:.75; }
.pt-service-cancelado,
.pt-service-vencido{ opacity:.6; background:#fafafa; }
.pt-service-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
}
.pt-service-head strong{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.15rem;
  color:var(--pt-brand);
}
.pt-service-card h3{
  font-size:1.05rem;
  margin-bottom:6px;
}
.pt-service-desc{
  color:var(--pt-muted);
  font-size:.88rem;
  margin-bottom:14px;
  line-height:1.5;
}
.pt-service-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 14px;
  margin:14px 0;
  padding-top:14px;
  border-top:1px solid var(--pt-border);
}
.pt-service-meta div{ font-size:.82rem; }
.pt-service-meta dt{ color:var(--pt-muted); margin:0; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; }
.pt-service-meta dd{ margin:2px 0 0; }
.pt-service-notes{
  font-size:.85rem;
  color:#64748b;
  background:#f8fafc;
  padding:10px 12px;
  border-radius:6px;
  margin:12px 0;
  border-left:3px solid var(--pt-border);
}
.pt-service-cta{
  display:block;
  text-align:center;
  margin-top:12px;
  padding:8px;
  background:#f8fafc;
  border-radius:6px;
  font-size:.85rem;
  color:#475569;
}
.pt-service-cta:hover{ background:#fff7ed; color:var(--pt-brand); text-decoration:none; }

/* ===========================================================
   EQUIPOS
   =========================================================== */
.pt-equipos-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(360px, 1fr));
  gap:18px;
}
.pt-equipo-card{
  display:flex;
  gap:18px;
  background:#fff;
  border:1px solid var(--pt-border);
  border-radius:12px;
  padding:20px;
}
.pt-equipo-ico{
  width:54px; height:54px;
  background:linear-gradient(135deg,#fff5ee,#ffedd5);
  border-radius:12px;
  display:grid; place-items:center;
  font-size:1.7rem;
  flex-shrink:0;
}
.pt-equipo-body{ flex:1; min-width:0; }
.pt-equipo-body h3{ font-size:1.05rem; margin:6px 0 12px; }
.pt-equipo-meta{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  margin:0;
}
.pt-equipo-meta div{
  display:flex; gap:10px;
  font-size:.85rem;
}
.pt-equipo-meta dt{ color:var(--pt-muted); width:90px; flex-shrink:0; }
.pt-equipo-meta dd{ margin:0; flex:1; }
.pt-equipo-desc{ font-size:.85rem; color:#64748b; margin:10px 0 0; }
.pt-equipo-actions{ margin-top:14px; }

/* ===========================================================
   TICKET DETALLE
   =========================================================== */
.pt-tk-meta{
  display:flex; align-items:center; gap:10px;
  margin-top:8px;
  font-size:.88rem;
  color:var(--pt-muted);
  flex-wrap:wrap;
}
.pt-tk-grid{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:24px;
}
.pt-tk-aside .pt-card{
  padding:18px 20px;
  margin-bottom:16px;
}
.pt-tk-aside .pt-card h3{ font-size:.95rem; margin-bottom:12px; }
.pt-tk-dl{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:8px 14px;
  margin:0;
  font-size:.88rem;
}
.pt-tk-dl dt{ color:var(--pt-muted); }
.pt-tk-dl dd{ margin:0; }
.pt-dl-grid{ grid-template-columns:auto 1fr auto 1fr; }
@media (max-width:700px){
  .pt-dl-grid{ grid-template-columns:auto 1fr; }
}

.pt-msg{
  background:#fff;
  border:1px solid var(--pt-border);
  border-radius:12px;
  padding:16px 18px;
  margin-bottom:14px;
}
.pt-msg-staff{
  border-left:4px solid var(--pt-brand);
  background:#fffbf7;
}
.pt-msg-customer{
  border-left:4px solid #3b82f6;
}
.pt-msg-head{
  display:flex; justify-content:space-between;
  font-size:.85rem;
  margin-bottom:8px;
  color:var(--pt-muted);
}
.pt-msg-head strong{ color:var(--pt-text); }
.pt-msg-body{ font-size:.95rem; line-height:1.6; }
.pt-msg-form{
  background:#fff;
  border:1px solid var(--pt-border);
  border-radius:12px;
  padding:16px 18px;
  margin-top:18px;
}

.pt-form-actions{
  padding:18px 22px;
  border-top:1px solid var(--pt-border);
  display:flex;
  justify-content:flex-end;
  gap:10px;
  background:#f8fafc;
}

/* ===========================================================
   CITAS
   =========================================================== */
.pt-citas-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(380px, 1fr));
  gap:16px;
  margin-bottom:30px;
}
.pt-cita-card{
  display:flex;
  background:#fff;
  border:1px solid var(--pt-border);
  border-radius:12px;
  overflow:hidden;
}
.pt-cita-fecha{
  background:linear-gradient(135deg,#0f172a,#1e293b);
  color:#fff;
  padding:20px 22px;
  text-align:center;
  min-width:100px;
  display:flex; flex-direction:column;
  justify-content:center;
  position:relative;
}
.pt-cita-dia{
  font-family:'Space Grotesk',sans-serif;
  font-size:2.2rem;
  font-weight:700;
  line-height:1;
}
.pt-cita-mes{
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:.8rem;
  margin-top:4px;
  color:#cbd5e1;
}
.pt-cita-tag-hoy{
  position:absolute;
  top:8px; right:8px;
  background:var(--pt-brand);
  color:#fff;
  font-size:.65rem;
  padding:2px 6px;
  border-radius:4px;
  font-weight:700;
}
.pt-cita-hoy .pt-cita-fecha{
  background:linear-gradient(135deg,var(--pt-brand),var(--pt-brand-2));
}
.pt-cita-info{ padding:18px 20px; flex:1; }
.pt-cita-info h3{ font-size:1.05rem; margin:8px 0 10px; }
.pt-cita-meta{
  display:flex; flex-direction:column;
  gap:5px;
  font-size:.85rem;
  color:var(--pt-muted);
}
.pt-cita-desc{ font-size:.88rem; color:#475569; margin:10px 0 0; }
.pt-cita-actions{ margin-top:12px; }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:1000px){
  .pt-kpis{ grid-template-columns:1fr 1fr; }
  .pt-grid-2{ grid-template-columns:1fr; }
  .pt-tk-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .pt-sidebar{
    position:fixed; left:-280px;
    transition:left .25s;
    z-index:1000;
    box-shadow:4px 0 20px rgba(0,0,0,.2);
  }
  .pt-sidebar.open{ left:0; }
  .pt-main{ padding:24px 18px; }
  .pt-grid-2-form{ grid-template-columns:1fr; }
  .pt-table th, .pt-table td{ padding:10px 12px; font-size:.85rem; }
}