/* =========================
   style.css (temaDiomedes)
   ========================= */
/*
Theme Name: temaDiomedes
Theme URI: toolwd.com
Author: Diomedes Lopez
Author URI: toolwd.com
Description: Tema con menú overlay en inicio y sidebar en páginas internas. Paleta blanca neutra con alto contraste y sin saturación, íconos por página y selector de estilos.
Version: 1.2.0
License: GPL-2.0-or-later
Text Domain: overlay-sidebar-neonfx-config
*/

/* =========================
   BASE: PALETA BLANCA NEUTRA
   ========================= */
:root,
:root:where(html),
html,
html[data-theme],
html[data-theme="light"],
html[data-theme="dark"]{
  color-scheme: light !important;
  --sb-collapsed:68px;
  --sb-expanded:320px;

  --brand-size-collapsed:44px;
  --brand-size-expanded:56px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* Fondo totalmente blanco y variante muy sutil */
  --bg:#ffffff;
  --bg-2:#fafafb;

  /* Tipografía: negro suave y secundarios neutros */
  --text:#0f172a;     /* slate-900 */
  --muted:#475569;    /* slate-600 */

  /* Bordes y superficies */
  --border:#e5e7eb;   /* zinc-200 */
  --surface:#ffffff;  /* cartas/superficies */

  /* Colores de realce suaves (poco saturados) */
  --primary:#2563eb;     /* azul medio sobrio */
  --primary-2:#60a5fa;   /* azul claro */
  --primary-3:#94a3b8;   /* slate-400 para degradados */
  --ring:rgba(37, 99, 235, .18);

  /* Gradientes y fondos ligeros */
  --card-grad-1: rgba(255,255,255,.96);
  --card-grad-2: rgba(255,255,255,.92);

  /* Overlays y tooltips claros */
  --overlay-tint: rgba(255,255,255,.86);
  --tooltip-bg: #ffffff;
}

/* =========================
   VARIANTES (todas forzadas a blanco)
   ========================= */
.osf-style-neonfx,
.osf-style-glass,
.osf-style-minimal,
.osf-style-aurora,
.osf-style-cyberpunk,
.osf-style-ocean{
  --bg:#ffffff; --bg-2:#fafafb; --text:#0f172a; --muted:#475569; --border:#e5e7eb; --surface:#ffffff;
  --primary:#2563eb; --primary-2:#60a5fa; --primary-3:#94a3b8; --ring:rgba(37,99,235,.18);
  --card-grad-1: rgba(255,255,255,.96); --card-grad-2: rgba(255,255,255,.92);
  --overlay-tint: rgba(255,255,255,.86); --tooltip-bg:#ffffff;
}

/* =========================
   NORMALIZACIÓN / GLOBAL
   ========================= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  padding-left: max(var(--safe-left), 0px);
  padding-right: max(var(--safe-right), 0px);
  padding-top: max(var(--safe-top), 0px);
  padding-bottom: max(var(--safe-bottom), 0px);
  -webkit-tap-highlight-color: rgba(15,23,42,.06);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

/* Si algún contenido tiene texto blanco explícito, forzar negro para legibilidad */
[style*="color:#fff"],
[style*="color: #fff"],
[style*="color:#ffffff"],
[style*="color: #ffffff"],
[style*="color:white"],
[style*="color: white"],
[style*="color:rgb(255,255,255)"],
[style*="color: rgb(255, 255, 255)"]{
  color:#0f172a !important;
}

/* Ajuste de contenido con sidebar (no empuja al expandir) */
body.osf-v-left{ padding-left: var(--sb-collapsed); }
body.osf-v-right{ padding-right: var(--sb-collapsed); }
@media (max-width:1024px){
  body.osf-v-left, body.osf-v-right{ padding-left:0; padding-right:0; }
}

/* =========================
   OVERLAY (HOME)
   ========================= */
.body--overlay{overflow:hidden}
.osf-overlay{
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  background: var(--overlay-tint);
  backdrop-filter: blur(8px) saturate(120%);
  padding:clamp(12px, 2vw, 24px);
}
.osf-overlay__fx::before,
.osf-overlay__fx::after{
  content:""; position:absolute; inset:-2px; z-index:-1; pointer-events:none;
  background: radial-gradient(600px 320px at 50% 20%, rgba(15,23,42,.06), transparent 60%);
  filter: blur(28px);
}
.osf-overlay__fx::after{ opacity:.35; }

.osf-stars{ position:absolute; inset:0; z-index:-2; pointer-events:none; opacity:.06 }
#osf-canvas{ width:100%; height:100%; display:block; }

.osf-overlay__inner{ width:min(1200px,96vw); position:relative }
.osf-overlay__title{
  text-align:center; margin:0 0 clamp(8px,2vw,12px) 0; font-weight:800;
  font-size: clamp(26px, 4.5vw, 56px);
  letter-spacing:.2px;
  color:var(--text);
}
.osf-overlay__subtitle{
  text-align:center; margin:0 0 clamp(12px, 3vw, 24px) 0; color:var(--muted); font-size: clamp(13px, 1.8vw, 18px);
}

/* Grid de opciones inicio */
.osf-overlay__flow{
  --card-w:260px; --gap:18px;
  display:flex; flex-wrap:wrap; gap:var(--gap);
  justify-content:center; align-content:center;
  margin:0 auto;
  max-width: calc((var(--card-w)*4) + (var(--gap)*3));
  width:100%;
}
.osf-overlay__flow .osf-card{ width:var(--card-w); }
@media (max-width:1280px){
  .osf-overlay__flow{ max-width: calc((240px*3) + (var(--gap)*2)); }
  .osf-overlay__flow .osf-card{ width:240px; }
}
@media (max-width:960px){
  .osf-overlay__flow{ max-width: calc((220px*2) + (var(--gap)*1)); }
  .osf-overlay__flow .osf-card{ width:220px; }
}
@media (max-width:560px){
  .osf-overlay__flow{ max-width:min(92vw,420px); }
  .osf-overlay__flow .osf-card{ width:100%; }
}

/* Card clara, profesional y sobria */
.osf-card{
  position:relative; height:clamp(96px, 22vw, 118px); border-radius:16px; isolation:isolate; overflow:hidden;
  background: linear-gradient(180deg, var(--card-grad-1), var(--card-grad-2));
  border:1px solid var(--border);
  box-shadow: 0 6px 16px rgba(15,23,42,.06);
  transform-style: preserve-3d;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease, background .2s ease;
}
.osf-card::before{
  content:""; position:absolute; inset:0; border-radius:18px; z-index:0;
  background: radial-gradient(220px 120px at var(--mx,50%) var(--my,50%), rgba(2,6,23,.04), transparent 60%);
  transition: opacity .2s ease; opacity:.0;
}
.osf-card:hover{ border-color: #dfe3ea; box-shadow: 0 10px 24px rgba(15,23,42,.10); }
.osf-card:hover::before{ opacity:1 }

.osf-card__inner{
  position:relative; z-index:1; height:100%;
  display:flex; align-items:center; justify-content:center; gap:12px; padding:clamp(10px, 2vw, 16px) clamp(12px, 2vw, 18px); text-align:center;
  flex-direction:column;
}
.osf-card__top{ display:flex; align-items:center; gap:10px; justify-content:center; }
.osf-card__icon{
  width:clamp(36px, 8vw, 44px); height:clamp(36px, 8vw, 44px); border-radius:10px; overflow:hidden;
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  display:grid; place-items:center;
}
.osf-card__icon svg{ width:clamp(18px, 4vw, 22px); height:clamp(18px, 4vw, 22px); opacity:.9; fill:none; stroke:#0f172a }
.osf-card__iconimg{ width:clamp(36px, 8vw, 44px); height:clamp(36px, 8vw, 44px); object-fit:cover; border-radius:10px; display:block }
.osf-card__label{
  font-weight:700; letter-spacing:.2px; font-size:clamp(14px, 2.2vw, 16px);
  max-width: 22ch; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text);
}

/* Ripple discreto */
.osf-ripple{
  position:absolute; border-radius:50%; transform: scale(0); pointer-events:none;
  background: radial-gradient(circle, rgba(2,6,23,.08), rgba(2,6,23,.03) 40%, transparent 70%);
  animation: osf-ripple .7s ease-out forwards;
}
@keyframes osf-ripple{ to{ transform: scale(12); opacity:0; } }

.osf-overlay__home{ margin:10px 0 0 0; text-align:center; color:var(--muted); font-size:clamp(12px, 2vw, 14px); }

/* Toggle de tema (visual, pero el tema permanece blanco) */
.osf-theme-toggle{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; border:1px solid var(--border);
  background:#ffffff; font-size:14px; cursor:pointer;
  box-shadow: 0 2px 6px rgba(15,23,42,.06);
}
.osf-theme-toggle:hover{ background:#f8fafc }

/* =========================
   SIDEBAR (INNER PAGES)
   ========================= */
.osf-sidebar{
  position:fixed; top:0; bottom:0; left:0; right:auto;
  width:var(--sb-collapsed); z-index:1000;
  background: #ffffff;
  border-right:1px solid var(--border);
  backdrop-filter: blur(6px) saturate(120%);
  transition: width .22s ease, transform .28s ease;
  overflow:hidden; will-change: transform,width;
  box-shadow: 0 2px 16px rgba(15,23,42,.05);
}
.osf-sidebar--right{
  right:0; left:auto;
  border-right:none; border-left:1px solid var(--border);
}

/* Desktop/hover devices: expand on hover */
@media (hover:hover) and (min-width:1025px){
  .osf-sidebar:hover{ width:var(--sb-expanded); }
  .osf-sidebar, .osf-sidebar--right{ transform:none !important; }
}

/* Mobile/Tablet: drawer oculto por defecto */
@media (max-width:1024px){
  .osf-sidebar{
    width:min(var(--sb-expanded), 86vw);
    transform: translateX(-110%);
    box-shadow: 0 10px 30px rgba(15,23,42,.10);
  }
  .osf-sidebar--right{
    transform: translateX(110%);
  }
  body.osf-menu-open .osf-sidebar,
  body.osf-menu-open .osf-sidebar--right{
    transform: translateX(0) !important;
  }
}

/* Scrim (fondo) para drawer */
.osf-scrim{
  position:fixed; inset:0; background:rgba(2,6,23,.28);
  opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:999;
}
body.osf-menu-open .osf-scrim{ opacity:1; pointer-events:auto }

/* Botón hamburguesa (solo internas, no overlay) */
.osf-hamburger{
  position:fixed; left:clamp(8px, 2.5vw, 16px); top:clamp(8px, 2.5vw, 16px);
  width:44px; height:44px; border-radius:12px; border:1px solid var(--border);
  background:#ffffff;
  display:none; align-items:center; justify-content:center; z-index:1001;
  box-shadow: 0 8px 20px rgba(15,23,42,.08);
}
.osf-hamburger span,
.osf-hamburger::before,
.osf-hamburger::after{
  content:""; display:block; width:20px; height:2px; background:#0f172a; border-radius:2px;
  position:relative; transition: transform .2s ease, opacity .2s ease;
}
.osf-hamburger::before{ position:absolute; transform: translateY(-6px); }
.osf-hamburger::after{ position:absolute; transform: translateY(6px); }
/* Estado abierto (animación X) */
body.osf-menu-open .osf-hamburger span{ opacity:0 }
body.osf-menu-open .osf-hamburger::before{ transform: rotate(45deg); }
body.osf-menu-open .osf-hamburger::after{ transform: rotate(-45deg); }
/* Mostrar botón en <=1024px y en páginas internas */
@media (max-width:1024px){
  body:not(.body--overlay) .osf-hamburger{ display:flex; }
}

/* Marca / cabecera sidebar */
.osf-brand{
  height:68px; display:flex; align-items:center; justify-content:center; gap:0;
  padding:0; border-bottom:1px solid var(--border);
  background:#ffffff;
}
.osf-brand__logo{
  width:var(--brand-size-collapsed);
  height:var(--brand-size-collapsed);
  display:block; margin:0 auto; padding:0;
  background:transparent !important; border:none; border-radius:0;
  overflow:visible; box-sizing:content-box; transform:translateZ(0);
}
.osf-brand__logo img{ width:100%; height:100%; object-fit:contain; object-position:center; display:block }
.osf-brand__text{ display:none !important; }

/* Aumentar logo al expandir */
@media (min-width:1025px){
  .osf-sidebar:hover .osf-brand__logo{
    width:var(--brand-size-expanded); height:var(--brand-size-expanded);
    transition: width .2s ease, height .2s ease;
  }
}
@media (max-width:1024px){
  body.osf-menu-open .osf-brand__logo{
    width:var(--brand-size-expanded); height:var(--brand-size-expanded);
  }
}

/* Navegación lateral */
.osf-sidebar nav{ height:calc(100% - 68px); overflow-y:auto; padding:10px 8px 18px 8px; -webkit-overflow-scrolling:touch }
.osf-menu{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px }
.osf-menu li a{
  display:flex; align-items:center; gap:12px; padding:12px 12px; border-radius:12px;
  color:var(--muted); border:1px solid transparent; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.osf-menu li a:hover{
  background:#f6f7fb; color:var(--text); border-color:#e3e6ef; transform: translateY(-1px);
}
.osf-menu li a.osf-current{
  background:#eef2ff;
  color:#1e293b; border-color:#dbe3ff; box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

/* Iconos y etiquetas */
.osf-menu__dot{
  width:16px; height:16px; border-radius:6px;
  background:linear-gradient(135deg,#e5e7eb,#f3f4f6);
  flex:0 0 16px; box-shadow:0 0 0 3px rgba(15,23,42,.04);
}
.osf-menu__iconimg{
  width:32px; height:32px; border-radius:8px; object-fit:cover; display:block; flex:0 0 32px;
}
.osf-menu__label{ min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:clamp(12px, 1.8vw, 15px); color:var(--text) }

/* Tamaño estándar de íconos en enlaces */
.osf-menu li a > svg,
.osf-menu li a > i,
.osf-menu li a > img,
.osf-menu li a > .icon,
.osf-menu li a [class*="icon"],
.osf-menu li a [class^="dashicons"]{
  flex:0 0 26px; width:26px; height:26px; min-width:26px;
  display:inline-flex; align-items:center; justify-content:center;
}
.osf-menu li a > img{ object-fit:contain; border-radius:6px }

/* Comportamiento escritorio: cerrado / abierto */
@media (min-width:1025px){
  .osf-sidebar .osf-menu li a{ justify-content:center; gap:0; padding-left:0; padding-right:0; }
  .osf-sidebar .osf-menu li a > :not(svg):not(i):not(img):not(.icon):not([class*="icon"]):not([class^="dashicons"]):not(.osf-menu__label){ display:none !important; }
  .osf-sidebar .osf-menu__label{ display:none !important; }

  .osf-sidebar:hover .osf-menu li a{ justify-content:flex-start; gap:12px; padding:12px; }
  .osf-sidebar:hover .osf-menu li a > :not(svg):not(i):not(img):not(.icon):not([class*="icon"]):not([class^="dashicons"]){ display:inline-flex !important; }
  .osf-sidebar:hover .osf-menu__label{ display:inline-block !important; }
}

/* Tooltip claro (solo hover-capable). En izquierda por defecto */
.osf-menu li a[data-title]{ position:relative }
@media (hover:hover){
  .osf-menu li a[data-title]::after{
    content:attr(data-title);
    position:fixed; left:calc(var(--sb-collapsed) + 10px);
    padding:8px 10px; background:var(--tooltip-bg);
    color:var(--text); border:1px solid var(--border); border-radius:10px; white-space:nowrap;
    transform:translateY(-50%); top:var(--_tipY, 0px);
    opacity:0; pointer-events:none; transition:opacity .12s ease;
    box-shadow:0 10px 20px rgba(15,23,42,.10); z-index:1000;
  }
  .osf-sidebar:not(:hover) .osf-menu li a:hover::after{ opacity:1 }
}
@media (hover:hover){
  body.osf-v-right .osf-menu li a[data-title]::after{
    right:calc(var(--sb-collapsed) + 10px); left:auto;
  }
}

/* =========================
   CONTENT
   ========================= */
.osf-main{ padding:clamp(12px, 2.2vw, 26px) }
.body--overlay .osf-sidebar,
.body--overlay .osf-hamburger{ display:none } /* en inicio no se ve nada debajo */

.entry{
  max-width:min(1000px, 92vw);
  margin:0 auto;
  background:#ffffff;
  border:1px solid var(--border);
  padding:clamp(14px, 2.2vw, 26px);
  border-radius:12px;
  box-shadow:0 2px 10px rgba(15,23,42,.04);
}
.entry h1{ margin-top:0; font-size:clamp(22px,3.5vw,34px); color:var(--text) }

/* =========================
   SUBMENÚ SUPERIOR
   ========================= */
.osf-submenu-top{
  position: sticky; top: 0; z-index: 998;
  display:flex; gap:8px; align-items:center; justify-content:center; width:100%;
  background:#ffffff;
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(6px) saturate(120%);
  padding:10px clamp(10px,3vw,24px);
  overflow:auto;
}
.osf-submenu-top a{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  border:1px solid var(--border); color:var(--text); font-size:14px;
  background:#ffffff;
  white-space:nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.osf-submenu-top a:hover{ background:#f6f7fb; border-color:#e3e6ef; }
.osf-submenu-top img{ width:22px; height:22px; border-radius:6px; object-fit:cover; display:block; }
.osf-submenu-top .osf-dot{ width:12px; height:12px; border-radius:4px; display:inline-block; background:#e5e7eb; }

/* =========================
   RESPONSIVE BREAKPOINTS
   ========================= */
@media (max-width: 480px){
  :root{ --sb-collapsed:56px; --sb-expanded:86vw; }
}
@media (min-width:481px) and (max-width: 768px){
  :root{ --sb-collapsed:58px; --sb-expanded:86vw; }
}
@media (min-width:769px) and (max-width: 1024px){
  :root{ --sb-collapsed:64px; --sb-expanded:300px; }
}
@media (min-width:1025px) and (max-width: 1366px){
  :root{ --sb-collapsed:68px; --sb-expanded:300px; }
}
@media (min-width:1367px){
  :root{ --sb-collapsed:72px; --sb-expanded:320px; }
}
@media (orientation:landscape) and (max-height: 520px){
  .osf-card{ height:100px }
}

/* =========================
   ACCESIBILIDAD / REDUCIR MOVIMIENTO
   ========================= */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* =========================
   BADGES / MISC
   ========================= */
.osf-badge{
  display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid var(--border); background:#ffffff; font-size:12px; color:var(--muted)
}