/*
 * Tema claro/oscuro del Portal Cobra (B9).
 *
 * Fuente de la regla: requerimiento B9 (modo oscuro manual) y los tokens de Identidad Cobra (B3, keycloak-cobra,
 * themes/cobra/common/resources/css/cobra-components.css). El Portal usa una plantilla Bootstrap 4 con colores fijos
 * en style.css, maincard.css y launcher.css; en lugar de reescribirlas, esta hoja se carga AL FINAL (header.php) y:
 *
 *   1. define tokens --cobra-* claros en :root y oscuros bajo html[data-cobra-theme="dark"];
 *   2. corrige el contraste AA del modo claro (texto #808080 -> #6b6b6b, botón/enlaces #2e7eed -> #1d64d8,
 *      bordes de control #ccc -> #6b7f9e, etc.);
 *   3. sobrescribe la plantilla en modo oscuro;
 *   4. estiliza el botón .cobra-theme-toggle, y deja los logos y fotos sin filtro.
 *
 * El atributo data-cobra-theme lo pone public/js/cobra-theme.js (copia de B3) antes del primer pintado. Sin JavaScript
 * el sitio queda en modo claro y el botón permanece oculto. No hay transiciones globales.
 */

/* ===== 1. Tokens ===== */
:root {
  --cobra-bg: #fff;
  --cobra-surface: #fff;
  --cobra-surface-2: #fafafa;
  --cobra-border: #e5e5e5;
  /* Separadores y marcos de contenedores (no son controles): conservan el gris de la plantilla en modo claro. */
  --cobra-divider: #ccc;
  /* Borde de controles de formulario: 3:1 mínimo sobre el fondo (WCAG 1.4.11). */
  --cobra-control-border: #6b7f9e;
  --cobra-control-hover: #4f6485;
  --cobra-heading: #000;
  --cobra-ink: #212529;
  --cobra-muted: #6b6b6b;
  --cobra-link: #1d64d8;
  --cobra-primary: #1d64d8;
  --cobra-primary-hover: #17478f;
  --cobra-blue: #17478f;
  --cobra-danger: #b0352a;
  --cobra-danger-bg: #fdecea;
  --cobra-success: #1f7a45;
  --cobra-success-bg: #e6f5ec;
  --cobra-warning: #856404;
  --cobra-warning-bg: #fff3cd;
  --cobra-focus: #1d64d8;
  --cobra-shadow: rgba(0, 0, 0, .08);
  --cobra-footer: #1a1b1f;
}

html[data-cobra-theme="dark"] {
  --cobra-bg: #0f1726;
  --cobra-surface: #162136;
  --cobra-surface-2: #1d2b46;
  --cobra-border: #2d3f60;
  --cobra-divider: #2d3f60;
  --cobra-control-border: #6a7fa3;
  --cobra-control-hover: #8ea3c4;
  --cobra-heading: #f3f6fb;
  --cobra-ink: #e4eaf4;
  --cobra-muted: #a8b6cb;
  --cobra-link: #8cbcff;
  --cobra-primary: #1f5bbf;
  --cobra-primary-hover: #17478f;
  --cobra-blue: var(--cobra-link);
  --cobra-danger: #ff6b60;
  --cobra-danger-bg: #2a1a20;
  --cobra-success: #6fd39b;
  --cobra-success-bg: #16301f;
  --cobra-warning: #f0c36d;
  --cobra-warning-bg: #2e2613;
  --cobra-focus: #8cbcff;
  --cobra-shadow: rgba(0, 0, 0, .45);
  --cobra-footer: #0a101c;
  background: #0f1726;
  color-scheme: dark;
}

/* ===== 2. Base: texto, enlaces, botones, formularios (ambos modos) ===== */
body { background: var(--cobra-bg); color: var(--cobra-ink); }
h1, h2, h3, h4, h5, h6 { color: var(--cobra-heading); }
p, li, blockquote, label { color: var(--cobra-muted); }
.form-control::-webkit-input-placeholder { color: var(--cobra-muted); opacity: 1; }
.form-control::placeholder { color: var(--cobra-muted); opacity: 1; }
a:focus, a:hover { color: var(--cobra-link); }

.btn-main, .btn-main-md, .btn-main-sm { background: var(--cobra-primary); color: #fff; }
.btn-main:hover, .btn-main-md:hover, .btn-main-sm:hover { background: var(--cobra-primary-hover); color: #fff; }
.btn-main:focus-visible, .btn-main-md:focus-visible, .btn-main-sm:focus-visible,
.cobra-theme-toggle:focus-visible { outline: 2px solid var(--cobra-focus); outline-offset: 2px; }
.bg-blue, .icon-box, .scroll-top-to, .video .video-box a i, .team-sm .image .social-links { background: var(--cobra-primary); }

.form-control { border-color: var(--cobra-control-border); }
.form-control.main { border: 1px solid var(--cobra-control-border); }
.form-control.main:focus { border-color: var(--cobra-focus); }
.form-control:focus { border-color: var(--cobra-focus); box-shadow: 0 0 0 .15rem rgba(29, 100, 216, .25); }
.form-control-main label a, .main-nav .navbar-nav .nav-item.active .nav-link,
.main-nav .dropdown .dropdown-menu .dropdown-item.active, .main-nav .dropdown .dropdown-menu .dropdown-item.focus,
.main-nav .dropdown .dropdown-menu .dropdown-item:focus, .main-nav .dropdown .dropdown-menu .dropdown-item:hover { color: var(--cobra-link); }
.main-nav .navbar-nav .nav-item.active .nav-link:before { background: var(--cobra-link); }
.user-login .block .content { border-color: var(--cobra-divider); }
.user-login .block .content .title-text h3 { border-bottom-color: var(--cobra-divider); }
.user-login .block .content .new-acount p a { color: var(--cobra-heading); text-decoration: underline; }

/* Contraste AA en claro de piezas con texto gris de la plantilla */
.privacy .privacy-nav ul li a { color: var(--cobra-muted); }
.privacy .privacy-nav ul li a.active { color: var(--cobra-heading); }
.testimonial .testimonial-slider .item .block p { color: var(--cobra-muted); }
.coming-soon .block h3 { color: var(--cobra-muted); }
/* Confirmación de copiado de secret/share.php y secret/view.php (antes verde fijo) */
.cobra-copy-feedback { color: var(--cobra-success); }
.card .content .details h2 span { color: var(--cobra-muted); opacity: 1; }

/* Pie: fondo siempre oscuro; enlaces y copyright con contraste AA */
.footer-main { background: var(--cobra-footer); }
.footer-main .block-2 ul li a { color: #9aa3ad; }
.footer-main .block-2 ul li a:hover { color: #fff; }
footer .bg-dark .text-secondary { color: #adb5bd !important; }

/* Logos del encabezado: dos <img> alternados según el tema. El oscuro es blanco sobre transparente. */
.cobra-only-dark { display: none; }
html[data-cobra-theme="dark"] .cobra-only-light { display: none; }
html[data-cobra-theme="dark"] .cobra-only-dark { display: inline-block; }
/* Misma altura de la marca en ambos modos (el logo oscuro es más bajo): la barra no cambia de alto al alternar */
.main-nav .navbar-brand { display: inline-flex; align-items: center; min-height: 75px; }
.main-nav .navbar-brand img { height: auto; width: auto; }

/* ===== 3. Botón de modo oscuro ===== */
/* Sin JavaScript el botón no tiene función: cobra-theme.js marca <html data-cobra-theme>. */
.cobra-theme-toggle { display: none; }
html[data-cobra-theme] .cobra-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  align-self: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--cobra-control-border);
  border-radius: 50%;
  background: var(--cobra-surface);
  color: var(--cobra-blue);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
html[data-cobra-theme] .cobra-theme-toggle:hover { background: var(--cobra-surface-2); border-color: var(--cobra-control-hover); }
.cobra-theme-toggle [data-cobra-theme-icon] { display: inline-flex; line-height: 0; }
@media (prefers-reduced-motion: reduce) { .cobra-theme-toggle { transition: none !important; } }

/* ===== 4. Modo oscuro: plantilla y Bootstrap 4 ===== */
html[data-cobra-theme="dark"] body { background: var(--cobra-bg); color: var(--cobra-ink); }
html[data-cobra-theme="dark"] .main-nav { background: var(--cobra-surface); border-bottom: 1px solid var(--cobra-border); }
html[data-cobra-theme="dark"] .main-nav .navbar-nav .nav-item .nav-link { color: var(--cobra-heading); }
html[data-cobra-theme="dark"] .main-nav .navbar-nav .nav-item.active .nav-link { color: var(--cobra-link); }
html[data-cobra-theme="dark"] .navbar-toggler { color: var(--cobra-ink); }
html[data-cobra-theme="dark"] .dropdown-menu { background: var(--cobra-surface); border-color: var(--cobra-border); color: var(--cobra-ink); box-shadow: 0 10px 30px var(--cobra-shadow); }
html[data-cobra-theme="dark"] .dropdown-item { color: var(--cobra-ink); }
html[data-cobra-theme="dark"] .main-nav .dropdown .dropdown-menu .dropdown-item:hover,
html[data-cobra-theme="dark"] .main-nav .dropdown .dropdown-menu .dropdown-item:focus { background: var(--cobra-surface-2); color: var(--cobra-link); }
html[data-cobra-theme="dark"] .dropdown-divider { border-top-color: var(--cobra-border); }

html[data-cobra-theme="dark"] .shadow,
html[data-cobra-theme="dark"] .service .service-box, html[data-cobra-theme="dark"] .job-list .block,
html[data-cobra-theme="dark"] .privacy .block, html[data-cobra-theme="dark"] .user-login .block .image img,
html[data-cobra-theme="dark"] .coming-soon .block .count-down .syotimer-cell { box-shadow: 0 7px 20px 0 var(--cobra-shadow); }
html[data-cobra-theme="dark"] .shadow { box-shadow: 0 7px 20px 0 var(--cobra-shadow) !important; }

html[data-cobra-theme="dark"] .form-control, html[data-cobra-theme="dark"] .form-control.main {
  background-color: var(--cobra-surface);
  border-color: var(--cobra-control-border);
  color: var(--cobra-ink);
}
html[data-cobra-theme="dark"] .form-control:focus, html[data-cobra-theme="dark"] .form-control.main:focus {
  background-color: var(--cobra-surface);
  border-color: var(--cobra-focus);
  color: var(--cobra-ink);
  box-shadow: 0 0 0 .15rem rgba(140, 188, 255, .28);
}
html[data-cobra-theme="dark"] .form-control:disabled, html[data-cobra-theme="dark"] .form-control[readonly] {
  background-color: var(--cobra-surface-2);
  color: var(--cobra-muted);
}
html[data-cobra-theme="dark"] .form-control::-webkit-input-placeholder { color: #93a4bf; }
html[data-cobra-theme="dark"] .form-control::placeholder { color: #93a4bf; }
html[data-cobra-theme="dark"] .form-control option, html[data-cobra-theme="dark"] select option { background: var(--cobra-surface); color: var(--cobra-ink); }
html[data-cobra-theme="dark"] .input-group-text { background: var(--cobra-surface-2); border-color: var(--cobra-control-border); color: var(--cobra-ink); }

html[data-cobra-theme="dark"] .bg-gray, html[data-cobra-theme="dark"] .cta-hire,
html[data-cobra-theme="dark"] .footer-classic, html[data-cobra-theme="dark"] .privacy .privacy-nav,
html[data-cobra-theme="dark"] .faq .block .faq-item .item .accordion-block,
html[data-cobra-theme="dark"] .address .block .address-block .icon i { background: var(--cobra-surface-2); }
html[data-cobra-theme="dark"] .bg-white, html[data-cobra-theme="dark"] .services .service-block,
html[data-cobra-theme="dark"] .service .service-box, html[data-cobra-theme="dark"] .job-list .block,
html[data-cobra-theme="dark"] .privacy .block, html[data-cobra-theme="dark"] .coming-soon .block .count-down .syotimer-cell { background: var(--cobra-surface) !important; }
html[data-cobra-theme="dark"] .bg-light { background: var(--cobra-surface-2) !important; }
html[data-cobra-theme="dark"] .btn-light { background: var(--cobra-surface-2); border-color: var(--cobra-control-border); color: var(--cobra-ink); }
html[data-cobra-theme="dark"] .btn-light:hover { background: var(--cobra-surface); border-color: var(--cobra-control-hover); color: var(--cobra-heading); }
html[data-cobra-theme="dark"] .btn-outline-secondary { border-color: var(--cobra-control-border); color: var(--cobra-ink); }
html[data-cobra-theme="dark"] .btn-outline-secondary:hover { background: var(--cobra-surface-2); border-color: var(--cobra-control-hover); color: var(--cobra-heading); }
html[data-cobra-theme="dark"] .text-muted, html[data-cobra-theme="dark"] .text-secondary { color: var(--cobra-muted) !important; }
html[data-cobra-theme="dark"] .text-dark { color: var(--cobra-ink) !important; }
html[data-cobra-theme="dark"] footer .bg-dark { background: var(--cobra-surface) !important; }
html[data-cobra-theme="dark"] footer .bg-dark .text-secondary { color: #adb5bd !important; }

html[data-cobra-theme="dark"] .alert-danger, html[data-cobra-theme="dark"] .errors ul li { background: var(--cobra-danger-bg); border-color: var(--cobra-danger); color: var(--cobra-danger); }
html[data-cobra-theme="dark"] .alert-success { background: var(--cobra-success-bg); border-color: var(--cobra-success); color: var(--cobra-success); }
html[data-cobra-theme="dark"] .alert-warning { background: var(--cobra-warning-bg); border-color: var(--cobra-warning); color: var(--cobra-warning); }
html[data-cobra-theme="dark"] .alert a { color: inherit; text-decoration: underline; }

html[data-cobra-theme="dark"] .modal-content, html[data-cobra-theme="dark"] .jd-modal .modal-content { background: var(--cobra-surface); border-color: var(--cobra-border); color: var(--cobra-ink); }
html[data-cobra-theme="dark"] .modal-header, html[data-cobra-theme="dark"] .modal-footer { border-color: var(--cobra-border); }
html[data-cobra-theme="dark"] .jd-modal .modal-content .modal-header .modal-title,
html[data-cobra-theme="dark"] .jd-modal .modal-content .modal-body .block-2 .title p,
html[data-cobra-theme="dark"] .jd-modal .modal-content .modal-body .block-2 .details ul li span { color: var(--cobra-heading); }
html[data-cobra-theme="dark"] .close { color: var(--cobra-ink); text-shadow: none; opacity: .75; }
html[data-cobra-theme="dark"] .close:hover { color: var(--cobra-heading); opacity: 1; }

html[data-cobra-theme="dark"] .card { background: var(--cobra-surface-2); border-color: var(--cobra-border); box-shadow: 0 35px 80px var(--cobra-shadow); }
html[data-cobra-theme="dark"] .card-header { background: var(--cobra-surface); border-color: var(--cobra-border); }
/* Fichas blancas: el logo de cada app sigue sobre blanco porque son PNG con fondo propio */
html[data-cobra-theme="dark"] .imgBx { background: #fff; box-shadow: 0 15px 50px rgba(0, 0, 0, .55); }
html[data-cobra-theme="dark"] .card .content .details h2 { color: var(--cobra-ink); }
html[data-cobra-theme="dark"] .card .content .details h2 span { color: var(--cobra-muted); }

html[data-cobra-theme="dark"] pre { color: var(--cobra-ink); }
html[data-cobra-theme="dark"] .border, html[data-cobra-theme="dark"] .border-top, html[data-cobra-theme="dark"] .border-bottom { border-color: var(--cobra-border) !important; }
html[data-cobra-theme="dark"] hr { border-top-color: var(--cobra-control-border); }
html[data-cobra-theme="dark"] .user-login .block .content,
html[data-cobra-theme="dark"] .user-login .block .content .title-text h3 { border-color: var(--cobra-border); }
html[data-cobra-theme="dark"] .job-list .block .job:not(:last-child),
html[data-cobra-theme="dark"] .faq .block .faq-item .faq-item-title h2,
html[data-cobra-theme="dark"] .privacy .block .policy-item .title h3,
html[data-cobra-theme="dark"] .blog-single .about-author h2 { border-bottom-color: var(--cobra-border); }
html[data-cobra-theme="dark"] .faq .block .faq-item .item .item-link a,
html[data-cobra-theme="dark"] .featured-article article.featured .content h2 a,
html[data-cobra-theme="dark"] .post-sm .post-title h3 a,
html[data-cobra-theme="dark"] .testimonial .testimonial-slider .item .block cite,
html[data-cobra-theme="dark"] .feature .testimonial p,
html[data-cobra-theme="dark"] .coming-soon,
html[data-cobra-theme="dark"] .blog-single .single-post .post-body .quote blockquote,
html[data-cobra-theme="dark"] ul.social-links li a i { color: var(--cobra-ink); }
html[data-cobra-theme="dark"] .slider:before { border-bottom-color: var(--cobra-bg); }
html[data-cobra-theme="dark"] .coming-soon .block .count-down .syotimer-cell .syotimer-cell__unit { color: var(--cobra-muted); }
/* El degradado del encabezado de la portada (gradient-banner) es igual en ambos modos: texto blanco sobre azul. */

/* ===== 5. Launcher (dashboard) en modo oscuro ===== */
html[data-cobra-theme="dark"] .launcher {
  --suelo: #0f1726;
  --tinta: #e4eaf4;
  --suave: #a8b6cb;
  --marino: #f3f6fb;
  --azul: #8cbcff;
  --anillo: rgba(255, 255, 255, .22);
}
html[data-cobra-theme="dark"] .launcher .arana-anillo { stroke: rgba(142, 163, 196, .2); }
html[data-cobra-theme="dark"] .launcher .arana-hilo { stroke: rgba(142, 163, 196, .38); }
html[data-cobra-theme="dark"] .launcher .arana-hilo.es-activo { stroke: var(--azul); }
/* Círculo central y logos: fichas blancas (los logos de las apps son PNG con fondo blanco) */
html[data-cobra-theme="dark"] .launcher .arana-centro { --suave: #3e4f66; background: #fff; box-shadow: 0 0 0 1px var(--anillo), 0 16px 40px rgba(0, 0, 0, .5); }
html[data-cobra-theme="dark"] .launcher .nodo-logo { background: #fff; box-shadow: 0 0 0 1px var(--anillo), 0 8px 24px rgba(0, 0, 0, .45); }
html[data-cobra-theme="dark"] .launcher .nodo-logo::before { box-shadow: 0 18px 36px rgba(0, 0, 0, .6); }
html[data-cobra-theme="dark"] .launcher .nodo-logo i { color: #1d64d8; }
html[data-cobra-theme="dark"] .launcher .nodo-movil { background: var(--cobra-surface); border-color: var(--cobra-control-border); color: var(--cobra-heading); }

/*
 * Nombres atenuados: launcher.css los pinta #9AA6B8 (2.2:1 sobre claro) cuando otra app está señalada.
 * Mismo selector (misma especificidad) y se carga después, así que esta regla gana.
 */
.launcher .arana:has(.arana-nodo.es-activo) .arana-nodo:not(.es-activo) .nodo-nombre { color: #5f6f86; }
html[data-cobra-theme="dark"] .launcher .arana:has(.arana-nodo.es-activo) .arana-nodo:not(.es-activo) .nodo-nombre { color: #8a9ab3; }

/*
 * Nombre de la app señalada: launcher.css lo pinta con var(--azul) (#2E7EED, 3.67:1 sobre #F4F7FB).
 * En claro se usa #1d64d8 (5.05:1); el oscuro conserva var(--azul) (#8cbcff). Trazos y foco siguen con --azul.
 */
.launcher .es-activo .nodo-nombre { color: #1d64d8; }
html[data-cobra-theme="dark"] .launcher .es-activo .nodo-nombre { color: var(--azul); }