/* SIGEL · identidad compartida UPFIM / SICA. Capa exclusivamente visual. */
:root {
 --verde-login:#006341; --verde-oscuro:#193d30; --verde:#006341; --verde-hover:#193d30;
 --verde-acento:#c49a2c; --verde-fondo-claro:#eaf4ee; --fondo-suave:#f5f8f6;
 --marron:#20352c; --texto-gris:#5a6863; --texto-secundario:#5a6863;
 --stitch-primary:#006341; --stitch-primary-dark:#193d30; --stitch-bg-main:#f5f8f6;
 --stitch-text-dark:#20352c; --stitch-text-muted:#5a6863; --stitch-border-color:#dfe7e3;
 --stitch-focus-ring:rgba(0,99,65,.16); --stitch-radius:14px;
 --sombra-suave:0 6px 24px rgba(16,35,29,.045); --sombra-media:0 12px 30px rgba(16,35,29,.10);
 --fuente-principal:'Public Sans','Segoe UI',sans-serif;
}
body {color:#20352c; background:#f5f8f6;}
a,button,input,select,textarea {touch-action:manipulation;}
:focus-visible {outline:3px solid #c49a2c; outline-offset:3px;}
/* Acceso */
body:has(.login-wrapper) {background:radial-gradient(ellipse at 12% 12%,#c49a2c33,transparent 45%),linear-gradient(135deg,#10231d,#193d30 55%,#24533d);}
.login-wrapper {max-width:1280px; margin:auto; gap:80px; padding:56px 48px; min-height:100vh; min-height:100svh;}
.sigel-intro {flex:1; min-width:0; color:white; max-width:600px;}
.sigel-university {display:flex; gap:18px; align-items:center; margin-bottom:74px;}
.sigel-university img {width:100px; height:68px; object-fit:contain; background:white; padding:10px; border-radius:12px; box-sizing:border-box;}
.sigel-university span {font-size:11px; line-height:1.7; letter-spacing:1.4px; color:#d9e8df;}
.sigel-eyebrow {display:block; font-size:10px; font-weight:700; letter-spacing:1.8px; color:#006341; margin-bottom:16px; line-height:1.7;}
.sigel-intro .sigel-eyebrow {color:#d6c191;}
.sigel-intro h2 {font-size:clamp(38px,4.2vw,58px); line-height:1.12; font-weight:650; letter-spacing:-2px; margin:0 0 25px;}
.sigel-intro h2 span {color:#d7bb71;}
.sigel-intro>p {font-size:16px; line-height:1.8; max-width:440px; color:#b9d0c1;}
.sigel-services {display:grid; gap:18px; margin-top:36px;}
.sigel-services>span {display:flex; gap:18px; color:#d7bb71; font-size:11px; align-items:center;}
.sigel-services strong {font-size:13px; font-weight:500; color:#e1ece6;}
.sigel-intro-footer {border-top:1px solid #ffffff26; padding-top:22px; margin-top:60px; font-size:20px; letter-spacing:2px; font-weight:700; display:flex; gap:20px; align-items:center;}
.sigel-intro-footer span {font-size:10px; line-height:1.6; letter-spacing:.3px; font-weight:400; color:#b9d0c1; max-width:240px;}
.login-card {flex:0 0 400px; box-sizing:border-box; max-width:440px; border:1px solid #ffffff77; border-top:4px solid #c49a2c; border-radius:22px; padding:42px 34px; text-align:left; box-shadow:0 32px 90px #0003;}
.login-card .logo-container {margin-bottom:28px;}
.login-card .logo-container img {max-width:130px; max-height:75px; object-fit:contain;}
.login-card .brand-title {font-size:27px; letter-spacing:-.8px; color:#193d30; margin-bottom:12px;}
.login-card .brand-subtitle {font-size:13px; line-height:1.7; margin-bottom:30px; color:#5a6863;}
.sigel-input-label {display:block; font-size:12px; font-weight:600; margin-bottom:9px; color:#20352c;}
.login-card .form-group {margin-bottom:20px;}
.login-card .form-group input {height:50px; border-color:#dfe7e3; background:#f5f8f6; padding-right:45px; border-radius:10px;}
.login-card .btn-login {padding:15px; border-radius:10px; background:linear-gradient(100deg,#006341,#193d30); box-shadow:0 8px 20px #00634126;}
.sigel-access-note {font-size:10px; line-height:1.8; color:#5a6863; border-top:1px solid #dfe7e3; padding-top:22px; margin:28px 0 0; text-align:center;}
/* Estructura compartida de los paneles y módulos */
@media screen {
.dashboard-container {grid-template-rows:80px 1fr; height:100vh; height:100dvh;}
.dashboard-header {height:80px; background:white; color:#20352c; box-shadow:none; border-bottom:1px solid #dfe7e3;}
.header-brand {width:270px; background:#10231d; border-right:1px solid #ffffff12; gap:14px;}
.menu-toggle,.toggle-text {color:#e1ece6;}
.toggle-text {font-size:12px;}
.header-bar {color:#20352c; gap:18px; min-width:0;}
.header-bar h1 {font-size:17px; letter-spacing:-.3px; line-height:1.5;}
.header-welcome {color:#5a6863; background:#f0f5f2; font-size:11px; border:1px solid #dfe7e3; padding:8px 13px; border-radius:9px;}
.sidebar {background:#10231d; height:calc(100dvh - 80px); padding:26px 16px; border-right:0; scrollbar-width:thin; scrollbar-color:#436153 transparent;}
.sidebar>div:first-of-type:not(.menu-item) {padding:0 8px 22px!important; border-bottom-color:#ffffff20!important;}
.sidebar>div:first-of-type img {background:white; padding:10px; border-radius:12px; box-sizing:border-box; max-width:145px;}
.sidebar h2 {color:white!important; letter-spacing:2px; margin-top:8px!important;}
.sidebar>div:first-of-type span {color:#aec4b7!important; font-size:10px!important; letter-spacing:.8px; line-height:1.7; margin-top:8px;}
.sidebar .menu-item a {color:#bfd2c7; font-size:12px; font-weight:500; padding:12px 13px; min-height:43px; box-sizing:border-box; border-radius:9px; border-left:3px solid transparent;}
.sidebar .menu-item a:hover {background:#ffffff0d; color:white; padding-left:13px; border-left-color:#c49a2c;}
.sidebar .menu-item.active a {background:#0063414d; color:white; border-left-color:#c49a2c; font-weight:650;}
.sidebar .menu-item[style*="background"] {background:#234334!important; border-color:#3d5b49!important;}
.sidebar .menu-item[style*="background"] a,.sidebar .menu-item[style*="background"] span {color:#d9e8df!important;}
.sidebar .logout {border-top-color:#ffffff20;}
.sidebar .logout a {color:#f3b7b7;}
.sidebar .logout a:hover {background:#ffffff0b; color:#ffd6d6;}
.main-content {min-width:0; padding:32px 36px; background:#f5f8f6; scrollbar-width:thin;}
.institutional-banner {border:1px solid #dfe7e3; border-left:4px solid #c49a2c; border-radius:16px; padding:28px; margin-bottom:30px; box-shadow:var(--sombra-suave); background:linear-gradient(110deg,#fff 65%,#eaf4ee);}
.institutional-text p {font-size:14px; line-height:1.75; color:#5a6863;}
.institutional-text strong {color:#193d30;}
.cards {gap:20px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); padding-bottom:24px;}
.card {height:auto; min-height:172px; box-sizing:border-box; align-items:flex-start; text-align:left; border:1px solid #dfe7e3; border-radius:16px; padding:24px;}
.card-icon {width:46px; height:46px; line-height:46px; font-size:25px; border-radius:12px; background:#eaf4ee; margin-bottom:17px; text-align:center;}
.card h3 {font-size:24px; letter-spacing:-.6px; color:#193d30;}
.card p {color:#5a6863; font-size:12px; margin-top:5px;}
.card:hover {transform:translateY(-3px); border-color:#c49a2c;}
.form-dossier-header,.form-card-section,.bento-card {border-color:#dfe7e3; border-radius:16px; box-shadow:var(--sombra-suave);}
.form-container-wrapper {margin-top:0;}
.main-content input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.main-content select,.main-content textarea {max-width:100%;}
.main-content table {font-size:13px;}
.main-content th {letter-spacing:.2px;}
}
@media screen and (max-width:1050px) {
.login-wrapper {gap:36px; padding:36px;}
.login-card {flex-basis:370px; padding:32px 28px;}
.sigel-university {margin-bottom:48px;}
.header-welcome {max-width:220px; overflow-wrap:anywhere;}
.main-content {padding:24px;}
}
@media screen and (max-width:768px) {
.login-wrapper {flex-direction:column; gap:32px; padding:28px 20px;}
.sigel-intro {width:100%; max-width:440px;}
.sigel-university {margin-bottom:30px;}
.sigel-intro h2 {font-size:38px; letter-spacing:-1px;}
.sigel-intro>p {font-size:14px;}
.sigel-services,.sigel-intro-footer {display:none;}
.login-card {flex:auto; width:100%; max-width:440px; padding:30px 26px;}
.dashboard-header {height:auto; flex-shrink:0;}
.header-brand {width:100%; padding:13px 20px; min-height:48px;}
.header-bar {padding:12px 20px; gap:6px;}
.header-bar h1 {font-size:15px;}
.header-welcome {width:auto; max-width:100%; box-sizing:border-box; padding:4px 9px; font-size:10px;}
.sidebar,.sidebar.active {height:100dvh; padding-top:160px; width:270px;}
.main-content {padding:20px 16px;}
.institutional-banner {gap:16px; padding:20px; flex-wrap:wrap;}
.institutional-text p {font-size:13px;}
.cards {grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;}
.card {padding:18px; min-height:160px;}
.card h3 {font-size:21px;}
}
@media (prefers-reduced-motion:reduce) {
.login-wrapper *, .dashboard-container * {animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important;}
}

/* Acceso en verde profundo: misma familia visual que SICA, identidad SIGEL. */
body:has(.login-wrapper) {
 background:radial-gradient(circle at 1px 1px,#ffffff03 1px,transparent 1.6px) 0 0/26px 26px,linear-gradient(125deg,#123a2c,#16382b 55%,#24533d);
}
.login-wrapper {max-width:1020px; gap:0; padding:54px 30px; align-items:stretch; align-content:center; min-height:100svh; box-sizing:border-box; position:relative;}
.sigel-intro {align-self:center; box-sizing:border-box; padding:38px; background:linear-gradient(140deg,#ffffff0c,#10231d70); border:1px solid #ffffff20; border-right:0; border-radius:22px 0 0 22px; min-height:600px; display:flex; flex-direction:column; justify-content:center;}
.sigel-university {margin-bottom:30px; gap:13px;}
.sigel-university img {width:78px; height:64px;}
.sigel-university span {font-size:9px; letter-spacing:1px;}
.sigel-intro h2 {font-size:40px; letter-spacing:-1.3px;}
.sigel-intro>p {font-size:13px; line-height:1.8;}
.sigel-services {gap:14px; margin-top:22px;}
.sigel-intro-footer {margin-top:30px; padding-top:20px;}
.login-card {align-self:center; flex:0 0 470px; max-width:470px; padding:38px; min-height:600px; display:flex; flex-direction:column; justify-content:center; background:#122e24d9; border:1px solid #ffffff20; border-left:0; border-top:1px solid #ffffff20; border-radius:0 22px 22px 0; box-shadow:20px 25px 70px #0002;}
.login-card .logo-container {display:none;}
.login-card .sigel-eyebrow {color:#d6c191;}
.login-card .brand-title {color:#fff; font-size:26px;}
.login-card .brand-subtitle {color:#c1d3c8; margin-bottom:26px;}
.login-card .sigel-input-label {color:#e1ece6;}
.login-card .form-group input {background:#ffffff0a; border-color:#ffffff26; color:white; box-shadow:0 8px 20px #0001;}
.login-card .form-group input::placeholder {color:#b4c6bb; opacity:1;}
.login-card .form-group input:focus {background:#ffffff10; border-color:#c49a2c; box-shadow:0 0 0 3px #c49a2c20;}
.login-card .input-icon,.login-card .toggle-pass {color:#d7bb71;}
.login-card .forgot-pass {color:#d7bb71;}
.login-card .btn-login {background:linear-gradient(100deg,#006341,#00865a); box-shadow:0 8px 20px #0002;}
.login-card .btn-login:hover {background:#00865a;}
.sigel-access-note {color:#b4c6bb; border-color:#ffffff1a;}
.sigel-ecosystem {font-size:9px; line-height:1.8; letter-spacing:1.4px; color:#d6c191; text-align:center; margin-bottom:20px;}
.sidebar .menu-item.active a {background:#234334; border-left-color:#c49a2c;}
@media screen {
.institutional-banner {background:linear-gradient(115deg,#10231d,#193d30 65%,#24533d); border:1px solid #193d30; padding:36px; min-height:175px; box-sizing:border-box; border-radius:20px; color:#fff;}
.institutional-banner .upfim-logo {background:#fff; padding:12px; border-radius:13px; box-sizing:content-box;}
.institutional-text p {color:#c1d3c8;}
.institutional-text strong {color:#fff;}
.sigel-hero-label {display:block; color:#d6c191; letter-spacing:1.8px; font-size:10px; font-weight:600; margin-bottom:15px;}
.sigel-hero-title {font-size:clamp(23px,2.7vw,34px); line-height:1.25; color:white; margin:0 0 15px; letter-spacing:-1px;}
.card-icon {background:#eaf4ee;}
.card:nth-child(even) .card-icon {background:#f6f0df;}
}
@media screen and (max-width:1050px) {
.login-wrapper {padding:36px 24px; gap:0;}
.sigel-intro {padding:28px;}
.sigel-intro h2 {font-size:34px;}
.login-card {flex-basis:420px; padding:32px;}
}
@media screen and (max-width:768px) {
.login-wrapper {padding:28px 18px; gap:0; align-items:center;}
.sigel-intro {width:100%; max-width:470px; min-height:0; border:1px solid #ffffff20; border-bottom:0; border-radius:20px 20px 0 0; padding:26px;}
.sigel-university {margin-bottom:24px;}
.sigel-intro h2 {font-size:30px; margin-bottom:10px;}
.sigel-intro>p {margin-bottom:0;}
.sigel-intro .sigel-eyebrow {font-size:9px;}
.login-card {flex:auto; width:100%; max-width:470px; min-height:0; border:1px solid #ffffff20; border-radius:0 0 20px 20px; padding:28px 26px;}
.login-card .brand-title {font-size:24px;}
.institutional-banner {padding:24px;}
}
@media screen and (min-width:769px) {
 .login-wrapper {display:grid; grid-template-columns:minmax(0,1fr) 470px;}
 .sigel-intro,.login-card {align-self:stretch; width:100%; max-width:none;}
}
@media screen and (min-width:769px) and (max-width:1050px) {
 .login-wrapper {grid-template-columns:minmax(0,1fr) 420px;}
}
/* Logotipos PNG transparentes, integrados a las superficies institucionales. */
.sigel-university img,
.sidebar>div:first-of-type img,
.institutional-banner .upfim-logo {
 background:transparent;
 padding:0;
 border:0;
 border-radius:0;
 filter:drop-shadow(1px 0 0 #ffffffb8) drop-shadow(-1px 0 0 #ffffffb8) drop-shadow(0 1px 0 #ffffffb8) drop-shadow(0 -1px 0 #ffffffb8);
}
.sigel-university img {width:78px; height:68px;}
.sidebar>div:first-of-type img {width:120px!important; max-width:120px;}
.institutional-banner .upfim-logo {height:70px; max-width:100px;}
.sidebar .menu-item a {font-size:14px; line-height:1.5; font-weight:550; min-height:47px; padding:12px 13px;}
.sidebar .menu-item.active a {font-weight:700;}
.sidebar .menu-item a .material-symbols-outlined {font-size:21px!important;}
@media screen and (max-width:768px) {
 .sidebar .menu-item a {font-size:14px; min-height:48px;}
}