/* ================================================================
   FRAN96MC.ES — MODO ADMINISTRADOR
   includes/admin.css — barra de administración común a TODO el sitio
   y capa de edición en vivo sobre las tarjetas de recursos.

   Solo existe cuando includes/admin.js confirma que hay sesión del
   administrador central. Un visitante normal jamás descarga nada de
   esto pintado: el JS no inyecta el marcado si no eres tú.

   Estética: la misma del sitio (tokens.css) pero con la franja ámbar
   de "estás en modo administrador", para que se distinga de un
   vistazo de la navegación normal.
   ================================================================ */

/* ----------------------------------------------------------------
   1) BARRA INFERIOR
   Va abajo a propósito: la barra de secciones (.fran-barra) ya ocupa
   la parte superior y no queremos moverla ni un píxel, porque su
   posición es la que el sitio ya tiene calibrada.
   ---------------------------------------------------------------- */
.fm-admin{
  position:fixed; left:0; right:0; bottom:0;
  z-index:200;                      /* sobre el contenido y la barra (120) */
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap;
  padding:8px 12px;
  font-family:var(--f-cuerpo);
  font-size:.82rem;
  color:var(--tinta);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--panel-2) 92%,transparent),
    color-mix(in srgb,var(--cielo-1) 96%,transparent));
  border-top:3px solid var(--aviso);
  box-shadow:0 -8px 28px rgba(0,0,0,.5);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transform:translateY(110%);
  transition:transform var(--dur-entrada) var(--ease-back);
}
.fm-admin.fm-admin--visible{ transform:none; }

/* Hueco inferior para que el pie de página no quede tapado. La altura
   real la mide admin.js y la publica en --fm-admin-alto. */
body.fm-admin-activa{ padding-bottom:var(--fm-admin-alto,56px); }

/* El asistente Fran vive en la esquina: se sube por encima de la barra
   en vez de quedar medio escondido detrás. */
body.fm-admin-activa #franAsistente,
body.fm-admin-activa .fran-asistente{
  bottom:calc(var(--fm-admin-alto,56px) + 12px);
}

.fm-admin-sello{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 10px;
  font-family:var(--f-pixel); font-size:.55rem; line-height:1.6;
  color:var(--cielo-1);
  background:var(--aviso);
  clip-path:var(--recorte-px);
  white-space:nowrap;
}
.fm-admin-sello b{ font-weight:400; }

/* Chip de la sección actual, teñido con su propio acento. */
.fm-admin-seccion{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px;
  color:var(--acento-pagina,var(--oro));
  border:2px solid color-mix(in srgb,var(--acento-pagina,var(--oro)) 45%,transparent);
  background:color-mix(in srgb,var(--acento-pagina,var(--oro)) 12%,transparent);
  clip-path:var(--recorte-px);
  white-space:nowrap;
}

.fm-admin-hueco{ flex:1 1 auto; }

/* ----------------------------------------------------------------
   2) BOTONES DE LA BARRA
   ---------------------------------------------------------------- */
.fm-admin-btn{
  display:inline-flex; align-items:center; gap:6px;
  min-height:34px;
  padding:6px 11px;
  font:inherit; font-weight:600;
  color:var(--tinta);
  background:var(--panel);
  border:2px solid var(--panel-borde);
  clip-path:var(--recorte-px);
  cursor:pointer;
  transition:transform var(--dur-micro) var(--ease-back),
             border-color var(--dur-micro) var(--ease-out),
             color var(--dur-micro) var(--ease-out);
}
.fm-admin-btn:hover{
  transform:translateY(-2px);
  border-color:var(--acento-pagina,var(--oro));
  color:var(--acento-pagina,var(--oro));
}
/* El anillo de foco se dibuja HACIA DENTRO: con clip-path un outline
   normal cae fuera del recorte y no se ve (mismo arreglo que en
   componentes.css). */
.fm-admin-btn:focus-visible,
.fm-admin-lapiz:focus-visible,
.fm-admin-add:focus-visible{
  outline:3px solid var(--oro-vivo);
  outline-offset:-5px;
}
.fm-admin-btn[aria-pressed="true"]{
  color:var(--cielo-1);
  background:var(--aviso);
  border-color:var(--aviso);
}
.fm-admin-btn--salir:hover{ border-color:var(--error); color:var(--error); }

/* Menú desplegable de paneles (la navegación unificada). */
.fm-admin-menu{ position:relative; }
.fm-admin-lista{
  position:absolute; right:0; bottom:calc(100% + 8px);
  min-width:230px;
  display:none; flex-direction:column; gap:2px;
  padding:6px;
  background:var(--panel-2);
  border:2px solid var(--panel-borde-luz);
  clip-path:var(--recorte-px);
  box-shadow:0 12px 32px rgba(0,0,0,.55);
}
.fm-admin-lista.fm-abierta{ display:flex; }
.fm-admin-lista a{
  display:flex; align-items:center; gap:9px;
  min-height:38px;
  padding:6px 10px;
  color:var(--tinta-suave); text-decoration:none;
  border-left:4px solid var(--acento-item,var(--panel-borde));
  transition:background var(--dur-micro) var(--ease-out),
             color var(--dur-micro) var(--ease-out);
}
.fm-admin-lista a:hover,
.fm-admin-lista a:focus-visible{
  color:var(--tinta);
  background:color-mix(in srgb,var(--acento-item,var(--oro)) 16%,transparent);
}
.fm-admin-lista a[aria-current]{ color:var(--acento-item,var(--oro)); font-weight:700; }
.fm-admin-lista .fm-admin-sep{
  margin:4px 2px; height:2px;
  background:var(--panel-borde);
}

/* ----------------------------------------------------------------
   3) EDICIÓN EN VIVO SOBRE LAS TARJETAS
   Con el modo activo, cada tarjeta editable recibe un borde ámbar
   discontinuo y un lápiz en su esquina. Nada de esto se aplica si el
   modo está apagado: la página se comporta con total normalidad.
   ---------------------------------------------------------------- */
.fm-vivo .fm-editable{
  position:relative;
  outline:2px dashed color-mix(in srgb,var(--aviso) 60%,transparent);
  outline-offset:2px;
}
.fm-vivo .fm-editable:hover{
  outline-color:var(--aviso);
  outline-style:solid;
}

.fm-admin-lapiz{
  position:absolute; top:6px; right:6px; z-index:3;
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px;
  font-size:.95rem; line-height:1;
  color:var(--cielo-1);
  background:var(--aviso);
  border:0;
  clip-path:var(--recorte-px);
  cursor:pointer;
  transition:transform var(--dur-micro) var(--ease-back);
}
.fm-admin-lapiz:hover{ transform:scale(1.12) rotate(-8deg); }

/* Botón "añadir aquí", al final de cada rejilla editable. */
.fm-admin-add{
  display:flex; align-items:center; justify-content:center;
  gap:8px;
  min-height:120px;
  padding:16px;
  font-family:var(--f-cuerpo); font-size:.95rem; font-weight:600;
  color:var(--aviso);
  background:color-mix(in srgb,var(--aviso) 8%,transparent);
  border:3px dashed color-mix(in srgb,var(--aviso) 45%,transparent);
  cursor:pointer;
  transition:transform var(--dur-micro) var(--ease-back),
             background var(--dur-micro) var(--ease-out);
}
.fm-admin-add:hover{
  transform:translateY(-3px);
  background:color-mix(in srgb,var(--aviso) 16%,transparent);
}

/* ----------------------------------------------------------------
   4) EDITOR (panel lateral)
   ---------------------------------------------------------------- */
.fm-editor{
  position:fixed; inset:0;
  z-index:210;
  display:none;
}
.fm-editor.fm-abierto{ display:block; }
.fm-editor-fondo{
  position:absolute; inset:0;
  background:rgba(2,3,14,.72);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.fm-editor-caja{
  position:absolute; top:0; right:0; bottom:0;
  width:min(94vw,430px);
  display:flex; flex-direction:column;
  background:var(--panel);
  border-left:3px solid var(--aviso);
  box-shadow:-14px 0 40px rgba(0,0,0,.6);
  animation:fm-entra-panel var(--dur-entrada) var(--ease-back) both;
}
@keyframes fm-entra-panel{ from{ transform:translateX(100%); } to{ transform:none; } }

.fm-editor-cab{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px;
  border-bottom:2px solid var(--panel-borde);
}
.fm-editor-cab h2{
  flex:1;
  margin:0;
  font-family:var(--f-pixel); font-size:.7rem; line-height:1.7;
  color:var(--aviso);
}
.fm-editor-cerrar{
  width:34px; height:34px;
  font-size:1.1rem; color:var(--tinta-suave);
  background:none; border:2px solid var(--panel-borde);
  clip-path:var(--recorte-px);
  cursor:pointer;
}
.fm-editor-cerrar:hover{ color:var(--error); border-color:var(--error); }
.fm-editor-cerrar:focus-visible{ outline:3px solid var(--oro-vivo); outline-offset:-5px; }

.fm-editor-cuerpo{
  flex:1; overflow-y:auto;
  padding:16px;
  display:flex; flex-direction:column; gap:14px;
}
.fm-campo{ display:flex; flex-direction:column; gap:5px; }
.fm-campo label{
  font-family:var(--f-cuerpo); font-size:.78rem; font-weight:700;
  color:var(--tinta-tenue);
  text-transform:uppercase; letter-spacing:.06em;
}
.fm-campo input[type=text],
.fm-campo input[type=url],
.fm-campo textarea,
.fm-campo select{
  width:100%;
  padding:9px 11px;
  font-family:var(--f-cuerpo); font-size:.92rem;
  color:var(--tinta);
  background:var(--cielo-1);
  border:2px solid var(--panel-borde);
  border-radius:0;
}
.fm-campo textarea{ min-height:76px; resize:vertical; }
.fm-campo input:focus, .fm-campo textarea:focus, .fm-campo select:focus{
  outline:none; border-color:var(--aviso);
}
.fm-campo small{ color:var(--tinta-tenue); font-size:.74rem; }
.fm-campo-fila{ display:flex; gap:10px; }
.fm-campo-fila > *{ flex:1; min-width:0; }
.fm-campo input[type=color]{
  width:100%; height:40px; padding:2px;
  background:var(--cielo-1);
  border:2px solid var(--panel-borde);
  cursor:pointer;
}

.fm-editor-pie{
  display:flex; gap:8px; flex-wrap:wrap;
  padding:12px 16px;
  border-top:2px solid var(--panel-borde);
  background:var(--panel-2);
}
.fm-editor-pie .fm-admin-btn{ flex:1 1 auto; justify-content:center; }
.fm-admin-btn--guardar{
  color:var(--cielo-1);
  background:var(--exito);
  border-color:var(--exito);
}
.fm-admin-btn--guardar:hover{
  color:var(--cielo-1); border-color:var(--exito);
  filter:brightness(1.12);
}
.fm-admin-btn--borrar:hover{ border-color:var(--error); color:var(--error); }

/* ----------------------------------------------------------------
   5) AVISOS FLOTANTES
   ---------------------------------------------------------------- */
.fm-admin-aviso{
  position:fixed; left:50%; bottom:calc(var(--fm-admin-alto,56px) + 16px);
  z-index:220;
  transform:translateX(-50%);
  max-width:min(90vw,420px);
  padding:11px 18px;
  font-family:var(--f-cuerpo); font-size:.9rem; font-weight:600;
  color:var(--cielo-1);
  background:var(--exito);
  clip-path:var(--recorte-px);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  animation:fm-aviso-entra var(--dur-entrada) var(--ease-back) both;
}
.fm-admin-aviso--error{ background:var(--error); color:#fff; }
@keyframes fm-aviso-entra{
  from{ opacity:0; transform:translate(-50%,14px); }
  to{ opacity:1; transform:translateX(-50%); }
}

/* ----------------------------------------------------------------
   6) MÓVIL Y ACCESIBILIDAD
   ---------------------------------------------------------------- */
@media (max-width:720px){
  .fm-admin{ font-size:.76rem; gap:7px; padding:7px 9px; }
  .fm-admin-sello{ font-size:.48rem; }
  /* En pantallas estrechas se ocultan las etiquetas: quedan los
     iconos, que siguen siendo objetivos de 34px. */
  .fm-admin-btn .fm-admin-txt{ display:none; }
  .fm-admin-seccion{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .fm-admin, .fm-admin-btn, .fm-admin-lapiz, .fm-admin-add{ transition:none; }
  .fm-editor-caja, .fm-admin-aviso{ animation:none; }
}