/* Diseñador de Sellos - Artesello */

@font-face { font-family:'Roboto'; src:url('../fonts/Roboto-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Roboto'; src:url('../fonts/Roboto-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Oswald'; src:url('../fonts/Oswald-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Oswald'; src:url('../fonts/Oswald-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'PlayfairDisplay'; src:url('../fonts/PlayfairDisplay-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'PlayfairDisplay'; src:url('../fonts/PlayfairDisplay-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'DancingScript'; src:url('../fonts/DancingScript-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'DancingScript'; src:url('../fonts/DancingScript-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'OpenSans'; src:url('../fonts/OpenSans-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'OpenSans'; src:url('../fonts/OpenSans-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root{
  --azul: #1d4e6b;
  --azul-osc: #163c53;
  --gris-borde: #dde3e7;
  --gris-fondo: #f6f8f9;
  --texto: #222;
  --rojo: #b3352c;
  --verde: #2e7d4f;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'OpenSans', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--texto);
  background:var(--gris-fondo);
}

a{ color:var(--azul); }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--azul); color:#fff; padding:10px 18px;
  flex-wrap:wrap; gap:10px;
}
.topbar h1{ font-size:1.05rem; margin:0; font-weight:700; }
.topbar .titulo-input{
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3);
  border-radius:6px; color:#fff; padding:6px 10px; font-size:.9rem; min-width:180px;
}
.topbar .titulo-input::placeholder{ color:rgba(255,255,255,.7); }
.topbar-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.btn{
  border:none; border-radius:6px; padding:8px 14px; font-size:.85rem;
  cursor:pointer; font-weight:600; display:inline-flex; align-items:center; gap:6px;
}
.btn-primary{ background:#fff; color:var(--azul); }
.btn-primary:hover{ background:#eef4f7; }
.btn-outline{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.5); }
.btn-outline:hover{ background:rgba(255,255,255,.12); }
.btn-accent{ background:var(--verde); color:#fff; }
.btn-accent:hover{ filter:brightness(1.08); }
.btn-danger{ background:var(--rojo); color:#fff; }
.btn-block{ width:100%; justify-content:center; }
.btn-sm{ padding:5px 9px; font-size:.78rem; }

.layout{
  display:flex; min-height:calc(100vh - 54px);
}

.sidebar{
  width:300px; flex:0 0 300px; background:#fff; border-right:1px solid var(--gris-borde);
  padding:14px; overflow-y:auto; max-height:calc(100vh - 54px);
}
.sidebar h2{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:#667;
  margin:18px 0 8px; border-bottom:1px solid var(--gris-borde); padding-bottom:4px;
}
.sidebar h2:first-child{ margin-top:0; }

.campo{ margin-bottom:10px; }
.campo label{ display:block; font-size:.78rem; color:#555; margin-bottom:3px; }
.campo select, .campo input[type=text], .campo input[type=number], .campo textarea{
  width:100%; padding:6px 8px; border:1px solid var(--gris-borde); border-radius:6px; font-size:.85rem;
  font-family:inherit;
}
.campo textarea{ resize:vertical; min-height:50px; }
.fila-2{ display:flex; gap:8px; }
.fila-2 .campo{ flex:1; }

.grupo-botones{ display:flex; flex-direction:column; gap:6px; }

.plantillas-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.plantilla-card{
  border:1px solid var(--gris-borde); border-radius:8px; padding:6px; cursor:pointer; text-align:center; background:#fff;
}
.plantilla-card:hover{ border-color:var(--azul); }
.plantilla-card img{ width:100%; height:60px; object-fit:contain; background:#fafbfc; }
.plantilla-card span{ display:block; font-size:.68rem; margin-top:4px; color:#555; }

.lienzo-wrap{
  flex:1; display:flex; align-items:flex-start; justify-content:center;
  padding:26px; overflow:auto;
}
.lienzo-caja{
  background:#fff; border:1px solid var(--gris-borde); border-radius:10px; padding:20px;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.lienzo-medidas{ text-align:center; font-size:.78rem; color:#778; margin-top:8px; }

.panel-props{
  width:300px; flex:0 0 300px; background:#fff; border-left:1px solid var(--gris-borde);
  padding:14px; overflow-y:auto; max-height:calc(100vh - 54px);
}
.panel-props h2{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:#667;
  margin:0 0 10px; border-bottom:1px solid var(--gris-borde); padding-bottom:4px;
}
.panel-vacio{ color:#99a; font-size:.85rem; padding:10px 0; }

.slider-fila{ display:flex; align-items:center; gap:8px; }
.slider-fila input[type=range]{ flex:1; }
.slider-fila span{ font-size:.75rem; color:#667; width:38px; text-align:right; }

.toggle-fila{ display:flex; gap:6px; }
.toggle-fila button{
  flex:1; padding:6px 4px; font-size:.78rem; border:1px solid var(--gris-borde); background:#fff;
  border-radius:6px; cursor:pointer;
}
.toggle-fila button.activo{ background:var(--azul); color:#fff; border-color:var(--azul); }

.upload-zona{
  border:2px dashed var(--gris-borde); border-radius:8px; padding:16px; text-align:center;
  font-size:.8rem; color:#778; cursor:pointer;
}
.upload-zona:hover{ border-color:var(--azul); }

.aviso{
  font-size:.72rem; color:#889; background:var(--gris-fondo); border-radius:6px; padding:8px; margin-top:8px;
}

.modal-fondo{
  position:fixed; inset:0; background:rgba(20,30,40,.55); display:flex; align-items:center; justify-content:center;
  z-index:50;
}
.modal-caja{
  background:#fff; border-radius:10px; padding:22px; width:420px; max-width:92vw; max-height:88vh; overflow-y:auto;
}
.modal-caja h3{ margin-top:0; }
.modal-cerrar{ float:right; cursor:pointer; font-size:1.1rem; color:#889; }

.codigo-caja{
  background:var(--gris-fondo); border-radius:6px; padding:10px; font-family:monospace; font-size:1rem;
  text-align:center; margin:10px 0; letter-spacing:.05em;
}

footer.mini{ text-align:center; font-size:.72rem; color:#99a; padding:10px; }

/* --- admin --- */
.admin-wrap{ max-width:1100px; margin:0 auto; padding:20px; }
.admin-tabla{ width:100%; border-collapse:collapse; font-size:.85rem; background:#fff; }
.admin-tabla th, .admin-tabla td{ border-bottom:1px solid var(--gris-borde); padding:8px 10px; text-align:left; vertical-align:top; }
.admin-tabla th{ background:var(--gris-fondo); }
.badge{ display:inline-block; padding:2px 8px; border-radius:20px; font-size:.72rem; font-weight:700; }
.badge-pendiente{ background:#fdecea; color:var(--rojo); }
.badge-en_proceso{ background:#fff6e0; color:#8a6d00; }
.badge-completado{ background:#e7f6ec; color:var(--verde); }
.badge-cancelado{ background:#eee; color:#778; }
.login-box{
  max-width:340px; margin:80px auto; background:#fff; border:1px solid var(--gris-borde); border-radius:10px; padding:26px;
}
.login-box h1{ font-size:1.1rem; text-align:center; }

@media (max-width: 900px){
  .layout{ flex-direction:column; }
  .sidebar, .panel-props{ width:100%; flex:none; max-height:none; }
}