/* Estilos del panel de EDICIÓN publicado — prefijo .myem-panel- para no
   chocar con el tema del sitio (spec §4.1). Idénticos a los que usaba
   paneles-builder.html en su vista previa, para que el aspecto final sea
   exactamente el mismo que se aprobó en la fase 1. */
/* Sin max-width propio: Sebas pidió aprovechar el hueco que dejaba un
   límite fijo (1100px) cuando el contenedor real es más ancho — que sea
   quien lo inserte (el tema, Elementor...) el que decida el ancho máximo,
   no el panel. */
.myem-panel-wrap{ width:100%; margin:0 auto; font-family:'Montserrat','Segoe UI',system-ui,sans-serif; }
.myem-panel-titulo{ font-size:1.2rem; font-weight:800; margin:0 0 14px; color:#1a1a1a; }
/* auto-fit, NO auto-fill: con auto-fill, si cabe hueco de sobra para más
   columnas de las que hay tarjetas en esa fila, ese hueco se queda como
   columnas "fantasma" vacías en vez de repartirse entre las tarjetas
   reales — eso era justo el margen desaprovechado que vio Sebas. Con
   auto-fit esas columnas vacías se colapsan y las tarjetas reales (1fr)
   se reparten TODO el ancho disponible. Comprobado con medidas exactas
   en un navegador antes de aplicarlo: antes 276px por tarjeta y ~570px
   vacíos; después 561px por tarjeta y el margen derecho igualado a los
   20px del resto de márgenes. */
.myem-panel-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px; }
.myem-panel-card{ background:#fff; border:1px solid #e3e5e8; border-radius:12px; padding:13px 15px; min-width:0; }
/* overflow-wrap + word-break: si el título de una página es una sola
   "palabra" muy larga y sin espacios (probado por Sebas a propósito),
   que se parta y siga en la línea de abajo en vez de salirse de la
   tarjeta — min-width:0 arriba es necesario para que un hijo dentro de
   una rejilla (grid) respete esto en vez de forzar la columna a ensancharse. */
.myem-panel-card h3{ margin:0 0 3px; font-size:.9rem; overflow-wrap:break-word; word-break:break-word; }
.myem-panel-estado{ font-size:.66rem; color:#9199a3; text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
.myem-panel-botones{ display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.myem-panel-btn{ display:inline-block; padding:6px 11px; border-radius:7px; font-size:.7rem; font-weight:700; text-decoration:none; border:1.5px solid #ffaa00; color:#cc8800; background:#fff; white-space:nowrap; }
.myem-panel-btn.solido{ background:#ffaa00; color:#1a1a1a; border-color:#ffaa00; }
.myem-panel-sinpermiso{ font-size:.68rem; color:#9199a3; margin-top:8px; }
.myem-panel-otro{ display:inline-block; margin-top:18px; padding:9px 16px; border-radius:9px; background:#26282b; color:#fff; text-decoration:none; font-size:.78rem; font-weight:700; }

/* Aviso neutro (sin sesión / sin panel asignado) — spec §4.1 puntos 1-2, lo pinta class-myem-shortcodes.php */
.myem-panel-aviso{ max-width:480px; margin:60px auto; text-align:center; background:#fff; border:1px solid #e3e5e8; border-radius:14px; padding:32px 26px; color:#6b7280; font-family:'Montserrat','Segoe UI',system-ui,sans-serif; }
.myem-panel-aviso .e{ font-size:2rem; margin-bottom:10px; }
.myem-panel-aviso p{ margin:0; }
.myem-panel-aviso .myem-panel-btn{ margin-top:14px; font-size:.8rem; }

/* ==========================================================================
   Panel de ACCESOS DIRECTOS publicado — prefijo .myem-acc- (spec §4.2,
   diseño "pantalla de inicio de móvil"). Sub-fase 1: rejilla básica de un
   solo nivel, ancho completo (el modo "ajustado al contenido" y los
   niveles anidados llegan en sub-fases posteriores).
   Las columnas y la separación se pasan por panel desde
   class-myem-render.php con variables CSS (--myem-acc-cols-escritorio /
   --myem-acc-cols-movil / --myem-acc-gap) en vez de una hoja de estilo
   distinta por panel. ========================== */
.myem-acc-wrap{ width:100%; margin:0 auto; font-family:'Montserrat','Segoe UI',system-ui,sans-serif; }
.myem-acc-titulo{ font-size:1.2rem; font-weight:800; margin:0 0 18px; color:#1a1a1a; text-align:center; }
/* Flexbox, NO Grid: con grid-template-columns a un número fijo de columnas,
   esas columnas siempre reparten TODO el ancho del contenedor entre ellas
   aunque sobren huecos sin botón — eso era justo el problema que vio Sebas
   (menos botones que columnas configuradas = botones estirados en vez de
   agrupados). Con flexbox + tamaño fijo por icono, la fila solo ocupa el
   ancho que necesitan los botones que de verdad hay, siempre con el mismo
   hueco entre ellos, y salta de fila al superar el número de columnas
   configurado (limitado con max-width, calculado a partir de ese número y
   el tamaño fijo del icono) — mismo aspecto que los iconos de la pantalla
   de inicio de un móvil, que tampoco se estiran al haber pocos. */
.myem-acc-grid{
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--myem-acc-gap,16px); margin:0 auto;
  max-width:calc(var(--myem-acc-cols-movil,4) * 96px + (var(--myem-acc-cols-movil,4) - 1) * var(--myem-acc-gap,16px));
}
@media (min-width:768px){
  .myem-acc-grid{
    max-width:calc(var(--myem-acc-cols-escritorio,6) * 96px + (var(--myem-acc-cols-escritorio,6) - 1) * var(--myem-acc-gap,16px));
  }
}
/* Tamaño del icono: 96px como máximo (nunca más grande, para no volver al
   problema de "se estira"), pero se encoge si hace falta para que quepan
   de verdad las columnas configuradas en el ancho real disponible — bug
   real visto por Sebas en un móvil de verdad: con 4 columnas configuradas
   y separación de 16px, 4 iconos de 96px fijos necesitan más ancho del
   que tiene un móvil normal, así que antes solo cabían 3. clamp() calcula
   el tamaño exacto para que quepan las columnas configuradas (mínimo
   40px, por si la combinación de columnas/separación fuera muy exigente
   — así nunca se vuelven ilegibles del todo). */
.myem-acc-item{
  display:flex; flex-direction:column; align-items:center; text-decoration:none; flex:0 0 auto;
  width:clamp(40px, calc((100% - (var(--myem-acc-cols-movil,4) - 1) * var(--myem-acc-gap,16px)) / var(--myem-acc-cols-movil,4)), 96px);
}
@media (min-width:768px){
  .myem-acc-item{
    width:clamp(40px, calc((100% - (var(--myem-acc-cols-escritorio,6) - 1) * var(--myem-acc-gap,16px)) / var(--myem-acc-cols-escritorio,6)), 96px);
  }
}
.myem-acc-cuadro{
  width:100%; aspect-ratio:1/1; border-radius:22%; display:flex; align-items:center; justify-content:center;
  transition:transform .1s ease; box-shadow:0 3px 10px #00000022; overflow:hidden;
}
.myem-acc-cuadro svg{ width:55%; height:55%; }
/* Imagen propia (spec §5bis): cubre el cuadrado entero — a diferencia del
   icono de la librería (un trazo al 55%, centrado, sobre un fondo de
   color), aquí la imagen ES el botón, sin fondo de color de por medio. */
.myem-acc-cuadro-imagen img{ width:100%; height:100%; object-fit:cover; display:block; }
.myem-acc-item:hover .myem-acc-cuadro{ transform:scale(1.04); }
.myem-acc-item:active .myem-acc-cuadro{ transform:scale(0.96); }
.myem-acc-nombre{ margin-top:8px; font-size:.74rem; font-weight:700; color:#3a3d42; text-align:center; line-height:1.25; max-width:100%; overflow-wrap:break-word; word-break:break-word; }

/* ==========================================================================
   NIVELES ANIDADOS (spec §4.5) — cada nivel del panel es un .myem-nivel;
   panel.js enseña uno y oculta el resto. La barra lleva "← volver arriba"
   y/o "panel siguiente →" (mismo aspecto que el "volver" de la página
   simple). ============================================================== */
.myem-nivel[hidden]{ display:none !important; }
.myem-nivel-barra{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.myem-nivel-btn{
  display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:9px;
  background:#fff; border:1px solid #e3e5e8; color:#26282b; text-decoration:none; font-size:.78rem; font-weight:700; cursor:pointer;
  font-family:'Montserrat','Segoe UI',system-ui,sans-serif;
}
.myem-nivel-btn:hover{ border-color:#ffaa00; }

/* Fondo del nivel (spec §4.5, sub-fase 4): sólido o degradado, puesto por
   class-myem-render.php como `background` en línea sobre el contenedor
   del nivel; aquí solo el relleno y las esquinas para que se vea como una
   caja. Sin fondo, el contenedor sigue siendo transparente (como siempre). */
/* box-sizing:border-box — imprescindible: los contenedores van a width:100%
   y, sin esto, el relleno lateral del fondo se SUMA al 100% (40px de más)
   y el panel sobresale con scroll horizontal (visto por Sebas en la vista
   previa de móvil; en la página real Elementor recortaba el sobrante). */
.myem-acc-wrap, .myem-panel-wrap, .myem-pagina-wrap, .myem-nota-caja{ box-sizing:border-box; }
.myem-con-fondo{ padding:22px 20px; border-radius:16px; box-sizing:border-box; }
/* Modo de ancho "ajustado al contenido" (solo accesos): el contenedor se
   encoge a lo que ocupa la rejilla (las columnas ya vienen recortadas al
   número real de botones desde PHP) y se alinea donde se pida. La rejilla
   necesita un ancho DEFINIDO (calc con las variables) — si dependiera del
   contenedor, los iconos (ancho en %) y el contenedor se necesitarían
   mutuamente y el navegador no sabría cuánto medir. */
.myem-ancho-ajustado{ width:fit-content; max-width:100%; }
.myem-ancho-ajustado.myem-alinear-izquierda{ margin-left:0; margin-right:auto; }
.myem-ancho-ajustado.myem-alinear-centro{ margin-left:auto; margin-right:auto; }
.myem-ancho-ajustado.myem-alinear-derecha{ margin-left:auto; margin-right:0; }
.myem-ancho-ajustado .myem-acc-grid{
  width:calc(var(--myem-acc-cols-movil,4) * 96px + (var(--myem-acc-cols-movil,4) - 1) * var(--myem-acc-gap,16px));
  max-width:100%;
}
@media (min-width:768px){
  .myem-ancho-ajustado .myem-acc-grid{
    width:calc(var(--myem-acc-cols-escritorio,6) * 96px + (var(--myem-acc-cols-escritorio,6) - 1) * var(--myem-acc-gap,16px));
  }
}

/* ==========================================================================
   NOTAS POR BOTÓN (spec §9quater): círculo con icono de nota en la esquina
   superior IZQUIERDA del botón (la derecha la usa el lápiz de la vista
   previa del editor), relleno en acento cuando la persona ya tiene nota;
   y la vista de notas (nota del administrador + cuadro personal).
   ====================================================================== */
.myem-acc-item{ position:relative; }
.myem-acc-nota{
  position:absolute; top:-6px; left:-6px; width:22px; height:22px; border-radius:50%;
  background:#fff; border:1px solid #e3e5e8; color:#6b7280; display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 4px #0003; cursor:pointer; z-index:2;
}
.myem-acc-nota svg{ width:12px; height:12px; }
.myem-acc-nota:hover{ border-color:#ffaa00; color:#cc8800; }
.myem-acc-nota.myem-acc-nota-llena{ background:#ffaa00; border-color:#ffaa00; color:#1a1a1a; }
/* Globo "al pasar el ratón" con la nota del administrador (opción por
   botón): solo CSS, a partir del atributo data-myem-tooltip. pre-line
   respeta los saltos de línea de la nota. */
.myem-acc-item[data-myem-tooltip]:hover::after{
  content:attr(data-myem-tooltip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:#26282b; color:#fff; padding:8px 11px; border-radius:9px; font-size:.72rem; font-weight:500; line-height:1.4;
  width:max-content; max-width:240px; white-space:pre-line; text-align:left; z-index:6; box-shadow:0 6px 18px #0004; pointer-events:none;
}
.myem-acc-item[data-myem-tooltip]:hover::before{
  content:""; position:absolute; bottom:calc(100% + 2px); left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:#26282b; z-index:6; pointer-events:none;
}
/* Ventana emergente de notas: capa oscura + tarjeta centrada. */
.myem-nota-popup{ position:fixed; inset:0; z-index:99999; background:#0007; display:flex; align-items:center; justify-content:center; padding:20px; font-family:'Montserrat','Segoe UI',system-ui,sans-serif; }
.myem-nota-popup[hidden]{ display:none; }
.myem-nota-caja{ position:relative; background:#fff; border-radius:16px; width:100%; max-width:560px; max-height:85vh; overflow:auto; padding:22px 24px; box-shadow:0 14px 44px #0005; }
.myem-nota-solo-lectura .myem-nota-caja{ cursor:pointer; }
.myem-nota-cerrar{ position:absolute; top:10px; right:12px; background:none; border:none; font-size:1.2rem; color:#9199a3; cursor:pointer; padding:4px 6px; }
.myem-nota-cerrar:hover{ color:#26282b; }
.myem-nota-titulo{ font-size:1.05rem; font-weight:800; margin:0 24px 14px 0; color:#1a1a1a; }
.myem-nota-pista{ margin:12px 0 0; font-size:.72rem; color:#9199a3; text-align:center; }
.myem-nota-admin{ background:#fff8e6; border:1px solid #ffe2a3; border-left:4px solid #ffaa00; border-radius:12px; padding:14px 16px; color:#26282b; line-height:1.6; margin-bottom:14px; font-size:.92rem; }
.myem-nota-personal label{ display:block; font-size:.74rem; font-weight:700; color:#6b7280; text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.myem-nota-texto{
  width:100%; box-sizing:border-box; min-height:150px; padding:12px 14px; border:1px solid #e3e5e8; border-radius:12px; background:#fff;
  color:#26282b; font-family:inherit; font-size:.92rem; line-height:1.5; resize:vertical;
}
.myem-nota-texto:focus{ outline:none; border-color:#ffaa00; }
.myem-nota-acciones{ display:flex; align-items:center; gap:12px; margin-top:10px; }
.myem-nota-estado{ font-size:.78rem; color:#6b7280; }

/* ==========================================================================
   PÁGINA SIMPLE publicada — prefijo .myem-pagina- (spec §9bis). Nota de
   texto propia de un botón de accesos, con formato básico (alineación,
   negrita, cursiva, color — puestos por el propio editor de WordPress,
   ver class-myem-admin.php). Botón "volver al panel" arriba y centrado,
   pedido explícito de Sebas. ========================================== */
.myem-pagina-wrap{ width:100%; max-width:720px; margin:0 auto; font-family:'Montserrat','Segoe UI',system-ui,sans-serif; }
.myem-pagina-volver-caja{ text-align:center; margin-bottom:20px; }
.myem-pagina-volver{
  display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:9px;
  background:#fff; border:1px solid #e3e5e8; color:#26282b; text-decoration:none; font-size:.8rem; font-weight:700;
}
.myem-pagina-volver:hover{ border-color:#ffaa00; }
.myem-pagina-titulo{ font-size:1.2rem; font-weight:800; margin:0 0 16px; color:#1a1a1a; text-align:center; }
.myem-pagina-contenido{ background:#fff; border:1px solid #e3e5e8; border-radius:14px; padding:24px 28px; color:#26282b; line-height:1.6; }
.myem-pagina-contenido p{ margin:0 0 1em; }
.myem-pagina-contenido p:last-child{ margin-bottom:0; }
/* Vídeo insertado pegando un enlace (YouTube, Vimeo...) — WordPress lo
   convierte en un <iframe> de tamaño fijo, y class-myem-render.php lo
   envuelve en .myem-pagina-embed con su proporción real (--myem-embed-ratio,
   alto/ancho en %): la caja escala con el ancho disponible y el vídeo
   ocupa la caja entera, sin salirse en móvil ni quedarse achatado. */
.myem-pagina-embed{ position:relative; width:100%; height:0; padding-top:var(--myem-embed-ratio,56.25%); margin:0 0 1em; overflow:hidden; border-radius:10px; }
.myem-pagina-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
/* Reproductores que no son vídeo (SoundCloud, Spotify: ancho 100% y alto
   fijo), audio/vídeo HTML de un archivo directo, y cualquier otro embebido:
   que nunca se salgan del ancho. */
.myem-pagina-contenido iframe,
.myem-pagina-contenido embed,
.myem-pagina-contenido object{ max-width:100%; }
.myem-pagina-contenido video{ max-width:100%; height:auto; }
.myem-pagina-contenido audio{ width:100%; display:block; }
/* Imágenes insertadas con "Añadir medios" (con o sin pie de foto, y con
   las alineaciones que pone WordPress: alignleft/aligncenter/alignright). */
.myem-pagina-contenido img{ max-width:100%; height:auto; }
.myem-pagina-contenido .aligncenter{ display:block; margin-left:auto; margin-right:auto; }
.myem-pagina-contenido .alignleft{ float:left; margin:0 1em 1em 0; }
.myem-pagina-contenido .alignright{ float:right; margin:0 0 1em 1em; }
.myem-pagina-contenido .wp-caption{ max-width:100%; margin-bottom:1em; }
.myem-pagina-contenido .wp-caption img{ display:block; }
.myem-pagina-contenido .wp-caption-text{ font-size:.78rem; color:#6b7280; text-align:center; margin:6px 0 0; }
.myem-pagina-contenido::after{ content:""; display:block; clear:both; } /* cierra los floats de las imágenes alineadas */

/* Firma abajo del panel (0.17.0, regla común MYEM). Tamaño, opacidad y
   alineación los pone cada panel en el atributo style (bloque «Firma»). */
.myem-panel-raiz .myem-panel-firma{ margin:12px 0 0; line-height:1.4; color:inherit; }
/* Blindaje frente al tema: el tema pinta los enlaces al pasar el ratón o
   tocarlos; aquí se mantiene el color de la firma en todos los estados. */
.myem-panel-raiz .myem-panel-firma a,
.myem-panel-raiz .myem-panel-firma a:visited,
.myem-panel-raiz .myem-panel-firma a:hover,
.myem-panel-raiz .myem-panel-firma a:focus,
.myem-panel-raiz .myem-panel-firma a:active{ color:inherit; text-decoration:none; background:none; box-shadow:none; border:0; }