
:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#192638;background:#f3f5f8;--ink:#192638;--accent:#294c85;--muted:#687991}*{box-sizing:border-box;font-weight:400!important}body{margin:0}a{text-decoration:none;color:inherit}h1,h2,h3,p{margin-top:0}p{line-height:1.6;color:#687991}h2{font-size:22px}h3{font-size:16px;margin:24px 0 10px}small{color:#9aa9bd}.material-symbols-outlined{font-family:"Material Symbols Outlined";font-weight:normal!important;font-style:normal;font-size:21px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;font-feature-settings:"liga";-webkit-font-smoothing:antialiased;vertical-align:middle}
.layout{display:flex;min-height:100vh}.layout>aside{width:252px;flex-shrink:0;background:#142139;color:#c7d5e7;padding:24px 15px;position:sticky;top:0;height:100vh;overflow:auto}.brand{height:62px;display:flex;align-items:center;padding:4px 10px}.brand img{width:100%;max-width:195px;height:54px;object-fit:contain;object-position:left center}.layout aside small{display:block;padding:0 10px;font-size:12px}.layout nav{display:grid;gap:5px;margin-top:28px}.layout nav a{display:flex;align-items:center;gap:12px;border-radius:9px;padding:13px 12px;color:#aabbd2;font-size:14px;transition:background .12s}.layout nav a:hover{background:#1c2f4d;color:white}.layout nav a.active{background:#304767;color:#fff}.layout nav a .material-symbols-outlined{font-size:21px}.main{flex:1;min-width:0;display:flex;flex-direction:column}.main>header{height:72px;flex-shrink:0;position:sticky;top:0;z-index:10;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 34px;box-shadow:0 1px 8px #10243b0b}.page-title{font-size:18px}.main>main{padding:30px 34px;flex:1}.main>footer{padding:18px 34px;font-size:12px;color:#9daabc}.panel{background:#fff;border:0;border-radius:13px;padding:26px;margin-bottom:18px;box-shadow:0 2px 16px #142c4708}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}.cards h2{margin:9px 0 14px}.section-intro{margin-bottom:26px}.section-intro h2{font-size:28px;margin:7px 0}.eyebrow{color:#7085a5;letter-spacing:1px;text-transform:uppercase;font-size:11px}.panel-heading{display:flex;align-items:center;gap:11px;margin-bottom:14px}.panel-heading h2{margin:0}.panel-heading .material-symbols-outlined{color:#5375ac}.tablewrap{overflow:auto}table{border-collapse:collapse;width:100%;text-align:left}th,td{font-size:13px;padding:12px 10px}thead{background:#f1f4f9}tbody tr:nth-child(even){background:#f8f9fb}th{color:#677b92}form label{display:block;font-size:13px;color:#516278;margin:12px 0}input,select{display:block;width:100%;margin-top:7px;padding:12px;font:inherit;background:#f2f5fa;border:0;outline:2px solid transparent;border-radius:8px;color:#1c2b3e}input:focus,select:focus{outline-color:#a5b9da}button,.button,.button-light{font:inherit;font-size:13px;cursor:pointer;border:0;border-radius:8px;padding:12px 17px;background:#2b528e;color:white;display:inline-flex;align-items:center;gap:8px;justify-content:center}button:hover,.button:hover{background:#234675}.button-light,.button.secondary,header button{background:#edf2f8;color:#325072}button:disabled{opacity:.55;cursor:not-allowed}.dev-intro{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:23px}.dev-intro h2{font-size:27px;margin:6px 0}.dev-intro p{margin:0}.stage-stack{display:grid;gap:9px;margin-bottom:20px}.stage-item{background:#fff;border:0;border-radius:12px;overflow:hidden}.stage-current{background:#fefefe;box-shadow:0 2px 12px #10243b08}.stage-toggle{display:flex;width:100%;text-align:left;justify-content:stretch;border-radius:0;color:#1c2b3e;background:transparent;gap:15px;padding:17px}.stage-toggle:hover:not(:disabled){background:#eff4fb}.stage-label{display:grid;gap:5px;flex:1}.stage-code{font-size:11px;color:#8a9bb0}.stage-toggle .stage-status-icon{color:#8298b6}.stage-done .stage-status-icon{color:#1d9c6e}.stage-content{padding:19px;background:#f5f8fc}.stage-content[hidden]{display:none}.stage-actions{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}.stage-content form{padding:16px;border-radius:10px;background:#edf2f8}.stage-content form input{background:#fff}.safety-note{font-size:12px}.test-report{margin:15px 0}.test-line{display:flex;gap:9px;padding:9px;background:#fff;margin:3px 0}.test-line.pass .material-symbols-outlined{color:#16a06b}.test-line.fail .material-symbols-outlined{color:#b74444}.install{min-height:100vh;display:grid;place-items:center;padding:26px;background:#f2f5fa}.install .panel{width:min(100%,520px)}#notice{position:fixed;bottom:24px;right:24px;z-index:999;background:#192e4b;color:#fff;padding:13px 19px;border-radius:10px;max-width:390px;display:none;box-shadow:0 8px 35px #172e5040}#notice.visible{display:block}.confirm-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;width:min(92vw,365px);border:0;border-radius:14px;text-align:center;padding:25px;background:#fff;box-shadow:0 15px 55px #10213c30}.confirm-modal::backdrop{background:#0e1b31aa}.confirm-icon{background:#ecf2fa;color:#4365a0;border-radius:100%;width:45px;height:45px;margin:auto;display:grid;place-items:center}.confirm-modal p{margin:15px 0}.modal-actions{display:flex;justify-content:center;gap:10px;margin-top:20px}@media(max-width:850px){.layout>aside{width:208px}.cards,.cards.two{grid-template-columns:1fr}.main>main{padding:20px}.main>header{padding:0 20px}}@media(max-width:620px){.layout{display:block}.layout>aside{position:sticky;top:0;z-index:20;height:auto;width:100%;padding:9px 13px}.brand{height:45px}.brand img{height:40px;width:138px}.layout aside small{display:none}.layout nav{display:flex;overflow:auto;margin:4px 0 0;gap:4px}.layout nav a{white-space:nowrap;padding:10px}.main>header{position:sticky;top:103px;height:58px}.main>main{padding:16px}.panel{padding:18px}.dev-intro{flex-direction:column;align-items:stretch}}

/* ALTENDA 006 - carga visual de archivos y retroalimentacion de acciones */
.layout>aside{display:flex;flex-direction:column;padding-bottom:18px}.layout aside nav{flex:1}.layout aside .app-version{margin-top:auto;align-self:flex-end;font-size:10px;opacity:.55;letter-spacing:.025em;padding:14px 8px 0}
.file-drop{display:flex;align-items:center;gap:13px;min-height:108px;background:#eef3fa;border:2px dashed transparent;border-radius:12px;padding:18px;cursor:pointer;transition:background .15s ease,color .15s ease;color:#344f77;position:relative;margin:12px 0}
.file-drop:hover,.file-drop:focus-within,.file-drop.drag-over{background:#dce8fa;color:#143a72}.file-drop.drag-over{outline:2px solid #6e91c4}.file-drop .material-symbols-outlined{font-size:31px;flex-shrink:0}.file-drop .file-drop-content{min-width:0;display:grid;gap:6px}.file-drop .file-drop-name{font-size:13px;overflow-wrap:anywhere;color:inherit}.file-drop .file-drop-hint{font-size:11px;color:#7386a2}.file-drop input[type=file]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;margin:0;padding:0;z-index:1}.file-drop input[type=file]:focus-visible{outline:0}.file-drop:has(input:focus-visible){outline:2px solid #6e91c4;outline-offset:2px}
button .material-symbols-outlined{flex-shrink:0}button.action-loading,button.action-success{opacity:1!important}button.action-loading{cursor:progress}button.action-success{background:#167a57;color:white}button.action-success .material-symbols-outlined{color:white}.material-symbols-outlined.icon-spin{animation:altenda-spin .85s linear infinite}@keyframes altenda-spin{to{transform:rotate(360deg)}}
button.button-light:hover,button.secondary:hover,header button:hover{background:#d9e7f8;color:#193a65}button:not(:disabled):hover{color:#fff}button.button-light:not(:disabled):hover,button.secondary:not(:disabled):hover,header button:not(:disabled):hover{color:#193a65}.stage-actions button:hover{color:#fff}.stage-actions .button-light:hover{color:#193a65}
@media(max-width:620px){.layout aside .app-version{display:none}.file-drop{min-height:94px}}
@media(prefers-reduced-motion:reduce){.material-symbols-outlined.icon-spin{animation-duration:1.5s}}

/* CORE-007: keep navigation grouped at top; version remains discreet at bottom. */
.layout aside nav{flex:0 0 auto;align-content:start;align-items:start;grid-auto-rows:max-content}
.layout aside .app-version{margin-top:auto}

/* CORE-008: menu follows wordmark, version belongs to lower-right page footer. */
.layout>aside{justify-content:flex-start}
.layout aside nav{flex:0 0 auto!important;margin-top:12px;align-content:start;align-items:start;grid-auto-rows:max-content}
.layout aside .app-version{display:none!important}
.main>footer{display:flex;align-items:center;justify-content:space-between;gap:16px}
.main>footer .footer-version{font-size:11px;font-weight:400;color:#97a6b9;white-space:nowrap}
@media(max-width:620px){.layout aside nav{margin-top:6px}.main>footer{padding:14px 16px}.main>footer .footer-version{font-size:10px}}
/* CORE-009: en el layout la navegación sigue inmediatamente al logotipo */
.layout aside nav{flex:none;margin-top:13px}
.layout>aside{justify-content:flex-start}
.main>footer{display:flex;justify-content:space-between;align-items:center}

/* CORE-010: package installation test, no visual change. */

/* Etapas: el hover nunca invierte texto sobre fondo claro. */
.stage-toggle:not(:disabled):hover,.stage-toggle:not(:disabled):hover .stage-label,.stage-toggle:not(:disabled):hover .stage-code{color:#1c2b3e!important}
.stage-toggle:not(:disabled):hover .stage-code{color:#60738b!important}
.stage-done .stage-content{background:#f5f8fc;color:#1c2b3e}
.stage-evidence{margin-top:16px;padding:15px;background:#fff;border-radius:10px;color:#233c55}.stage-evidence li{padding:5px 0}

/* CORE business navigation: preserve legible hover states */
aside nav a:hover,aside nav a.active{color:#fff}aside nav a:hover span,aside nav a.active span{color:inherit}
.panel .button.secondary{margin-left:8px}

/* ALTENDA 0.1.21 — isolated, accessible form dialog */
.altenda-form-launcher{margin:16px 0}.altenda-form-launch-button{max-width:100%}
form[hidden]{display:none!important}
.altenda-form-dialog{position:fixed;inset:0;margin:auto;width:min(94vw,640px);max-height:min(90vh,860px);padding:0;background:#fff;border:0;border-radius:16px;color:#1c2b3e;box-shadow:0 22px 75px #101d3550;overflow:hidden}
.altenda-form-dialog::backdrop{background:rgba(14,27,49,.65)}
.altenda-form-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px;border-bottom:1px solid #e5eaf2}
.altenda-form-dialog-header h2{margin:0;font-size:19px;color:#1c2b3e}
.altenda-form-dialog-close,.altenda-form-dialog-close:hover{background:#eef3f9!important;color:#233c55!important;border-radius:8px;font-size:25px;padding:5px 12px}
.altenda-form-dialog-body{max-height:calc(min(90vh,860px) - 78px);overflow:auto;padding:4px 24px 24px}
.altenda-form-dialog-content{display:block!important;background:transparent!important;padding:0!important;margin:0!important}
.altenda-form-dialog input,.altenda-form-dialog select,.altenda-form-dialog textarea{max-width:100%;box-sizing:border-box;color:#1c2b3e}
.altenda-form-dialog button:hover{color:#fff}.altenda-form-dialog .altenda-form-dialog-close:hover{color:#233c55!important}
@media(max-width:620px){.altenda-form-dialog{width:96vw;max-height:94vh}.altenda-form-dialog-header{padding:16px}.altenda-form-dialog-body{padding:4px 16px 16px;max-height:calc(94vh - 70px)}}

/* ALTENDA 0.1.28 - Configuración por pestañas, sin bordes */
.altenda-settings-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;padding:6px;background:#edf2f8;border-radius:12px}
.altenda-settings-tab{background:transparent;color:#476078;padding:11px 15px;border:0;outline:0;box-shadow:none}
.altenda-settings-tab[aria-selected=true]{background:#dbe6f5;color:#183d68;font-weight:650}
.altenda-settings-tab:hover,.altenda-settings-tab:focus-visible{background:#d2e0f1;color:#183d68;outline:0}
.altenda-settings-pane[hidden]{display:none!important}
.altenda-setting-field{display:flex;align-items:center;gap:5px;background:#f1f5fa;border-radius:8px;margin-top:7px;max-width:100%;overflow:hidden}
.altenda-setting-field input{min-width:0;flex:1;margin:0;border:0;outline:0!important;background:transparent;max-width:100%}
.altenda-setting-field:focus-within{background:#e3edf9}
.altenda-secret-eye,.altenda-secret-eye:hover{flex:none;background:transparent!important;color:#385779!important;padding:10px;border:0;outline:0;box-shadow:none}
.altenda-settings input,.altenda-settings select,.altenda-settings input:focus,.altenda-settings select:focus{border:0;outline:0!important;box-shadow:none!important}
.altenda-settings input:focus,.altenda-settings select:focus{background:#e3edf9}
@media(max-width:620px){.altenda-settings-tabs{flex-wrap:nowrap;overflow-x:auto}.altenda-settings-tab{white-space:nowrap}}

/* ALTENDA 0.1.29 — Configuración compacta, controles suaves y contraste estable */
.altenda-settings{max-width:1240px;margin:0 auto}
.altenda-settings-shell{display:grid;grid-template-columns:230px minmax(0,1fr);gap:22px;align-items:start}
.altenda-settings .altenda-settings-tabs{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;gap:3px!important;margin:0!important;padding:8px!important;background:#eaf0f7!important;border:0!important;border-radius:13px;max-height:calc(100vh - 170px);overflow:auto}
.altenda-settings .altenda-settings-tab{display:block!important;flex:0 0 auto!important;width:100%!important;text-align:left!important;background:transparent!important;color:#38526e!important;font-size:13px!important;font-weight:500!important;line-height:1.35!important;padding:12px 13px!important;min-height:41px!important;border:0!important;box-shadow:none!important;outline:0!important;border-radius:9px!important;white-space:normal!important}
.altenda-settings .altenda-settings-tab:hover,.altenda-settings .altenda-settings-tab:focus-visible{background:#dce7f4!important;color:#173454!important}
.altenda-settings .altenda-settings-tab[aria-selected=true],.altenda-settings .altenda-settings-tab[aria-selected=true]:hover{background:#cedff3!important;color:#123963!important;font-weight:650!important}
.altenda-settings .altenda-settings-content{min-width:0}
.altenda-settings .altenda-settings-pane .panel{padding:26px 30px;margin:0}
.altenda-settings .altenda-settings-pane h2{font-size:21px;margin:0 0 18px;color:#192b42}
.altenda-settings .altenda-settings-pane form{max-width:660px}
.altenda-settings .altenda-settings-pane label{color:#52657a;font-size:13px;margin:15px 0}
.altenda-settings .altenda-settings-pane input,.altenda-settings .altenda-settings-pane select{width:100%;max-width:100%;background:#eff3f8!important;color:#1b3049!important;padding:13px 14px!important;border:0!important;outline:0!important;box-shadow:none!important;border-radius:9px!important}
.altenda-settings .altenda-settings-pane input:hover,.altenda-settings .altenda-settings-pane select:hover{background:#e6eef7!important}
.altenda-settings .altenda-settings-pane input:focus,.altenda-settings .altenda-settings-pane select:focus{background:#dce8f7!important}
.altenda-settings .altenda-setting-field{background:#eff3f8!important;display:flex!important}
.altenda-settings .altenda-setting-field:focus-within{background:#dce8f7!important}
.altenda-settings .altenda-setting-field input{background:transparent!important;flex:1!important;min-width:0}
.altenda-settings .altenda-setting-field input:hover,.altenda-settings .altenda-setting-field input:focus{background:transparent!important}
.altenda-settings .altenda-secret-eye,.altenda-settings .altenda-secret-eye:hover{background:transparent!important;color:#345574!important;padding:10px 14px!important}
.altenda-settings .altenda-settings-pane button:not(.altenda-secret-eye):hover{background:#d8e5f4!important;color:#173454!important}
.altenda-settings .altenda-settings-form-actions{margin:19px 0 4px}
.altenda-settings .altenda-settings-form-actions button{background:#274a7b!important;color:white!important}
.altenda-settings .altenda-settings-form-actions button:hover{background:#1c3a63!important;color:white!important}
.altenda-connection-state{display:inline-flex;align-items:center;gap:8px;background:#eef3f9;color:#3c5570;padding:9px 13px;border-radius:9px;font-size:12px;margin-bottom:12px}
.altenda-status-dot{width:7px;height:7px;background:#8298ae;border-radius:50%}
.altenda-test-panel{margin-top:26px;padding:20px;background:#f3f6fa;border-radius:12px;max-width:700px}
.altenda-test-panel h3{margin:0 0 12px;font-size:15px;color:#243b57}
.altenda-test-panel .altenda-test-result{font-size:12px;margin:12px 0 0;overflow-wrap:anywhere}
@media(max-width:1000px){.altenda-settings-shell{grid-template-columns:190px minmax(0,1fr);gap:12px}}
@media(max-width:740px){.altenda-settings-shell{display:block}.altenda-settings .altenda-settings-tabs{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;overflow-x:auto;max-height:none;padding:6px!important;margin-bottom:14px!important}.altenda-settings .altenda-settings-tab{width:auto!important;white-space:nowrap!important;flex:0 0 auto!important;padding:10px 12px!important}.altenda-settings .altenda-settings-pane .panel{padding:18px}}

/* ALTENDA 0.1.33: indicador SVG local, sin dependencia de Material Symbols. */
.altenda-busy-indicator{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;flex:none;color:inherit}
.altenda-busy-svg{display:block;width:17px;height:17px;animation:altenda-svg-rotate .75s linear infinite}
.altenda-action-check{font-size:16px;line-height:1;flex:none}
@keyframes altenda-svg-rotate{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.altenda-busy-svg{animation-duration:2.5s}}

/* ALTENDA 0.1.34: spinner como span circular CSS, sin SVG ni fuentes. */
.altenda-busy-indicator{display:inline-block!important;width:17px!important;height:17px!important;min-width:17px!important;min-height:17px!important;flex:0 0 17px!important;border:2px solid currentColor!important;border-right-color:transparent!important;border-radius:50%!important;box-sizing:border-box!important;animation:altenda-span-spin .7s linear infinite!important;vertical-align:middle!important;line-height:0!important;font-size:0!important}
@keyframes altenda-span-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.altenda-busy-indicator{animation-duration:1.6s!important}}
