:root{
  --sp-bg:#f4f7fb;
  --sp-card:#ffffff;
  --sp-text:#0f172a;
  --sp-muted:#5b667a;
  --sp-border:#dfe7ef;
  --sp-primary:#0f8aa6;
  --sp-primary-dark:#0b7188;
  --sp-soft:#e9f7fb;
  --sp-shadow:0 20px 60px rgba(15,23,42,.10);
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--sp-text);
  background:
    radial-gradient(circle at top left, rgba(15,138,166,.18), transparent 35%),
    linear-gradient(180deg,#f8fbfd 0%,var(--sp-bg) 100%);
  padding:38px 18px;
}
body:before{
  content:"Secupet Portal cliente · Reembolsos";
  display:block;
  max-width:980px;
  margin:0 auto 14px;
  color:var(--sp-primary-dark);
  font-weight:800;
  letter-spacing:.02em;
  font-size:14px;
}
body > *{
  max-width:980px;
  margin-left:auto!important;
  margin-right:auto!important;
}
body > h1:first-of-type,
.secupet-public-shell > h1:first-of-type{
  margin-top:0;
}
h1{
  font-size:34px;
  line-height:1.15;
  margin:0 0 14px;
  color:#06162d;
  letter-spacing:-.03em;
}
p{
  color:var(--sp-muted);
  line-height:1.55;
  margin:0 0 16px;
}
form,
.secupet-public-card,
.card,
.panel-card{
  background:var(--sp-card);
  border:1px solid var(--sp-border);
  border-radius:24px;
  box-shadow:var(--sp-shadow);
  padding:26px;
  margin-top:18px;
}
label{
  display:block;
  font-weight:800;
  color:#334155;
  margin-bottom:8px;
}
input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="file"], select, textarea{
  width:100%;
  max-width:520px;
  border:1px solid var(--sp-border);
  border-radius:14px;
  padding:13px 14px;
  font-size:15px;
  background:#fff;
  outline:none;
  transition:border .15s, box-shadow .15s;
  margin:4px 8px 12px 0;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--sp-primary);
  box-shadow:0 0 0 4px rgba(15,138,166,.12);
}
button, input[type="submit"], .btn, a.btn{
  appearance:none;
  border:0;
  border-radius:14px;
  background:var(--sp-primary);
  color:#fff!important;
  padding:13px 18px;
  font-weight:800;
  font-size:15px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  transition:background .15s, transform .08s;
}
button:hover, input[type="submit"]:hover, .btn:hover{background:var(--sp-primary-dark)}
button:active, input[type="submit"]:active{transform:translateY(1px)}
table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 12px 32px rgba(15,23,42,.06);
  margin:18px 0;
}
th,td{padding:12px 14px;border-bottom:1px solid var(--sp-border);text-align:left;vertical-align:top}
th{font-size:12px;text-transform:uppercase;color:#64748b;background:#f8fafc;letter-spacing:.04em}
.alert,.mensaje,.notice{
  background:#fff7e6;
  border:1px solid #fed7aa;
  color:#7c2d12;
  border-radius:18px;
  padding:16px;
  margin:18px 0;
}
.secupet-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  color:var(--sp-primary-dark);
  background:var(--sp-soft);
  border:1px solid #c8edf5;
  border-radius:999px;
  padding:8px 13px;
  margin-bottom:18px;
}
.muted{color:var(--sp-muted);font-size:14px}
@media(max-width:700px){
  body{padding:22px 12px}
  h1{font-size:28px}
  form,.secupet-public-card,.card,.panel-card{padding:20px;border-radius:20px}
  input[type="text"],input[type="number"],input[type="date"],input[type="email"],input[type="file"],select,textarea{max-width:100%}
  button,input[type="submit"],.btn,a.btn{width:100%;margin-top:4px}
}

/* Fase 4.5 visual · portal cliente más amigable */
.client-welcome-card { display: grid; grid-template-columns: 1fr; gap: 18px; }
.portal-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 6px; }
.portal-action-card { display: block; text-decoration: none; color: var(--sp-text, #0f172a); background: linear-gradient(180deg,#ffffff,#f8fcff); border: 1px solid var(--sp-border, #dfe7ef); border-radius: 18px; padding: 18px; box-shadow: 0 10px 28px rgba(15,23,42,.06); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.portal-action-card:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(15,23,42,.10); border-color: rgba(15,138,166,.35); }
.portal-action-card span { display:block; font-size: 18px; font-weight: 900; color: var(--sp-primary, #0f8aa6); margin-bottom: 6px; }
.portal-action-card small { display:block; color: var(--sp-muted, #667085); line-height: 1.35; }
.history-header { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom: 14px; }
.history-header h2 { margin-bottom: 6px; }
.history-list { display: grid; gap: 12px; }
.client-history-item { border: 1px solid var(--sp-border, #dfe7ef); background: #fff; border-radius: 18px; padding: 16px; box-shadow: 0 8px 22px rgba(15,23,42,.05); }
.history-card-portal { border-left: 5px solid var(--sp-primary, #0f8aa6); }
.history-card-legacy { border-left: 5px solid #94a3b8; background: #fbfdff; }
.history-topline { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom: 12px; }
.history-topline > strong { font-size: 15px; color:#0f172a; }
.history-detail-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.history-detail-grid div { background: #f8fafc; border: 1px solid #eef2f6; border-radius: 14px; padding: 10px 12px; }
.history-detail-grid small { display:block; color: var(--sp-muted, #667085); font-size: 12px; margin-bottom: 4px; }
.history-detail-grid strong { display:block; font-size: 14px; }
.history-note { margin-top: 12px; padding: 12px; border-radius: 14px; background:#fff7e6; border:1px solid #fed7aa; color:#7c2d12; }
.empty-history { border:1px dashed var(--sp-border, #dfe7ef); border-radius:16px; padding:18px; color:var(--sp-muted, #667085); background:#fbfdff; }
.client-portal-card{background:var(--sp-card,#fff);border:1px solid var(--sp-border,#dfe7ef);border-radius:24px;box-shadow:var(--sp-shadow,0 20px 60px rgba(15,23,42,.10));padding:26px;margin:18px 0;}
.form-premium{background:transparent;border:0;box-shadow:none;padding:0;margin-top:0;}
.row-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:14px;}
.badge-soft{display:inline-block;padding:5px 10px;border-radius:999px;font-weight:800;font-size:12px}.badge-good{background:#e7f8f1;color:#08734f}.badge-warn{background:#fff7e6;color:#a16207}.badge-bad{background:#fdecec;color:#a11624}.btn-premium{border:0;border-radius:14px;padding:13px 18px;font-weight:800;text-decoration:none;display:inline-flex}.btn-primary-premium{background:var(--sp-primary,#0f8aa6);color:#fff!important}.alert-premium{background:#fff7e6;border:1px solid #fed7aa;color:#7c2d12;border-radius:18px;padding:16px;margin:18px 0}.muted-text{color:var(--sp-muted,#5b667a);font-size:14px}
@media(max-width:760px){ .portal-actions{grid-template-columns:1fr}.history-header{display:block}.history-detail-grid,.row-form{grid-template-columns:1fr} }

/* Fase 4.5.1 · pestañas reales y historial tipo tabla */
.client-hero { display:none; }
body:before { content:"Secupet Portal cliente · Reembolsos"; }
.rut-card { margin-top: 14px; }
.rut-card-main { display:grid; grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr); gap:24px; align-items:end; }
.eyebrow { display:inline-flex; color:var(--sp-primary-dark); background:var(--sp-soft); border:1px solid #c8edf5; padding:7px 12px; border-radius:999px; font-weight:900; font-size:13px; margin-bottom:12px; }
.rut-form { background: transparent!important; border: 0!important; box-shadow: none!important; padding:0!important; margin:0!important; }
.rut-inline { display:flex; gap:10px; align-items:center; }
.rut-inline input { margin:0!important; max-width: 100%!important; }
.portal-message { margin-top:18px; }
.client-summary-card { padding: 24px 26px; }
.client-summary-grid { display:grid; grid-template-columns: minmax(0,1fr) 260px; gap:18px; align-items:center; }
.summary-mini-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.summary-mini-grid div { background:#f8fafc; border:1px solid #edf2f7; border-radius:16px; padding:14px; }
.summary-mini-grid small { display:block; color:var(--sp-muted); font-size:12px; margin-bottom:5px; }
.summary-mini-grid strong { font-size:24px; }
.client-tabs-card { max-width:980px; margin:18px auto!important; background:#fff; border:1px solid var(--sp-border); border-radius:24px; box-shadow:var(--sp-shadow); overflow:hidden; }
.client-tabbar { display:flex; gap:8px; background:#f8fafc; border-bottom:1px solid var(--sp-border); padding:12px; position:sticky; top:0; z-index:2; }
.client-tab-btn { border:0; background:transparent; color:#475569!important; padding:13px 18px; border-radius:14px; font-weight:900; cursor:pointer; min-height:44px; box-shadow:none; }
.client-tab-btn:hover { background:#edf6f9; color:var(--sp-primary-dark)!important; }
.client-tab-btn.active { background:var(--sp-primary); color:#fff!important; box-shadow:0 10px 22px rgba(15,138,166,.22); }
.tab-panel { display:none; padding:26px; }
.tab-panel.active { display:block; }
.panel-intro { margin-bottom:18px; }
.panel-intro h2 { margin:0 0 6px; font-size:26px; letter-spacing:-.02em; }
.request-form { background:transparent!important; border:0!important; box-shadow:none!important; padding:0!important; margin:0!important; }
.row-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:16px; }
.row-form.one-col { grid-template-columns:1fr; }
.row-form input, .row-form select, .row-form textarea { width:100%; max-width:100%!important; margin:0!important; }
.document-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:16px 0; }
.upload-box { border:1px dashed #cbd5e1; background:#fbfdff; border-radius:18px; padding:16px; min-height:122px; display:flex; flex-direction:column; justify-content:space-between; }
.upload-box span { color:#0f172a; font-weight:900; line-height:1.25; }
.upload-box b { color:#a11624; font-size:12px; display:block; margin-top:4px; }
.upload-box em { color:var(--sp-primary-dark); font-style:normal; font-size:12px; display:block; margin-top:4px; }
.upload-box input { margin:10px 0 0!important; max-width:100%!important; }
.history-header-modern { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }
.history-table-wrap { overflow:auto; border:1px solid var(--sp-border); border-radius:18px; background:#fff; box-shadow:0 10px 26px rgba(15,23,42,.05); }
.client-history-table { margin:0!important; box-shadow:none!important; border-radius:0!important; }
.client-history-table th { white-space:nowrap; }
.client-history-table td { vertical-align:middle; }
.status-pill { display:inline-flex; align-items:center; justify-content:center; padding:6px 11px; border-radius:999px; font-size:12px; font-weight:900; white-space:nowrap; }
.status-ok { background:#e7f8f1; color:#08734f; }
.status-warn { background:#fff7e6; color:#a16207; }
.status-bad { background:#fdecec; color:#a11624; }
.status-soft { background:#eef2f7; color:#475569; }
.history-list-mobile { display:none; }
.btn-premium { appearance:none; border:0; border-radius:14px; padding:13px 18px; font-weight:900; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; min-height:44px; cursor:pointer; }
.btn-primary-premium { background:var(--sp-primary); color:#fff!important; }
.btn-primary-premium:hover { background:var(--sp-primary-dark); }
@media(max-width:880px){
  .rut-card-main,.client-summary-grid,.row-form,.document-grid{grid-template-columns:1fr}
  .summary-mini-grid{grid-template-columns:1fr 1fr}
  .client-tabbar{position:static;display:grid;grid-template-columns:1fr 1fr}
  .history-table-wrap{display:none}
  .history-list-mobile{display:grid;gap:12px}
  .history-header-modern{display:block}
}
@media(max-width:520px){
  .rut-inline{display:grid;grid-template-columns:1fr}
  .client-tabbar{grid-template-columns:1fr}
  .summary-mini-grid{grid-template-columns:1fr}
  .tab-panel,.client-portal-card{padding:20px}
}