/* OBRA PRO · estilos del portal (misma línea gráfica de la portada DOCKSUR) */
:root{
  --brand:#01677E; --brand-2:#014B5C; --acc:#E63312; --bg:#EEF2F4; --panel:#FFFFFF; --panel-2:#F2F5F6;
  --ink:#14262C; --muted:#5A727A; --line:#D3DEE2;
  --ok:#1E7A4A; --ok-bg:#D8F1E2; --demo:#9A5B00; --demo-bg:#FCEBCB; --off:#7A8C92; --off-bg:#E6EBED;
  --f-d:"Barlow Condensed","Arial Narrow",sans-serif; --f-b:"Barlow",system-ui,"Segoe UI",sans-serif; --f-m:"IBM Plex Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0C171B; --panel:#13232A; --panel-2:#1A2C33; --ink:#E4EDF0; --muted:#93AAB1; --line:#29404A;
    --ok:#5BD08F; --ok-bg:#16382A; --demo:#F0AE3C; --demo-bg:#3D2E12; --off:#7A8C92; --off-bg:#22333A; color-scheme:dark;
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font:16px/1.45 var(--f-b); min-height:100vh}
button,input{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--brand); outline-offset:2px}
[hidden]{display:none!important}
.marca{font:700 15px/1 var(--f-m); letter-spacing:.18em; text-transform:uppercase}
.marca b{color:var(--acc)}

/* ---------- login ---------- */
.login{min-height:100vh; display:grid; grid-template-columns:1.1fr 1fr}
.login .lado{background:var(--brand); color:#fff; padding:48px 56px; display:flex; flex-direction:column; justify-content:space-between;
  background-image:linear-gradient(160deg, rgba(255,255,255,.06) 0 40%, transparent 40%), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 48px), repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 48px);
  border-right:6px solid var(--acc)}
.login .lado h1{font:700 clamp(40px,5vw,64px)/.98 var(--f-d); margin:24px 0 14px; max-width:12ch}
.login .lado p{max-width:44ch; opacity:.9; margin:0}
.login .lado ul{list-style:none; padding:0; margin:28px 0 0; display:grid; gap:8px; font-size:15px; opacity:.92}
.login .lado li::before{content:"▸ "; color:#FFB199}
.login .lado small{opacity:.75; font-size:12.5px}
.login .form{display:flex; align-items:center; justify-content:center; padding:32px 20px}
.caja{width:100%; max-width:340px; display:flex; flex-direction:column; align-items:center}
.caja h2{font:700 28px/1.1 var(--f-d); margin:0 0 4px; align-self:stretch}
.caja .sub{color:var(--muted); margin:0 0 20px; align-self:stretch; font-size:15px}
.campo{align-self:stretch; display:flex; flex-direction:column; gap:6px; margin-bottom:18px}
.campo label{font-weight:600; font-size:14px}
.campo input{border:1px solid var(--line); background:var(--panel); border-radius:10px; padding:12px 14px; font-size:16px}
.campo input:focus{border-color:var(--brand); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent)}
.pinlbl{align-self:stretch; font-weight:600; font-size:14px}
.dots{display:flex; gap:16px; margin:12px 0 18px}
.dots i{width:16px; height:16px; border-radius:50%; border:2px solid var(--brand); transition:background .12s}
.dots i.f{background:var(--brand)}
.pad{display:grid; grid-template-columns:repeat(3, 78px); gap:12px}
.pad button{height:62px; border-radius:16px; border:1px solid var(--line); background:var(--panel); font:600 28px/1 var(--f-d); cursor:pointer; transition:transform .06s, background .12s}
.pad button:hover{background:var(--panel-2)}
.pad button:active{transform:scale(.96)}
.err{color:var(--acc); min-height:44px; margin-top:14px; font-weight:600; text-align:center; font-size:14.5px}
.sacude{animation:sac .3s}
@keyframes sac{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@media (max-width:820px){
  .login{grid-template-columns:1fr}
  .login .lado{padding:28px 20px; border-right:0; border-bottom:6px solid var(--acc)}
  .login .lado h1{font-size:38px; margin:14px 0 8px}
  .login .lado ul,.login .lado small{display:none}
}

/* ---------- menú ---------- */
header.top{background:var(--brand); color:#fff; border-bottom:4px solid var(--acc)}
header.top .in{max-width:1180px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
header.top .sp{flex:1}
header.top .hola{font-size:15px; opacity:.92}
.hbtn{background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35); border-radius:10px; color:#fff; padding:8px 14px; cursor:pointer; font-size:14px; text-decoration:none}
.hbtn:hover{background:rgba(255,255,255,.24)}
main{max-width:1180px; margin:0 auto; padding:26px 24px 40px}
main h1{font:700 34px/1.05 var(--f-d); margin:0 0 6px}
main .intro{color:var(--muted); margin:0 0 22px; max-width:70ch}
h2.sec{font:600 13px/1 var(--f-b); letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin:28px 0 12px}
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:14px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:8px; text-decoration:none; color:inherit; transition:border-color .15s, transform .15s, box-shadow .15s}
a.card:hover{border-color:var(--brand); transform:translateY(-2px); box-shadow:0 8px 22px rgba(1,103,126,.12)}
.card .top{display:flex; align-items:center; gap:10px}
.card .ico{width:42px; height:42px; border-radius:10px; display:grid; place-items:center; background:var(--panel-2); color:var(--brand)}
.card .ico svg{width:24px; height:24px}
.card h3{font:700 24px/1 var(--f-d); margin:0; flex:1; letter-spacing:.02em}
.card p{margin:0; color:var(--muted); font-size:14.5px}
.card .autor{font:500 12px var(--f-m); color:var(--muted); margin-top:auto; padding-top:6px}
.chip{border-radius:99px; padding:4px 10px; font:600 12px/1 var(--f-b); white-space:nowrap}
.c-admin{background:var(--ok-bg); color:var(--ok)} .c-demo{background:var(--demo-bg); color:var(--demo)} .c-off{background:var(--off-bg); color:var(--off)}
.card.prox{opacity:.72; border-style:dashed}
.card.prox .ico{color:var(--off)}
.card.sin{opacity:.6}
footer{max-width:1180px; margin:0 auto; padding:0 24px 30px; color:var(--muted); font-size:13px}
@media (max-width:600px){ header.top .in, main, footer{padding-left:16px; padding-right:16px} .grid{grid-template-columns:1fr} }
.dim{color:var(--muted)}