/*
 * EL TEMA GLOBAL: TODO PERFEX CON UNA APARIENCIA SIMILAR AL PLANNER STUDIO
 * (Q1 «B + tema global», R1 «un tema, no un parche»; T1, módulo 1.4.1).
 *
 * Qué hace: viste el área de administración, las dos pantallas de entrada y
 * el área de clientes de Perfex con la letra, la paleta y las formas del
 * diseño —píldoras, filetes finos, títulos en letra de títulos, fondo
 * suave— SIN TOCAR NI UNA LÍNEA DEL NÚCLEO. Lo carga ganchos/tema.php en
 * los ganchos oficiales `app_admin_head`, `app_admin_authentication_head` y
 * `app_customers_head`, DESPUÉS de las hojas del núcleo, así que a igual
 * especificidad gana esta.
 *
 * LO QUE ESTO NO ES: una copia del diseño pantalla por pantalla. Las
 * pantallas del Studio (Control Center, presupuestos…) se pintan con
 * studio.css y la carcasa; aquí solo se acerca lo que YA existe en Perfex
 * para que pasar de una a otra no parezca cambiar de programa.
 *
 * DECISIONES, CON SU PORQUÉ:
 *
 *  · PESO 400 EN PERFEX Y 300 EN EL STUDIO. El diseño usa Jost 300 en
 *    textos de 14–16 px con mucho aire. Perfex tiene tablas densas a
 *    13,5 px: en 300 se leen peor. Mismo color (tinta), un punto más de
 *    peso.
 *  · LOS COLORES DE ESTADO DE PERFEX SE RESPETAN. El estado de una boda, de
 *    una factura o de una tarea viene con su color guardado en la base
 *    (estilo en línea del núcleo) y ese color SIGNIFICA algo para la
 *    planner. Aquí solo se cambia la forma (píldora), nunca el color.
 *  · EL ROJO DE BORRAR SE QUEDA ROJO (--ls-peligro). Todo lo demás en tinta.
 *  · NINGÚN `!important` salvo donde el núcleo ya lo usa y no hay otra forma
 *    de ganarle (dicho en cada sitio).
 *  · EL PREFIJO DE ÁREA ES `body:where(.admin)`: la clase va dentro de
 *    :where(), que no suma especificidad, y queda solo el peso de «body».
 *    Así cada regla de aquí pesa lo mismo que la del núcleo que corrige
 *    (la misma forma de selector) MÁS una etiqueta, y gana; las reglas sobre
 *    etiquetas sueltas (h1–h3, a, label) pesan dos etiquetas, de modo que
 *    cualquier clase «ls-» de studio.css las vence. (Con `:where(body…)`
 *    entero el peso era cero y el `body { font-family: Inter }` del núcleo
 *    ganaba en el área de clientes: medido en el laboratorio.)
 *    Sin esto, `body.admin h2` pisaba el rótulo del menú del Studio (un h2
 *    con su clase) y lo ponía en letra de títulos: medido en el muestrario.
 *  · PIEDRA NUNCA ES COLOR DE TEXTO (no pasa AA; cabecera de studio.css).
 *
 * SI PERFEX CAMBIA SUS CLASES (3.4.1): se ajusta esta hoja; no hay nada que
 * re-parchear. Y si una actualización deja algo ilegible antes de que dé
 * tiempo a ajustarla, la opción `lovia_tema_global` = «0» apaga ESTA hoja
 * (el Studio sigue con la suya): ver ganchos/tema.php.
 */

/* ═══ 1. LO COMÚN A LAS TRES ÁREAS ═══ */
body:where(.admin),
body:where(.customers),
body:where(.login_admin, .authentication) {
  font-family: var(--ls-letra-texto);
  font-weight: 400;
  color: var(--ls-tinta);
  -webkit-font-smoothing: antialiased;
}
body:where(.admin) .btn,
body:where(.customers) .btn,
body:where(.login_admin, .authentication) .btn,
body:where(.admin) .form-control,
body:where(.customers) .form-control,
body:where(.login_admin, .authentication) .form-control,
body:where(.admin) .dropdown-menu,
body:where(.customers) .dropdown-menu,
body:where(.admin) .tooltip,
body:where(.admin) .popover,
body:where(.admin) input,
body:where(.admin) select,
body:where(.admin) textarea,
body:where(.admin) button,
body:where(.customers) input,
body:where(.customers) select,
body:where(.customers) textarea,
body:where(.customers) button {
  font-family: var(--ls-letra-texto);
}
body:where(.admin) b, body:where(.admin) strong,
body:where(.customers) b, body:where(.customers) strong { font-weight: 500; }

/* Los títulos grandes en letra de títulos. Solo h1–h3 y los títulos de
   página: un h4/h5 de Perfex es una etiqueta de 14 px, y en Cormorant a
   ese tamaño se leería peor. */
body:where(.admin) h1, body:where(.admin) h2, body:where(.admin) h3,
body:where(.customers) h1, body:where(.customers) h2, body:where(.customers) h3,
body:where(.login_admin, .authentication) h1 {
  font-family: var(--ls-letra-titulos);
  font-weight: 400;
  color: var(--ls-tinta);
  letter-spacing: 0;
}
/* Y SIN NEGRITA FABRICADA. Cormorant está alojada de 300 a 500 (la
   escala del diseño no usa más). Muchos títulos del núcleo llevan
   tw-font-bold (700) o tw-font-semibold (600) —p. ej. el h1 «Por favor
   inicie sesión» del área de clientes—, y una clase pesa más que las dos
   etiquetas de arriba: el navegador pedía un 700 que no existe y lo
   fabricaba engordando la letra, empastada (revisión 1 de T1). Aquí se
   repite la clase del núcleo dentro de :is() —una clase + dos etiquetas,
   gana a la clase sola— y se deja en 500, el más grueso que hay de verdad. */
body:where(.admin, .customers) :is(h1, h2, h3):is(.tw-font-bold, .tw-font-semibold),
body:where(.login_admin, .authentication) h1:is(.tw-font-bold, .tw-font-semibold) {
  font-weight: 500;
}

/* Enlaces: en tinta, con un subrayado fino para que se distingan del texto
   sin depender del color (WCAG 1.4.1). En menús, pestañas, botones y
   desplegables no hace falta subrayado: su forma ya dice que se pulsan. */
body:where(.admin) a,
body:where(.customers) a,
body:where(.login_admin, .authentication) a { color: var(--ls-tinta); }
body:where(.admin) a:hover, body:where(.admin) a:focus,
body:where(.customers) a:hover, body:where(.customers) a:focus,
body:where(.login_admin, .authentication) a:hover { color: var(--ls-cacao); }
body:where(.admin) .panel-body a:not(.btn):not(.label):not([role="tab"]):not(.dropdown-toggle),
body:where(.admin) table.table tbody a:not(.btn):not(.label),
body:where(.customers) .panel-body a:not(.btn):not(.label):not([role="tab"]):not(.dropdown-toggle),
body:where(.customers) table.table tbody a:not(.btn):not(.label) {
  text-decoration: underline;
  text-decoration-color: var(--ls-punto);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
body:where(.admin) .panel-body a:not(.btn):hover,
body:where(.customers) .panel-body a:not(.btn):hover { text-decoration-color: currentColor; }
/* El azul de «primario» de Perfex (tailwind .text-primary) pasa a tinta. */
body:where(.admin) .text-primary,
body:where(.admin) a.text-primary,
body:where(.customers) .text-primary { color: var(--ls-tinta); }

/* El foco del teclado, visible siempre y en tinta. */
body:where(.admin) :focus-visible,
body:where(.customers) :focus-visible,
body:where(.login_admin, .authentication) :focus-visible {
  outline: 2px solid var(--ls-tinta);
  outline-offset: 2px;
}

/* ─── Botones: píldoras ─── */
body:where(.admin) .btn,
body:where(.customers) .btn,
body:where(.login_admin, .authentication) .btn {
  border-radius: var(--ls-radio-pildora);
  font-weight: 400;
  box-shadow: none;
}
body:where(.admin) .btn-group > .btn { border-radius: 0; }
body:where(.admin) .btn-group > .btn:first-child { border-top-left-radius: var(--ls-radio-pildora); border-bottom-left-radius: var(--ls-radio-pildora); }
body:where(.admin) .btn-group > .btn:last-child,
body:where(.admin) .btn-group > .dropdown-toggle { border-top-right-radius: var(--ls-radio-pildora); border-bottom-right-radius: var(--ls-radio-pildora); }
body:where(.admin) .input-group .btn,
body:where(.customers) .input-group .btn { border-radius: 0 var(--ls-radio-campo) var(--ls-radio-campo) 0; }

body:where(.admin) .btn-primary,
body:where(.admin) .btn-success,
body:where(.admin) .btn-info,
body:where(.customers) .btn-primary,
body:where(.customers) .btn-success,
body:where(.customers) .btn-info,
body:where(.login_admin, .authentication) .btn-primary {
  background-color: var(--ls-tinta);
  border-color: var(--ls-tinta);
  color: var(--ls-blanco);
}
body:where(.admin) .btn-primary:hover, body:where(.admin) .btn-primary:focus, body:where(.admin) .btn-primary:active,
body:where(.admin) .btn-success:hover, body:where(.admin) .btn-success:focus, body:where(.admin) .btn-success:active,
body:where(.admin) .btn-info:hover, body:where(.admin) .btn-info:focus, body:where(.admin) .btn-info:active,
body:where(.customers) .btn-primary:hover, body:where(.customers) .btn-primary:focus,
body:where(.customers) .btn-success:hover, body:where(.customers) .btn-success:focus,
body:where(.customers) .btn-info:hover, body:where(.customers) .btn-info:focus,
body:where(.login_admin, .authentication) .btn-primary:hover, body:where(.login_admin, .authentication) .btn-primary:focus {
  background-color: var(--ls-grafito);
  border-color: var(--ls-grafito);
  color: var(--ls-blanco);
}
body:where(.admin) .btn-default,
body:where(.customers) .btn-default,
body:where(.login_admin, .authentication) .btn-default {
  background-color: var(--ls-blanco);
  border-color: var(--ls-filete);
  color: var(--ls-tinta);
}
body:where(.admin) .btn-default:hover, body:where(.admin) .btn-default:focus,
body:where(.customers) .btn-default:hover, body:where(.customers) .btn-default:focus {
  background-color: var(--ls-fondo);
  border-color: var(--ls-tinta);
  color: var(--ls-tinta);
}
body:where(.admin) .btn-danger,
body:where(.customers) .btn-danger {
  background-color: var(--ls-peligro);
  border-color: var(--ls-peligro);
  color: var(--ls-blanco);
}
body:where(.admin) .btn-danger:hover, body:where(.admin) .btn-danger:focus,
body:where(.customers) .btn-danger:hover, body:where(.customers) .btn-danger:focus {
  background-color: #7F2323;
  border-color: #7F2323;
  color: var(--ls-blanco);
}

/* ─── Campos ─── */
body:where(.admin) .form-control,
body:where(.customers) .form-control,
body:where(.login_admin, .authentication) .form-control,
body:where(.admin) .bootstrap-select > .dropdown-toggle,
body:where(.customers) .bootstrap-select > .dropdown-toggle {
  border-color: var(--ls-filete);
  border-radius: var(--ls-radio-campo);
  color: var(--ls-tinta);
  box-shadow: none;
}
body:where(.admin) .bootstrap-select > .dropdown-toggle,
body:where(.customers) .bootstrap-select > .dropdown-toggle { background-color: var(--ls-blanco); }
body:where(.admin) .form-control:focus,
body:where(.customers) .form-control:focus,
body:where(.login_admin, .authentication) .form-control:focus {
  border-color: var(--ls-tinta);
  box-shadow: 0 0 0 1px var(--ls-tinta);
}
body:where(.admin) .input-group .form-control:first-child,
body:where(.customers) .input-group .form-control:first-child { border-radius: var(--ls-radio-campo) 0 0 var(--ls-radio-campo); }
body:where(.admin) .input-group-addon,
body:where(.customers) .input-group-addon {
  border-color: var(--ls-filete);
  background: var(--ls-fondo);
  color: var(--ls-tinta);
}
body:where(.admin) .input-group-addon:first-child { border-radius: var(--ls-radio-campo) 0 0 var(--ls-radio-campo); }
body:where(.admin) .input-group-addon:last-child { border-radius: 0 var(--ls-radio-campo) var(--ls-radio-campo) 0; }
body:where(.admin) label,
body:where(.admin) .control-label,
body:where(.customers) label,
body:where(.customers) .control-label { font-weight: 400; color: var(--ls-tinta); }

/* ─── Paneles y tarjetas: blancas, filete fino, esquinas amplias, sin sombra ───
   El borde y la sombra los pone el núcleo en .panel_s (tailwind.css), no
   en .panel-body: ahí se cambian, o saldría un borde doble. */
body:where(.admin, .customers) .panel,
body:where(.admin, .customers) .panel_s {
  border: 1px solid var(--ls-filete);
  border-radius: 16px;
  box-shadow: none;
}
body:where(.admin, .customers) .panel-body { border-radius: 16px; }
body:where(.admin) .panel_s .panel-heading,
body:where(.customers) .panel_s .panel-heading {
  border-color: var(--ls-filete);
  background: var(--ls-blanco);
  border-radius: 16px 16px 0 0;
  font-weight: 400;
}
body:where(.admin, .customers) .panel_s .panel-heading + .panel-body { border-radius: 0 0 16px 16px; }
body:where(.admin) .panel-footer,
body:where(.customers) .panel-footer { background: var(--ls-fondo); border-color: var(--ls-filete); }
body:where(.admin) hr,
body:where(.customers) hr { border-top-color: var(--ls-filete); }

/* ─── Tablas: cabecera en rótulo, filas separadas por un filete suave ─── */
body:where(.admin) .table > thead > tr > th,
body:where(.admin) table.dataTable thead th,
body:where(.customers) .table > thead > tr > th,
body:where(.customers) table.dataTable thead th {
  background: transparent;
  border-bottom: 1px solid var(--ls-filete);
  color: var(--ls-tinta);
  font-size: var(--ls-t-rotulo);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
body:where(.admin) .table > tbody > tr > td,
body:where(.customers) .table > tbody > tr > td { border-top-color: var(--ls-filete-suave); color: var(--ls-tinta); }
body:where(.admin) .table-hover > tbody > tr:hover,
body:where(.admin) table.dataTable tbody tr:hover,
body:where(.customers) .table-hover > tbody > tr:hover { background-color: var(--ls-fondo); }
body:where(.admin) .pagination > li > a,
body:where(.admin) .pagination > li > span,
body:where(.customers) .pagination > li > a,
body:where(.customers) .pagination > li > span {
  border-radius: var(--ls-radio-pildora);
  color: var(--ls-tinta);
  border-color: transparent;
}
body:where(.admin) .pagination > .active > a,
body:where(.admin) .pagination > .active > span,
body:where(.admin) .pagination > .active > a:hover,
body:where(.customers) .pagination > .active > a,
body:where(.customers) .pagination > .active > span {
  background: var(--ls-tono-texto);
  border-color: var(--ls-tono-texto);
  color: var(--ls-blanco);
}

/* ─── Pestañas: la elegida, subrayada con un filete en el tono ─── */
body:where(.admin) .nav-tabs,
body:where(.customers) .nav-tabs { border-bottom-color: var(--ls-filete); }
body:where(.admin) .nav-tabs > li > a,
body:where(.customers) .nav-tabs > li > a {
  color: var(--ls-tinta);
  font-weight: 400;
  border-radius: 0;
}
body:where(.admin) .nav-tabs > li.active > a,
body:where(.admin) .nav-tabs > li.active > a:hover,
body:where(.admin) .nav-tabs > li.active > a:focus,
body:where(.customers) .nav-tabs > li.active > a,
body:where(.customers) .nav-tabs > li.active > a:hover,
body:where(.customers) .nav-tabs > li.active > a:focus {
  color: var(--ls-tinta);
  font-weight: 500;
  border-bottom-color: var(--ls-tono);
}

/* ─── Etiquetas: píldoras (el color, si viene del estado, se respeta) ─── */
body:where(.admin) .label,
body:where(.customers) .label {
  border-radius: var(--ls-radio-pildora);
  font-weight: 400;
  letter-spacing: 0.02em;
}
body:where(.admin) .badge,
body:where(.customers) .badge { border-radius: var(--ls-radio-pildora); font-weight: 500; }

/* ─── Desplegables, ventanas y avisos ─── */
body:where(.admin) .dropdown-menu,
body:where(.customers) .dropdown-menu {
  border: 1px solid var(--ls-filete);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(27, 26, 22, 0.08);
}
body:where(.admin) .dropdown-menu > li > a,
body:where(.customers) .dropdown-menu > li > a { color: var(--ls-tinta); }
body:where(.admin) .dropdown-menu > li > a:hover,
body:where(.admin) .dropdown-menu > li > a:focus,
body:where(.customers) .dropdown-menu > li > a:hover { background: var(--ls-fondo); color: var(--ls-tinta); }
body:where(.admin) .modal-content,
body:where(.customers) .modal-content {
  border: 1px solid var(--ls-filete);
  border-radius: var(--ls-radio-tarjeta);
  box-shadow: 0 24px 64px rgba(27, 26, 22, 0.14);
}
body:where(.admin) .modal-header,
body:where(.customers) .modal-header { border-bottom-color: var(--ls-filete); }
body:where(.admin) .modal-footer,
body:where(.customers) .modal-footer { border-top-color: var(--ls-filete); }
body:where(.admin) .modal-title,
body:where(.customers) .modal-title {
  font-family: var(--ls-letra-titulos);
  font-size: 26px;
  font-weight: 400;
}
body:where(.admin) .alert,
body:where(.customers) .alert,
body:where(.login_admin, .authentication) .alert { border-radius: 14px; }

/* ─── El azul «primario» de las utilidades de Tailwind del núcleo ───
   (el «+» redondo de la barra de arriba, unos pocos enlaces): a tinta. Son
   las únicas que usan las vistas del núcleo (contado en application/views). */
body:where(.admin, .customers) .tw-bg-primary-600,
body:where(.admin, .customers) .tw-bg-primary-700 { background-color: var(--ls-tinta); }
body:where(.admin) .group:hover .group-hover\:\!tw-bg-primary-700 { background-color: var(--ls-grafito) !important; } /* el núcleo lo marca con «!» */
body:where(.admin, .customers) .tw-text-primary-600,
body:where(.admin, .customers) .hover\:tw-text-primary-600:hover { color: var(--ls-tinta); }

/* ═══ 2. EL ÁREA DE ADMINISTRACIÓN ═══ */
body:where(.admin) #wrapper { background: var(--ls-fondo); }

/* La barra de arriba: blanca, un filete debajo, sin sombra. */
body:where(.admin) #header {
  background: var(--ls-blanco);
  border-bottom: 1px solid var(--ls-filete);
  box-shadow: none;
}

/* El menú lateral de Perfex, como el del diseño: blanco, filete a la
   derecha, apartados en píldora y el elegido en fondo suave con su punto. */
body:where(.admin) .sidebar {
  background: var(--ls-blanco);
  border-right: 1px solid var(--ls-filete);
}
body:where(.admin) .sidebar ul.nav li a {
  color: var(--ls-tinta);
  font-weight: 300;
  font-size: 14px;
  border-radius: var(--ls-radio-pildora);
}
body:where(.admin) .sidebar ul.nav li a i.menu-icon { color: var(--ls-cacao); }
body:where(.admin) .sidebar ul.nav > li > a:hover,
body:where(.admin) .sidebar ul.nav > li > a:focus { background: var(--ls-fondo); color: var(--ls-tinta); }
body:where(.admin) .sidebar ul.nav > li.active > a {
  background: var(--ls-fondo);
  border-color: transparent;
  box-shadow: none;
  font-weight: 400;
  color: var(--ls-tinta);
}
body:where(.admin) .sidebar ul.nav > li.active > a i.menu-icon { color: var(--ls-tono-texto); }
body:where(.admin) .sidebar ul.nav li .nav-second-level li a { font-weight: 300; }
body:where(.admin) .sidebar ul.nav li .nav-second-level li.active a { font-weight: 500; }
body:where(.admin) .sidebar-user-profile > a.dropdown-toggle {
  border-color: var(--ls-filete);
  border-radius: 16px;
  box-shadow: none;
}

/* El contenido y los títulos de página. Perfex titula cada lista con un
   h4 «tw-font-bold tw-text-lg» (o «-xl»), y cada pestaña de la ficha de un
   cliente con «customer-profile-group-heading»: esos sí pasan a letra de
   títulos, que es donde el diseño pone sus titulares. Los h4 de los
   widgets del tablero («Últimas tareas») no llevan tw-font-bold y se
   quedan en letra de texto: a 28 px dentro de una caja pequeña gritarían. */
body:where(.admin) #wrapper .content h4.tw-font-bold.tw-text-lg,
body:where(.admin) #wrapper .content h4.tw-font-bold.tw-text-xl,
body:where(.admin) #wrapper .content h4.customer-profile-group-heading {
  font-family: var(--ls-letra-titulos);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--ls-tinta);
}

/* El tablero: las cajas de arriba y los paneles con el mismo filete. */
body:where(.admin) .top_stats_wrapper {
  border: 1px solid var(--ls-filete);
  border-radius: 16px;
  box-shadow: none;
}
body:where(.admin) .top_stats_wrapper .progress { background: var(--ls-filete); height: 2px; }
body:where(.admin) .top_stats_wrapper .progress-bar { background: var(--ls-tono); }

/* ═══ 3. LAS PANTALLAS DE ENTRADA ═══
 * Las clases son las que el núcleo ya pone en el <body>: «login_admin» en la
 * entrada del admin (views/authentication/login_admin.php) y
 * «authentication» en las de olvido, cambio y doble factor de la contraseña
 * del equipo. La entrada del área de clientes es body:where(.customers).
 */
/* El núcleo pone el gris con una clase en el propio <body>
   (tw-bg-neutral-100): una clase pesa más que «body», así que aquí va la
   clase también. */
body.login_admin, body.authentication { background: var(--ls-fondo); }
body:where(.login_admin, .authentication) .authentication-form-wrapper,
body:where(.login_admin, .authentication) .authentication-form {
  border-radius: var(--ls-radio-tarjeta);
}

/* ═══ 4. EL ÁREA DE CLIENTES (la pareja) ═══ */
body:where(.customers) { background: var(--ls-fondo); }
body:where(.customers) .navbar-default,
body:where(.customers) .navbar.header {
  background: var(--ls-blanco);
  border: 0;
  border-bottom: 1px solid var(--ls-filete);
  box-shadow: none;
}
body:where(.customers) .navbar-default .navbar-nav > li > a {
  color: var(--ls-tinta);
  font-weight: 400;
  border-radius: var(--ls-radio-pildora);
}
body:where(.customers) .navbar-default .navbar-nav > li > a:hover,
body:where(.customers) .navbar-default .navbar-nav > li > a:focus,
body:where(.customers) .navbar-default .navbar-nav > .active > a,
body:where(.customers) .navbar-default .navbar-nav > .active > a:hover {
  background: var(--ls-fondo);
  color: var(--ls-tinta);
}
body:where(.customers) .submenu.customer-top-submenu li a { color: var(--ls-tinta); }
body:where(.customers) .footer,
body:where(.customers) footer {
  background: var(--ls-blanco);
  border-top: 1px solid var(--ls-filete);
  color: var(--ls-tinta);
}
body:where(.customers) #content { background: transparent; }
/* El botón «Iniciar sesión» de la barra: el núcleo lo pinta de azul CON
   `!important` (assets/themes/perfex/css/style.min.css), así que aquí
   también (junto con el «+» de la barra del admin, los dos únicos sitios). */
body:where(.customers) .navbar-default .navbar-nav > li.customers-nav-item-login > a {
  background: var(--ls-tinta) !important;
  border-radius: var(--ls-radio-pildora) !important;
  color: var(--ls-blanco) !important;
  font-weight: 400;
}
body:where(.customers) .navbar-default .navbar-nav > li.customers-nav-item-login > a:hover,
body:where(.customers) .navbar-default .navbar-nav > li.customers-nav-item-login > a:active {
  background: var(--ls-grafito) !important;
  border-radius: var(--ls-radio-pildora) !important;
}