/* Panel Castillo Lynch — interfaz de trabajo.
   Mismo mundo cromático que el sitio, pero sin gestos: acá se trabaja. */

@font-face{ font-family:"Space Grotesk"; font-style:normal; font-weight:300 700; font-display:swap;
  src:url("../../assets/fonts/space-grotesk-latin.woff2") format("woff2"); }
@font-face{ font-family:"Darker Grotesque"; font-style:normal; font-weight:300 900; font-display:swap;
  src:url("../../assets/fonts/darker-grotesque-latin.woff2") format("woff2"); }
@font-face{ font-family:"Space Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../../assets/fonts/space-mono-400-latin.woff2") format("woff2"); }

:root{
  --noche:#131010; --carbon:#1B1614; --alto:#241D1A; --arena:#F0E7DD;
  --tenue:#A2908A; --rojo:#DE2215; --rojo-claro:#F0392B;
  --linea:rgba(240,231,221,.13); --linea-fuerte:rgba(240,231,221,.28);
  --display:"Darker Grotesque",system-ui,sans-serif;
  --texto:"Space Grotesk",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --muesca:9px;
  --chaflan:polygon(0 0,calc(100% - var(--muesca)) 0,100% var(--muesca),100% 100%,var(--muesca) 100%,0 calc(100% - var(--muesca)));
}

*,*::before,*::after{ box-sizing:border-box; }
body{ margin:0; background:var(--noche); color:var(--arena); font-family:var(--texto); font-size:15px; line-height:1.55; }
a{ color:inherit; }
img{ max-width:100%; display:block; }

h1{ font-family:var(--display); font-weight:800; font-size:2.4rem; letter-spacing:-.02em; line-height:1; margin:0 0 .4rem; }
h2{ font-family:var(--display); font-weight:800; font-size:1.6rem; letter-spacing:-.015em; margin:0 0 1rem; }
h3{ font-family:var(--texto); font-weight:600; font-size:1rem; margin:0 0 .75rem; }
.bajada{ color:var(--tenue); margin:0 0 2rem; max-width:65ch; }
code{ font-family:var(--mono); font-size:.85em; background:rgba(240,231,221,.08); padding:.1em .35em; }

/* Tope --------------------------------------------------------------- */
.tope{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
  padding:.85rem clamp(1rem,3vw,2rem);
  background:var(--carbon); border-bottom:1px solid var(--linea);
}
.tope__marca{ display:flex; align-items:center; gap:.55rem; font-family:var(--display); font-weight:800; font-size:1.2rem; text-decoration:none; }
.tope__marca img{ width:22px; }
.tope__menu{ display:flex; gap:.25rem; margin-right:auto; flex-wrap:wrap; }
.tope__menu a{ padding:.4rem .8rem; font-size:.9rem; color:var(--tenue); text-decoration:none; clip-path:var(--chaflan); }
.tope__menu a:hover{ color:var(--arena); background:rgba(240,231,221,.08); }
.tope__usuario{ display:flex; gap:1rem; align-items:center; font-size:.85rem; }
.tope__usuario a{ color:var(--tenue); text-decoration:none; }
.tope__usuario a:hover{ color:var(--rojo-claro); }
.tope__usuario .salir{ border:1px solid var(--linea); padding:.35rem .9rem; clip-path:var(--chaflan); }

.lienzo{ max-width:1100px; margin-inline:auto; padding:clamp(1.5rem,4vw,3rem) clamp(1rem,3vw,2rem) 6rem; }
.migas{ font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--tenue); margin:0 0 1.5rem; }
.migas a{ color:var(--tenue); }
.encabezado{ display:flex; justify-content:space-between; align-items:flex-start; gap:1.5rem; flex-wrap:wrap; }

/* Avisos --------------------------------------------------------------- */
.aviso{ padding:.85rem 1.1rem; margin:0 0 1.75rem; clip-path:var(--chaflan); font-size:.92rem; }
.aviso--ok{ background:rgba(240,231,221,.1); }
.aviso--error{ background:rgba(222,34,21,.18); color:#FFC9C2; }

/* Árbol ---------------------------------------------------------------- */
.arbol{ list-style:none; margin:0; padding:0; }
.arbol--raiz > .rama{ margin-bottom:.5rem; }
.rama .arbol{ margin-left:1.5rem; margin-top:.5rem; border-left:1px solid var(--linea); padding-left:1rem; }
.rama__fila{
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.9rem 1.1rem; background:rgba(240,231,221,.035); clip-path:var(--chaflan);
}
.rama__fila:hover{ background:rgba(222,34,21,.1); }
.rama__titulo{ font-family:var(--display); font-weight:800; font-size:1.3rem; text-decoration:none; }
.rama__ruta{ font-family:var(--mono); font-size:.7rem; color:var(--tenue); margin-left:.6rem; }
.rama__datos{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }

.pastilla{ font-family:var(--mono); font-size:.65rem; letter-spacing:.06em; padding:.2rem .55rem; border:1px solid var(--linea); color:var(--tenue); }
.pastilla--si{ color:#9BD6A8; border-color:rgba(155,214,168,.4); }
.pastilla--no{ color:var(--tenue); }
.pastilla--tipo{ color:var(--rojo-claro); border-color:rgba(240,57,43,.4); }

.mini-boton{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.06em;
  padding:.3rem .75rem; border:1px solid var(--linea); color:var(--tenue);
  text-decoration:none; background:transparent; cursor:pointer;
}
.mini-boton:hover, .mini-boton.activo{ border-color:var(--rojo); color:var(--rojo-claro); }
.mini-boton--peligro:hover{ border-color:var(--rojo); color:#fff; background:var(--rojo); }

/* Atajos --------------------------------------------------------------- */
.atajos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.75rem; margin-top:3rem; }
.atajo{ text-decoration:none; display:block; }
.atajo b{ display:block; font-family:var(--display); font-weight:800; font-size:1.3rem; }
.atajo span{ color:var(--tenue); font-size:.85rem; }
.atajo:hover{ background:rgba(222,34,21,.1); }

/* Tarjetas y formularios ------------------------------------------------ */
.tarjeta{ background:var(--carbon); padding:1.5rem; margin-bottom:1.25rem; clip-path:var(--chaflan); }
.tarjeta--chica{ padding:1.1rem 1.25rem; }
.tarjeta--peligro{ border-left:2px solid var(--rojo); }
.tarjeta summary{ cursor:pointer; font-family:var(--display); font-weight:800; font-size:1.3rem; }

.formulario{ display:block; }
.rejilla-campos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem 1.25rem; }
.campo{ margin-bottom:1.1rem; }
.campo label{ display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.07em; color:var(--tenue); margin-bottom:.4rem; }
.pista-inline{ text-transform:none; letter-spacing:0; opacity:.7; }
.campo input, .campo select, .campo textarea,
.formulario--apretado input, .formulario--apretado select{
  width:100%; font:inherit; font-size:.95rem; color:var(--arena);
  background:var(--alto); border:1px solid transparent; padding:.65rem .8rem;
}
.campo input:focus, .campo select:focus, .campo textarea:focus{ outline:none; border-color:var(--rojo); }
.campo textarea{ resize:vertical; min-height:4.5rem; }
.campo input[readonly]{ opacity:.55; }
.mono{ font-family:var(--mono); font-size:.85rem; }
.pista{ font-size:.8rem; color:var(--tenue); margin:.45rem 0 0; }
.casilla{ display:flex; align-items:center; gap:.6rem; margin:.5rem 0 1rem; font-size:.95rem; cursor:pointer; }
.casilla input{ width:auto; }

.boton{
  display:inline-block; font-family:var(--mono); font-size:.78rem; font-weight:700; letter-spacing:.07em;
  padding:.8rem 1.6rem; background:var(--arena); color:var(--noche);
  border:0; cursor:pointer; text-decoration:none; clip-path:var(--chaflan);
}
.boton:hover{ background:var(--rojo); color:#fff; }
.boton--linea{ background:transparent; color:var(--arena); box-shadow:inset 0 0 0 1px var(--linea-fuerte); }
.boton--linea:hover{ background:rgba(240,231,221,.08); color:var(--arena); }
.boton--peligro{ background:var(--rojo); color:#fff; }

.barra-guardar{
  position:sticky; bottom:0; z-index:30;
  display:flex; gap:.75rem; align-items:center;
  padding:1rem 0; margin-top:1.5rem;
  background:linear-gradient(to top, var(--noche) 70%, transparent);
}

/* Bloques de contenido -------------------------------------------------- */
.titulo-lista{ margin-top:2.5rem; }
.bloque{ background:var(--carbon); padding:1.1rem 1.25rem; margin-bottom:.75rem; clip-path:var(--chaflan); }
.bloque__cabeza{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:.75rem; }
.bloque__clave{ margin-left:.5rem; color:var(--tenue); }
.bloque__medio{ display:grid; grid-template-columns:auto 1fr; gap:1.25rem; align-items:start; }
.bloque .campo{ margin-bottom:0; }

.mini{ max-width:240px; height:auto; }
.sin-foto{ display:inline-block; padding:1.5rem; background:var(--alto); color:var(--tenue); font-size:.8rem; }
.selector-medio{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:center; }

/* Listados -------------------------------------------------------------- */
.listado{ width:100%; border-collapse:collapse; margin-bottom:2rem; font-size:.92rem; }
.listado th{
  text-align:left; font-family:var(--mono); font-size:.68rem; letter-spacing:.07em;
  color:var(--tenue); font-weight:400; padding:.6rem .8rem; border-bottom:1px solid var(--linea-fuerte);
}
.listado td{ padding:.75rem .8rem; border-bottom:1px solid var(--linea); vertical-align:top; }
.listado tr:hover td{ background:rgba(240,231,221,.03); }
.listado .leido td{ opacity:.55; }
.listado__acciones{ text-align:right; white-space:nowrap; }
.vacio{ padding:1.5rem; background:var(--carbon); color:var(--tenue); clip-path:var(--chaflan); }

/* Galerías -------------------------------------------------------------- */
.galeria-admin{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1rem; }
.galeria-admin--grande{ grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }
.galeria-admin figure{ margin:0; background:var(--carbon); padding:.75rem; }
.galeria-admin img{ width:100%; aspect-ratio:1; object-fit:cover; background:var(--alto); }
.galeria-admin figcaption{ font-size:.78rem; color:var(--tenue); margin-top:.5rem; line-height:1.4; }
.formulario--apretado{ display:grid; gap:.35rem; margin-top:.5rem; }
.formulario--apretado input, .formulario--apretado select{ font-size:.8rem; padding:.4rem .5rem; }
.filtros-admin{ display:flex; gap:.5rem; margin-bottom:1.25rem; }

/* Entrar ---------------------------------------------------------------- */
.cuerpo-entrar{ display:grid; place-items:center; min-height:100vh; }
.entrar{ width:min(24rem,92vw); background:var(--carbon); padding:2.5rem; clip-path:var(--chaflan); }
.entrar__logo{ width:52px; margin-bottom:1.25rem; }
.entrar h1{ font-size:1.9rem; }
.entrar__nota{ color:var(--tenue); font-size:.9rem; margin:0 0 2rem; }
.entrar .boton{ width:100%; text-align:center; }

/* Bloques de imagen dentro del editor de páginas --------------------------- */
.foto-bloque{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.5rem; align-items:start; }
.foto-bloque__vista{ width:240px; }
.foto-bloque__vista .pista{ margin-top:.5rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.05em; }
.foto-bloque__campos .campo{ margin-bottom:.9rem; }
.foto-bloque__acciones{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0 1rem;
  padding-top:.9rem; border-top:1px solid var(--linea);
}
.foto-bloque input[type=file]{ padding:.5rem; font-size:.85rem; }
.casilla--quitar{ align-self:end; margin-bottom:1rem; color:#FF9E92; }
.casilla--quitar input{ accent-color:var(--rojo); }
@media (max-width:640px){
  .foto-bloque{ grid-template-columns:1fr; }
  .foto-bloque__vista{ width:100%; max-width:240px; }
}

/* Fotos de producto -------------------------------------------------------- */
.fotos-producto{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.foto-item{ background:var(--alto); padding:.6rem; display:flex; flex-direction:column; gap:.5rem; }
.foto-item img{ width:100%; aspect-ratio:1; object-fit:cover; }
.foto-item--principal{ box-shadow:inset 0 0 0 2px var(--rojo); }
.foto-item__pie{ display:flex; justify-content:space-between; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.65rem; letter-spacing:.05em; color:var(--tenue); }
.foto-item__botones{ display:flex; gap:.35rem; }
.foto-item button{
  font:inherit; font-size:.65rem; letter-spacing:.05em; font-family:var(--mono);
  padding:.3rem .6rem; background:transparent; color:var(--tenue);
  border:1px solid var(--linea); cursor:pointer;
}
.foto-item button:hover{ color:var(--arena); border-color:var(--linea-fuerte); }
.foto-item button.peligro:hover{ background:var(--rojo); color:#fff; border-color:var(--rojo); }
.foto-nueva{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:0 1rem; align-items:end; }

/* Herramientas ------------------------------------------------------------- */
.pestanas{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.75rem; }
.pestanas a{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.07em;
  padding:.55rem 1rem; color:var(--tenue); text-decoration:none;
  background:var(--carbon); clip-path:var(--chaflan);
}
.pestanas a:hover{ color:var(--arena); }
.pestanas a.activa{ background:var(--arena); color:var(--noche); }

.cifras{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.6rem; margin-bottom:1.5rem; }
.cifras div{ background:var(--carbon); padding:1.1rem 1.25rem; clip-path:var(--chaflan); }
.cifras b{ display:block; font-family:var(--display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em; line-height:1; }
.cifras span{ font-family:var(--mono); font-size:.65rem; letter-spacing:.08em; color:var(--tenue); }

.listado td.ok, .ok{ color:#9BD6A8; }
.listado td.mal, .mal{ color:#FF9E92; }
.listado td.tibio, .tibio{ color:var(--tenue); }
.listado-simple{ margin:.5rem 0 0; padding-left:1.1rem; }
.listado-simple li{ padding:.25rem 0; font-size:.92rem; }
textarea.mono{ font-family:var(--mono); font-size:.85rem; }