/*
	Beresoft · Tema claro
	Se activa cuando <html> tiene la clase "tema-claro" (lo gestiona assets/js/tema.js).
	No modifica main.css: solo sobrescribe colores. Acento naranja (#f59432) igual que el tema oscuro.
*/

/* ---------- Fondo general ---------- */
html.tema-claro body,
html.tema-claro #wrapper.fade-in::before { background-color: #eceef1; }
html.tema-claro body { color: #212931; }
html.tema-claro #wrapper > .bg { background-color: #eceef1; background-image: none; }

/* ---------- Cabecera, portada y copyright (van sobre el fondo) ---------- */
html.tema-claro #intro,
html.tema-claro #intro h1, html.tema-claro #intro p,
html.tema-claro #header, html.tema-claro #header a { color: #212931; }
html.tema-claro #header .logo { color: #212931; border-color: #212931; }
html.tema-claro #header .logo:hover { color: #f59432; border-color: #f59432; }
html.tema-claro #intro .button { color: #212931 !important; box-shadow: inset 0 0 0 2px #212931; }
html.tema-claro #intro .button::before { color: #212931 !important; }
html.tema-claro #intro .button:hover { color: #f59432 !important; box-shadow: inset 0 0 0 2px #f59432; }
html.tema-claro #copyright { color: rgba(33, 41, 49, 0.5); }
html.tema-claro #copyright a { color: rgba(33, 41, 49, 0.7); }

/* ---------- Menú ---------- */
html.tema-claro #nav { background-color: #ffffff; color: #212931; box-shadow: 0 1px 0 rgba(33, 41, 49, 0.08); }
html.tema-claro #nav a { color: #212931; }
html.tema-claro #nav a:hover { color: #f59432; }
html.tema-claro #nav ul.links li a:hover { background-color: rgba(33, 41, 49, 0.06); }
html.tema-claro #nav ul.links li.active { background-color: #212931; }
html.tema-claro #nav ul.links li.active a { color: #ffffff; }
html.tema-claro #nav ul.links li.active a:hover { color: #f59432; }

/* Menú móvil */
html.tema-claro #navPanel { background-color: #ffffff; color: #212931; }
html.tema-claro #navPanel a { color: #212931; }
html.tema-claro #navPanel .links li { border-top-color: #e2e4e7; }
html.tema-claro #navPanel .close { color: #717981; }
html.tema-claro #navPanelToggle { color: #212931; }
html.tema-claro #navPanelToggle.alt { color: #212931; background-color: rgba(255, 255, 255, 0.95); }

/* ---------- Contenido principal ---------- */
html.tema-claro #main { background-color: #ffffff; color: #3d454d; }
html.tema-claro #main h1, html.tema-claro #main h2, html.tema-claro #main h3,
html.tema-claro #main h4, html.tema-claro #main h5, html.tema-claro #main h6,
html.tema-claro #main strong, html.tema-claro #main b,
html.tema-claro #main header.major p,
html.tema-claro #main .posts article p,
html.tema-claro #main label, html.tema-claro #main th { color: #212931; }
html.tema-claro #main p, html.tema-claro #main li, html.tema-claro #main td { color: #3d454d; }
html.tema-claro #main a { color: #212931; border-bottom-color: rgba(33, 41, 49, 0.35); }
html.tema-claro #main a:hover { color: #f59432; border-bottom-color: transparent; }
html.tema-claro #main small, html.tema-claro #main small em { color: #717981; }

html.tema-claro #main > * { border-top-color: #e2e4e7; }
html.tema-claro #main > .posts > article { border-color: #e2e4e7; }
html.tema-claro header.major .date::before,
html.tema-claro header.major .date::after { border-top-color: #d4d7db; }
html.tema-claro hr { border-bottom-color: #e2e4e7; }
html.tema-claro .box { border-color: #e2e4e7; }
html.tema-claro blockquote { border-left-color: #d4d7db; }

/* Botones del contenido */
html.tema-claro #main .button,
html.tema-claro #main input[type="submit"] { color: #212931 !important; box-shadow: inset 0 0 0 2px #212931; }
html.tema-claro #main .button:hover,
html.tema-claro #main input[type="submit"]:hover { color: #f59432 !important; box-shadow: inset 0 0 0 2px #f59432; }

/* Tablas (página Kit Digital) */
html.tema-claro table tbody tr { border-color: #e2e4e7; }
html.tema-claro table tbody tr:nth-child(2n+1) { background-color: rgba(33, 41, 49, 0.035); }
html.tema-claro table thead { border-bottom-color: #d4d7db; }
html.tema-claro table.alt tbody tr td { border-color: #e2e4e7; }

/* ---------- Pie ---------- */
html.tema-claro #footer { background-color: #f5f6f8; color: #5c636a; }
html.tema-claro #footer p, html.tema-claro #footer label,
html.tema-claro #footer h3, html.tema-claro #footer strong { color: #3d454d; }
html.tema-claro #footer a { color: #212931; border-bottom-color: rgba(33, 41, 49, 0.35); }
html.tema-claro #footer a:hover { color: #f59432; border-bottom-color: transparent; }
html.tema-claro #footer > section { border-left-color: #dcdfe3; }
html.tema-claro #footer > section.split > section { border-top-color: #dcdfe3; }
html.tema-claro #footer input[type="text"],
html.tema-claro #footer input[type="email"],
html.tema-claro #footer textarea { color: #212931; border-color: #c9cdd2; background-color: #ffffff; }
html.tema-claro #footer input[type="text"]:focus,
html.tema-claro #footer input[type="email"]:focus,
html.tema-claro #footer textarea:focus { border-color: #f59432; }
html.tema-claro #footer input[type="checkbox"] + label { color: #3d454d; }
html.tema-claro #footer input[type="checkbox"] + label::before { border-color: #c9cdd2; background-color: #ffffff; }
html.tema-claro #footer input[type="checkbox"]:checked + label::before { color: #ffffff; background-color: #212931; border-color: #212931; }
html.tema-claro #footer input[type="submit"] { color: #212931 !important; box-shadow: inset 0 0 0 2px #212931; }
html.tema-claro #footer input[type="submit"]:hover { color: #f59432 !important; box-shadow: inset 0 0 0 2px #f59432; }
@media screen and (max-width: 980px) {
	html.tema-claro #footer > section { border-top-color: #dcdfe3; }
}

/* ---------- Clientes: los logotipos son los oficiales y no se alteran.
   En modo claro la rejilla lleva un fondo gris pizarra, oscuro sin ser negro, para que los logotipos blancos se lean. ---------- */
html.tema-claro .logos-clientes { background-color: #36414d; border-radius: 4px; }

/* ---------- Imágenes con versión para cada tema ---------- */
.solo-claro { display: none !important; }
html.tema-claro .solo-oscuro { display: none !important; }
html.tema-claro .solo-claro { display: block !important; }