/* ============================================================================
   Portal de Subcontratas (CAE) · cae.css
   Colores copiados de MyTSG (_mytsg_head.php, #mytsg-root) para que el portal se
   sienta parte de la casa. Cada token de color tiene su pareja oscura.
   ============================================================================ */
:root {
  --bg:#eaeef4; --panel:#f4f6f9; --surface:#ffffff; --surface-2:#f6f8fb;
  --border:#e4e9f0; --border-2:#d4dbe5;
  --fg:#15203a; --fg2:#586173; --fg3:#7a8496;
  --accent:#004a99; --accent-2:#216CA8; --accent-3:#1a8dcf;
  --navy:#0a1628; --navy-2:#0e2347; --navy-3:#103a72;
  --field:#ffffff;
  --sh-1:0 1px 2px rgba(16,28,52,.04),0 1px 3px rgba(16,28,52,.05);
  --sh-2:0 4px 10px rgba(16,28,52,.06),0 18px 36px rgba(16,28,52,.10);
  --ok-bg:#e7f6ee; --ok-bd:#b7e2c9; --ok-fg:#1e7d4f;
  --avi-bg:#fdf4e0; --avi-bd:#f0dcae; --avi-fg:#8a5f00;
  --err-bg:#fdeaea; --err-bd:#f3c9c9; --err-fg:#b02330;
  --info-bg:#eaf2fb; --info-bd:#cfe0f3; --info-fg:#1c5f96;
  --neu-bg:#f1f3f6; --neu-bd:#e1e6ed; --neu-fg:#5a6472;
  color-scheme: light;
}
:root[data-tema="dark"] {
  --bg:#070e1b; --panel:#0a1322; --surface:#101e34; --surface-2:#152743;
  --border:rgba(255,255,255,.09); --border-2:rgba(255,255,255,.16);
  --fg:#e9eef6; --fg2:#9aa7ba; --fg3:#7d889b;
  --accent:#2f86d6; --accent-2:#3b91de; --accent-3:#5cc6f5;
  --field:#0c1a30;
  --sh-1:0 1px 3px rgba(0,0,0,.45);
  --sh-2:0 4px 10px rgba(0,0,0,.4),0 20px 44px rgba(0,0,0,.55);
  --ok-bg:rgba(46,158,99,.14); --ok-bd:rgba(46,158,99,.34); --ok-fg:#5cd39a;
  --avi-bg:rgba(201,138,0,.15); --avi-bd:rgba(201,138,0,.36); --avi-fg:#f0c264;
  --err-bg:rgba(176,35,48,.16); --err-bd:rgba(176,35,48,.38); --err-fg:#f08a92;
  --info-bg:rgba(33,108,168,.16); --info-bd:rgba(33,108,168,.36); --info-fg:#8fc3ee;
  --neu-bg:rgba(255,255,255,.05); --neu-bd:rgba(255,255,255,.12); --neu-fg:#a3aec0;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    --bg:#070e1b; --panel:#0a1322; --surface:#101e34; --surface-2:#152743;
    --border:rgba(255,255,255,.09); --border-2:rgba(255,255,255,.16);
    --fg:#e9eef6; --fg2:#9aa7ba; --fg3:#7d889b;
    --accent:#2f86d6; --accent-2:#3b91de; --accent-3:#5cc6f5;
    --field:#0c1a30;
    --sh-1:0 1px 3px rgba(0,0,0,.45);
    --sh-2:0 4px 10px rgba(0,0,0,.4),0 20px 44px rgba(0,0,0,.55);
    --ok-bg:rgba(46,158,99,.14); --ok-bd:rgba(46,158,99,.34); --ok-fg:#5cd39a;
    --avi-bg:rgba(201,138,0,.15); --avi-bd:rgba(201,138,0,.36); --avi-fg:#f0c264;
    --err-bg:rgba(176,35,48,.16); --err-bd:rgba(176,35,48,.38); --err-fg:#f08a92;
    --info-bg:rgba(33,108,168,.16); --info-bd:rgba(33,108,168,.36); --info-fg:#8fc3ee;
    --neu-bg:rgba(255,255,255,.05); --neu-bd:rgba(255,255,255,.12); --neu-fg:#a3aec0;
    color-scheme: dark;
  }
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { min-height:100%; }
body { background:var(--bg); color:var(--fg); font:15px/1.5 'Roboto',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:var(--accent-2); text-decoration:none; }
a:hover { text-decoration:underline; }
:root[data-tema="dark"] a { color:var(--accent-3); }
button,input,select,textarea { font:inherit; color:inherit; }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline:3px solid var(--accent-3); outline-offset:2px; border-radius:6px; }
.ico { flex-shrink:0; vertical-align:middle; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

.banda-dev { background:repeating-linear-gradient(45deg,#8a5f00,#8a5f00 12px,#7a5400 12px,#7a5400 24px); color:#fff; font:700 11.5px 'Roboto',sans-serif; letter-spacing:1.4px; text-transform:uppercase; text-align:center; padding:5px 10px; }

/* ---------- Barra superior ---------- */
.top { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 22px; background:var(--navy); box-shadow:0 2px 14px rgba(0,0,0,.28); }
.top-marca { display:flex; align-items:center; gap:12px; color:#fff; min-width:0; text-decoration:none!important; }
.top-logo { display:inline-flex; align-items:center; height:36px; padding:0 12px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); }
.top-logo img { height:19px; display:block; }
.top-tit { font:700 15px 'Outfit',sans-serif; letter-spacing:.2px; color:rgba(255,255,255,.88); white-space:nowrap; }
.top-der { display:flex; align-items:center; gap:10px; }
.top-ico { width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.05); color:rgba(255,255,255,.85); cursor:pointer; }
.top-ico:hover { background:rgba(255,255,255,.12); color:#fff; }
.i-sol { display:none; }
:root[data-tema="dark"] .i-sol { display:inline; } :root[data-tema="dark"] .i-luna { display:none; }
@media (prefers-color-scheme: dark) { :root:not([data-tema]) .i-sol { display:inline; } :root:not([data-tema]) .i-luna { display:none; } }
.top-user { display:flex; align-items:center; gap:10px; padding:3px 12px 3px 4px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); }
.top-avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(140deg,#3b91de,#004a99); color:#fff; font:700 13px 'Roboto',sans-serif; display:flex; align-items:center; justify-content:center; }
.top-user-txt { display:flex; flex-direction:column; line-height:1.2; color:#fff; max-width:240px; }
.top-user-txt b { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top-user-txt small { font-size:11.5px; color:rgba(255,255,255,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top-btn { display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 13px; border-radius:10px; border:1px solid rgba(255,255,255,.15); background:transparent; color:rgba(255,255,255,.8); font-size:13px; font-weight:600; cursor:pointer; text-decoration:none!important; }
.top-btn:hover { background:rgba(255,255,255,.1); color:#fff; }
.top-salir { display:inline; }

/* ---------- Cabecera de página ---------- */
.hero { position:relative; overflow:hidden; background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 55%,var(--navy-3) 100%); padding:30px 22px 34px; }
.hero::before { content:""; position:absolute; inset:0; opacity:.6; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:42px 42px; -webkit-mask-image:radial-gradient(120% 90% at 18% 0%,#000 35%,transparent 78%); mask-image:radial-gradient(120% 90% at 18% 0%,#000 35%,transparent 78%); }
.hero-in { position:relative; max-width:1240px; margin:0 auto; }
.hero-lb { font:700 11px 'Roboto',sans-serif; letter-spacing:2.3px; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:8px; }
.hero-t { font:700 clamp(24px,3.2vw,34px)/1.12 'Outfit',sans-serif; letter-spacing:-.7px; color:#fff; }
.hero-s { margin-top:9px; color:rgba(255,255,255,.7); font-size:15px; max-width:70ch; }

/* ---------- Pestañas ---------- */
.pestanas { position:sticky; top:58px; z-index:40; background:var(--surface); border-bottom:1px solid var(--border); box-shadow:var(--sh-1); }
.pestanas-in { max-width:1240px; margin:0 auto; display:flex; gap:4px; padding:0 14px; overflow-x:auto; scrollbar-width:none; }
.pestanas a { display:inline-flex; align-items:center; gap:8px; padding:14px 14px 12px; font-size:14px; font-weight:600; color:var(--fg2); border-bottom:3px solid transparent; white-space:nowrap; text-decoration:none!important; }
.pestanas a:hover { color:var(--fg); }
.pestanas a.on { color:var(--accent-2); border-bottom-color:var(--accent-2); }
:root[data-tema="dark"] .pestanas a.on { color:var(--accent-3); border-bottom-color:var(--accent-3); }

/* ---------- Contenido ---------- */
.main { max-width:1240px; margin:0 auto; padding:24px 22px 60px; display:flex; flex-direction:column; gap:18px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px 22px; box-shadow:var(--sh-1); }
.card h2 { font:700 17px 'Outfit',sans-serif; letter-spacing:-.2px; display:flex; align-items:center; gap:9px; margin-bottom:4px; }
.card h2 .ico { color:var(--accent-2); }
.card .sub { color:var(--fg2); font-size:14px; margin-bottom:14px; }
.rejilla { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.muted { color:var(--fg2); } .small { font-size:13px; } .num { font-variant-numeric:tabular-nums; }

/* KPIs */
.kpi { display:flex; align-items:center; gap:18px; }
.kpi-anillo { --p:0; --c:var(--accent-2); width:92px; height:92px; flex-shrink:0; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(var(--c) calc(var(--p)*1%), var(--neu-bd) 0); }
.kpi-anillo span { width:72px; height:72px; border-radius:50%; background:var(--surface); display:grid; place-items:center; font:800 20px 'Outfit',sans-serif; }
.kpi-big { font:800 34px/1 'Outfit',sans-serif; letter-spacing:-1px; }
.kpi-lb { color:var(--fg2); font-size:13.5px; margin-top:4px; }
.barra { height:8px; border-radius:6px; background:var(--neu-bd); overflow:hidden; }
.barra > i { display:block; height:100%; border-radius:6px; background:var(--accent-2); }
.barra.ok > i { background:var(--ok-fg); } .barra.avi > i { background:var(--avi-fg); } .barra.err > i { background:var(--err-fg); }

/* Píldoras de estado (forma + color) */
.pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:3px 10px; border-radius:50px; border:1px solid; white-space:nowrap; }
.pill::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.pill.ok { color:var(--ok-fg); background:var(--ok-bg); border-color:var(--ok-bd); }
.pill.avi { color:var(--avi-fg); background:var(--avi-bg); border-color:var(--avi-bd); }
.pill.err { color:var(--err-fg); background:var(--err-bg); border-color:var(--err-bd); }
.pill.info { color:var(--info-fg); background:var(--info-bg); border-color:var(--info-bd); }
.pill.neu { color:var(--neu-fg); background:var(--neu-bg); border-color:var(--neu-bd); }
.chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:3px 10px; border-radius:7px; background:var(--surface-2); border:1px solid var(--border); color:var(--fg2); }
.chip.critico { color:var(--err-fg); background:var(--err-bg); border-color:var(--err-bd); }

/* Avisos */
.flash { display:flex; align-items:center; gap:10px; padding:13px 16px; border-radius:12px; border:1px solid; font-weight:500; }
.flash.ok { background:var(--ok-bg); border-color:var(--ok-bd); color:var(--ok-fg); }
.flash.err { background:var(--err-bg); border-color:var(--err-bd); color:var(--err-fg); }
.flash.info { background:var(--info-bg); border-color:var(--info-bd); color:var(--info-fg); }
.nota { font-size:14px; line-height:1.55; padding:12px 15px; border-radius:12px; border:1px solid; display:flex; gap:10px; align-items:flex-start; }
.nota .ico { margin-top:2px; }
.nota.info { background:var(--info-bg); border-color:var(--info-bd); color:var(--info-fg); }
.nota.avi { background:var(--avi-bg); border-color:var(--avi-bd); color:var(--avi-fg); }
.nota.err { background:var(--err-bg); border-color:var(--err-bd); color:var(--err-fg); }
.nota.ok { background:var(--ok-bg); border-color:var(--ok-bd); color:var(--ok-fg); }

/* Botones y formularios */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:10px 17px; border-radius:11px; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff!important; font-weight:600; font-size:14px; text-decoration:none!important; line-height:1.2; }
.btn:hover { filter:brightness(1.08); }
.btn:disabled { opacity:.5; cursor:not-allowed; filter:none; }
.btn.sec { background:var(--surface); color:var(--accent-2)!important; border:1px solid var(--border-2); }
:root[data-tema="dark"] .btn.sec { color:var(--accent-3)!important; }
.btn.sec:hover { background:var(--surface-2); filter:none; }
.btn.ok { background:linear-gradient(135deg,#17734a,#1e7d4f); }
.btn.peligro { background:linear-gradient(135deg,#9a1d29,#b02330); }
.btn.sm { min-height:36px; padding:7px 12px; font-size:13px; border-radius:9px; }
.btn.ancho { width:100%; }
.acciones { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.campo { display:block; margin-bottom:14px; }
.campo > span { display:block; font-size:12.5px; font-weight:600; color:var(--fg2); margin-bottom:6px; }
.campo small { display:block; font-size:12.5px; color:var(--fg3); margin-top:5px; line-height:1.45; }
input[type=text],input[type=email],input[type=password],input[type=date],input[type=search],select,textarea {
  width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--border-2); border-radius:10px; background:var(--field); font-size:15px; }
textarea { min-height:84px; resize:vertical; line-height:1.5; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--accent-3); box-shadow:0 0 0 3px rgba(33,108,168,.18); }
.fila2 { display:grid; gap:0 14px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.check { display:flex; gap:10px; align-items:flex-start; font-size:14px; margin-bottom:14px; }
.check input { width:20px; height:20px; margin-top:2px; flex-shrink:0; accent-color:var(--accent-2); }

/* Zona de subida */
.subida { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center;
  border:2px dashed var(--border-2); border-radius:14px; padding:22px 16px; background:var(--surface-2); cursor:pointer; transition:border-color .15s, background .15s; }
.subida:hover, .subida.encima { border-color:var(--accent-3); background:var(--info-bg); }
.subida input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.subida b { font-size:14.5px; } .subida small { color:var(--fg3); font-size:12.5px; }
.subida .elegido { font-weight:600; color:var(--accent-2); word-break:break-all; }
.subida .ico { color:var(--accent-2); }

/* Lista de requisitos */
.reqs { display:flex; flex-direction:column; gap:10px; }
.req { border:1px solid var(--border); border-radius:14px; background:var(--surface); }
.req[data-color="err"] { border-left:4px solid var(--err-fg); }
.req[data-color="avi"] { border-left:4px solid var(--avi-fg); }
.req[data-color="info"] { border-left:4px solid var(--info-fg); }
.req[data-color="ok"] { border-left:4px solid var(--ok-fg); }
.req[data-color="neu"] { border-left:4px solid var(--neu-bd); }
.req-cab { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 16px; align-items:center; padding:14px 16px; }
.req-nom { font-weight:600; font-size:15px; }
.req-meta { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin-top:5px; font-size:13px; color:var(--fg2); }
.req-txt { font-size:13.5px; color:var(--fg2); margin-top:4px; }
.req-acc { display:flex; gap:8px; align-items:center; justify-content:flex-end; flex-wrap:wrap; }
.req details { border-top:1px solid var(--border); }
.req summary { list-style:none; cursor:pointer; padding:11px 16px; font-size:13.5px; font-weight:600; color:var(--accent-2); display:flex; align-items:center; gap:8px; }
:root[data-tema="dark"] .req summary { color:var(--accent-3); }
.req summary::-webkit-details-marker { display:none; }
.req details[open] > summary { background:var(--surface-2); }
.req-cuerpo { padding:16px; }
.motivo { margin-top:8px; }
.hist { list-style:none; display:flex; flex-direction:column; gap:8px; }
.hist li { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; font-size:13.5px; padding:9px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); }

/* Tablas */
.tabla-w { overflow-x:auto; }
table.t { width:100%; border-collapse:collapse; font-size:14px; }
table.t th { text-align:left; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--fg3); font-weight:700; padding:10px 12px; border-bottom:1px solid var(--border); white-space:nowrap; }
table.t td { padding:12px; border-bottom:1px solid var(--border); vertical-align:middle; }
table.t tr:last-child td { border-bottom:none; }
table.t tr:hover td { background:var(--surface-2); }

/* Lista de tareas del inicio */
.tareas { list-style:none; display:flex; flex-direction:column; gap:8px; }
.tareas li a { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); color:var(--fg); text-decoration:none!important; }
.tareas li a:hover { border-color:var(--accent-3); }
.tareas .t-ico { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex-shrink:0; }
.tareas .t-ico.err { background:var(--err-bg); color:var(--err-fg); } .tareas .t-ico.avi { background:var(--avi-bg); color:var(--avi-fg); }
.tareas .t-ico.neu { background:var(--neu-bg); color:var(--neu-fg); } .tareas .t-ico.info { background:var(--info-bg); color:var(--info-fg); }
.tareas .t-txt { flex:1; min-width:0; } .tareas .t-txt b { display:block; font-size:14px; } .tareas .t-txt small { color:var(--fg2); font-size:13px; }
.vacio { text-align:center; padding:28px 16px; color:var(--fg2); }
.vacio .ico { color:var(--ok-fg); margin-bottom:8px; }

/* Pie */
.pie { text-align:center; font-size:12.5px; color:var(--fg3); padding:22px 16px 32px; border-top:1px solid var(--border); line-height:1.7; }

/* ---------- Pantallas de acceso ---------- */
body.acceso { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:26px 16px;
  background:linear-gradient(135deg,#0a1628 0%,#0e2347 55%,#103a72 100%); position:relative; }
body.acceso::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.6;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:40px 40px; -webkit-mask-image:radial-gradient(120% 95% at 50% 0%,#000 30%,transparent 76%); mask-image:radial-gradient(120% 95% at 50% 0%,#000 30%,transparent 76%); }
body.acceso .banda-dev { position:fixed; top:0; left:0; right:0; z-index:5; }
.acceso-tema { position:fixed; top:38px; right:18px; z-index:5; }
.acceso-caja { position:relative; width:100%; max-width:440px; background:var(--surface); border:1px solid var(--border); border-radius:20px; box-shadow:0 24px 70px rgba(0,0,0,.42); padding:32px 30px 24px; }
.acceso-marca { display:flex; justify-content:center; margin-bottom:16px; }
.acceso-marca span { display:inline-flex; align-items:center; padding:15px 26px; border-radius:15px; background:linear-gradient(140deg,#0e2347,#0a1628); border:1px solid rgba(255,255,255,.1); }
.acceso-marca img { height:30px; display:block; }
.acceso-caja h1 { font:700 21px 'Outfit',sans-serif; text-align:center; letter-spacing:-.3px; }
.acceso-caja .sub { text-align:center; color:var(--fg2); font-size:14px; margin:6px 0 22px; }
.acceso-caja .enlaces { text-align:center; font-size:13.5px; margin-top:16px; }
.acceso-legal { text-align:center; font-size:12px; color:var(--fg3); margin-top:18px; }

@media (max-width:760px) {
  .top { padding:9px 12px; } .top-tit, .top-user-txt, .top-btn span { display:none; } .top-user { padding:3px; }
  .hero { padding:22px 16px 26px; } .main { padding:16px 12px 48px; gap:14px; } .card { padding:16px; border-radius:14px; }
  .pestanas { top:56px; } .req-cab { grid-template-columns:1fr; } .req-acc { justify-content:flex-start; }
  .acceso-caja { padding:26px 20px 20px; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none!important; animation:none!important; } }