
:root{--fondo:#0f0f14;--panel:#17171f;--panel2:#1e1e29;--borde:#2c2c3a;--texto:#ececf4;--suave:#9a9ab2;--rojo:#e8294a;--verde:#2ecc71;--ambar:#f1c40f}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--texto);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:#ff7d95;text-decoration:none}a:hover{text-decoration:underline}
a,p,td,.suave{overflow-wrap:anywhere}
h1{font-size:1.6rem;margin:.2rem 0 1rem}h2{font-size:1.2rem;margin:0 0 .6rem}p{margin:.3rem 0 .8rem}
.barra{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;background:var(--panel);border-bottom:1px solid var(--borde)}
.marca{font-weight:700;font-size:1.1rem;color:var(--texto)}
.usuario{display:flex;align-items:center;gap:10px;color:var(--suave)}.usuario form{margin:0}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--panel2);vertical-align:middle}
.contenedor{max-width:980px;margin:0 auto;padding:18px}
.nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.nav a{padding:7px 13px;border:1px solid var(--borde);border-radius:999px;color:var(--suave);background:var(--panel)}
.nav a.activa{background:var(--rojo);border-color:var(--rojo);color:#fff;text-decoration:none}
.cabecera{display:flex;align-items:center;gap:12px;margin-bottom:12px}.cabecera img,.icono{width:48px;height:48px;border-radius:12px;background:var(--panel2)}
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.tarjeta{background:var(--panel);border:1px solid var(--borde);border-radius:14px;padding:16px;margin-bottom:14px}.tarjetas .tarjeta{margin:0}
.suave{color:var(--suave);font-size:.92rem}
label{display:block;margin:.7rem 0 .25rem;font-weight:600}
input[type=text],input[type=number],input[type=url],select,textarea{width:100%;padding:10px 12px;background:var(--panel2);color:var(--texto);border:1px solid var(--borde);border-radius:10px;font:inherit}
textarea{min-height:110px;resize:vertical}input[type=color]{width:64px;height:40px;padding:2px;background:var(--panel2);border:1px solid var(--borde);border-radius:10px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--rojo);outline-offset:1px}
.fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 14px;align-items:start}
.campo{min-width:0}
.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:.6rem}.acciones form{margin:0}.acciones .boton{margin:0}
.casilla{display:flex;align-items:center;gap:10px;margin:.5rem 0;font-weight:400}.casilla input{width:20px;height:20px;accent-color:var(--rojo)}
.lista-casillas{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2px 14px;max-height:240px;overflow:auto;padding:6px 2px}
.boton{display:inline-block;margin-top:.8rem;padding:9px 16px;background:var(--rojo);color:#fff;border:0;border-radius:10px;font:inherit;font-weight:600;cursor:pointer}
.boton:hover{filter:brightness(1.1);text-decoration:none}.boton.sec{background:var(--panel2);border:1px solid var(--borde);color:var(--texto)}.boton.chico{margin:0;padding:5px 11px;font-size:.9rem}
.boton.peligro{background:#7a1d2e}.boton.grande{padding:12px 22px;font-size:1.05rem}
.aviso{padding:11px 14px;border-radius:10px;margin-bottom:14px;border:1px solid}.aviso.ok{background:#12301f;border-color:#1f6b3f}.aviso.error{background:#361219;border-color:#8c2237}.aviso.info{background:#2c2812;border-color:#7a6a1d}
.tabla{overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--borde);vertical-align:top}th{color:var(--suave);font-weight:600;font-size:.88rem}
td form{margin:0}.etiqueta{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.8rem;background:var(--panel2);border:1px solid var(--borde)}
.etiqueta.on{background:#12301f;border-color:#1f6b3f;color:#7be0a1}.etiqueta.off{color:var(--suave)}
.centro{text-align:center;padding:40px 10px}.centro .grande-icono{font-size:3.4rem}
.puesto{width:46px;color:var(--suave)}.nombre-celda{display:flex;align-items:center;gap:10px}
.pie{margin:30px 0 10px;text-align:center;color:var(--suave);font-size:.85rem}
@media(max-width:600px){
.contenedor{padding:12px}.barra{padding:8px 12px}h1{font-size:1.35rem}
.tabla table,.tabla tbody,.tabla tr,.tabla td{display:block;width:100%}.tabla thead{display:none}
.tabla tr{border:1px solid var(--borde);border-radius:12px;padding:6px 12px;margin-bottom:10px;background:var(--panel2)}
.tabla td{display:flex;justify-content:space-between;align-items:center;gap:14px;border:0;padding:5px 0;text-align:right}
.tabla td::before{content:attr(data-et);color:var(--suave);font-size:.85rem;text-align:left;flex:none}.tabla td[data-et=""]::before{display:none}.tabla td[data-et=""]{justify-content:flex-end}
.puesto{width:auto}}
