/* =========================================================================
   SAP Monitoring Portal — Design tokens
   Paleta: azul corporativo + semaforo EWA-style, consistente con el
   informe HTML previo (Informe_Monitoreo_SAP). Tipografia de sistema
   para legibilidad operativa; monospace para T-codes y datos tecnicos.
   ========================================================================= */
:root{
  --navy:#0a3d62;
  --navy-dark:#072a45;
  --navy-light:#1c5c8a;
  --sky:#9fc3df;

  --green:#2e7d32;       --green-bg:#e8f5e9;     --green-border:#a5d6a7;
  --yellow:#b8860b;      --yellow-bg:#fff8e1;    --yellow-border:#ffd54f;
  --red:#c62828;         --red-bg:#fdecea;       --red-border:#ef9a9a;
  --grey:#616161;        --grey-bg:#f1f1f1;      --grey-border:#cfcfcf;

  --paper:#f5f6f8;
  --surface:#ffffff;
  --ink:#1d2733;
  --ink-soft:#5b6573;
  --ink-faint:#94a0ad;
  --rule:#e1e5ea;

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;

  --shadow-card:0 1px 2px rgba(10,40,70,0.04), 0 1px 12px rgba(10,40,70,0.05);
  --shadow-pop:0 8px 28px rgba(10,40,70,0.14);

  --font-ui:"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --font-mono:"Consolas","SF Mono",Menlo,monospace;
}

*{box-sizing:border-box;}
html,body{margin:0; padding:0; height:100%;}
body{
  font-family:var(--font-ui);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
button{font-family:inherit; cursor:pointer;}
input,select{font-family:inherit;}
a{color:var(--navy-light);}

/* ---------- Buttons ---------- */
.btn{
  font-size:14px; font-weight:600; padding:10px 18px;
  border-radius:var(--radius-sm); border:1px solid transparent;
  transition:transform .05s ease, box-shadow .15s ease;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--navy); color:#fff;}
.btn-primary:hover{background:var(--navy-dark);}
.btn-primary:disabled{background:var(--grey-border); color:#fff; cursor:not-allowed;}
.btn-secondary{background:#fff; color:var(--navy); border-color:var(--rule);}
.btn-secondary:hover{border-color:var(--navy-light);}
.btn-block{width:100%;}
.btn-link{
  background:none; border:none; color:var(--ink-soft); font-size:13px;
  font-weight:600; padding:0; text-align:left;
}
.btn-link:hover{color:var(--navy);}
.btn-back{margin-bottom:6px; display:inline-block;}

/* ---------- Form fields ---------- */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.field-label{font-size:12.5px; font-weight:600; color:var(--ink-soft);}
.field input, .field select{
  font-size:14px; padding:10px 12px; border-radius:var(--radius-sm);
  border:1px solid var(--rule); background:#fff; color:var(--ink);
}
.field input:focus, .field select:focus{
  outline:none; border-color:var(--navy-light);
  box-shadow:0 0 0 3px rgba(28,92,138,0.12);
}
.login-error{
  font-size:13px; color:var(--red); background:var(--red-bg);
  border:1px solid var(--red-border); border-radius:var(--radius-sm);
  padding:8px 12px; margin:0 0 14px;
}
.upload-success{
  font-size:13px; color:var(--green); background:var(--green-bg);
  border:1px solid var(--green-border); border-radius:var(--radius-sm);
  padding:8px 12px; margin:0 0 14px;
}

/* =========================================================================
   LOGIN VIEW
   ========================================================================= */
/* Las dos vistas de nivel superior (login / app) son mutuamente
   excluyentes. Reglas explicitas para evitar que el atributo HTML
   "hidden" sea ganado por la especificidad de .view-login / .app-shell
   en algunos navegadores. */
#view-login[hidden],
#view-app[hidden]{
  display:none !important;
}

.view-login{
  min-height:100vh; height:100vh; width:100%;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 15% 20%, rgba(28,92,138,0.10), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(10,61,98,0.08), transparent 40%),
    var(--paper);
  padding:24px;
  overflow-y:auto;
}
.login-card{
  width:100%; max-width:380px; background:var(--surface);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-pop);
  padding:36px 32px; border:1px solid var(--rule);
}
.login-brand{display:flex; align-items:center; gap:12px; margin-bottom:28px;}
.login-eyebrow{
  margin:0; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:700;
}
.login-title{margin:2px 0 0; font-size:19px; font-weight:700; color:var(--navy-dark);}
.login-note{font-size:13px; color:var(--ink-soft); margin:0 0 16px;}
.login-form[hidden]{display:none;}

/* =========================================================================
   APP SHELL
   ========================================================================= */
.app-shell{display:flex; min-height:100vh;}

.sidebar{
  width:240px; flex:none; background:var(--navy-dark);
  display:flex; flex-direction:column; padding:22px 16px;
  position:sticky; top:0; height:100vh;
}
.sidebar-brand{display:flex; align-items:center; gap:10px; padding:0 8px 26px;}
.sidebar-brand-text{color:#fff; font-weight:700; font-size:15px;}

.sidebar-nav{display:flex; flex-direction:column; gap:4px; flex:1;}
.nav-item{
  display:flex; align-items:center; gap:10px; text-align:left;
  background:none; border:none; color:#bcd2e3; font-size:14px; font-weight:600;
  padding:11px 12px; border-radius:var(--radius-sm); transition:background .15s;
}
.nav-icon{font-size:11px; width:14px; text-align:center; opacity:.8;}
.nav-item:hover{background:rgba(255,255,255,0.06); color:#fff;}
.nav-item.is-active{background:rgba(255,255,255,0.12); color:#fff;}

.sidebar-footer{border-top:1px solid rgba(255,255,255,0.12); padding-top:14px;}
.user-chip{display:flex; align-items:center; gap:10px; padding:6px 8px; margin-bottom:8px;}
.user-avatar{
  width:32px; height:32px; border-radius:50%; background:var(--navy-light);
  color:#fff; font-size:12px; font-weight:700; display:flex;
  align-items:center; justify-content:center; flex:none;
}
.user-info{display:flex; flex-direction:column; overflow:hidden;}
.user-name{color:#fff; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.user-email{color:#90a8bb; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sidebar-footer .btn-link{color:#90a8bb; padding-left:8px;}
.sidebar-footer .btn-link:hover{color:#fff;}

.content{flex:1; padding:32px 40px; max-width:1100px;}
.route[hidden]{display:none;}

.route-header{
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:24px; gap:16px;
}
.route-header h1{margin:0; font-size:24px; font-weight:700; color:var(--navy-dark);}
.route-sub{margin:4px 0 0; font-size:13.5px; color:var(--ink-soft);}

.detail-header-actions{display:flex; align-items:center; gap:12px; flex:none;}

.select-landscape-filter{
  font-size:14px; font-weight:600; padding:9px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--rule); background:#fff; color:var(--navy);
}
.select-landscape-filter:focus{
  outline:none; border-color:var(--navy-light);
  box-shadow:0 0 0 3px rgba(28,92,138,0.12);
}

.sidebar-filter{margin-top:18px; padding:0 12px;}
.sidebar-filter-label{
  display:block; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:#90a8bb; margin-bottom:6px;
}
.select-landscape-sidebar{
  width:100%; font-size:13px; font-weight:600; padding:9px 10px; border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.06); color:#fff;
}
.select-landscape-sidebar:focus{
  outline:none; border-color:var(--sky);
}
.select-landscape-sidebar option{ color:#1d2733; }

.acciones-tomadas-list{display:flex; flex-direction:column; gap:10px;}
.accion-card{
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius-md);
  padding:14px 18px; box-shadow:var(--shadow-card);
}
.accion-card-top{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.accion-card-tx{font-family:var(--font-mono); font-weight:700; color:var(--navy-dark); font-size:13px;}
.accion-card-desc{font-size:13px; color:var(--ink-soft); margin-left:8px;}
.accion-check-label{display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; cursor:pointer; user-select:none;}
.accion-check-label input[type="checkbox"]{width:16px; height:16px; accent-color:var(--green);}
.accion-card.is-revisado{border-left:3px solid var(--green);}
.accion-card textarea{
  width:100%; margin-top:10px; font-family:inherit; font-size:13px; padding:8px 10px;
  border-radius:var(--radius-sm); border:1px solid var(--rule); resize:vertical; min-height:54px;
}
.accion-card textarea:focus{ outline:none; border-color:var(--navy-light); box-shadow:0 0 0 3px rgba(28,92,138,0.12); }
.accion-meta{font-size:11px; color:var(--ink-faint); margin-top:6px;}
.accion-save-status{font-size:11px; margin-top:6px; min-height:14px;}
.accion-save-status.ok{color:var(--green);}
.accion-save-status.err{color:var(--red);}

.section-label{
  font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-faint); margin:32px 0 14px;
}

/* ---------- KPI grid (dashboard) ---------- */
.kpi-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;}
.kpi-card{
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius-md);
  padding:18px 20px; box-shadow:var(--shadow-card);
}
.kpi-card .kpi-label{margin:0 0 8px; font-size:13px; color:var(--ink-soft); font-weight:600;}
.kpi-card .kpi-value{margin:0; font-size:30px; font-weight:700; color:var(--ink);}
.kpi-card.is-green .kpi-value{color:var(--green);}
.kpi-card.is-yellow .kpi-value{color:var(--yellow);}
.kpi-card.is-red .kpi-value{color:var(--red);}

/* ---------- System cards ---------- */
.system-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:14px;}
.system-card{
  background:var(--surface); border:1px solid var(--rule); border-left:4px solid var(--grey-border);
  border-radius:var(--radius-md); padding:16px 20px; box-shadow:var(--shadow-card);
  cursor:pointer; transition:transform .12s ease, box-shadow .12s ease;
}
.system-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-pop);}
.system-card.is-ok{border-left-color:var(--green);}
.system-card.is-alerta{border-left-color:var(--yellow);}
.system-card-top{display:flex; justify-content:space-between; align-items:flex-start;}
.system-card-name{margin:0; font-size:16px; font-weight:700; color:var(--ink);}
.system-card-name small{font-weight:400; color:var(--ink-soft); font-size:13px;}
.system-card-meta{margin:4px 0 0; font-size:12.5px; color:var(--ink-soft);}
.system-card-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px;}

.chip{
  font-size:11px; font-weight:600; padding:3px 9px; border-radius:5px;
  font-family:var(--font-mono); white-space:nowrap;
}
.chip-red{background:var(--red-bg); color:var(--red); border:1px solid var(--red-border);}
.chip-error{background:#FBE3D5; color:#B5471B; border:1px solid #E8A37D; font-weight:700;}
.chip-blue{background:#eef3f8; color:var(--navy-light); border:1px solid #cfe1ef;}

/* ---------- Pills / semaforo ---------- */
.estado-pill{
  display:inline-flex; align-items:center; gap:8px; padding:6px 16px;
  border-radius:999px; font-size:13px; font-weight:700; letter-spacing:.02em;
}
.estado-pill .dot{width:8px; height:8px; border-radius:50%; background:currentColor;}
.estado-pill.is-ok{background:var(--green-bg); color:var(--green);}
.estado-pill.is-alerta{background:var(--yellow-bg); color:var(--yellow);}

.semaforo{
  display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700;
  padding:4px 10px; border-radius:999px; white-space:nowrap;
}
.semaforo .dot{width:9px; height:9px; border-radius:50%; flex:none;}
.semaforo.OK{background:var(--green-bg); color:var(--green);}
.semaforo.OK .dot{background:var(--green);}
.semaforo.ALERTA{background:var(--yellow-bg); color:var(--yellow);}
.semaforo.ALERTA .dot{background:var(--yellow); box-shadow:0 0 0 3px rgba(184,134,11,.18);}
.semaforo.ERROR{background:var(--red-bg); color:var(--red);}
.semaforo.ERROR .dot{background:var(--red); box-shadow:0 0 0 3px rgba(198,40,40,.18);}
.semaforo.INFO{background:var(--grey-bg); color:var(--grey);}
.semaforo.INFO .dot{background:var(--grey);}

/* ---------- Detail view ---------- */
.overview-grid{display:grid; grid-template-columns:200px 1fr; gap:32px; align-items:center; margin-bottom:8px;}
.donut-wrap{display:flex; flex-direction:column; align-items:center;}
.donut-center-label{font-size:11px; color:var(--ink-soft); text-align:center; margin-top:12px; text-transform:uppercase; letter-spacing:.04em;}
.kpi-list{display:flex; flex-direction:column; gap:8px;}
.kpi-row{
  display:grid; grid-template-columns:14px 1fr auto auto; align-items:center; gap:12px;
  padding:10px 14px; border-radius:var(--radius-sm); border:1px solid var(--rule);
}
.kpi-row .sw{width:12px; height:12px; border-radius:3px;}
.kpi-row .label{font-size:13.5px; font-weight:600;}
.kpi-row .count{font-size:18px; font-weight:700; min-width:30px; text-align:right;}
.kpi-row .pct{font-size:11.5px; color:var(--ink-soft); min-width:40px; text-align:right;}

table.check-table{width:100%; border-collapse:collapse; font-size:13.5px;}
table.check-table th{
  text-align:left; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:700; padding:0 12px 10px; border-bottom:2px solid var(--rule);
}
table.check-table td{padding:12px; border-bottom:1px solid var(--rule); vertical-align:top;}
table.check-table tr:last-child td{border-bottom:none;}
table.check-table tr.row-alerta{background:#fffdf6;}
.tx{font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--navy-dark);}
.desc{font-weight:500;}
.det{color:var(--ink-soft); font-size:12px; margin-top:3px; line-height:1.5;}

/* ---------- Upload view ---------- */
.upload-card{
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius-md);
  padding:28px; max-width:520px; box-shadow:var(--shadow-card);
}
.file-drop{
  border:1.5px dashed var(--rule); border-radius:var(--radius-md); padding:28px;
  text-align:center; font-size:13.5px; color:var(--ink-soft); cursor:pointer;
  transition:border-color .15s, background .15s;
}
.file-drop:hover, .file-drop.is-dragover{border-color:var(--navy-light); background:#f3f8fb;}
.file-drop.has-file{border-color:var(--green); background:var(--green-bg); color:var(--green); font-weight:600;}

.upload-preview{
  background:var(--paper); border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:16px;
}
.upload-preview-title{margin:0 0 10px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint);}
.upload-preview-grid{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:0; font-size:13px;}
.upload-preview-grid dt{color:var(--ink-soft); font-weight:600;}
.upload-preview-grid dd{margin:0; color:var(--ink);}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .app-shell{flex-direction:column;}
  .sidebar{
    width:100%; height:auto; position:relative; flex-direction:row;
    align-items:center; padding:14px 16px; gap:16px;
  }
  .sidebar-brand{padding:0;}
  .sidebar-nav{flex-direction:row; flex:none;}
  .sidebar-footer{display:none;}
  .content{padding:20px;}
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .system-grid{grid-template-columns:1fr;}
  .overview-grid{grid-template-columns:1fr; justify-items:center;}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .system-card{transition:none;}
}