/*
Theme Name:  Blocksy IoT Child
Theme URI:   https://things2lab.com
Description: Child theme de Blocksy adaptado para startup IoT — dark mode, cian/azul eléctrico, tipografía moderna, bloques Gutenberg nativos. Elimina WPBakery.
Author:      Things2Lab
Author URI:  https://things2lab.com
Template:    blocksy
Version:     1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.1
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blocksy-iot-child
Tags:        dark-mode, iot, tech, gutenberg, full-site-editing
*/

/* ==========================================================================
   TOKENS DE DISEÑO IoT — Variables CSS globales
   Sobreescriben las variables de Blocksy en todos los contextos
   ========================================================================== */

:root {
	/* Fondo */
	--iot-bg-base:        #080c18;
	--iot-bg-surface:     #0e1528;
	--iot-bg-card:        #131d35;
	--iot-bg-elevated:    #1a2540;
	--iot-bg-overlay:     rgba(8, 12, 24, 0.92);

	/* Acentos principales */
	--iot-cyan:           #00d4ff;
	--iot-cyan-dim:       #00a8cc;
	--iot-cyan-glow:      rgba(0, 212, 255, 0.18);
	--iot-blue:           #1e6fff;
	--iot-blue-dim:       #1456cc;
	--iot-blue-glow:      rgba(30, 111, 255, 0.18);

	/* Acentos secundarios */
	--iot-purple:         #7c3aed;
	--iot-green:          #10b981;
	--iot-yellow:         #f59e0b;
	--iot-red:            #ef4444;

	/* Tipografía */
	--iot-text-primary:   #eef2ff;
	--iot-text-secondary: #94a3b8;
	--iot-text-muted:     #4b5a7a;
	--iot-text-link:      var(--iot-cyan);

	/* Bordes */
	--iot-border:         #1e2d4a;
	--iot-border-bright:  #2a3f66;
	--iot-border-glow:    rgba(0, 212, 255, 0.35);

	/* Radios */
	--iot-radius-sm:      6px;
	--iot-radius-md:      12px;
	--iot-radius-lg:      18px;
	--iot-radius-pill:    999px;

	/* Sombras */
	--iot-shadow-card:    0 4px 24px rgba(0, 0, 0, 0.5);
	--iot-shadow-glow:    0 0 32px rgba(0, 212, 255, 0.15);
	--iot-shadow-btn:     0 4px 20px rgba(30, 111, 255, 0.4);

	/* Transición estándar */
	--iot-transition:     0.22s cubic-bezier(0.4, 0, 0.2, 1);

	/* Fuentes */
	--iot-font-heading:   'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
	--iot-font-body:      'Inter', system-ui, sans-serif;
	--iot-font-mono:      'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

	/* Mapeado a variables de Blocksy */
	--theme-palette-color-1: var(--iot-cyan);
	--theme-palette-color-2: var(--iot-blue);
	--theme-palette-color-3: var(--iot-text-primary);
	--theme-palette-color-4: var(--iot-text-secondary);
	--theme-palette-color-5: var(--iot-bg-elevated);
	--theme-palette-color-6: var(--iot-bg-card);
	--theme-palette-color-7: var(--iot-bg-surface);
	--theme-palette-color-8: var(--iot-bg-base);
}

/* ==========================================================================
   BASE — Body, fondo, color de texto
   ========================================================================== */

html,
body {
	background-color: var(--iot-bg-base);
	color: var(--iot-text-primary);
	font-family: var(--iot-font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   TIPOGRAFÍA
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	font-family: var(--iot-font-heading);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--iot-text-primary);
}

h1 { font-size: clamp(2.25rem, 5vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
h3 { font-size: clamp(1.35rem, 2.5vw, 1.875rem); }
h4 { font-size: 1.25rem; }

p, li {
	font-family: var(--iot-font-body);
	color: var(--iot-text-secondary);
	line-height: 1.75;
	font-size: 1rem;
}

a {
	color: var(--iot-cyan);
	text-decoration: none;
	transition: color var(--iot-transition), opacity var(--iot-transition);
}

a:hover { color: #fff; opacity: 0.9; }

pre, code, kbd, samp {
	font-family: var(--iot-font-mono);
	font-size: 0.875rem;
	background: var(--iot-bg-elevated);
	color: var(--iot-cyan);
	border: 1px solid var(--iot-border);
	border-radius: var(--iot-radius-sm);
	padding: 0.15em 0.45em;
}

pre code {
	background: transparent;
	border: none;
	padding: 0;
}

pre {
	padding: 1.25rem 1.5rem;
	overflow-x: auto;
	line-height: 1.6;
}

/* ==========================================================================
   LAYOUT — Contenedor principal
   ========================================================================== */

.site-content,
.ct-container,
.entry-content,
.wp-site-blocks {
	background-color: var(--iot-bg-base);
}

.ct-container {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header,
#masthead,
.ct-header {
	background-color: var(--iot-bg-overlay) !important;
	backdrop-filter: blur(16px) saturate(1.4);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	border-bottom: 1px solid var(--iot-border);
	position: sticky;
	top: 0;
	z-index: 100;
	transition: background var(--iot-transition), box-shadow var(--iot-transition);
}

.site-header.scrolled {
	box-shadow: 0 4px 32px rgba(0, 0, 0, 0.6);
}

/* Logo */
.site-title a,
.ct-site-title-text {
	font-family: var(--iot-font-heading);
	font-weight: 800;
	font-size: 1.3rem;
	color: var(--iot-text-primary) !important;
	letter-spacing: -0.03em;
}

.site-title a span,
.ct-site-title-text span {
	color: var(--iot-cyan);
}

/* Navegación */
.ct-header-desktop-nav a,
.main-navigation a,
.nav-menu a {
	font-family: var(--iot-font-body);
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--iot-text-secondary) !important;
	letter-spacing: 0.01em;
	transition: color var(--iot-transition);
}

.ct-header-desktop-nav a:hover,
.main-navigation a:hover,
.nav-menu a:hover,
.ct-header-desktop-nav .current-menu-item > a {
	color: var(--iot-cyan) !important;
}

/* ==========================================================================
   BOTONES
   ========================================================================== */

.wp-block-button__link,
.ct-button,
button,
input[type="submit"],
.button,
.btn {
	font-family: var(--iot-font-body);
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: 0.03em;
	border-radius: var(--iot-radius-md);
	padding: 0.7rem 1.6rem;
	transition: all var(--iot-transition);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/* Botón primario — azul degradado */
.wp-block-button.is-style-primary .wp-block-button__link,
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.ct-button,
button:not(.outline),
input[type="submit"] {
	background: linear-gradient(135deg, var(--iot-blue), var(--iot-cyan));
	color: #fff !important;
	border: none;
	box-shadow: var(--iot-shadow-btn);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.ct-button:hover,
button:not(.outline):hover,
input[type="submit"]:hover {
	background: linear-gradient(135deg, var(--iot-blue-dim), var(--iot-cyan-dim));
	box-shadow: 0 6px 28px rgba(30, 111, 255, 0.55);
	transform: translateY(-1px);
}

/* Botón outline */
.wp-block-button.is-style-outline .wp-block-button__link,
button.outline {
	background: transparent;
	color: var(--iot-cyan) !important;
	border: 1.5px solid var(--iot-cyan);
	box-shadow: none;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
button.outline:hover {
	background: var(--iot-cyan-glow);
	box-shadow: 0 0 20px var(--iot-cyan-glow);
}

/* Botón ghost (texto + icono) */
.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--iot-text-secondary) !important;
	border: 1.5px solid var(--iot-border-bright);
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	border-color: var(--iot-cyan);
	color: var(--iot-cyan) !important;
}

/* ==========================================================================
   FORMULARIOS
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
	background: var(--iot-bg-elevated);
	color: var(--iot-text-primary);
	border: 1.5px solid var(--iot-border);
	border-radius: var(--iot-radius-md);
	padding: 0.65rem 1rem;
	font-family: var(--iot-font-body);
	font-size: 0.95rem;
	width: 100%;
	transition: border-color var(--iot-transition), box-shadow var(--iot-transition);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--iot-cyan);
	box-shadow: 0 0 0 3px var(--iot-cyan-glow);
}

input::placeholder,
textarea::placeholder {
	color: var(--iot-text-muted);
}

label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--iot-text-secondary);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	display: block;
	margin-bottom: 0.4rem;
}

/* ==========================================================================
   TARJETAS GENÉRICAS
   ========================================================================== */

.ct-card,
.wp-block-group.iot-card,
article.post,
.ct-blog-post-card {
	background: var(--iot-bg-card);
	border: 1px solid var(--iot-border);
	border-radius: var(--iot-radius-lg);
	overflow: hidden;
	box-shadow: var(--iot-shadow-card);
	transition: transform var(--iot-transition), border-color var(--iot-transition), box-shadow var(--iot-transition);
}

.ct-card:hover,
.wp-block-group.iot-card:hover,
.ct-blog-post-card:hover {
	transform: translateY(-4px);
	border-color: var(--iot-border-glow);
	box-shadow: var(--iot-shadow-glow), var(--iot-shadow-card);
}

/* ==========================================================================
   BLOQUES GUTENBERG — Estilos globales
   ========================================================================== */

/* Separador */
.wp-block-separator {
	border-color: var(--iot-border);
	opacity: 1;
}

.wp-block-separator.is-style-wide {
	border-color: var(--iot-cyan);
	border-width: 2px;
}

/* Cita */
.wp-block-quote {
	border-left: 4px solid var(--iot-cyan);
	padding-left: 1.5rem;
	margin-left: 0;
	background: var(--iot-bg-elevated);
	border-radius: 0 var(--iot-radius-md) var(--iot-radius-md) 0;
	padding: 1.25rem 1.5rem;
}

.wp-block-quote p { color: var(--iot-text-primary); font-style: italic; }
.wp-block-quote cite { font-size: 0.8rem; color: var(--iot-cyan); }

/* Tabla */
.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table td,
.wp-block-table th {
	border: 1px solid var(--iot-border);
	padding: 0.75rem 1rem;
	color: var(--iot-text-secondary);
}

.wp-block-table th {
	background: var(--iot-bg-elevated);
	color: var(--iot-text-primary);
	font-family: var(--iot-font-heading);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.wp-block-table tr:hover td {
	background: var(--iot-bg-elevated);
}

/* Portada / Cover */
.wp-block-cover {
	border-radius: var(--iot-radius-lg);
	overflow: hidden;
	border: 1px solid var(--iot-border);
}

/* Columnas */
.wp-block-columns {
	gap: clamp(1rem, 3vw, 2.5rem);
}

/* Imagen */
.wp-block-image img {
	border-radius: var(--iot-radius-md);
	border: 1px solid var(--iot-border);
}

/* ==========================================================================
   GRID DE POSTS / BLOG
   ========================================================================== */

.ct-blog-grid,
.ct-posts-container {
	gap: 1.5rem;
}

.ct-blog-post-card .entry-title a {
	font-family: var(--iot-font-heading);
	color: var(--iot-text-primary);
}

.ct-blog-post-card .entry-title a:hover { color: var(--iot-cyan); }

.ct-blog-post-card .entry-meta,
.entry-meta,
.posted-on,
.byline {
	font-size: 0.78rem;
	color: var(--iot-text-muted);
	font-family: var(--iot-font-mono);
}

/* Categorías / Tags */
.cat-links a,
.tags-links a,
.wp-block-post-terms a {
	background: var(--iot-bg-elevated);
	color: var(--iot-cyan);
	border: 1px solid var(--iot-border);
	border-radius: var(--iot-radius-pill);
	padding: 0.2em 0.75em;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	transition: background var(--iot-transition), border-color var(--iot-transition);
}

.cat-links a:hover,
.tags-links a:hover {
	background: var(--iot-cyan-glow);
	border-color: var(--iot-cyan);
	color: #fff;
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.ct-sidebar .widget,
#secondary .widget {
	background: var(--iot-bg-card);
	border: 1px solid var(--iot-border);
	border-radius: var(--iot-radius-lg);
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}

.widget-title,
.widgettitle {
	font-family: var(--iot-font-heading);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--iot-cyan);
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--iot-border);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer,
#colophon,
.ct-footer {
	background: var(--iot-bg-surface) !important;
	border-top: 1px solid var(--iot-border);
	color: var(--iot-text-secondary);
}

.site-footer a { color: var(--iot-text-secondary); }
.site-footer a:hover { color: var(--iot-cyan); }

.ct-footer-widgets .widget-title { color: var(--iot-cyan); }

/* ==========================================================================
   EFECTOS DECORATIVOS IoT — grid de puntos, líneas de scan, glow
   ========================================================================== */

/* Fondo punteado sutil en secciones hero */
.iot-grid-bg {
	background-image:
		radial-gradient(circle, var(--iot-border) 1px, transparent 1px);
	background-size: 28px 28px;
	background-position: 0 0;
}

/* Línea de scan animada (para elementos de estado/dashboard) */
@keyframes iot-scan {
	0%   { transform: translateY(-100%); }
	100% { transform: translateY(100vh); }
}

.iot-scan-line::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	height: 2px;
	background: linear-gradient(to right, transparent, var(--iot-cyan), transparent);
	animation: iot-scan 4s linear infinite;
	pointer-events: none;
}

/* Pulso de punto de estado */
@keyframes iot-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%       { opacity: 0.4; transform: scale(0.85); }
}

.iot-status-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--iot-green);
	animation: iot-pulse 2s ease-in-out infinite;
	box-shadow: 0 0 6px var(--iot-green);
}

.iot-status-dot.offline  { background: var(--iot-red);    box-shadow: 0 0 6px var(--iot-red); }
.iot-status-dot.warning  { background: var(--iot-yellow); box-shadow: 0 0 6px var(--iot-yellow); }

/* Badge de dato en tiempo real */
.iot-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--iot-font-mono);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.25rem 0.65rem;
	border-radius: var(--iot-radius-pill);
	border: 1px solid currentColor;
}

.iot-badge.live    { color: var(--iot-green);  border-color: var(--iot-green);  background: rgba(16, 185, 129, 0.1); }
.iot-badge.sensor  { color: var(--iot-cyan);   border-color: var(--iot-cyan);   background: var(--iot-cyan-glow); }
.iot-badge.alert   { color: var(--iot-yellow); border-color: var(--iot-yellow); background: rgba(245, 158, 11, 0.1); }

/* Tarjeta de métrica de sensor */
.iot-metric-card {
	background: var(--iot-bg-card);
	border: 1px solid var(--iot-border);
	border-radius: var(--iot-radius-lg);
	padding: 1.5rem;
	position: relative;
	overflow: hidden;
	transition: all var(--iot-transition);
}

.iot-metric-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(to right, var(--iot-blue), var(--iot-cyan));
}

.iot-metric-card:hover {
	border-color: var(--iot-border-glow);
	box-shadow: var(--iot-shadow-glow);
}

.iot-metric-value {
	font-family: var(--iot-font-mono);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	color: var(--iot-cyan);
	line-height: 1;
}

.iot-metric-label {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--iot-text-muted);
	margin-top: 0.35rem;
}

/* ==========================================================================
   WOOCOMMERCE — dark mode
   ========================================================================== */

.woocommerce,
.woocommerce-page {
	background: var(--iot-bg-base);
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: var(--iot-bg-card);
	border: 1px solid var(--iot-border);
	border-radius: var(--iot-radius-lg);
	overflow: hidden;
	transition: all var(--iot-transition);
}

.woocommerce ul.products li.product:hover {
	border-color: var(--iot-border-glow);
	box-shadow: var(--iot-shadow-glow);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--iot-font-heading);
	color: var(--iot-text-primary);
}

.woocommerce ul.products li.product .price {
	color: var(--iot-cyan);
	font-family: var(--iot-font-mono);
	font-weight: 700;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background: linear-gradient(135deg, var(--iot-blue), var(--iot-cyan));
	color: #fff !important;
	border: none;
	border-radius: var(--iot-radius-md);
	font-weight: 600;
	transition: all var(--iot-transition);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover {
	box-shadow: var(--iot-shadow-btn);
	transform: translateY(-1px);
}

/* ==========================================================================
   SCROLLBAR personalizada (Chromium/WebKit)
   ========================================================================== */

::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: var(--iot-bg-surface); }
::-webkit-scrollbar-thumb        { background: var(--iot-border-bright); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: var(--iot-cyan); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
	h1 { font-size: 2rem; }
	h2 { font-size: 1.6rem; }
	h3 { font-size: 1.25rem; }

	.ct-container { padding-inline: 1rem; }

	.wp-block-columns { flex-direction: column; }
}

/* ==========================================================================
   UTILIDADES
   ========================================================================== */

.text-cyan    { color: var(--iot-cyan) !important; }
.text-blue    { color: var(--iot-blue) !important; }
.text-muted   { color: var(--iot-text-muted) !important; }
.bg-card      { background-color: var(--iot-bg-card) !important; }
.bg-elevated  { background-color: var(--iot-bg-elevated) !important; }
.border-glow  { border-color: var(--iot-border-glow) !important; }
.font-mono    { font-family: var(--iot-font-mono) !important; }
.font-heading { font-family: var(--iot-font-heading) !important; }