/* ============================================================================
   trebede-facelift.css   ·   FASE 0–2  ·   CABECERA + NAVEGACIÓN
   ----------------------------------------------------------------------------
   Hoja de modernización para enchufar SOBRE el HTML que ya genera el backend.
   NO se toca PHP: estos selectores son los reales que emiten lib_pagina.php
   (pagina2016_menu / pagina2016_submenu): .bg-header, header.caja-header,
   #menu > ul.nav > li (mega-menú al pasar sobre el logo), .nav-caja-ico-logo,
   #submenu, #nav-mobile (hamburguesa) y #submenu ul.open-menu (cajón móvil,
   que ya togglea el JS actual con las clases .nav-active / .open-menu).

   ORDEN DE CARGA (en pagina_head, sólo si PE_PRUEBAS):
     colors_and_type.css → trebede122.css → trebede-facelift.css →
     etiquetas-colores.css → {id}.css
   Así esta hoja sobreescribe a la heredada, etiquetas-colores.css unifica el
   color de etiquetas/celdas (y manda sobre el texto de las celdas de tabla),
   y la marca blanca ({id}.css) manda al final con su --brand. Todo el color de
   chrome sale de var(--brand): re-tematizable.

   El cambio de logo (a "trebede.com" simple) NO necesita CSS ni PHP: basta con
   dejar el nuevo fichero en la ruta que ya usa el bloque PE_PRUEBAS del backend
   (www2022/img/…). Aquí sólo lo DIMENSIONAMOS. La marca blanca (PE_LOGO) sigue
   sustituyéndolo por el logo del cliente, como hasta ahora.
   ========================================================================== */

/* ============================================================================
   FASE 5 · ICONOS — fuente Material Symbols Rounded (AUTO-HOSPEDADA, sin Google)
   ----------------------------------------------------------------------------
   La fuente se sirve DESDE TU PROPIO SERVIDOR. El @font-face de aquí abajo ya
   está ACTIVO y apunta a:  www2016/fonts/material-symbols-rounded.woff2
   (ruta relativa desde esta hoja en www2016/css/ → ../fonts/…).

   DESPLIEGUE (una sola vez):
     1) Sube el archivo  material-symbols-rounded.woff2  (te lo paso para
        descargar) a:  www2016/fonts/material-symbols-rounded.woff2
     2) En pagina_head (bloque PE_PRUEBAS) BORRA el <link> a fonts.googleapis.com.
        Ya no hace falta nada de Google: la fuente la declara este @font-face.
     3) Sube el número de caché de trebede-facelift.css (?2026….).

   Es la fuente COMPLETA (variable, todos los glifos): cualquier icono Material
   funciona sin mantener listas de subset → nunca más un .icon-* en blanco.
   Pesa ~5 MB pero se cachea UNA vez (Cache-Control largo). Si más adelante
   quieres aligerar, se puede generar un subset con sólo los glifos en uso.
   ============================================================================ */
@font-face{
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('../fonts/material-symbols-rounded.woff2') format('woff2');
}

/* ───────────────────────── FASE 0 · fundamentos mínimos ─────────────────── */
/* Sólo lo imprescindible para que la cabecera respire. Seguro de aplicar. */
body{
  font-family: var(--font-sans);
  background: var(--gray-50);
  color: var(--fg-2);
}

/* ─────────────────────────────── CABECERA ──────────────────────────────── */
.bg-header{ background: var(--header-bg, var(--brand)); }

header.caja-header{
  position: relative;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  background: var(--header-bg, var(--brand));
  /* antes: sombra dura 0 2px 2px #999 → ahora elevación suave */
  box-shadow: var(--shadow-header);
}
/* el desplegable de módulos es position:absolute → estos contenedores NO deben
   recortarlo (la CSS heredada puede traer overflow:hidden). */
.bg-header,
header.caja-header,
#menu,
#menu ul.nav,
#menu ul.nav > li{ overflow: visible !important; }

/* ── Mega-menú de módulos (#menu): el logo es el disparador ───────────────── */
#menu{
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 6px 0 10px;
  background: transparent;     /* header plano: el azul lo pone .bg-header/caja-header.
                                  (en pruebas.net, pruebas.css repinta #menu en rojo) */
  float: none;                 /* anula el float:left heredado dentro del flex */
}
#menu ul.nav{
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
#menu ul.nav > li{
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* logo */
.nav-caja-ico-logo{
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;                 /* header claramente más delgado (antes 56) */
  padding-right: 4px;
}
.nav-caja-ico-logo img{
  /* el PHP imprime width="185" o height="38" → lo normalizamos */
  height: 23px !important;       /* logo trebede.com compacto */
  width: auto !important;
  display: block;
}
/* AFFORDANCE DEL MEGA-MENÚ DE MÓDULOS
   El backend ya NO imprime el «⁝» (.indicador-menu) ni el
   <span class="material-icons-round expand-ico">expand_more</span>: eran restos
   de un cambio de diseño anterior (provocaban el glifo «expand_more» suelto) y
   se han retirado del PHP. Por eso aquí YA NO hay reglas .expand-ico. Dejamos
   sólo el saneo defensivo de .indicador-menu por si alguna rama legacy lo
   emitiera todavía. El logo sigue abriendo el desplegable al pasar/tocar. */
.indicador-menu{ display: none !important; }

/* el desplegable de módulos — SOLO apariencia.
   El mostrar/ocultar lo sigue llevando trebede122.css, que ya funciona:
     .nav li ul        { display:none }
     .nav li:hover > ul{ display:block }
   Así no peleamos con su mecanismo; sólo lo vestimos. Añadimos :focus-within
   para abrir también con teclado/táctil. */
#menu ul.nav > li > ul{
  list-style: none;
  margin: 0;
  padding: 6px;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: 260px;
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
}
/* respeta el toggle heredado por hover y añade foco (teclado/táctil) */
#menu ul.nav > li:focus-within > ul{ display: block; }
#menu ul.nav > li > ul > li{ margin: 0; padding: 0 !important; background: none !important; }
#menu ul.nav > li > ul > li > a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--fg-1);
  font-size: var(--text-md);
  text-decoration: none;
  white-space: nowrap;
}
#menu ul.nav > li > ul > li > a:hover{
  background: var(--blue-50);
  color: var(--brand-strong);
}
/* iconos heredados dentro del desplegable (icomoon .icon-* / material) */
#menu .icon-info, #menu .icon-cog, #menu .icon-switch, #menu .icon-cloud,
#menu [class^="icon-"], #menu [class*=" icon-"]{ color: var(--brand); }

/* ───────────────────────── SUBMENÚ (secciones) ─────────────────────────── */
#submenu{
  position: relative;
  margin-left: 0;             /* a la IZQUIERDA, junto al logo (como antes) */
  float: none;                /* anula el float:left heredado dentro del flex */
  display: flex;
  align-items: stretch;
}
#submenu ul{
  list-style: none;
  margin: 0;
  padding: 0 8px;
  display: flex;
  gap: 2px;
  align-items: stretch;
}
#submenu li{ display: flex; }
#submenu ul li a{
  display: flex;
  align-items: center;
  height: 40px;                  /* fija la altura del header (antes 17px de padding heredado) */
  color: #fff;
  text-decoration: none;
  font-size: var(--text-base);   /* 15px, antes 16 — más nav items caben */
  padding: 0 11px !important;     /* gana al #submenu ul li a heredado (17px 10px) */
  opacity: .92;
  border-bottom: 3px solid transparent;
  transition: opacity .14s ease, border-color .14s ease, background .14s ease;
}
#submenu li a:hover{ opacity: 1; background: rgba(255,255,255,.10); }
/* pestaña activa: el backend marca la activa; damos estilo a varias variantes */
#submenu li a.activo,
#submenu li a.activa,
#submenu li.limenu3si a,
#submenu li a[aria-current]{
  opacity: 1;
  border-bottom-color: #fff;
  font-weight: 500;
}

/* la hamburguesa: el backend imprime <a id="nav-mobile"> con una IMAGEN de fondo
   (submenu-movil.png) posicionada absoluta arriba-derecha. La neutralizamos y
   la redibujamos limpia por CSS (3 líneas → X). Mantenemos su posición absoluta. */
#nav-mobile{
  display: none;                 /* oculto en escritorio (igual que legacy) */
  background: none !important;   /* mata la PNG legacy → no más doble hamburguesa */
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  margin: 0;
  opacity: 1 !important;
  border-radius: var(--radius-sm);
  cursor: pointer;
  z-index: 60;
}
#nav-mobile::before{               /* 3 líneas con box-shadow */
  content: "";
  position: absolute;
  left: 12px; top: 22px;
  width: 22px; height: 2px;
  background: #fff;
  box-shadow: 0 -7px 0 #fff, 0 7px 0 #fff;
  transition: box-shadow .12s ease, transform .18s ease;
}
#nav-mobile::after{ content: none; }   /* sin segunda barra mientras está cerrado */
#nav-mobile.nav-active::before{    /* → X cuando está abierto */
  box-shadow: 0 0 0 transparent;
  transform: rotate(45deg);
}
#nav-mobile.nav-active::after{
  content: "";
  position: absolute;
  left: 12px; top: 22px;
  width: 22px; height: 2px;
  background: #fff;
  transform: rotate(-45deg);
}

/* ───────────────────────────── RESPONSIVE ──────────────────────────────── */
/* MÓVIL IMPRESCINDIBLE. Usamos el MISMO breakpoint que trebede122.css (768px)
   para que escritorio y móvil conmuten a la vez (evita la franja rota 769–900).
   La hamburguesa es absoluta arriba-derecha (estilo legacy) y el submenú baja
   como cajón con la clase .open-menu que ya togglea el JS actual. */
@media (max-width: 768px){
  header.caja-header{ position: relative; align-items: center; min-height: 48px; }
  /* el <div class="clear"> que imprime el backend no debe ocupar hueco */
  header.caja-header > .clear{ display: none; }

  #menu{ padding-left: 6px; }
  .nav-caja-ico-logo{ height: 44px; }
  .nav-caja-ico-logo img{ height: 23px !important; }

  /* el mega-menú de módulos pasa a abrirse por tap (focus-within ya lo cubre) */
  #menu ul.nav > li > ul{ left: 0; min-width: 220px; }

  /* la hamburguesa aparece (absoluta, ya posicionada arriba) */
  #nav-mobile{ display: block; }

  /* #submenu pasa a contenedor full-width; anulamos el padding-top:57px legacy
     porque el cajón ya cae por debajo del header (posición absoluta). */
  #submenu{
    position: static;
    width: 100%;
    float: none;
    margin: 0;
    padding-top: 0 !important;
  }

  #submenu ul{
    flex-direction: column;
    gap: 0;
    padding: 0;
    margin: 0;
    list-style: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    z-index: 55;
    background: var(--header-bg-2, var(--brand));
    box-shadow: var(--shadow-lg);
    /* cerrado por defecto; .open-menu lo despliega */
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s ease;
  }
  #submenu ul.open-menu{ max-height: 80vh; overflow: auto; }

  #submenu ul li{ display: block !important; float: none; text-align: left; border-bottom: 0; }
  #submenu ul li a{
    display: block;
    height: auto !important;       /* en el cajón, alto táctil cómodo */
    line-height: normal !important;
    padding: 14px 18px !important;
    font-size: var(--text-lg);
    border-bottom: 1px solid rgba(255,255,255,.14);
    opacity: 1;
  }
  #submenu li a.activo,
  #submenu li a.activa,
  #submenu li.limenu3si a{
    border-bottom-color: rgba(255,255,255,.14);
    border-left: 4px solid #fff;
    padding-left: 14px !important;
    font-weight: 500;
  }
}

/* ============================================================================
   FASE 3–4 · TABLAS · ETIQUETAS · BOTONES · CAMPOS · PAGINADOR
   Sobre las clases reales: table.tablesorter, tr.table-header, .etiqueta + f*,
   .boton, .icon-puntos, .cajapaginas. Sin tocar PHP.
   ========================================================================== */

/* ───────────────────────────── TABLAS ──────────────────────────────────── */
table.tablesorter{
  border-collapse: collapse !important;
  border-left: var(--accent-bar) solid var(--brand);   /* 4px (antes 8) */
  background: var(--surface);
  width: 100% !important;            /* doma el width fijo heredado */
  max-width: 100%;
}
/* cabecera: lila-gris más limpio, texto secundario en mayúscula discreta */
table.tablesorter tr.table-header,
table.tablesorter thead tr{
  background: #eef0fb !important;
}
table.tablesorter th{
  color: var(--fg-3) !important;
  font-weight: 700;
  font-size: var(--text-sm);
  padding: 10px 10px !important;
  border: 0 !important;
  text-align: left;
}
/* celdas: separador hairline (antes líneas gruesas), aire vertical cómodo */
table.tablesorter td{
  color: var(--fg-2);
  padding: 9px 10px 7px;   /* compactado (antes 11 11): -2 arriba / -4 abajo. Con
                              vertical-align:top el aire de abajo "trabaja" menos,
                              así se recorta más por abajo y el texto no se pega a
                              la línea divisoria de arriba. Centrado óptico mejor. */
  border: 0 !important;
  border-top: 1px solid var(--gray-150) !important;
  vertical-align: top;
}
table.tablesorter tbody tr{ transition: background .12s ease; }
/* zebra: una fila sí, otra no, con una franja muy suave. El fondo va en el
   <tr>; las celdas con color propio (.fondoazulon/.fondorojo…) lo tapan. */
table.tablesorter tbody tr:nth-child(even){ background: var(--row-zebra); }
/* hover a nivel de fila (después de la zebra para que gane); así las celdas
   de color A/P conservan su tono al pasar por encima. */
table.tablesorter tbody tr:hover{ background: #eef5f9; }
/* columnas numéricas a la derecha y tabulares */
table.tablesorter td.dcha, table.tablesorter th.dcha,
table.tablesorter td.num, table.tablesorter .numero{
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* NOTA · Celdas de recuento A/P y color de celdas en general:
   El color del texto de las celdas con clase de color (.fazulNN, .frojoNN, …)
   lo resuelve ahora etiquetas-colores.css (texto AA por paso, con !important),
   que se carga DESPUÉS de esta hoja. Así se corrige el caso de texto oscuro
   sobre fondo oscuro en tablas (p. ej. selección de etiquetas de un cliente).
   Decisión del equipo para las celdas A/P (cambio de color buscado, no
   equivalencia): A normal  fondoazulon → fazul02   ·   alerta  fondorojo → frojo04.
   Se hace cambiando la CLASE en backend; aquí no hace falta tocar nada. */

/* menú de tres puntos por fila (.icon-puntos usa images/tres-puntos.svg) */
.icon-puntos{ opacity: .6; transition: opacity .12s ease, transform .12s ease; border-radius: var(--radius-sm); }
.icon-puntos:hover{ opacity: 1; background: var(--blue-50); }

/* ─────────────────────────── ETIQUETAS (chips) ─────────────────────────── */
/* las rampas f* siguen poniendo el color; aquí unificamos forma y ritmo.
   Más pequeñas a propósito: el NOMBRE del cliente manda; el color de la
   etiqueta ya identifica la característica, así que el texto puede bajar. */
.etiqueta{
  display: inline-flex;
  align-items: center;
  padding: 1px 8px !important;
  margin: 2px 3px 2px 0 !important;
  border-radius: var(--radius-pill);     /* píldora */
  border-color: transparent !important;   /* quita el borde blanco desigual */
  font-size: 11.5px;   /* PRUEBAS +1,5 sobre actual (orig 9 · prod 10) */
  line-height: 1.4;
  white-space: nowrap;
}

/* ───────────────────────────── BOTONES ─────────────────────────────────── */
/* .boton: color de acción (slate por defecto; cliente en marca blanca),
   alineado a la izquierda (rasgo TREBEDE), con estados y foco. */
.boton{
  background: var(--action) !important;
  color: var(--action-fg) !important;
  border: 0;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-weight: 300;
  text-align: left;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background .14s ease, transform .05s ease;
}
.boton:hover{ background: var(--action-strong) !important; text-decoration: none; }
.boton:active{ background: var(--action-press) !important; transform: translateY(1px); }
.boton:focus-visible{ outline: none; box-shadow: var(--focus-ring); }
.boton.cta, .botonprincipal{ background: var(--brand) !important; }
.boton.cta:hover, .botonprincipal:hover{ background: var(--brand-strong) !important; }
.boton.botonalarma, .botonborrar{ background: var(--error) !important; }
/* botón "Limpiar" deshabilitado / secundario suele ir gris */
.boton[disabled], .boton.off{ background: var(--gray-400) !important; box-shadow: none; cursor: default; }

/* ─────────────────────────── CAMPOS (inputs) ───────────────────────────── */
input[type="text"], input[type="search"], input[type="email"],
input[type="tel"], input[type="number"], input[type="password"],
input[type="date"], select, textarea{
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--fg-1);
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus,
input[type="tel"]:focus, input[type="number"]:focus, input[type="password"]:focus,
input[type="date"]:focus, select:focus, textarea:focus{
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
  outline: none;
}
::placeholder{ color: var(--fg-4); }

/* ─────────────────────────── PAGINADOR ─────────────────────────────────── */
.cajapaginas{
  background: var(--gray-150);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.cajapaginas a, .cajapaginas .paginaactual{
  background: var(--action);
  color: var(--action-fg);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  text-decoration: none;
}
.cajapaginas a:hover{ background: var(--action-strong); text-decoration: none; }
.cajapaginas .paginaactual{ background: var(--brand); }

/* ============================================================================
   FASE · CAJAS (tarjetas) + FORMULARIOS + FICHA
   Clases reales: #main-content article (.caja80/.sidebar/.caja50i…),
   header-titulo-principal, header-contenido, .linea, .formul-label,
   .formul-boton/a.boton, .formul-nota, .cajacheckbox, .erroresvalidacion,
   sidebar h5.botonlimpiar / .botonlimpiarno.
   ========================================================================== */

/* ── Tarjetas: el legacy fuerza box-shadow:none → lo revertimos a una tarjeta
   limpia (blanca, radio, sombra suave, aire). Misma especificidad que la regla
   heredada (#main-content article) y cargamos después → ganamos sin !important. */
#main-content article{
  background: #fff;
  box-sizing: border-box;      /* el padding/borde va DENTRO del width% heredado
                                  → evita que caja80+sidebar pasen de 100% y la
                                  columna lateral se caiga debajo */
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 6px 16px 14px;
  margin-bottom: 14px;
}
/* títulos de caja (h4 + hr.linea) y cabeceras de sección */
#main-content article h4,
#main-content article h3{
  color: var(--fg-1);
  font-weight: 500;
}
.linea{ border: 0; border-top: 1px solid var(--gray-200); margin: 8px 0 12px; }
#main-content header.header-contenido h2{ color: var(--fg-1); }
#main-content header.header-contenido h3{ border-top: 1px solid var(--gray-200); color: var(--fg-3); }

/* ── Formulario ── */
.formul-label{
  color: var(--fg-3);
  padding-top: 9px;            /* alinea con el alto del input */
}
.formul-nota{ color: var(--fg-4); font-size: var(--text-sm); }
/* botón de envío del formulario (CTA principal: «Guardar/Modificar»).
   Unificamos TODO en azul de marca, incluido el verde btn-success heredado. */
.formul-boton, a.boton,
.formul-boton.btn-success, .formul-boton.btn-primary{
  background: var(--brand) !important;
  color: #fff;
  border: 0;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-weight: 400;
  padding: 10px 18px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .14s ease, transform .05s ease;
  text-decoration: none;
}
.formul-boton:hover, a.boton:hover,
.formul-boton.btn-success:hover{ background: var(--brand-strong) !important; text-decoration: none; }
.formul-boton:active, a.boton:active{ transform: translateY(1px); }
.formul-boton:focus-visible, a.boton:focus-visible{ outline: none; box-shadow: var(--focus-ring); }
/* errores de validación: rojo legible, sin el 18px desproporcionado */
.erroresvalidacion, .erroresvalidacion2, .text-danger{
  color: var(--error);
}
/* el tamaño reducido es SOLO para el texto de error: nunca encoge un icono
   (que puede llevar text-danger + size110/120/150 a la vez) */
.erroresvalidacion, .erroresvalidacion2, .text-danger:not([class*="icon-"]){
  font-size: var(--text-sm);
}
.cajacheckbox{ padding: 6px 0; }

/* ── Botones de acción del sidebar de la ficha — UNIFICADOS a todo el ancho.
   Da igual el markup (h5.botonlimpiar o a.boton): columna de acciones
   alineada a la izquierda (rasgo TREBEDE), fácil de escanear y tocar. ── */
/* Mismo modelo de caja para los 3: «Limpiar» (h5.botonlimpiar/no),
   «Buscar» (form .formul-boton del filtro) y «Nuevo cliente» (a.boton).
   trebede122.css (legacy) carga ANTES y trae reglas de MAYOR especificidad
   (#main-content article.sidebar h5… → 1,2,2) y width:90% / float:right en
   los <h5>. Para que los tres queden idénticos forzamos el modelo de caja
   con !important: ancho, caja, alineación, margen, padding, radio y tipo. */
#main-content .sidebar .boton,
#main-content .sidebar .formul-boton,
#main-content .sidebar .botondesactivado,
#main-content .sidebar h5.botonlimpiar,
#main-content .sidebar h5.botonlimpiarno{
  display: block !important;
  float: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
  margin: 0 0 8px !important;
  padding: 11px 14px !important;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  font-family: inherit !important;
  font-weight: 400 !important;
  font-size: var(--text-md) !important;
  line-height: 1.25 !important;
  color: #fff;
  cursor: pointer;
  box-shadow: none !important;
  transition: background .14s ease, transform .05s ease;
}
/* Los enlaces «Nuevo cliente / Buscador avanzado / …» llegan envueltos en
   <p> (p_parrafo) y «Buscar» dentro de <form>: anulamos su caja para que el
   botón hijo (width:100%) ocupe exactamente el mismo ancho que «Limpiar». */
#main-content .sidebar form,
#main-content .sidebar p.texto,
#main-content .sidebar p:has(> .boton){
  margin: 0 !important;
  padding: 0 !important;
  text-indent: 0 !important;
}
/* el legacy flota el título (h4 float:left) y el subtítulo (h5 float:right) para
   ponerlos en la misma línea; al convertir «Limpiar» en botón de ancho completo
   eso provoca solape → devolvemos «Filtros» a su propia línea, como título. */
#main-content .sidebar h4{ float: none !important; width: auto !important; }
/* el texto del <a> dentro del <h5> ocupa todo el botón */
#main-content .sidebar h5.botonlimpiar a,
#main-content .sidebar h5.botonlimpiarno a{
  display: block; color: inherit; font: inherit; text-decoration: none;
}
/* (a) ACTIVOS — todos en el color de marca de los botones (Buscar/Nuevo cliente).
   «Limpiar» activo deja de ir en gris pizarra (#677886 legacy) y se iguala. */
#main-content .sidebar .boton,
#main-content .sidebar .formul-boton,
#main-content .sidebar h5.botonlimpiar{ background: var(--brand) !important; color: #fff !important; }
#main-content .sidebar .boton:hover,
#main-content .sidebar .formul-boton:hover,
#main-content .sidebar h5.botonlimpiar:hover{ background: var(--brand-strong) !important; }
#main-content .sidebar .boton:active,
#main-content .sidebar .formul-boton:active,
#main-content .sidebar h5.botonlimpiar:active{ background: var(--brand-strong) !important; transform: translateY(1px); }
/* «PASADAS pendientes» (.boton.fondorojo): acción de ALERTA → SIEMPRE en rojo,
   por encima del color de marca de los demás. Especificidad (1,3,1) para ganar
   tanto a mi .sidebar .boton (1,2,1) como al .boton.fondorojo de etiquetas-colores. */
#main-content .sidebar .boton.fondorojo{ background: var(--error) !important; color: #fff !important; }
#main-content .sidebar .boton.fondorojo:hover{ background: var(--error-ink, #b11a0a) !important; }
/* (b) INACTIVO — «Limpiar» sin filtros: gris suave + texto apagado, sin
   sombra ni cursor de clic → se lee claramente como NO accionable.
   (!important para ganar al #CCCCCC del legacy, especificidad 1,2,2). */
/* INACTIVO/ACTUAL — «Limpiar» sin filtros y «.botondesactivado» (vista actual,
   p. ej. «Programadas», o «PASADAS pendientes» cuando no hay ninguna): mismo
   tamaño que el resto pero en tono TENUE y no accionable. */
#main-content .sidebar h5.botonlimpiarno,
#main-content .sidebar .botondesactivado{
  background: var(--gray-200) !important;
  color: var(--gray-400) !important;
  cursor: default !important;
}
#main-content .sidebar h5.botonlimpiarno:hover,
#main-content .sidebar .botondesactivado:hover{ background: var(--gray-200) !important; transform: none; }

/* ============================================================================
   FASE 4 · CABECERA DE TABLA FIJA (sticky) + indicadores de orden
   Solo CSS. El JS de ordenación (tablesorter de Mottie) va en
   trebede-tablesorter.js; aquí solo el aspecto.
   --table-sticky-top: si el header global de la app tapa la cabecera al pegarse,
   define este token (px) en el contenedor con scroll. Por defecto 0.
   ========================================================================== */
table.tablesorter thead th{
  position: sticky;
  top: var(--table-sticky-top, 0);
  z-index: 3;
  background: #eef0fb;            /* la cabecera necesita fondo propio al pegarse */
}
/* cabecera ordenable: cursor + flechas (clases que añade Mottie) */
table.tablesorter th.tablesorter-header,
table.tablesorter thead th{ cursor: pointer; -webkit-user-select: none; user-select: none; }
table.tablesorter th.sorter-false{ cursor: default; }
table.tablesorter th.tablesorter-headerAsc::after{ content: " \25B2"; font-size: 9px; opacity: .75; }
table.tablesorter th.tablesorter-headerDesc::after{ content: " \25BC"; font-size: 9px; opacity: .75; }

/* ============================================================================
   FASE 3 · ESTADOS DE VALIDACIÓN (apoyo al JS de formularios)
   Funciona con validación NATIVA (:user-invalid, solo tras interactuar) y, durante
   la transición, también con las clases que pinta jquery.validate (input.error /
   label.error). Lógica DNI/IBAN/mensajes en trebede-forms.js.
   ========================================================================== */
input:user-invalid, select:user-invalid, textarea:user-invalid{
  border-color: var(--error) !important;
  box-shadow: 0 0 0 3px rgba(228,57,47,.18) !important;
  transition: none !important;   /* la transición de border/shadow enmascaraba el estado de error */
}
/* clase .error: la pone trebede-forms.js (y jquery.validate) — regla aparte para
   que SIEMPRE aplique aunque el navegador no entienda :user-invalid. */
input.error, select.error, textarea.error, .formul-limpio.error{
  border-color: var(--error) !important;
  box-shadow: 0 0 0 3px rgba(228,57,47,.18) !important;
  transition: none !important;
}
label.error, .campo-error{
  display: block;
  color: var(--error);
  font-size: var(--text-sm);
  font-weight: 500;
  margin-top: 4px;
}
/* válido (sutil, opcional): solo marca el borde, sin gritar */
input:user-valid:not(:placeholder-shown){ border-color: var(--ok); }

/* ============================================================================
   FASE 5 · ICONOS — remapeo .icon-* (icomoon) → Material Symbols Rounded
   ----------------------------------------------------------------------------
   El backend emite iconos como <span class="icon-xxx"></span> / <i class="icon-xxx">,
   donde icomoon inyectaba el glifo por ::before { content:"\eNNN" }. Como NO
   teníamos el .ttf de icomoon y el set estaba anticuado, aquí REDIRIGIMOS esas
   mismas clases a Material Symbols Rounded — SIN tocar el marcado ni el PHP:
     · cambiamos la fuente del ::before a Material Symbols,
     · y sobreescribimos `content` con la LIGADURA (la palabra del icono, p.ej.
       "edit"), que la fuente convierte en su glifo.
   Va con !important porque la base de icomoon en trebede122.css usa !important.
   `size85/110/120/150`, `icon-muted`, `icon-large` siguen funcionando (escalan
   por font-size / opacity). Excepción: `.icon-puntos` conserva su SVG propio
   (ya estilado arriba), no se toca aquí.
   ============================================================================ */

/* Base: convierte cualquier .icon-* (menos .icon-puntos) en un glifo Material */
[class^="icon-"]:not(.icon-puntos)::before,
[class*=" icon-"]:not(.icon-puntos)::before{
  font-family: 'Material Symbols Rounded' !important;
  font-weight: normal !important;
  font-style: normal;
  font-size: inherit;          /* respeta size110/120/150 del contenedor */
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  vertical-align: -0.18em;     /* alinea el glifo con el texto de la fila/enlace */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── MAPA EN USO (glifos cargados en el @import de arriba) ────────────────── */
.icon-edit::before        { content: 'edit' !important; }
.icon-eye-open::before    { content: 'visibility' !important; }
.icon-print::before       { content: 'print' !important; }
.icon-trash::before       { content: 'delete' !important; }
.icon-save::before        { content: 'save' !important; }
.icon-cog::before,
.icon-cogs::before        { content: 'settings' !important; }
.icon-info::before        { content: 'info' !important; }
.icon-comment::before,
.icon-comments::before,
.icon-bubble::before,
.icon-bubbles::before,
.icon-chat::before        { content: 'comment' !important; }   /* observaciones / notas */
.icon-cloud::before       { content: 'cloud' !important; }
.icon-switch::before      { content: 'logout' !important; }   /* Salir / sesión */
.icon-display::before     { content: 'desktop_windows' !important; }  /* módulos */
.icon-calendar::before    { content: 'calendar_month' !important; }
.icon-orden-asc::before   { content: 'arrow_upward' !important; }
.icon-orden-desc::before  { content: 'arrow_downward' !important; }
.icon-arrow-left::before,
.icon-arrow-left2::before  { content: 'chevron_left' !important; }
.icon-arrow-right::before,
.icon-arrow-right2::before { content: 'chevron_right' !important; }
.icon-caret-right::before { content: 'arrow_right' !important; }
.icon-circle-arrow-right::before { content: 'arrow_circle_right' !important; }
.icon-backward::before    { content: 'keyboard_double_arrow_left' !important; }
.icon-forward::before     { content: 'keyboard_double_arrow_right' !important; }
.icon-menu::before        { content: 'menu' !important; }
.icon-check::before       { content: 'check' !important; }
.icon-check-empty::before,
.icon-checkbox-unchecked::before { content: 'check_box_outline_blank' !important; }
.icon-checkbox-checked::before   { content: 'check_box' !important; }
.icon-bin2::before        { content: 'delete' !important; }   /* papelera (variante) */
.icon-envelope::before    { content: 'mail' !important; }
.icon-file-pdf::before    { content: 'picture_as_pdf' !important; }
.icon-file-text2::before  { content: 'description' !important; }
.icon-star-full::before   { content: 'star' !important; }
.icon-comments-alt::before { content: 'forum' !important; }
.icon-cloud-check::before    { content: 'cloud_done' !important; }
.icon-cloud-download::before { content: 'cloud_download' !important; }

/* modificadores heredados que deben seguir vivos */
.icon-muted { opacity: .35; }
.icon-large::before { font-size: 1.25em; }

/* ============================================================================
   FASE 5b · ICONOS DEL MENÚ DE MÓDULOS — un glifo propio por módulo
   ----------------------------------------------------------------------------
   El PHP (pagina2016_menu_enlace, bajo PE_PRUEBAS) emite por cada módulo una
   clase `icon-m-…` según el enlace. Aquí cada una recibe su glifo Material.
   En clientes SIN facelift el PHP sigue usando icon-arrow-right2/icon-cog, así
   que estas clases sólo aparecen donde esta hoja está cargada. Añadir un módulo
   = una línea aquí + su entrada en el mapa del PHP. Como tenemos la fuente
   COMPLETA, cualquier glifo Material vale (sin listas de subset).
   ============================================================================ */
.icon-m-operador::before     { content: 'support_agent' !important; }
.icon-m-comercial::before    { content: 'storefront' !important; }
.icon-m-equipo::before       { content: 'groups' !important; }
.icon-m-config::before       { content: 'tune' !important; }
.icon-m-informes::before     { content: 'monitoring' !important; }
.icon-m-facturacion::before  { content: 'receipt_long' !important; }
.icon-m-contabilidad::before { content: 'calculate' !important; }
.icon-m-gestion::before      { content: 'folder_open' !important; }
.icon-m-jornada::before      { content: 'schedule' !important; }
.icon-m-rgpd::before         { content: 'shield' !important; }
.icon-m-tickets::before      { content: 'confirmation_number' !important; }
.icon-m-aplicacion::before   { content: 'apps' !important; }
.icon-m-agendas::before      { content: 'event' !important; }
.icon-m-sesiones::before     { content: 'key' !important; }
.icon-m-estadisticas::before { content: 'analytics' !important; }
.icon-m-mensajes::before     { content: 'forum' !important; }
.icon-m-cuenta::before       { content: 'account_circle' !important; }
/* sectores verticales */
.icon-m-consultas::before    { content: 'stethoscope' !important; }
.icon-m-guarderia::before    { content: 'child_care' !important; }
.icon-m-academia::before     { content: 'school' !important; }
.icon-m-apicultura::before   { content: 'hive' !important; }
.icon-m-funerarias::before   { content: 'local_florist' !important; }
.icon-m-asesoria::before     { content: 'badge' !important; }
.icon-m-cobros::before       { content: 'payments' !important; }


/* ── MAPA EXTENDIDO (referencia) ──────────────────────────────────────────
   Glifos que NO están cargados todavía en el @import: si una pantalla usa una
   de estas clases, DESCOMENTA su regla Y añade su nombre a `icon_names=` del
   @import de arriba. Así el payload sigue mínimo (solo lo que se usa).

   .icon-search::before     { content: 'search' !important; }
   .icon-plus::before       { content: 'add' !important; }
   .icon-minus::before      { content: 'remove' !important; }
   .icon-checkmark::before,
   .icon-ok::before         { content: 'check' !important; }
   .icon-cancel::before,
   .icon-remove::before,
   .icon-close::before      { content: 'close' !important; }
   .icon-user::before       { content: 'person' !important; }
   .icon-users::before,
   .icon-group::before      { content: 'group' !important; }
   .icon-home::before       { content: 'home' !important; }
   .icon-phone::before      { content: 'call' !important; }
   .icon-mobile::before     { content: 'smartphone' !important; }
   .icon-envelope::before,
   .icon-mail::before       { content: 'mail' !important; }
   .icon-location::before,
   .icon-map-marker::before { content: 'location_on' !important; }
   .icon-download::before   { content: 'download' !important; }
   .icon-upload::before     { content: 'upload' !important; }
   .icon-file::before,
   .icon-document::before   { content: 'description' !important; }
   .icon-folder::before     { content: 'folder' !important; }
   .icon-lock::before       { content: 'lock' !important; }
   .icon-unlock::before     { content: 'lock_open' !important; }
   .icon-star::before       { content: 'star' !important; }
   .icon-bell::before       { content: 'notifications' !important; }
   .icon-clock::before      { content: 'schedule' !important; }
   .icon-list::before       { content: 'list' !important; }
   .icon-filter::before     { content: 'filter_alt' !important; }
   .icon-link::before       { content: 'link' !important; }
   .icon-copy::before       { content: 'content_copy' !important; }
   .icon-warning::before    { content: 'warning' !important; }
   .icon-question::before   { content: 'help' !important; }
   .icon-euro::before       { content: 'euro' !important; }
   .icon-tag::before,
   .icon-tags::before       { content: 'sell' !important; }
   .icon-chart::before,
   .icon-stats::before      { content: 'bar_chart' !important; }
   .icon-menu::before       { content: 'menu' !important; }
   .icon-refresh::before    { content: 'refresh' !important; }
   ──────────────────────────────────────────────────────────────────────── */

/* ============================================================================
   AJUSTE TIPOGRÁFICO · PRUEBAS +1,5 sobre el actual (11/6/2026)
   Histórico: 7/6 +1px (en producción). Ahora, para pruebas, +1,5px MÁS sobre
   el actual (= original +2,5), homogéneo con la escala de colors_and_type.css.
   Cada valor = original +2,5 (= valor de producción +1,5). Revertir a prod =
   restar 1,5 a cada uno. Los tokens --text-* ya van a +2,5 en colors_and_type;
   aquí cubrimos SÓLO los tamaños que trebede122.css fija
   en px y que NO pasan por token (si no, estos textos se quedarían pequeños).
   Cada valor = original legacy + 1px. Revertir = borrar este bloque + tokens.
   ============================================================================ */
/* cuerpo de tablas (el texto más presente del CRM): prod 16 → 17,5 */
table th, table td{ font-size: 17.5px; }
/* nav de módulos (mega-menú): prod 15 → 16,5 */
.nav{ font-size: 16.5px; }
/* cabeceras de página (listado / ficha): 24/15, 26/16, 14 → +1 */
#main-content header.header-titulo-principal h1{ font-size: 26.5px; }
#main-content header.header-titulo-principal h2{ font-size: 17.5px; }
#main-content header.header-contenido h3{ font-size: 16.5px; }
#main-content article h1{ font-size: 28.5px; }
#main-content article p.subtitulo12023{ font-size: 18.5px; }
/* banners de estado: prod 21 → 22,5 */
.caja-ok h2, .caja-error h2, .caja-info h2, .caja-atencion h2{ font-size: 22.5px; }
/* paginador y agenda: prod 16 → 17,5 · 14,5 → 16 */
.cajapaginastxt{ font-size: 17.5px; }
.agentxt{ font-size: 16px; }
/* pie de página: prod 13 → 14,5 */
footer .copyright{ font-size: 14.5px; }