/* =========================================================
   BOERO RAC - Tema Light Automatiza 360
   Fondo claro + naranja corporativo + contraste para logos/firmas
   ========================================================= */

:root{
  --a360-bg:#f5f7fb;
  --a360-bg-2:#eef3fb;
  --a360-surface:#ffffff;
  --a360-surface-2:#f8fafc;
  --a360-card:#ffffff;
  --a360-text:#172033;
  --a360-text-2:#334155;
  --a360-muted:#64748b;
  --a360-border:#dbe5f2;
  --a360-primary:#0f1f56;
  --a360-primary-2:#1e3a8a;
  --a360-blue:#2563eb;
  --a360-orange:#f58220;
  --a360-orange-2:#ff9d3f;
  --a360-red:#cf2027;
  --a360-shadow:0 24px 70px rgba(15,31,86,.13);
  --a360-shadow-soft:0 12px 34px rgba(15,31,86,.09);
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  background:
    radial-gradient(circle at 0% 8%, rgba(245,130,32,.16), transparent 24%),
    radial-gradient(circle at 96% 0%, rgba(37,99,235,.12), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, var(--a360-bg) 46%, #eef4ff 100%);
  font-family:Inter,Roboto,Arial,sans-serif;
  color:var(--a360-text);
  font-size:15px;
}

a{color:var(--a360-primary-2)}
a:hover{color:var(--a360-orange)}
img{max-width:100%;height:auto}

/* =========================================================
   NAVBAR LIGHT
   ========================================================= */
.a360-navbar{
  background:rgba(255,255,255,.94);
  border-top:5px solid var(--a360-red);
  border-bottom:1px solid rgba(15,31,86,.10);
  box-shadow:0 10px 30px rgba(15,31,86,.10);
  backdrop-filter:blur(14px);
  padding-top:.42rem;
  padding-bottom:.42rem;
}
.a360-brand{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  margin-right:18px;
  min-width:0;
  flex:0 0 auto;
}
.logo-frame{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  flex:0 0 auto;
  padding:0!important;
}
.logo-frame img{
  display:block;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  max-width:100%!important;
  max-height:100%!important;
  background:transparent!important;
}
.logo-frame.nav-logo{width:150px;height:46px}
.logo-frame.a360-dev-logo{width:52px;height:38px}

.brand-copy{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.brand-title{font-size:.98rem;font-weight:900;letter-spacing:.04em;color:var(--a360-primary);white-space:nowrap}
.brand-subtitle{font-size:.78rem;font-weight:650;color:var(--a360-muted);white-space:nowrap}
.a360-pill{
  display:inline-flex;
  align-items:center;
  background:#fff3e7;
  color:#a94c03;
  border:1px solid rgba(245,130,32,.38);
  border-radius:999px;
  padding:.31rem .68rem;
  font-size:.74rem;
  font-weight:850;
  white-space:nowrap;
}
.a360-nav-list{gap:.12rem;align-items:center}
.a360-navbar .nav-link{
  color:#26334e!important;
  font-weight:800;
  font-size:.88rem;
  border-radius:14px;
  padding:.50rem .60rem!important;
  white-space:nowrap;
}
.a360-navbar .nav-link:hover,
.a360-navbar .nav-link.active{
  color:#111827!important;
  background:#fff3e7;
  box-shadow:inset 0 0 0 1px rgba(245,130,32,.22);
}
.navbar-toggler{
  border-color:rgba(15,31,86,.22);
  border-radius:14px;
  background:#f8fafc;
}
.navbar-toggler:focus{box-shadow:0 0 0 .18rem rgba(245,130,32,.20)}
.navbar-toggler-icon{filter:invert(1) grayscale(1) brightness(.15)}

.a360-userbox{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border:1px solid rgba(15,31,86,.10);
  background:linear-gradient(135deg, #ffffff, #f8fafc);
  border-radius:18px;
  flex:0 0 auto;
  box-shadow:0 8px 20px rgba(15,31,86,.08);
}
.a360-usercopy{line-height:1.1}
.a360-userlabel{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:#7b879d}
.a360-username{font-size:.82rem;font-weight:850;color:var(--a360-primary);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a360-role{background:#fff3e7;color:#a94c03;font-weight:900;border-radius:999px;padding:.22rem .56rem;font-size:.70rem}
.a360-logout{border-radius:12px;padding:.36rem .68rem;font-weight:850;color:var(--a360-primary)!important;border-color:rgba(15,31,86,.28)!important;background:#fff!important}
.a360-logout:hover{background:var(--a360-primary)!important;color:#fff!important;border-color:var(--a360-primary)!important}

/* =========================================================
   LAYOUT GENERAL
   ========================================================= */
.app-shell{min-height:calc(100vh - 150px)}
.page-title,h2.page-title{font-weight:900;color:var(--a360-primary);margin-bottom:1.25rem;letter-spacing:-.02em}
h1,h2,h3,h4,h5{color:var(--a360-primary);font-weight:850}
.text-muted{color:var(--a360-muted)!important}
.page-hero{
  background:linear-gradient(135deg, #ffffff, #f8fafc);
  border:1px solid var(--a360-border);
  box-shadow:var(--a360-shadow-soft);
  border-radius:26px;
  padding:1.4rem 1.5rem;
}
.page-hero h1{margin:0;font-size:1.75rem;font-weight:900;letter-spacing:-.03em;color:var(--a360-primary)}
.page-hero p{margin:.35rem 0 0;color:var(--a360-muted)}
.eyebrow{text-transform:uppercase;letter-spacing:.11em;color:var(--a360-orange);font-size:.75rem;font-weight:900}

/* =========================================================
   CARDS / TABLAS / FORMULARIOS
   ========================================================= */
.card{
  border:1px solid var(--a360-border);
  border-radius:24px;
  box-shadow:var(--a360-shadow-soft);
  background:var(--a360-card);
  color:var(--a360-text-2);
  overflow:hidden;
}
.card .card-title{font-weight:850;color:var(--a360-primary)}
.card .card-body{padding:1.25rem 1.35rem}
.display-5{font-weight:900;color:var(--a360-primary)}

.table{
  color:var(--a360-text-2);
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--a360-shadow-soft);
  border:1px solid var(--a360-border);
}
.table>:not(caption)>*>*{
  padding:.92rem .88rem;
  border-bottom-color:#edf2f9;
  vertical-align:middle;
  background:transparent;
  color:var(--a360-text-2);
}
.table thead th{
  background:#f6f9fe;
  color:var(--a360-primary);
  font-weight:850;
  border-bottom:1px solid var(--a360-border);
}
.table-striped>tbody>tr:nth-of-type(odd)>*{--bs-table-accent-bg:#f8fafc;color:var(--a360-text-2)}

.form-control,.form-select{
  border-radius:14px;
  border:1px solid #cfdae9;
  padding:.76rem .92rem;
  box-shadow:none;
  background:#fff;
  color:var(--a360-text);
}
.form-control:focus,.form-select:focus{
  border-color:rgba(245,130,32,.78);
  box-shadow:0 0 0 .24rem rgba(245,130,32,.16);
  background:#fff;
  color:var(--a360-text);
}
.form-control::placeholder{color:#94a3b8}
.form-label,label{font-weight:800;color:var(--a360-primary)}
.form-text{color:var(--a360-muted)}
.form-check-label{font-weight:500;color:var(--a360-text-2)}

.btn{border-radius:14px;font-weight:850;padding:.66rem .98rem}
.btn-sm{border-radius:11px;padding:.4rem .76rem}
.btn-primary,.btn-success{
  background:linear-gradient(135deg, var(--a360-orange), var(--a360-orange-2));
  border-color:rgba(245,130,32,.88);
  color:#111827;
}
.btn-primary:hover,.btn-success:hover{
  background:linear-gradient(135deg, #ff9d3f, #ffb36b);
  border-color:#ff9d3f;
  color:#111827;
}
.btn-outline-primary{color:var(--a360-primary);border-color:var(--a360-primary)}
.btn-outline-primary:hover{background:var(--a360-primary);border-color:var(--a360-primary);color:#fff}
.btn-outline-success{color:#0e7a43;border-color:rgba(14,122,67,.58)}
.btn-outline-success:hover{background:#16a34a;border-color:#16a34a;color:#fff}
.btn-outline-warning{color:#a25e00;border-color:rgba(245,158,11,.62)}
.btn-outline-warning:hover{background:#f59e0b;border-color:#f59e0b;color:#111827}
.btn-outline-info{color:#1e3a8a;border-color:rgba(30,58,138,.48)}
.btn-outline-info:hover{background:#2563eb;border-color:#2563eb;color:#fff}
.btn-outline-secondary{color:#475569;border-color:rgba(71,85,105,.45)}
.btn-outline-secondary:hover{background:#475569;border-color:#475569;color:#fff}
.alert{border:0;border-radius:16px;box-shadow:0 8px 22px rgba(15,31,86,.08)}

/* =========================================================
   LOGIN - Light Automatiza 360
   ========================================================= */
.login-shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 2% 8%, rgba(245,130,32,.16), transparent 25%),
    radial-gradient(circle at 96% 0%, rgba(37,99,235,.12), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #f5f7fb 48%, #eef4ff 100%);
  padding:24px;
}
.login-card{
  width:100%;
  max-width:470px;
  border:1px solid var(--a360-border);
  border-radius:28px;
  box-shadow:0 28px 90px rgba(15,31,86,.14);
  overflow:hidden;
  background:#fff;
}
.login-head{
  background:linear-gradient(135deg, #ffffff 0%, #f7faff 55%, #eef4ff 100%);
  color:var(--a360-primary);
  padding:26px 28px 24px;
  position:relative;
  border-bottom:1px solid var(--a360-border);
}
.login-head:before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg, var(--a360-red), var(--a360-orange));
}
.badge-a360{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#fff3e7;
  color:#a94c03;
  border:1px solid rgba(245,130,32,.34);
  border-radius:999px;
  padding:.40rem .90rem;
  font-weight:900;
  letter-spacing:.02em;
}
.login-brand{display:flex;align-items:center;gap:18px;margin-top:18px}
.login-logo-stack{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.logo-frame.login-logo{width:205px;height:78px}
.logo-frame.login-dev-logo{width:48px;height:48px}
.login-head h1{font-size:1.62rem;font-weight:900;margin:0;letter-spacing:-.02em;color:var(--a360-primary)}
.login-head p{margin:.42rem 0 0;color:#475569;font-size:1rem}
.login-card .card-body{padding:2rem;background:#fff}
.login-card .form-control{height:56px;background:#fff;color:var(--a360-text)}
.login-card .btn-primary{font-size:1.15rem;padding:.82rem 1rem;color:#111827}

/* =========================================================
   FOOTER
   ========================================================= */
.app-footer{
  border-top:1px solid rgba(15,31,86,.08);
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(8px);
  color:#51607c;
  padding:16px 0;
  font-size:.92rem;
}

/* =========================================================
   CERTIFICADO - siempre claro para firmas e impresión
   ========================================================= */
.certificate-page{background:#f5f7fb;padding:24px;color:#172033}
.certificate{
  max-width:1100px;
  margin:0 auto;
  background:#fff;
  border:10px solid var(--a360-primary);
  padding:46px;
  min-height:720px;
  position:relative;
  box-shadow:0 24px 80px rgba(15,31,86,.16);
  color:#172033;
}
.certificate:before{content:"";position:absolute;inset:18px;border:2px solid var(--a360-orange);pointer-events:none}
.cert-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.cert-brand-wrap{display:flex;align-items:center;gap:16px}
.cert-logo-stack{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.logo-frame.cert-logo{width:190px;height:60px}
.logo-frame.cert-dev-logo{width:46px;height:46px}
.cert-brand{font-size:1.15rem;font-weight:900;color:var(--a360-primary);letter-spacing:.04em}
.cert-sub{color:#64748b;text-transform:uppercase;letter-spacing:2px;font-size:.8rem}
.cert-title{font-size:2.9rem;font-weight:900;color:var(--a360-primary);margin-top:36px;text-align:center}
.cert-name{font-size:2.1rem;font-weight:850;color:#2349a4;border-bottom:2px solid #e5e7eb;display:inline-block;padding:0 22px 8px;margin:22px auto}
.cert-course{font-size:1.45rem;font-weight:850;color:#111827}
.cert-meta{font-size:1.05rem;color:#334155}
.cert-sign{border-top:1px solid #111827;min-width:260px;text-align:center;padding-top:8px;color:#334155}
.cert-signature-img{max-height:80px;max-width:260px;object-fit:contain;background:transparent!important}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1399.98px){
  .logo-frame.nav-logo{width:138px;height:42px}
  .logo-frame.a360-dev-logo{width:46px;height:36px}
  .a360-navbar .nav-link{font-size:.86rem;padding:.48rem .56rem!important}
}
@media (max-width:1199.98px){
  .a360-userbox{margin-top:8px;flex-wrap:wrap;justify-content:flex-start}
  .a360-username{max-width:none}
  .a360-nav-list{padding-top:.65rem;align-items:flex-start}
}
@media (max-width:767.98px){
  body{font-size:14px}
  .app-shell{padding-left:12px!important;padding-right:12px!important}
  .logo-frame.nav-logo{width:120px;height:38px}
  .logo-frame.a360-dev-logo{width:38px;height:34px}
  .a360-pill{display:none!important}
  .login-shell{padding:16px;align-items:flex-start}
  .login-card{max-width:100%;margin-top:10px;border-radius:24px}
  .login-head{padding:22px 22px 20px}
  .login-brand{flex-direction:column;align-items:flex-start;gap:14px}
  .logo-frame.login-logo{width:185px;height:70px}
  .logo-frame.login-dev-logo{width:42px;height:42px}
  .login-head h1{font-size:1.42rem}
  .login-head p{font-size:.94rem}
  .login-card .card-body{padding:1.5rem}
  .card .card-body{padding:1rem}
  .table{font-size:.88rem}
  .certificate{padding:24px;min-height:auto;border-width:7px}
  .cert-header,.cert-brand-wrap{flex-direction:column;align-items:flex-start}
  .logo-frame.cert-logo{width:160px;height:52px}
  .logo-frame.cert-dev-logo{width:40px;height:40px}
  .cert-title{font-size:2.15rem}
  .cert-name{font-size:1.45rem}
  .cert-course{font-size:1.15rem}
}
@media (max-width:420px){
  .logo-frame.login-logo{width:165px;height:62px}
  .logo-frame.login-dev-logo{width:38px;height:38px}
  .login-head h1{font-size:1.25rem}
  .logo-frame.nav-logo{width:110px;height:34px}
  .logo-frame.a360-dev-logo{width:34px;height:32px}
}

/* =========================================================
   PRINT
   ========================================================= */
@media print{
  .no-print,.a360-navbar,.app-footer{display:none!important}
  .certificate-page{background:#fff;padding:0}
  .certificate{box-shadow:none;margin:0;max-width:none;min-height:680px;break-inside:avoid}
  body{background:#fff;color:#000}
}