/* =============================================================================
   te.base.css — la capa base. Se carga DESPUES de te.tokens.css y ANTES de todo.
   =============================================================================

   Lo minimo para que la pagina parta de un sitio conocido. No hay estilos de
   pantalla aqui: si algo solo vale para una pantalla, no va en este fichero.

   ⚠️ POR QUE HACE FALTA: el <body> no declaraba tamaño de letra, asi que todo lo
      que no traia uno propio heredaba los 16px del navegador. Medido en el Panel
      de control: 342 elementos a 16px conviviendo con 14,4 / 12,96 / 17,28... Es
      la mitad de la sensacion de "aqui se mezclan cuatro letras": no eran cuatro
      familias, eran cuatro TAMAÑOS.
   ========================================================================== */

/* box-sizing heredable: el ancho que se escribe es el ancho que ocupa, bordes y
   relleno incluidos. Es lo que espera cualquiera que escriba CSS hoy, y evita los
   descuadres de 2px que se arreglan a ojo. */
html {
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    font-family: var(--te-tipo);
    font-size: var(--te-tam-base);
    font-weight: var(--te-peso);
    line-height: var(--te-alto-linea);
    color: var(--te-texto);
}

/* ⛔ AQUI HABIA UN `-webkit-font-smoothing: antialiased` Y LO PUSE YO. Lo quito.
 *
 *    Es una costumbre de macOS, donde adelgaza el texto. En WINDOWS hace otra cosa:
 *    APAGA ClearType -el suavizado por subpixel que usa el sistema- y lo cambia por
 *    suavizado en gris. El resultado sobre fondo claro es un texto emborronado que
 *    parece MAS GRUESO y da la impresion de estar doblado.
 *
 *    Jose, 31/08/2026: "me duelen los ojos de ver la negrita en el panel con tema
 *    claro" y "que cojones de letra has puesto? son dos solapadas?". No era negrita
 *    -estaba medido: 304 elementos a peso 400- y no eran dos letras: era esta linea,
 *    en 306 elementos.
 *
 *    💡 Y por eso no lo vi yo: en modo OSCURO el suavizado en gris apenas se nota;
 *       el destrozo es sobre fondo claro. Otra vez lo mismo, hay que mirar los dos.
 *
 *    Sin esta linea manda el sistema, que es lo que el usuario ya esta viendo en el
 *    resto de su escritorio. */

/* Los controles de formulario NO heredan la letra por defecto: el navegador les
   pone la suya. Sin esto, un <input> o un <select> se ven con otra tipografia que
   el texto de al lado, y es de las cosas que mas cantan sin saber por que. */
input, select, textarea, button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* Y TAMPOCO heredan el color ni el fondo: el navegador les pone su blanco de
   serie. Mientras el texto tambien era el suyo -negro- eso se leia; en cuanto el
   texto pasa a ser del tema, un campo blanco con letra clara se queda EN BLANCO.
   Se ve en el 1004 (Productos): treinta campos vacios que si tenian dato.

   Van con selector de ELEMENTO a proposito, que es la especificidad mas baja:
   cualquier regla de pantalla que quiera otro color sigue ganando sin tocar nada.

   Se excluyen los que no son una caja de texto -casilla, radio, boton, imagen-,
   porque esos los dibuja el navegador y darles fondo los deja planos. */
input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="color"]):not([type="range"]),
select,
textarea {
    background-color: var(--te-superficie);
    color: var(--te-texto);
}

/* ── Los controles que dibuja el NAVEGADOR ───────────────────────────────────
   La casilla, el radio, el desplegable y la barra de desplazamiento no los pinta
   nuestro CSS: los pinta el sistema. Y por defecto los pinta en CLARO siempre, asi
   que en modo oscuro salia una casilla blanca con el azul de Windows dentro.

   Se arregla con DOS lineas, no con una casilla dibujada a mano:

     color-scheme  le dice al navegador en que modo esta la pagina, y el pinta TODOS
                   sus controles acorde -casillas, radios, desplegables y la barra de
                   desplazamiento-. Es una sola declaracion y arregla los cuatro.

     accent-color  le da el color de marca a lo que va marcado, en vez del azul del
                   sistema. Sigue siendo la casilla nativa: con su tecla espacio, su
                   foco, su lector de pantalla y su estado indeterminado.

   ⚠️ Dibujar la casilla a mano -con un <label> y un ::before, que es lo que hacia
      esta hoja en otro sitio- se lleva por delante todo eso y hay que reponerlo a
      mano. Aqui no hace falta. */
:root {
    color-scheme: light;
}

:root[data-tema="oscuro"] {
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        color-scheme: dark;
    }
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--te-acento);

    /* Y del MISMO tamaño. Chrome dibuja la casilla nativa a 13x13 -es su medida
       de siempre, atada a un font-size de 13px que ya nadie usa-, mientras la
       casilla de TRES estados es un dibujo nuestro de 16x16. En la misma fila
       de la 1004 (Productos) convivian las dos: tres casillas de un tamaño y una
       de otro. La medida vive en un token, asi que se cambia en un sitio. */
    width: var(--te-tam-casilla);
    height: var(--te-tam-casilla);
}

/* LA CASILLA, SIN RELLENO. Jose, 13/09/2026: "NO ME GUSTA NADA EL CHECK QUE TENEMOS con fondo
   azul, el fondo transparente". La nativa con accent-color se pinta como un cuadro azul lleno
   con la marca en blanco; la de KUENKA (.checkbox input + label, styleMain.css) ya era un borde
   con la marca en azul y el fondo vacio. Ahora la nativa es IGUAL que esa: borde, fondo
   transparente y, marcada, el borde y la marca en el azul de la casa.

   Sigue siendo el <input> nativo -tecla espacio, foco, lector de pantalla-: solo se le quita el
   dibujo del sistema. El radio no se toca: nadie lo ha pedido. */
input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    border: 1px solid var(--te-borde-fuerte);
    border-radius: var(--te-radio-corto);
    background: transparent no-repeat center / 100% 100%;
    cursor: pointer;
}

input[type="checkbox"]:checked {
    border-color: var(--te-acento);
    background-image: var(--te-casilla-marca);
}

input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--te-acento-foco);
    outline-offset: 1px;
}

input[type="checkbox"]:disabled {
    opacity: .5;
    cursor: default;
}

/* Pero DENTRO DE UNA REJILLA, mas pequena. La medida de arriba es para un formulario, con
   sus etiquetas y su aire; en una fila de rejilla de 21px de alto la misma casilla se come
   la celda y canta al lado del texto. Jose, 09/09/2026, viendo la 4002 (Perfiles de usuario):
   "el check aparece un poco grande respecto a todo lo demas". */
.ui-jqgrid td input[type="checkbox"] {
    width: 13px;
    height: 13px;
    margin: 0;
}

/* Los <button> SIN regla propia se quedaban con el boton del sistema: fondo
   rgb(240,240,240) y borde gris, que en modo oscuro es una pastilla clara en medio
   de la pantalla. Se ve en el 1002 (Grupos), en los botones de navegacion del
   acordeon. Aqui NO se inventa un boton nuevo: se le da el color del tema y se deja
   el resto -tamaño, relleno, forma- a quien lo tenga. */
button {
    background-color: var(--te-superficie-2);
    color: var(--te-texto);
    border: 1px solid var(--te-borde);
    border-radius: var(--te-radio-corto);
    cursor: pointer;
}

/* El texto de sugerencia se distingue del dato escrito: si van del mismo color,
   no se sabe si el campo esta relleno o vacio hasta que se pincha. */
::placeholder {
    color: var(--te-texto-suave);
    opacity: 1;   /* Firefox lo rebaja a .54 por su cuenta */
}

/* El texto seleccionado tambien es del tema: el resaltado de serie del navegador es un gris
   que sobre oscuro parece un fondo roto (Jose, 02/09/2026, el "Todos" del combo de la 3020). */
::selection {
    background-color: var(--te-acento);
    color: var(--te-sobre-acento);
}

/* Dos pesos, y ya. El navegador pone 700 a <b>, <strong> y <th>; aqui se baja al
   nuestro para que no convivan 600 y 700 en la misma frase. */
b, strong, th {
    font-weight: var(--te-peso-fuerte);
}

/* El foco SE VE. Es lo primero que se quita "porque afea" y lo primero que se echa
   de menos: por estas pantallas se navega con el tabulador todo el dia. */
:focus-visible {
    outline: 2px solid var(--te-acento);
    outline-offset: 1px;
}

/* Las tablas de datos se leen mejor pegadas: sin el hueco de 2px que el navegador
   pone entre celdas por defecto. */
table {
    border-collapse: collapse;
}