/* ADMINISTRACIÓN DAI — colores MYUU: hueso, dorado, negro y rojo */
:root{
  --negro:#0f0e0c; --negro-2:#1a1813; --negro-3:#2a2620;
  --hueso:#f1ebdf; --hueso-2:#faf7f1; --hueso-3:#e6ddcc;
  --dorado:#b8902f; --dorado-2:#d6b25a; --dorado-claro:#f3e6c4;
  --rojo:#a8241f; --rojo-claro:#f6dcd9;
  --verde:#3f7d4f; --verde-claro:#dcebdf;
  --texto:#1d1b17; --suave:#6f6759; --borde:#d9cfbc;
  --serif: "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans: "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --mono: ui-monospace,"Cascadia Mono",Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--hueso);color:var(--texto);font:14px/1.45 var(--sans)}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}

/* ---------- Login ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;background:var(--negro)}
.login-arte{position:relative;padding:48px;display:flex;flex-direction:column;justify-content:space-between;
  background:radial-gradient(120% 80% at 0% 100%,#3a2f17 0%,transparent 60%),var(--negro);color:var(--hueso);overflow:hidden}
.login-arte:after{content:"";position:absolute;inset:auto -80px -80px auto;width:340px;height:340px;border:1px solid var(--dorado);border-radius:50%;opacity:.25}
.login-arte img{width:150px;mix-blend-mode:screen}
.login-arte h1{font:400 44px/1.05 var(--serif);margin:0;letter-spacing:.5px}
.login-arte h1 b{color:var(--dorado-2);font-weight:400}
.login-arte p{color:#b9ae98;max-width:380px;margin:16px 0 0}
.franja{display:flex;gap:6px}.franja i{width:28px;height:4px;background:var(--dorado)}.franja i:last-child{background:var(--rojo)}
.login-caja{background:var(--hueso);display:flex;align-items:center;justify-content:center;padding:40px 24px}
.login-caja form{width:100%;max-width:360px}
.login-caja h2{font:400 28px var(--serif);margin:6px 0 24px}

/* ---------- Estructura ---------- */
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh;background:linear-gradient(90deg,var(--negro) 240px,var(--hueso) 240px)}
.lateral{background:var(--negro);color:var(--hueso);display:flex;flex-direction:column;padding:26px 0 18px;position:sticky;top:0;height:100vh}
.lateral img{width:132px;margin:0 26px 8px;mix-blend-mode:screen}
.marca{margin:0 26px 26px;font:600 9.5px var(--sans);letter-spacing:1.6px;color:var(--dorado-2);white-space:nowrap}
.lateral nav{display:grid;gap:2px}
.lateral nav button{background:none;border:0;border-left:3px solid transparent;text-align:left;padding:12px 23px;color:#c9bfab;cursor:pointer;display:flex;align-items:center;gap:12px;font-weight:600}
.lateral nav button svg{width:17px;height:17px;flex-shrink:0;opacity:.8}
.lateral nav button:hover{color:#fff;background:var(--negro-2)}
.lateral nav button.activo{border-left-color:var(--dorado);background:var(--negro-2);color:#fff}
.lateral nav button.activo svg{color:var(--dorado-2);opacity:1}
.lateral .pie{margin-top:auto;padding:16px 26px 0;border-top:1px solid var(--negro-3);font-size:12px;color:#9d927d}
.lateral .pie b{display:block;color:var(--hueso);font-size:13px}
.lateral .pie button{margin-top:10px;background:none;border:1px solid var(--negro-3);color:#c9bfab;padding:7px 10px;cursor:pointer;width:100%}
.lateral .pie button:hover{border-color:var(--rojo);color:#fff}

main{min-width:0}
.cabecera{padding:30px 40px 22px;border-bottom:1px solid var(--borde);display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--hueso-2)}
.cabecera h1{font:400 30px/1.1 var(--serif);margin:4px 0 0}
.ey{font:700 10.5px var(--sans);letter-spacing:2.2px;text-transform:uppercase;color:var(--dorado)}
.contenido{padding:28px 40px 60px}

/* ---------- Piezas ---------- */
.btn{border:1px solid var(--borde);background:var(--hueso-2);padding:9px 15px;cursor:pointer;font-weight:600;font-size:13px;letter-spacing:.3px;white-space:nowrap}
.btn:hover{border-color:var(--dorado)}
.btn.prim{background:var(--negro);border-color:var(--negro);color:var(--dorado-2)}
.btn.prim:hover{background:var(--negro-3)}
.btn.oro{background:var(--dorado);border-color:var(--dorado);color:var(--negro)}
.btn.oro:hover{background:var(--dorado-2)}
.btn.peligro{color:var(--rojo);border-color:#e3bcb8}
.btn.peligro:hover{background:var(--rojo);color:#fff;border-color:var(--rojo)}
.btn.chico{padding:6px 10px;font-size:12px}
.btn:disabled{opacity:.5;cursor:default}
.acciones{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.panel{background:var(--hueso-2);border:1px solid var(--borde);overflow-x:auto;min-width:0}
.panel-cab{padding:14px 18px;border-bottom:1px solid var(--borde);display:flex;justify-content:space-between;align-items:center;gap:10px}
.panel-cab h3{margin:0;font:600 14px var(--sans)}
.vacio{padding:34px 20px;text-align:center;color:var(--suave)}
.dos{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr);gap:18px;align-items:start}

.tarjetas{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.tarjeta{background:var(--hueso-2);border:1px solid var(--borde);padding:18px;position:relative}
.tarjeta:before{content:"";position:absolute;left:0;top:0;width:28px;height:3px;background:var(--dorado)}
.tarjeta.alerta:before{background:var(--rojo)}
.tarjeta small{color:var(--suave);font-weight:600;font-size:12px}
.tarjeta b{display:block;font:400 34px/1 var(--serif);margin-top:12px}
.tarjeta span{display:block;color:var(--suave);font-size:12px;margin-top:6px}

.fila{padding:14px 18px;border-bottom:1px solid var(--hueso-3);display:flex;justify-content:space-between;align-items:center;gap:14px}
.fila:last-child{border-bottom:0}
.fila.click{cursor:pointer}.fila.click:hover{background:#fff}
.fila.sel{background:#fff;box-shadow:inset 3px 0 0 var(--dorado)}
.fila b{font-size:14.5px}
.m{color:var(--suave);font-size:12.5px;margin-top:3px}
.mono{font-family:var(--mono);font-size:12px}

.chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.6px;padding:4px 9px;border:1px solid var(--borde);background:var(--hueso);white-space:nowrap}
.chip:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--suave)}
.chip.ACTIVA,.chip.PUBLICADA,.chip.ON{border-color:#bcd6c1;background:var(--verde-claro);color:var(--verde)}.chip.ACTIVA:before,.chip.PUBLICADA:before,.chip.ON:before{background:var(--verde)}
.chip.PENDIENTE,.chip.BORRADOR{border-color:#e2cf9c;background:var(--dorado-claro);color:#7a5c12}.chip.PENDIENTE:before,.chip.BORRADOR:before{background:var(--dorado)}
.chip.SUSPENDIDA,.chip.VENCIDA,.chip.RETIRADA,.chip.OFF{border-color:#e3bcb8;background:var(--rojo-claro);color:var(--rojo)}.chip.SUSPENDIDA:before,.chip.VENCIDA:before,.chip.RETIRADA:before,.chip.OFF:before{background:var(--rojo)}
.etiquetas{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.etiqueta{font-size:11px;padding:2px 7px;background:var(--negro);color:var(--dorado-2);letter-spacing:.4px}
.etiqueta.base{background:var(--dorado);color:var(--negro)}

/* ---------- Formularios ---------- */
.form{padding:20px}
.form h3{font:400 22px var(--serif);margin:4px 0 4px}
.campo{margin-top:14px}
.campo label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--suave);margin-bottom:6px}
.campo input,.campo select,.campo textarea{width:100%;padding:10px 11px;border:1px solid var(--borde);background:#fff;outline:none}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--dorado);box-shadow:0 0 0 3px #b8902f22}
.par{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.casillas{border:1px solid var(--borde);background:#fff;max-height:210px;overflow:auto}
.casillas label{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--hueso-3);text-transform:none;letter-spacing:0;font-size:13.5px;color:var(--texto);font-weight:500;margin:0;cursor:pointer}
.casillas label:last-child{border-bottom:0}
.casillas input{width:auto;accent-color:var(--dorado)}
.casillas small{color:var(--suave);margin-left:auto}
.error{color:var(--rojo);font-size:13px;margin-top:12px;min-height:1em}
.aviso{padding:10px 12px;margin-bottom:14px;border:1px solid #bcd6c1;background:var(--verde-claro);color:var(--verde);font-size:13px}
.buscar{padding:9px 12px;border:1px solid var(--borde);background:#fff;width:240px;max-width:100%}
.buscar:focus{outline:none;border-color:var(--dorado)}

/* ---------- Detalle ---------- */
.codigo{margin-top:8px;padding:16px;background:var(--negro);color:var(--dorado-2);font:600 24px/1 var(--mono);letter-spacing:4px;text-align:center;border-bottom:3px solid var(--rojo)}
.datos{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:13px;margin-top:14px}
.datos dt{color:var(--suave)}.datos dd{margin:0}
.seccion{margin-top:20px;padding-top:16px;border-top:1px solid var(--hueso-3)}
.pc{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 0;border-bottom:1px dashed var(--hueso-3);font-size:13px}
.pc:last-child{border-bottom:0}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--suave);padding:10px 16px;border-bottom:1px solid var(--borde);background:var(--hueso)}
td{padding:11px 16px;border-bottom:1px solid var(--hueso-3);vertical-align:top}
tr:last-child td{border-bottom:0}

.toasts{position:fixed;bottom:22px;right:22px;display:flex;flex-direction:column;gap:8px;z-index:50;align-items:flex-end}
.toast{background:var(--negro);color:var(--hueso);padding:12px 16px;border-left:3px solid var(--dorado);box-shadow:0 8px 24px #0003;max-width:340px}
.toast.mal{border-left-color:var(--rojo)}

dialog{border:0;padding:0;width:min(440px,92vw);background:var(--hueso-2);box-shadow:0 20px 60px #0005}
dialog::backdrop{background:#0f0e0c99}
dialog .form .acciones{justify-content:flex-end;margin-top:20px}

/* ---------- Pantallas chicas ---------- */
@media (max-width:1100px){.tarjetas{grid-template-columns:repeat(2,1fr)}.dos{grid-template-columns:1fr}}
@media (max-width:760px){
  .login{grid-template-columns:1fr}.login-arte{padding:28px;min-height:220px}.login-arte h1{font-size:32px}
  .app{grid-template-columns:1fr}
  .lateral{position:static;height:auto;flex-direction:row;align-items:center;padding:10px 12px;gap:8px;overflow-x:auto}
  .lateral img{width:70px;margin:0 6px}.marca,.lateral .pie{display:none}
  .app{background:var(--hueso)}
  .lateral nav{display:flex}.lateral nav button{border-left:0;border-bottom:3px solid transparent;padding:10px 12px;white-space:nowrap}
  .lateral nav button.activo{border-bottom-color:var(--dorado)}
  .cabecera,.contenido{padding-left:16px;padding-right:16px}
  .par{grid-template-columns:1fr}.tarjetas{grid-template-columns:1fr 1fr}
}

/* ---------- Administrador DAI: piezas de empresas, enlaces, Sistema MYUU y datos centrales ---------- */
.rol{display:inline-block;margin-top:4px;font-size:10px;font-weight:700;letter-spacing:1.2px;color:var(--negro);background:var(--dorado);padding:2px 6px}
.pila{display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.sec-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.enlace{margin-top:6px;padding:10px 12px;background:var(--negro);color:var(--dorado-2);word-break:break-all;border-left:3px solid var(--dorado)}
.condiciones{margin-top:10px;padding:10px 12px;background:#fff;border:1px solid var(--hueso-3);font-size:13px;white-space:pre-wrap}
.errores{margin-top:10px;border:1px solid #e3bcb8;background:var(--rojo-claro);padding:8px 12px;font-size:12.5px;color:var(--rojo);display:grid;gap:4px}
.errores b{font-family:var(--mono);font-size:11.5px}
.datos dd.mono{font-size:12px;word-break:break-all}
.bloque-cab{display:flex;align-items:center;gap:14px;padding:18px;background:var(--negro);color:var(--hueso);border-bottom:3px solid var(--dorado);cursor:pointer}
.bloque-cab .m{color:#b9ae98}
.bloque-cab .flecha{color:var(--dorado-2);font-size:16px;width:14px}
.fila.sub{padding-left:46px}
.seccion.prueba{background:var(--dorado-claro);border:1px solid #e2cf9c;padding:14px;margin-top:18px}
label.btn{display:inline-block;letter-spacing:.3px;text-transform:none}

/* ---------- Login estilo DAI (azul noche) ---------- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;
  background:radial-gradient(70% 60% at 100% 0%,#14384f 0%,transparent 60%),radial-gradient(60% 60% at 0% 100%,#0b2233 0%,transparent 60%),#02070b}
.login-tarjeta{width:100%;max-width:504px;background:#071923;border:1px solid #2c4b5c;padding:44px 40px 64px}
.login-logo{display:block;width:170px;margin:0 auto 42px}
.login-ey{font:700 10px var(--sans);letter-spacing:2.6px;text-transform:uppercase;color:#d08a32}
.login-tarjeta h2{font:700 30px/1.15 var(--sans);color:#fff;margin:14px 0 22px}
.lcampo{margin-top:14px}
.lcampo label{display:block;font:700 12px var(--sans);color:#e8eef2;margin-bottom:7px}
.lcampo input{width:100%;padding:11px 12px;border:1px solid #3a5a6b;background:#0a1f2b;color:#fff;outline:none;font-size:14px}
.lcampo input:not(:placeholder-shown),.lcampo input:-webkit-autofill{background:#e8f0fe;color:#111}
.lcampo input:focus{border-color:#d08a32;box-shadow:0 0 0 3px #d08a3233}
.login-btn{width:100%;margin-top:26px;padding:12px;border:0;background:#cb8432;color:#111;font:600 14px var(--sans);cursor:pointer}
.login-btn:hover{background:#dd9744}
.login-btn:disabled{opacity:.6;cursor:default}
.login .error{color:#ff8a80}
@media (max-width:560px){.login-tarjeta{padding:32px 20px 40px}.login-tarjeta h2{font-size:26px}}

/* Ajustes: sin fondo negro en bloques, una sola letra */
:root{--serif:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif}
.cabecera h1{font:700 26px/1.15 var(--sans);letter-spacing:0}
.form h3{font:700 18px var(--sans)}
.tarjeta b{font:700 30px/1 var(--sans)}
.bloque-cab{background:var(--hueso-2);color:var(--texto);border:1px solid var(--borde);border-bottom:3px solid var(--dorado)}
.bloque-cab .m{color:var(--suave)}
.bloque-cab .flecha{color:var(--dorado)}
.enlace{background:#fff;color:var(--texto);border:1px solid var(--borde);border-left:3px solid var(--dorado)}
.panel:empty{display:none}