/* TerriPlan · Tablero — misma familia visual que TerriPlan */
:root{
  --pizarra:#44546A; --pizarra-2:#3a4859; --amarillo:#F5C21B; --amarillo-2:#e3b10f;
  --tinta:#1d2530; --gris:#5b6675; --gris-2:#9AA3AD; --borde:#dde2e7; --fondo:#eef0f3; --blanco:#fff;
  --rojo:#C62828; --verde:#2E7D32; --azul:#1E88E5;
  --radio:14px; --sombra:0 1px 2px rgba(29,37,48,.06),0 4px 14px rgba(29,37,48,.06);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Roboto,"Segoe UI",Arial,sans-serif;color:var(--tinta);background:var(--fondo);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--amarillo);outline-offset:2px}

/* Barra superior */
.top{position:sticky;top:0;z-index:20;background:var(--pizarra);color:#fff}
.top-in{max-width:1180px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px}
.marca{display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff;white-space:nowrap}
.marca img{width:34px;height:34px;border-radius:9px;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.marca b{font-weight:800;font-size:18px;letter-spacing:-.2px}
.marca b i{font-style:normal;color:var(--amarillo)}
.marca em{font-style:normal;font-weight:500;color:#C9D3DF;font-size:15px}
.top .esp{flex:1}
.top select{background:var(--pizarra-2);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:7px 10px;max-width:46vw}
.top .usr{display:flex;align-items:center;gap:8px;font-size:14px;color:#dfe5ec}
.top .usr button{background:transparent;border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:10px;padding:6px 10px;cursor:pointer}
.top .usr button:hover{background:rgba(255,255,255,.08)}
@media (max-width:640px){.marca em,.top .usr .nom{display:none}}

/* Contenido */
.main{max-width:1180px;margin:0 auto;padding:22px 16px 60px}
.titulo{font-size:24px;font-weight:800;margin:4px 0 4px;letter-spacing:-.3px}
.sub{color:var(--gris);margin:0 0 20px}
.migas{font-size:14px;color:var(--gris);margin-bottom:6px}
.migas a{text-decoration:none;color:var(--pizarra);font-weight:600}
.card{background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra);padding:18px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g2,.g3{grid-template-columns:1fr}}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:11px 16px;font-weight:700;cursor:pointer;text-decoration:none;background:var(--blanco);color:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--borde);transition:background .15s,transform .05s}
.btn:hover{background:#f6f7f9}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px;flex:none}
.btn-pri{background:var(--amarillo);box-shadow:none;color:#1d2530}
.btn-pri:hover{background:var(--amarillo-2)}
.btn-osc{background:var(--pizarra);color:#fff;box-shadow:none}
.btn-osc:hover{background:var(--pizarra-2)}
.btn-rojo{color:var(--rojo);box-shadow:inset 0 0 0 1.5px #f1c9c9}
.btn-rojo:hover{background:#fdf1f1}
.btn-chico{padding:7px 11px;font-size:14px;border-radius:10px}
.btn-grande{padding:16px 22px;font-size:18px;border-radius:14px}
.btn[disabled]{opacity:.55;cursor:default}

/* Formularios */
.campo{display:block;margin-bottom:14px}
.campo>span{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.campo input,.campo select,.input{width:100%;border:1.5px solid var(--borde);border-radius:11px;padding:11px 12px;background:#fff;transition:border-color .15s}
.campo input:focus,.campo select:focus,.input:focus{outline:none;border-color:var(--pizarra)}
.campo .ayuda{font-size:13px;color:var(--gris);margin-top:5px}
.err{color:var(--rojo);font-size:13.5px;margin-top:5px}
.check{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--gris)}
.trampa{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* Avisos */
.aviso{border-radius:12px;padding:12px 14px;margin-bottom:16px;font-weight:500}
.aviso-ok{background:#e8f5e9;color:#1b5e20}
.aviso-err{background:#fdecea;color:#8e1c1c}
.aviso-info{background:#fff7d6;color:#5c4700}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;border-radius:999px;padding:3px 9px;background:#eef1f4;color:var(--gris)}
.chip-am{background:#fff3c4;color:#6b5200}
.chip-verde{background:#e8f5e9;color:#1b5e20}
.chip-rojo{background:#fdecea;color:#8e1c1c}
.badge{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:999px;background:var(--rojo);color:#fff;font-size:12px;font-weight:800;padding:0 6px}

/* Pantallas de acceso */
.acceso{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:linear-gradient(160deg,#44546A 0%,#3a4859 55%,#2f3b49 100%)}
.acceso .caja{width:100%;max-width:420px}
.acceso .logo{display:flex;flex-direction:column;align-items:center;color:#fff;margin-bottom:18px;text-align:center}
.acceso .logo img{width:72px;height:72px;border-radius:18px;box-shadow:0 0 0 1px rgba(255,255,255,.25),0 10px 30px rgba(0,0,0,.25)}
.acceso .logo b{font-size:28px;font-weight:800;margin-top:12px;letter-spacing:-.4px}
.acceso .logo b i{font-style:normal;color:var(--amarillo)}
.acceso .logo small{color:#C9D3DF;font-size:15px}
.acceso .card{padding:24px}
.acceso h1{font-size:20px;margin:0 0 4px}
.acceso p.sub{margin-bottom:18px}
.acceso .pie{text-align:center;margin-top:16px;font-size:14px;color:#dfe5ec}
.acceso .pie a{color:var(--amarillo);font-weight:700;text-decoration:none}
.enlace{color:var(--pizarra);font-weight:700;text-decoration:none;font-size:14px}
.enlace:hover{text-decoration:underline}

/* Inicio */
.hero{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--pizarra);color:#fff;border-radius:18px;padding:22px 24px;margin-bottom:22px;box-shadow:var(--sombra)}
.hero h1{margin:0;font-size:26px;letter-spacing:-.3px}
.hero p{margin:4px 0 0;color:#C9D3DF}
.hero .acciones{display:flex;gap:10px;flex-wrap:wrap}
.tab-card{display:flex;flex-direction:column;gap:12px}
.tab-card .cab{display:flex;align-items:center;gap:10px}
.tab-card .cab .ico{width:38px;height:38px;border-radius:11px;background:#fff3c4;display:grid;place-items:center;flex:none}
.tab-card .cab .ico svg{width:20px;height:20px;color:#6b5200}
.tab-card h3{margin:0;font-size:17px}
.tab-card .meta{font-size:13px;color:var(--gris)}
.miniaturas{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.miniaturas div{aspect-ratio:3/4;border-radius:8px;background:#f1f3f5 center/cover no-repeat;box-shadow:inset 0 0 0 1px var(--borde)}
.miniaturas div{position:relative}
.miniaturas .mas{position:absolute;inset:0;display:grid;place-items:center;background:rgba(29,37,48,.6);color:#fff;font-weight:800;font-size:18px;border-radius:8px}
.miniaturas div.vacio{background:repeating-linear-gradient(45deg,#f4f5f7,#f4f5f7 6px,#eceff2 6px,#eceff2 12px)}
.tab-card .pie{display:flex;gap:8px;margin-top:auto}

/* Editor */
.pestanas{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:18px;scrollbar-width:thin}
.pestanas a{flex:none;text-decoration:none;padding:9px 14px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--borde);font-weight:700;font-size:14px;color:var(--gris)}
.pestanas a.on{background:var(--pizarra);color:#fff;box-shadow:none}
.lugares{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.lugar{background:#fff;border-radius:var(--radio);box-shadow:var(--sombra);display:flex;flex-direction:column;overflow:hidden}
.lugar .cab{padding:12px 14px 0;display:flex;justify-content:space-between;align-items:center;gap:8px}
.lugar .cab b{font-size:15px}
.lugar .zona{position:relative;margin:12px 14px 0;aspect-ratio:3/4;border-radius:12px;background:#f4f5f7;display:grid;place-items:center;overflow:hidden;cursor:pointer;border:2px dashed transparent;transition:border-color .15s,background .15s}
.lugar .zona img{width:100%;height:100%;object-fit:contain;background:#fff}
.lugar .zona.vacia{border-color:#cfd5dc}
.lugar .zona.arrastrando{border-color:var(--amarillo);background:#fffbea}
.lugar .zona .vacio{text-align:center;color:var(--gris);padding:16px;font-size:14px}
.lugar .zona .vacio svg{width:34px;height:34px;color:var(--gris-2);display:block;margin:0 auto 8px}
.lugar .zona .carga{position:absolute;inset:0;background:rgba(255,255,255,.85);display:none;place-items:center;font-weight:700;color:var(--pizarra)}
.lugar .zona.cargando .carga{display:grid}
.lugar .cab .num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--pizarra);color:#fff;font-size:14px}
.lugar .mover{display:flex;gap:4px}
.lugar .mover .btn{padding:5px 7px}
.lugar.agregar .zona{margin-bottom:0}
.lugar.agregar .vacio b{font-size:17px;color:var(--tinta)}
.pestanas .cuenta{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:rgba(0,0,0,.08);font-size:12px;margin-left:4px}
.pestanas a.on .cuenta{background:rgba(255,255,255,.2)}
.lugar .cuerpo{padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px}
.lugar .cuerpo .fila{display:flex;gap:8px}
.lugar .cuerpo .fila .btn{flex:1}
.lugar .fecha{font-size:12.5px;color:var(--gris)}
.spinner{width:26px;height:26px;border-radius:50%;border:3px solid #dde2e7;border-top-color:var(--pizarra);animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* Diálogo */
dialog{border:0;border-radius:18px;padding:0;max-width:min(560px,94vw);box-shadow:0 20px 60px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(29,37,48,.55)}
dialog .d-in{padding:20px}
dialog h2{margin:0 0 6px;font-size:19px}
dialog .paginas{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;max-height:46vh;overflow:auto;margin:14px 0}
dialog .paginas button{border:2px solid var(--borde);border-radius:10px;background:#fff;padding:4px;cursor:pointer}
dialog .paginas button.on{border-color:var(--amarillo);box-shadow:0 0 0 3px #fff3c4}
dialog .paginas canvas{width:100%;display:block;border-radius:6px}
dialog .paginas small{display:block;font-size:12px;color:var(--gris);margin-top:3px}
dialog .d-pie{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* Tablas de usuarios */
.lista{display:flex;flex-direction:column}
.lista .it{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #eef0f3;flex-wrap:wrap}
.lista .it:first-child{border-top:0}
.lista .av{width:38px;height:38px;border-radius:50%;background:#e6eaef;color:var(--pizarra);display:grid;place-items:center;font-weight:800;flex:none}
.lista .dat{flex:1;min-width:180px}
.lista .dat b{display:block}
.lista .dat small{color:var(--gris)}
.lista form{display:inline}
.lista .acc{display:flex;gap:6px;flex-wrap:wrap}
.seccion{font-size:13px;font-weight:800;color:var(--gris);text-transform:uppercase;letter-spacing:.6px;margin:26px 0 10px}
.vacia-msg{color:var(--gris);text-align:center;padding:14px}