/* =========================================================
   login.industria4.tech — estilos propios del servicio de cuentas.
   Colores, tipografía, menú, footer y botones vienen de
   /assets/min/i4.css (shared). Todo lo de acá va bajo .lab
   para no pisar nada del sitio.
   ========================================================= */
.lab{flex:1; padding:3.5rem 0; background:linear-gradient(135deg, rgba(89,180,180,0.05) 0%, rgba(146,131,189,0.05) 100%);}
.lab .split{display:grid; grid-template-columns:1.05fr 0.95fr; gap:3rem; align-items:start;}
.lab .intro h1{font-size:2.4rem; line-height:1.2; margin-bottom:1.1rem;}
.lab .intro > p{font-size:1.05rem; margin-bottom:1.5rem; max-width:50ch;}
.lab .demos{list-style:none; display:grid; gap:0.7rem; max-width:46ch; padding:0; margin:0;}
.lab .demos li{background:var(--bg-alt); border:1px solid var(--line); border-left:4px solid var(--teal); border-radius:8px; padding:0.7rem 1rem; font-size:0.92rem; color:var(--ink-soft);}
.lab .demos li b{color:var(--ink); font-weight:600;}

.lab .card{background:var(--bg-alt); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,0.08); padding:2rem;}
.lab .card.narrow{max-width:480px; margin:0 auto;}
.lab .tabs{display:flex; border-bottom:1px solid var(--line); margin-bottom:1.6rem;}
.lab .tab{flex:1; background:none; border:none; cursor:pointer; font-family:inherit; font-weight:600; font-size:0.95rem; color:var(--ink-soft); padding:0.75rem 0; border-bottom:3px solid transparent; margin-bottom:-1px;}
.lab .tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--teal-deep);}

.lab form{display:flex; flex-direction:column; gap:1rem;}
.lab .view{display:none;} .lab .view.active{display:block;}
.lab .row2{display:grid; grid-template-columns:1fr 1fr; gap:0.9rem;}
.lab label{display:flex; flex-direction:column; gap:5px; font-weight:600; font-size:0.84rem; color:var(--ink);}
.lab label .opt{font-weight:400; color:var(--ink-soft);}
.lab input, .lab select, .lab textarea{font-family:inherit; font-size:0.95rem; font-weight:400; padding:0.7rem 0.85rem; border:1px solid var(--line-strong); border-radius:8px; background:var(--bg-alt); color:var(--ink); width:100%;}
.lab input:focus, .lab select:focus, .lab textarea:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-tint);}
.lab .check{flex-direction:row; align-items:flex-start; gap:10px; font-weight:400; font-size:0.84rem; color:var(--ink-soft);}
.lab .check input{width:auto; margin-top:4px; accent-color:var(--teal-deep);}
.lab .hint{font-weight:400; font-size:0.78rem; color:var(--ink-soft);}
.lab .linkbtn{background:none; border:none; padding:0; font:inherit; font-size:0.85rem; color:var(--teal-deep); font-weight:600; cursor:pointer; text-align:left;}
.lab .linkbtn:hover{text-decoration:underline;}

/* Botones: misma forma y degradé que "Hablemos" del menú */
.lab .btn{display:inline-block; padding:12px 24px; border-radius:8px; border:none; cursor:pointer; font-family:inherit; font-weight:600; font-size:15px; line-height:1.2; color:#fff; text-align:center; text-decoration:none; transition:opacity .2s, transform .2s, box-shadow .2s;}
.lab .btn:hover{opacity:.92; transform:translateY(-1px);}
.lab .btn.full{width:100%;}
.lab .btn-primary{background:linear-gradient(100deg, var(--coral, #DB4E4F) 0%, var(--plum, #955A7C) 50%, var(--blue2, #3F69B2) 100%);}
.lab .btn-primary:hover{box-shadow:0 8px 20px rgba(219,78,79,0.3);}
.lab .btn-secondary{background:linear-gradient(135deg, var(--teal-deep, #2F7A78) 0%, var(--teal, #59B4B4) 40%, var(--violet, #9283BD) 100%);}
.lab .btn-secondary:hover{box-shadow:0 8px 20px rgba(89,180,180,0.3);}
.lab .btn-ghost{background:var(--bg, #F7F9F9); color:var(--ink, #122024); border:1px solid var(--line-strong, #C3CDCD);}
.lab .btn-danger{background:var(--coral, #DB4E4F);}
.lab .btn:disabled{opacity:.55; cursor:not-allowed; transform:none; box-shadow:none;}
.lab label .lbl{display:block;}

.lab .msg{display:none; font-size:0.87rem; padding:0.7rem 0.9rem; border-radius:8px;}
.lab .msg.show{display:block;}
.lab .msg.error{background:#FBE9E9; color:#9A2F30;}
.lab .msg.success{background:var(--teal-tint); color:var(--teal-deep);}
.lab .done{text-align:center; padding:1rem 0;}
.lab .done h2{font-size:1.35rem; margin-bottom:0.6rem;}
.lab .small{font-size:0.8rem;}

/* Admin */
.lab .stats{display:flex; flex-wrap:wrap; gap:1rem; margin:1.5rem 0;}
.lab .stat{background:var(--bg-alt); border-radius:12px; box-shadow:0 4px 14px rgba(0,0,0,0.06); padding:1rem 1.3rem; min-width:150px;}
.lab .stat b{display:block; font-size:1.7rem; color:var(--ink);}
.lab .stat span{font-size:0.82rem; color:var(--ink-soft);}
.lab .table-wrap{overflow-x:auto; background:var(--bg-alt); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,0.06);}
.lab table{border-collapse:collapse; width:100%; font-size:0.84rem;}
.lab th{background:var(--ink); color:#fff; text-align:left; font-weight:600; padding:0.7rem 0.8rem; white-space:nowrap;}
.lab td{padding:0.65rem 0.8rem; border-bottom:1px solid var(--line); vertical-align:top;}
.lab tr:hover td{background:var(--teal-tint);}
.lab .pill{display:inline-block; font-size:0.74rem; font-weight:600; padding:2px 9px; border-radius:10px; background:var(--violet-tint); color:var(--violet-deep); white-space:nowrap;}
.lab .pill.activa{background:var(--teal-tint); color:var(--teal-deep);}
.lab .pill.pendiente{background:#FBF1E1; color:#8A5A12;}
.lab .toolbar{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;}
.lab dl.datos{display:grid; grid-template-columns:max-content 1fr; gap:0.4rem 1.2rem; font-size:0.9rem;}
.lab dl.datos dt{font-weight:600;} .lab dl.datos dd{color:var(--ink-soft); margin:0;}

@media (max-width:900px){ .lab .split{grid-template-columns:1fr;} .lab .intro h1{font-size:1.9rem;} }
@media (max-width:640px){ .lab .row2{grid-template-columns:1fr;} .lab .card{padding:1.4rem;} }