/* Atelier Design Alfonso Marina — Brand Book 2023 */
:root{
  --negro:#000000; --chalk:#4a4b4f; --humo:#8a817f; --chalk-claro:#a2a09d; --hueso:#c4b8ac;
  --linea:#e4e2e0; --fondo:#ffffff; --tenue:#f7f6f5;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0;height:100%}
body{background:var(--fondo);color:var(--negro);font-family:Roboto,Helvetica,Arial,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit;font-weight:300}

/* ---------- barra ---------- */
#barra{display:flex;align-items:center;justify-content:space-between;padding:0 22px;height:56px;border-bottom:1px solid var(--linea);position:sticky;top:0;background:#fff;z-index:20}
.barra-am{font-family:Baskervville,Georgia,serif;font-size:21px;letter-spacing:.05em}
.barra-titulo{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--humo);margin-left:14px}
.barra-der{display:flex;align-items:center;gap:18px;font-size:12px;color:var(--chalk)}
.plano{background:transparent;border:1px solid var(--linea);padding:8px 13px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--chalk);white-space:nowrap}
.plano:hover{border-color:var(--negro);color:var(--negro)}
.plano.ancho{width:100%;margin-top:7px}
.plano.mini{padding:6px 9px;letter-spacing:.06em}
.plano.peligro:hover{border-color:#8b2e2e;color:#8b2e2e}

/* ---------- tablero ---------- */
#tablero{padding:44px 40px 80px;max-width:1180px;margin:0 auto}
.tablero-cabeza{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:26px}
.tablero-cabeza h2{font-family:Baskervville,Georgia,serif;font-style:italic;font-weight:400;font-size:27px;margin:0}
#tablero.arranque .tablero-cabeza h2{font-size:34px}
#nueva{background:var(--negro);color:#fff;border:0;padding:12px 22px;font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px}
#tablero.arranque .rejilla{display:none}
.tarjeta{border:1px solid var(--linea);background:#fff;cursor:pointer;display:flex;flex-direction:column}
.tarjeta:hover{border-color:var(--negro)}
.tarjeta-lienzo{aspect-ratio:16/9;background:var(--tenue);border-bottom:1px solid var(--linea);display:flex;align-items:center;justify-content:center;font-family:Baskervville,Georgia,serif;font-size:22px;color:var(--chalk-claro)}
.tarjeta-pie{padding:13px 14px}
.tarjeta-nombre{font-size:14px;margin-bottom:5px}
.tarjeta-dato{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--chalk-claro)}
.tarjeta-borrar{border:0;background:transparent;color:var(--chalk-claro);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:0 14px 12px;text-align:left}
.tarjeta-borrar:hover{color:#8b2e2e}

#arranque{margin-top:34px}
#tablero:not(.arranque):not(.eligiendo) #arranque{display:none}
.inicio-texto{font-size:14px;line-height:1.85;color:var(--chalk);max-width:660px;margin:0 0 34px}
.inicio-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:20px}
.inicio-carta{display:block;width:100%;text-align:left;border:1px solid var(--linea);background:#fff;padding:0}
.inicio-carta:hover{border-color:var(--negro)}
.inicio-lienzo{display:flex;align-items:center;justify-content:center;height:130px;background:var(--tenue);border-bottom:1px solid var(--linea)}
.inicio-hoja{display:block;max-height:96px;max-width:150px;height:96px;background:#fff;border:1px solid var(--linea)}
.inicio-nombre{display:block;padding:11px 13px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--chalk)}
.inicio-nombre em{display:block;font-style:normal;letter-spacing:.1em;color:var(--chalk-claro);margin-top:4px}
.inicio-carta:hover .inicio-nombre{color:var(--negro)}

/* ---------- editor ---------- */
#editor{display:grid;grid-template-columns:186px 1fr 276px;height:calc(100vh - 56px)}
.rail{border-right:1px solid var(--linea);display:flex;flex-direction:column;min-height:0}
.rail-cabeza,.rail-pie{padding:12px}
.tiras{flex:1;overflow-y:auto;padding:0 12px}
.tira-pag{border:1px solid var(--linea);margin-bottom:9px;position:relative;cursor:pointer;background:#fff;overflow:hidden}
.tira-pag.activa{border-color:var(--negro);box-shadow:0 0 0 1px var(--negro)}
.tira-pag .mini{transform-origin:top left;pointer-events:none;position:absolute;left:0;top:0}
.num-pag{position:absolute;right:5px;bottom:4px;font-size:9px;color:var(--chalk-claro);background:rgba(255,255,255,.9);padding:0 3px}

.lienzo-zona{display:flex;flex-direction:column;min-width:0;background:var(--tenue)}
.lienzo-barra{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;background:#fff;border-bottom:1px solid var(--linea);gap:14px;flex-wrap:wrap}
.titulo-obra{border:0;font-family:Baskervville,Georgia,serif;font-style:italic;font-size:19px;padding:4px 0;min-width:120px;flex:1;background:transparent}
.titulo-obra:focus{outline:0;border-bottom:1px solid var(--linea)}
.herramientas,.lienzo-acciones{display:flex;align-items:center;gap:7px}
.zoom{display:flex;gap:3px;margin-right:6px}
.estado{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--chalk-claro);min-width:66px}
.lienzo-marco{flex:1;display:flex;align-items:center;justify-content:center;padding:32px;min-height:0;overflow:auto}
#papel{position:relative;transform-origin:center center;flex:none}
.hoja{position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;box-shadow:0 1px 20px rgba(0,0,0,.09);background:#fff}
.capa{position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;overflow:visible}

/* elementos */
.el{position:absolute;white-space:pre-wrap;word-break:break-word}
.el-foto{background-color:#f2f1f0}
.el-texto{cursor:default}
.hoja .el{outline:1px solid transparent}
.hoja .el:hover{outline-color:rgba(0,0,0,.18)}
.hoja .el.sel{outline-color:transparent}
.hoja .el.editando{outline:1px solid var(--negro);cursor:text}
.marco{position:absolute;outline:1px solid #000;pointer-events:none}
.capa .tira{pointer-events:auto}
.tira{position:absolute;width:9px;height:9px;background:#fff;border:1px solid #000;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer}
.t-n,.t-s{cursor:ns-resize}.t-e,.t-w{cursor:ew-resize}
.t-nw,.t-se{cursor:nwse-resize}.t-ne,.t-sw{cursor:nesw-resize}

/* ---------- inspector ---------- */
.inspector{border-left:1px solid var(--linea);overflow-y:auto;padding:16px 16px 70px}
.insp-bloque{margin-bottom:24px}
.insp-bloque h3{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--humo);margin:0 0 11px;font-weight:400}
.campo{margin-bottom:12px}
.campo label{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--humo);margin-bottom:5px;min-height:11px}
.campo input,.campo textarea,.campo select{width:100%;border:1px solid var(--linea);padding:7px;font-size:13px;background:#fff;color:var(--negro)}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:0;border-color:var(--negro)}
.campo textarea{min-height:76px;resize:vertical;line-height:1.5}
.par,.par2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.par2>.campo{margin-bottom:12px}
.grupo{display:flex;gap:6px}
.grupo.lleno{margin-bottom:8px}
.grupo button{flex:1;border:1px solid var(--linea);background:#fff;padding:7px 4px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--chalk)}
.grupo button.on,.grupo button:hover{border-color:var(--negro);color:var(--negro)}
.colores{display:flex;gap:6px}
.colores button{width:24px;height:24px;border:1px solid var(--linea);padding:0}
.colores button.on{outline:1px solid var(--negro);outline-offset:2px}
.subir{border:1px dashed var(--linea);padding:12px;text-align:center;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--chalk-claro);cursor:pointer}
.subir:hover{border-color:var(--negro);color:var(--negro)}
.subir img{display:block;width:100%;margin-bottom:8px}
.arranques{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.arranques button{border:1px solid var(--linea);background:#fff;padding:8px 5px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--chalk)}
.arranques button:hover{border-color:var(--negro);color:var(--negro)}
.pista{font-size:11px;line-height:1.7;color:var(--chalk-claro)}

/* ---------- impresión ---------- */
.impresion{display:none}
.impresion.visible{display:block;position:fixed;left:-20000px;top:0}
@media print{
  html,body{background:#fff;height:auto}
  #barra,#tablero,#editor{display:none!important}
  .impresion{display:block!important;position:static!important;left:auto!important}
  .impresion .hoja-imp{box-shadow:none;margin:0}
}

@media(max-width:1180px){#editor{grid-template-columns:150px 1fr 244px}}