
:root{
 --blue:#195999;
 --blue-dark:#154A80;
 --blue-light:#EAF2F8;
 --bg:#F2F2F2;
 --white:#FFFFFF;
 --text:#17324D;
 --muted:#64748B;
 --red:#E21B23;
 --line:#D8E1E8;
 --sidebar:300px;
 --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;background:var(--bg);color:var(--text);
 font-family:Inter,Roboto,Arial,sans-serif;line-height:1.66
}
h1,h2,h3,h4{font-family:Montserrat,Inter,Roboto,Arial,sans-serif}
a{color:inherit}
img{max-width:100%;height:auto;display:block}

/* Menú inspirado en la estructura del manual /ayuda/ */
.sidebar{
 position:fixed;left:0;top:0;bottom:0;width:var(--sidebar);
 background:var(--blue);color:#fff;overflow-y:auto;z-index:50;
 border-right:1px solid rgba(0,0,0,.08)
}
.brand-wrap{
 background:#fff;padding:20px 18px 16px;border-bottom:5px solid var(--red)
}
.brand-wrap img{width:100%;height:auto}
.side-heading{
 padding:20px 22px 10px;font-size:.76rem;font-weight:900;
 letter-spacing:.12em;text-transform:uppercase;color:#D8E9F7
}
.side-nav{padding:0 12px 20px}
.side-section{margin-bottom:8px}
.side-section-title{
 display:block;padding:10px 12px;color:#fff;font-weight:900;
 text-decoration:none;border-radius:7px
}
.side-section-title:hover{background:rgba(255,255,255,.10)}
.side-sub{display:grid;gap:2px;margin:2px 0 8px}
.side-sub a{
 color:#EAF4FC;text-decoration:none;padding:8px 12px 8px 24px;
 border-radius:7px;font-size:.91rem;border-left:3px solid transparent
}
.side-sub a:hover{background:rgba(255,255,255,.09)}
.side-sub a.active{
 background:#fff;color:var(--blue);font-weight:900;border-left-color:var(--red)
}
.side-contact{
 margin:10px 16px 22px;padding:16px;border-top:1px solid rgba(255,255,255,.25);
 font-size:.88rem
}
.side-contact strong{display:block;margin-bottom:7px}
.side-contact a{display:block;text-decoration:none;color:#fff;margin:5px 0}

/* Página */
.page{margin-left:var(--sidebar);min-height:100vh}
.mobile-head{display:none}
.top-strip{
 height:12px;background:var(--blue);border-bottom:3px solid var(--red)
}
.content-shell{width:min(var(--max),calc(100% - 54px));margin:auto}
.breadcrumb{
 padding:22px 0 10px;font-size:.88rem;color:var(--muted)
}
.breadcrumb a{text-decoration:none;color:var(--blue)}
.page-header{
 background:#fff;border:1px solid var(--line);
 border-radius:3px;padding:30px 34px;margin-bottom:22px
}
.page-header .section-code{
 color:var(--red);font-weight:900;text-transform:uppercase;
 letter-spacing:.08em;font-size:.8rem
}
.page-header h1{
 margin:7px 0 9px;font-size:clamp(2rem,4vw,3.25rem);
 color:var(--blue)
}
.page-header p{margin:0;max-width:880px;color:var(--muted);font-size:1.08rem}

.article{
 background:#fff;border:1px solid var(--line);
 padding:34px 38px;margin-bottom:24px
}
.article h2{
 margin:32px 0 12px;color:var(--blue);font-size:1.5rem;
 border-bottom:1px solid var(--line);padding-bottom:8px
}
.article h2:first-child{margin-top:0}
.article h3{color:var(--text);font-size:1.12rem;margin-top:24px}
.article p{margin:0 0 16px}
.article ul{padding-left:22px}
.tip{
 margin:22px 0;background:var(--blue-light);border-left:5px solid var(--red);
 padding:17px 20px
}
.tip strong{color:var(--blue)}
.data-table{
 width:100%;border-collapse:collapse;margin:18px 0;background:#fff
}
.data-table th,.data-table td{
 border:1px solid var(--line);padding:11px 13px;text-align:left
}
.data-table th{background:var(--blue);color:#fff}
.actions{
 display:flex;gap:10px;flex-wrap:wrap;margin-top:25px
}
.btn{
 display:inline-block;text-decoration:none;padding:11px 17px;
 font-weight:900;border-radius:5px
}
.btn-primary{background:var(--blue);color:#fff}
.btn-red{background:var(--red);color:#fff}
.related{
 display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px
}
.related a{
 text-decoration:none;background:var(--blue-light);border:1px solid #CFDFEC;
 padding:15px;border-radius:6px
}
.related strong{display:block;color:var(--blue)}
.related small{color:var(--muted)}
.footer{
 background:#fff;border-top:1px solid var(--line);
 padding:20px 0 28px;margin-top:34px
}
.footer-inner{
 width:min(var(--max),calc(100% - 54px));margin:auto;
 display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
 font-size:.9rem;color:var(--muted)
}
.footer a{color:var(--blue);text-decoration:none}

/* El footer NO lleva un segundo logo */
.mobile-toggle{
 border:0;background:var(--blue);color:#fff;padding:9px 12px;
 border-radius:6px;font-weight:900
}
.mobile-logo{height:46px;width:auto}

@media(max-width:940px){
 .sidebar{transform:translateX(-100%);transition:.2s}
 .sidebar.open{transform:translateX(0);box-shadow:12px 0 30px rgba(0,0,0,.2)}
 .page{margin-left:0}
 .mobile-head{
  display:flex;position:sticky;top:0;z-index:45;background:#fff;
  align-items:center;justify-content:space-between;padding:10px 15px;
  border-bottom:1px solid var(--line)
 }
 .related{grid-template-columns:1fr}
}
@media(max-width:620px){
 .content-shell,.footer-inner{width:calc(100% - 24px)}
 .page-header,.article{padding:23px 20px}
}
@media print{
 .sidebar,.mobile-head,.top-strip{display:none!important}
 .page{margin-left:0}
 .content-shell,.footer-inner{width:100%}
 .article,.page-header{border:0}
}


/* HEADER Y FOOTER FIJOS — ESTÁNDAR INTERLAB */
:root{--fixed-header-h:72px;--fixed-footer-h:62px}
.fixed-header{
 position:fixed;top:0;left:var(--sidebar);right:0;height:var(--fixed-header-h);
 z-index:46;background:#fff;border-bottom:1px solid var(--line);
 display:flex;align-items:center;box-shadow:0 4px 14px rgba(23,50,77,.05)
}
.fixed-header-inner{
 width:min(var(--max),calc(100% - 54px));margin:auto;
 display:flex;align-items:center;justify-content:space-between;gap:24px
}
.fixed-header-title{
 font-family:Montserrat,Inter,Arial,sans-serif;font-weight:900;color:var(--blue);white-space:nowrap
}
.fixed-top-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.fixed-top-nav a{
 text-decoration:none;color:var(--blue);font-weight:850;padding:9px 12px;border-radius:6px
}
.fixed-top-nav a:hover{background:var(--blue-light)}
.fixed-top-nav .wa{background:var(--blue);color:#fff}
.fixed-top-nav .wa:hover{background:var(--blue-dark)}

.page{padding-top:var(--fixed-header-h);padding-bottom:var(--fixed-footer-h)}
.fixed-footer{
 position:fixed;left:var(--sidebar);right:0;bottom:0;min-height:var(--fixed-footer-h);
 z-index:44;background:#fff;border-top:1px solid var(--line);
 box-shadow:0 -4px 14px rgba(23,50,77,.05)
}
.fixed-footer-inner{
 width:min(var(--max),calc(100% - 54px));min-height:var(--fixed-footer-h);margin:auto;
 display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:.86rem
}
.footer-group{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.footer-group strong{color:var(--blue)}
.fixed-footer a{color:var(--blue);text-decoration:none;font-weight:750}
.fixed-footer a:hover{text-decoration:underline}
.footer{display:none}

@media(max-width:940px){
 .fixed-header{position:sticky;top:61px;left:0;height:auto;min-height:60px}
 .fixed-header-inner{
   width:calc(100% - 24px);padding:9px 0;align-items:flex-start;flex-direction:column;gap:4px
 }
 .fixed-header-title{display:none}
 .fixed-top-nav{width:100%;justify-content:flex-start;gap:4px}
 .fixed-top-nav a{padding:7px 8px;font-size:.83rem}
 .page{padding-top:0;padding-bottom:0}
 .fixed-footer{position:static;min-height:auto}
 .fixed-footer-inner{
   width:calc(100% - 24px);padding:18px 0;flex-direction:column;align-items:flex-start
 }
}
@media print{
 .fixed-header,.fixed-footer{display:none!important}
 .page{padding-top:0;padding-bottom:0}
}


/* =========================================================
   ESTÁNDAR INTERLAB — ESQUINAS REDONDEADAS
   Regla visual solicitada: 15% en botones y contenedores.
   Se usa 15% donde la geometría lo permite y un radio
   equivalente estable en contenedores grandes.
   ========================================================= */
:root{
 --radius-interlab:15%;
 --radius-container:18px;
}

/* Botones, enlaces tipo botón y controles */
.btn,
.mobile-toggle,
.fixed-top-nav a,
.side-section-title,
.side-sub a,
.brand-wrap,
.tip,
.related a{
 border-radius:var(--radius-interlab) !important;
}

/* Contenedores grandes: radio visual uniforme sin deformar */
.page-header,
.article,
.data-table,
.fixed-header-inner,
.fixed-footer-inner{
 border-radius:var(--radius-container);
}

/* Menú y bloques laterales */
.sidebar{
 border-top-right-radius:var(--radius-container);
 border-bottom-right-radius:var(--radius-container);
}
.brand-wrap{
 margin:12px;
 overflow:hidden;
}
.side-contact{
 border-radius:var(--radius-container);
 background:rgba(255,255,255,.07);
 padding:16px;
}

/* Tablas: conservar redondeo completo */
.data-table{
 overflow:hidden;
 border-collapse:separate;
 border-spacing:0;
}
.data-table th:first-child{border-top-left-radius:var(--radius-container)}
.data-table th:last-child{border-top-right-radius:var(--radius-container)}
.data-table tr:last-child td:first-child{border-bottom-left-radius:var(--radius-container)}
.data-table tr:last-child td:last-child{border-bottom-right-radius:var(--radius-container)}

/* Encabezado y pie: el bloque interior también se percibe redondeado */
.fixed-header-inner,
.fixed-footer-inner{
 padding-left:14px;
 padding-right:14px;
}

/* Inputs futuros heredan el mismo lenguaje visual */
input,select,textarea,button{
 border-radius:var(--radius-interlab);
}

/* Imágenes y elementos multimedia dentro del contenido */
.article img,
.article video,
.article iframe,
.page-header img{
 border-radius:var(--radius-container);
}

/* Evitar esquinas rectas en tarjetas futuras */
.card,
.notice,
.callout,
.resource-card,
.hero-card{
 border-radius:var(--radius-container) !important;
 overflow:hidden;
}

@media(max-width:940px){
 .sidebar{
  border-top-right-radius:var(--radius-container);
  border-bottom-right-radius:var(--radius-container);
 }
 .fixed-header-inner,.fixed-footer-inner{border-radius:var(--radius-container)}
}


/* =========================================================
   PROPUESTA 5 — UNIFICACIÓN DE BOTONES / CONTENEDORES
   Referencia visual: tarjetas de Contenido relacionado
   ========================================================= */
.soft-action{
 background:var(--blue-light) !important;
 color:var(--blue) !important;
 border:1px solid #CFDFEC !important;
 border-radius:18px !important;
 padding:11px 17px !important;
 box-shadow:none !important;
 transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.soft-action:hover{
 background:#fff !important;
 border-color:var(--blue) !important;
 transform:translateY(-1px);
 text-decoration:none !important;
}
.tip.soft-panel{
 background:var(--blue-light);
 border:1px solid #CFDFEC;
 border-left:5px solid var(--red);
 border-radius:18px !important;
 padding:17px 20px;
 overflow:hidden;
}
.related a{
 border-radius:18px !important;
 transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.related a:hover{
 background:#fff;
 border-color:var(--blue);
 transform:translateY(-1px);
}

/* Bienvenida InterLAB — contenido específico; Diseño Maestro preservado */
.welcome-section{scroll-margin-top:95px;margin:34px 0 42px}
.welcome-section h2{color:var(--blue)}
.value-proposition{
 background:var(--blue-light);border:1px solid #CFDFEC;border-radius:18px;
 padding:22px 24px;margin-bottom:18px
}
.value-title{font-family:Montserrat,Inter,Arial,sans-serif;font-weight:900;color:var(--blue);font-size:1.35rem}
.value-line{color:var(--red);font-weight:900;margin-top:5px}
.progress-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 20px;margin:18px 0 30px}
.progress-head{display:flex;justify-content:space-between;gap:15px;margin-bottom:9px}
.progress-track{height:12px;border-radius:18px;background:#E8EEF3;overflow:hidden}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--red));transition:width .2s}
.progress-card small{display:block;color:var(--muted);margin-top:8px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-grid label,.block-label{font-weight:850;color:var(--blue)}
.form-grid input,.form-grid select,.form-grid textarea,.block-label textarea{
 width:100%;margin-top:6px;padding:12px 13px;border:1px solid var(--line);
 border-radius:18px;background:#fff;color:var(--text);font:inherit
}
.form-grid textarea,.block-label textarea{min-height:100px;resize:vertical}
.form-grid .full{grid-column:1/-1}
.block-label{display:block;margin-top:16px}
.process-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.process-card{
 display:flex;gap:14px;background:#fff;border:1px solid var(--line);
 border-radius:18px;padding:17px
}
.process-card>span{
 width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;
 display:grid;place-items:center;font-weight:900;flex:0 0 auto
}
.process-card strong{display:block;color:var(--blue)}
.process-card p{margin:5px 0 0;color:var(--muted);font-size:.9rem}
.check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.check-row{
 display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);
 border-radius:18px;padding:12px 14px;cursor:pointer
}
.check-row input{margin-top:4px;accent-color:var(--red)}
.check-row span{color:var(--text);font-size:.91rem}
.training-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:16px 0}
.training-card{background:var(--blue-light);border:1px solid #CFDFEC;border-radius:18px;padding:16px}
.training-card strong{display:block;color:var(--blue);margin-bottom:4px}
.training-card span{display:block;color:var(--muted);font-size:.9rem}
.session-panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;margin-top:20px}
.session-panel-head{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:14px}
.session-panel-head strong{display:block;color:var(--blue)}
.session-panel-head span{display:block;color:var(--muted);font-size:.86rem}
.session-table-wrap{overflow:auto}
.session-table{width:100%;border-collapse:separate;border-spacing:0 8px;min-width:860px}
.session-table th{text-align:left;color:var(--blue);font-size:.78rem;padding:0 7px}
.session-table td{padding:5px 6px}
.session-table input,.session-table select{
 width:100%;border:1px solid var(--line);border-radius:12px;padding:9px;font:inherit
}
.session-remove{border:1px solid #E9CBCD;background:#FFF1F2;color:#A61B22;border-radius:12px;padding:8px 10px;cursor:pointer}
.resources-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:16px 0 22px}
.resource-card{
 display:block;text-decoration:none;background:#fff;border:1px solid var(--line);
 border-radius:18px;padding:17px
}
.resource-card strong{display:block;color:var(--blue)}
.resource-card span{display:block;color:var(--muted);font-size:.9rem;margin:4px 0 8px}
.resource-card em{color:var(--red);font-style:normal;font-weight:900;font-size:.86rem}
.closing-message{
 background:var(--blue-light);border:1px solid #CFDFEC;border-radius:18px;padding:20px;margin-top:20px
}
.closing-message strong{color:var(--blue);font-size:1.1rem}
.closing-message p{margin:6px 0 0}
.conversion-box{
 margin:30px 0;background:var(--blue-light);border:1px solid #CFDFEC;
 border-radius:18px;padding:23px;display:flex;justify-content:space-between;
 align-items:center;gap:22px
}
.conversion-box h2{border:0;padding:0;margin:5px 0 8px}
.conversion-kicker{color:var(--red);font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:.75rem}
.conversion-actions{display:flex;gap:9px;flex-wrap:wrap}
@media(max-width:900px){
 .form-grid,.process-grid,.check-grid,.training-grid,.resources-grid{grid-template-columns:1fr}
 .conversion-box{flex-direction:column;align-items:flex-start}
 .session-panel-head{align-items:flex-start;flex-direction:column}
}
