:root{
  --navy-deep:#101a2e;
  --navy-mid:#16233c;
  --navy-soft:#1f3152;
  --teal:#179e8c;
  --teal-dark:#117d6f;
  --ink:#152033;
  --ink-soft:#5c6579;
  --ink-faint:#8b93a6;
  --border:#e2e6ee;
  --bg-app:#f4f6fb;
  --surface:#ffffff;
  --amber:#b5790f;
  --amber-bg:#fdf1dd;
  --danger:#c23f3f;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color-scheme:light;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg-app);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--teal-dark);}
button{font-family:var(--sans);cursor:pointer;}
input,select,textarea{font-family:var(--sans);}

.oculto{display:none !important;}

/* ================= LOGIN ================= */
.login-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at 15% 15%, rgba(23,158,140,.18), transparent 45%),
    linear-gradient(160deg,var(--navy-deep),var(--navy-mid) 55%,var(--navy-soft));
}
.login-card{
  width:100%;
  max-width:420px;
  background:var(--surface);
  border-radius:18px;
  padding:34px 32px;
  box-shadow:0 30px 60px -20px rgba(8,14,28,.55);
}
.login-brand{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:6px;
}
.login-brand .scales{font-size:26px;line-height:1;}
.login-brand .word{
  font-family:var(--serif);
  font-weight:600;
  font-size:24px;
}
.login-brand .word .app{color:var(--teal);}
.login-sub{
  color:var(--ink-soft);
  font-size:13.5px;
  margin:0 0 26px;
}
.campo{margin-bottom:16px;}
.campo label{
  display:block;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:6px;
}
.campo input{
  width:100%;
  padding:11px 13px;
  border:1px solid var(--border);
  border-radius:9px;
  font-size:14px;
  color:var(--ink);
  background:#fff;
}
.campo input:focus{
  outline:none;
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(23,158,140,.15);
}
.btn-primario{
  width:100%;
  padding:12px;
  border:none;
  border-radius:9px;
  background:var(--teal);
  color:#fff;
  font-size:14.5px;
  font-weight:700;
  letter-spacing:.01em;
  margin-top:4px;
}
.btn-primario:hover{background:var(--teal-dark);}
.btn-primario:disabled{opacity:.6;cursor:default;}

.login-error{
  background:#fdeceb;
  color:var(--danger);
  border:1px solid #f4c6c4;
  border-radius:8px;
  padding:9px 12px;
  font-size:12.5px;
  margin-bottom:14px;
}

.login-demo{
  margin-top:20px;
  background:#eef9f6;
  border:1px solid #cdece5;
  border-radius:10px;
  padding:12px 14px;
  font-size:12px;
  color:var(--ink-soft);
  line-height:1.6;
}
.login-demo strong{color:var(--ink);}

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

.topbar{
  background:var(--navy-deep);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 22px;
}
.topbar .login-brand .word{color:#fff;font-size:19px;}
.topbar-user{display:flex;align-items:center;gap:12px;}
.topbar-user .nombre{font-size:13.5px;font-weight:700;line-height:1.3;text-align:right;}
.topbar-user .rol{font-size:11px;color:#a9b3c6;text-align:right;text-transform:capitalize;}
.avatar{
  width:34px;height:34px;border-radius:50%;
  background:var(--teal);
  color:#fff;font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center;
}
.btn-salir{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-size:12.5px;
  font-weight:600;
  padding:8px 14px;
  border-radius:8px;
}
.btn-salir:hover{background:rgba(255,255,255,.16);}

.layout{display:flex;flex:1;}

.sidebar{
  width:208px;
  flex:none;
  background:#fff;
  border-right:1px solid var(--border);
  padding:18px 12px;
}
.sidebar button{
  display:block;
  width:100%;
  text-align:left;
  background:none;
  border:none;
  padding:10px 12px;
  border-radius:8px;
  font-size:13.5px;
  font-weight:600;
  color:var(--ink-soft);
  margin-bottom:4px;
}
.sidebar button:hover{background:#f1f4f9;color:var(--ink);}
.sidebar button.activo{background:#e8f6f3;color:var(--teal-dark);}

.contenido{flex:1;padding:28px 32px;max-width:1180px;}

.encabezado-pagina h1{
  font-family:var(--serif);
  font-size:26px;
  font-weight:600;
  margin:0 0 4px;
}
.encabezado-pagina p{color:var(--ink-soft);margin:0 0 24px;font-size:13.5px;}

.fila-cabecera{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}

.tiles{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin:4px 0 26px;
}
@media (max-width:860px){.tiles{grid-template-columns:repeat(2,1fr);}}
.tile{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px 18px;
}
.tile .label{font-size:12.5px;color:var(--ink-soft);margin-bottom:6px;}
.tile .val{font-family:var(--serif);font-size:26px;font-weight:600;}

.panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:20px 22px;
  margin-bottom:20px;
}
.panel h2{font-size:16px;font-weight:700;margin:0 0 14px;}

table.tabla{width:100%;border-collapse:collapse;}
table.tabla th{
  text-align:left;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-faint);padding:0 0 10px;border-bottom:1px solid var(--border);
}
table.tabla td{
  font-size:13.5px;color:var(--ink);padding:11px 0;border-bottom:1px solid var(--border);
  vertical-align:middle;
}
table.tabla tr:last-child td{border-bottom:none;}

.badge{
  display:inline-block;
  font-size:11.5px;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
  background:var(--amber-bg);
  color:var(--amber);
}
.badge.teal{background:#e8f6f3;color:var(--teal-dark);}
.badge.danger{background:#fbe8e7;color:var(--danger);}
.badge.gris{background:#eef1f6;color:var(--ink-soft);}

.btn-chico{
  background:#eef1f6;
  border:1px solid var(--border);
  color:var(--ink);
  font-size:12px;
  font-weight:600;
  padding:6px 13px;
  border-radius:7px;
}
.btn-chico:hover{background:#e3e8f0;}

.btn-teal{
  background:var(--teal);
  color:#fff;
  border:none;
  font-size:13px;
  font-weight:700;
  padding:10px 16px;
  border-radius:9px;
}
.btn-teal:hover{background:var(--teal-dark);}

.lista-expedientes{display:flex;flex-direction:column;gap:12px;}
.expediente-item{
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
}
.expediente-cab{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  background:#fff;
}
.expediente-cab .titulo{font-weight:700;font-size:14px;}
.expediente-cab .meta{font-size:12px;color:var(--ink-soft);margin-top:2px;}
.expediente-detalle{
  background:#fafbfd;
  border-top:1px solid var(--border);
  padding:16px;
  display:none;
}
.expediente-detalle.abierto{display:block;}

.timeline{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.timeline-item{
  display:flex;
  gap:12px;
  padding:10px 0;
  border-bottom:1px dashed var(--border);
}
.timeline-item:last-child{border-bottom:none;}
.timeline-fecha{
  font-size:11.5px;color:var(--ink-faint);font-weight:700;white-space:nowrap;width:86px;flex:none;
}
.timeline-cuerpo .tipo{font-weight:700;font-size:13px;}
.timeline-cuerpo .desc{font-size:12.5px;color:var(--ink-soft);margin-top:2px;}

.form-inline{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-end;
  border-top:1px solid var(--border);
  padding-top:14px;
}
.form-inline .campo{margin-bottom:0;flex:1;min-width:140px;}
.form-inline .campo.chico{flex:none;width:150px;}
.form-inline select{
  width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:9px;
  font-size:13px;color:var(--ink);background:#fff;
}

.subtitulo-form{
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-faint);margin:16px 0 8px;
}

.vacio{
  text-align:center;
  padding:30px 10px;
  color:var(--ink-faint);
  font-size:13px;
}

.modal-overlay{
  position:fixed;inset:0;background:rgba(16,26,46,.45);
  display:flex;align-items:center;justify-content:center;padding:20px;z-index:20;
}
.modal{
  background:#fff;border-radius:14px;padding:22px 24px;width:100%;max-width:420px;
}
.modal h3{margin:0 0 16px;font-size:16px;}
.modal-acciones{display:flex;justify-content:flex-end;gap:10px;margin-top:6px;}