/* ==========================================================================
   SIIMP · Ajustes manuales del TEMA CLARO
   El tema claro se genera solo (js/tema.js). Aquí van los detalles que la
   conversión automática no resuelve bien. Todo empieza con
   html[data-tema="claro"] para no afectar al tema oscuro.
   ========================================================================== */

/* ---------- Botón ☀️ / 🌙 ---------- */
.tema-boton {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0; border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.55); color: #fbbf24;
    cursor: pointer; transition: background 0.2s, transform 0.2s;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.tema-boton:hover { transform: rotate(-12deg); background: rgba(15, 23, 42, 0.8); }
.tema-boton:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.tema-boton-flotante { position: fixed; left: 14px; bottom: 14px; z-index: 5000; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); }
html[data-tema="claro"] .tema-boton { background: #ffffff; color: #475569; border-color: rgba(15, 23, 42, 0.15); }
html[data-tema="claro"] .tema-boton:hover { background: #f1f5f9; }
html[data-tema="claro"] .tema-boton-flotante { box-shadow: 0 4px 16px rgba(15, 23, 42, 0.15); }

/* ---------- Generales ---------- */
html[data-tema="claro"] { color-scheme: light; }
html[data-tema="claro"] ::selection { background: rgba(59, 130, 246, 0.25); }
html[data-tema="claro"] input[type="date"],
html[data-tema="claro"] input[type="number"],
html[data-tema="claro"] select { color-scheme: light; }

/* ---------- Encabezado: el botón en la misma línea que el menú ---------- */
.nav-links { align-items: center; }
#tema-boton-lugar { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 6px; }
#tema-boton-lugar:not(.tema-en-barra) .tema-boton { width: 34px; height: 34px; }

/* ---------- Verticalidad: botón flotante por encima de la barra de pestañas en celular ---------- */
@media (max-width: 900px) { .tema-boton-flotante { bottom: 84px; } }

/* ---------- Portal: botón destacado "Verticalidad" ---------- */
html[data-tema="claro"] .bottom-nav-item.nav-item-verticalidad {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(34, 211, 238, 0.10));
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.15);
}
html[data-tema="claro"] .nav-item-verticalidad > span {
    background-image: linear-gradient(135deg, #1e3a8a 20%, #0284c7);   /* azul marino → azul, sin "corte" negro */
}
html[data-tema="claro"] .nav-item-verticalidad::after {
    background-image: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.7), transparent);   /* brillo blanco */
}

/* ---------- Portal: botón de tema dentro de la barra de herramientas inferior ---------- */
.tema-en-barra { margin-left: 0; }
.tema-en-barra .tema-boton {
    width: 40px; height: 36px; border-radius: 30px;
    background: transparent; border: 1px solid transparent; box-shadow: none;
    color: #9ca3af; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.tema-en-barra .tema-boton:hover { transform: none; color: #fbbf24; background: rgba(255, 255, 255, 0.05); }
html[data-tema="claro"] .tema-en-barra .tema-boton { background: transparent; border-color: transparent; color: #1f2937; }
html[data-tema="claro"] .tema-en-barra .tema-boton:hover { color: #1e3a8a; background: rgba(15, 23, 42, 0.05); }

/* Verticalidad: botones Construido / Proyectado en el 3D */
html[data-tema="claro"] #capas-3d .capa-btn { color: #1c233b; background: rgba(255, 251, 238, 0.85); border-color: rgba(28, 35, 59, 0.18); box-shadow: 0 2px 8px rgba(28, 35, 59, 0.12); }
html[data-tema="claro"] #capas-3d .capa-btn:hover { background: rgba(255, 251, 238, 1); }
html[data-tema="claro"] #capas-3d .punto-construido { background: #64748b; }