/* ============================================================================
BASE — las reglas que valen para TODAS las pantallas del HUB
Midpoint Solutions
POR QUÉ EXISTE ESTE ARCHIVO
Cada pantalla se fue escribiendo con su propio estilo adentro. Las que se
hicieron pensando en computadora quedaron bien en computadora, y las que se
revisaron en celular quedaron bien en celular. Nadie escribió nunca la regla
general — así que cada pantalla nueva volvía a empezar de cero, y tarde o
temprano una se rompía en el teléfono.
Esto es esa regla general. Se carga en todas las pantallas, antes que
cualquier estilo propio, y garantiza lo mínimo que nunca debe fallar:
nada se sale de la pantalla, todo se puede tocar con el dedo, y el texto
siempre se puede leer.
CÓMO SE USA EN UNA PANTALLA NUEVA
<- siempre
<- si es del panel interno
panel.css ya trae base.css adentro, así que en el panel basta con panel.css.
LA IDEA DE FONDO
El celular no es "la computadora encogida". Es otra forma de acomodar lo
mismo: en computadora las cosas caben lado a lado, en celular se apilan.
El punto donde cambia es 860px de ancho — arriba de eso, computadora;
abajo, teléfono.
============================================================================ */
/* --------------------------------------------------------------------------
1) EL MODELO DE CAJA
Sin esto, un elemento de 100% de ancho MÁS su relleno mide más de 100% y se
sale. Es la causa número uno de que una pantalla se recorra de lado.
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
/* Impide que el celular agrande el texto por su cuenta al girar la pantalla,
que es lo que descuadra un diseño que se veía bien. */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
-webkit-font-smoothing: antialiased;
/* Un correo largo o un link sin espacios no debe empujar la pantalla. */
overflow-wrap: break-word;
}
/* --------------------------------------------------------------------------
2) NADA SE SALE
Imágenes, videos y dibujos se encogen con su contenedor en vez de imponer
su tamaño original.
-------------------------------------------------------------------------- */
img, svg, video, canvas, iframe {
max-width: 100%;
height: auto;
}
/* Un bloque de código o una dirección larga se desliza dentro de su propia
caja, no arrastrando la página entera. */
pre, code { overflow-x: auto; max-width: 100%; }
/* --------------------------------------------------------------------------
3) TABLAS
Una tabla no se puede "apilar": sus columnas necesitan ancho. En celular la
solución NO es encogerla hasta que no se lea, es dejar que se deslice
dentro de su propio marco mientras el resto de la página queda quieto.
Uso:
...
-------------------------------------------------------------------------- */
.tabla-scroll {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.tabla-scroll table { min-width: 460px; }
/* Aviso de que hay más tabla hacia la derecha: sin esto la gente no se entera
de que puede deslizar y cree que faltan columnas. */
@media (max-width: 860px) {
.tabla-scroll { position: relative; }
.tabla-scroll::after {
content: "";
position: absolute; top: 0; right: 0; bottom: 0; width: 22px;
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.92));
pointer-events: none;
}
}
/* --------------------------------------------------------------------------
4) FORMULARIOS
Dos problemas reales del celular, los dos resueltos aquí:
a) Si un campo tiene letra de menos de 16px, el iPhone hace zoom solo al
tocarlo — y la pantalla queda descuadrada hasta que la persona sale del
campo. No es un capricho de diseño: es el sistema operativo.
b) Los campos con ancho fijo (por ejemplo 220px) caben en computadora y se
salen en un teléfono angosto. En celular todos van al 100%.
-------------------------------------------------------------------------- */
input, select, textarea, button {
font-family: inherit;
max-width: 100%;
}
@media (max-width: 860px) {
input, select, textarea {
font-size: 16px; /* evita el zoom automático de iOS */
width: 100%;
min-width: 0; /* anula cualquier min-width heredado que no quepa */
}
/* Las casillas y los redondos no deben estirarse al ancho completo. */
input[type="checkbox"], input[type="radio"] { width: auto; }
}
/* --------------------------------------------------------------------------
4b) EL OJITO DE LAS CONTRASEÑAS
La caja y el botón. Lo demás —conservar la apariencia del campo cuando pasa
de puntitos a texto— lo resuelve interfaz.js, que fotografía el estilo que
cada pantalla le dio a su propio campo. Aquí solo va lo que es igual en
todas.
-------------------------------------------------------------------------- */
.ui-clave { position: relative; display: block; }
/* Hueco para el botón, del lado donde va. Este renglón pesa más que el
`input[type="password"]` de cualquier pantalla a propósito: el hueco tiene
que existir en los dos estados, con puntitos y con texto. */
.ui-clave input[data-ojito] { padding-right: 46px; }
.ui-clave-ojo {
position: absolute;
top: 50%;
right: 4px;
transform: translateY(-50%);
width: 38px;
height: 38px;
display: flex; align-items: center; justify-content: center;
padding: 0;
border: none;
border-radius: 6px;
background: transparent;
color: #9a9a9a;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.ui-clave-ojo:hover { color: #111111; background: rgba(0, 0, 0, 0.05); }
.ui-clave-ojo.abierto { color: #111111; }
.ui-clave-ojo svg { display: block; }
/* En celular el mínimo para el dedo es 44px, igual que cualquier otro botón. */
@media (max-width: 860px) and (pointer: coarse) {
.ui-clave-ojo { width: 44px; height: 44px; }
.ui-clave input[data-ojito] { padding-right: 52px; }
}
/* --------------------------------------------------------------------------
4c) LOS ENLACES QUE TE LLEVAN A OTRO LADO
POR QUÉ EXISTE ESTA REGLA
Todos los enlaces de navegación del HUB —"volver a mi portal", "cambiar mi
dirección", "iniciar sesión", "registrarse", "ver la página pública"— se
habían escrito con la misma receta, copiada pantalla por pantalla:
font-size: 0.85rem; color: #6f6f6f; text-decoration: none;
Gris tenue, chiquito y sin subrayado. Se ve elegante y es un problema de
verdad: quien no ve bien no encuentra cómo regresar a donde estaba. Y no es
un caso raro — a cualquiera le pasa con el sol en la pantalla del teléfono.
LOS NÚMEROS, QUE AQUÍ SÍ SE PUEDEN MEDIR
El contraste se calcula, no se opina. #6f6f6f sobre blanco da 5.02:1: pasa
el mínimo (AA, 4.5:1) y NO pasa el nivel alto (AAA, 7:1), que es el que
importa cuando alguien te dice que le cuesta ver.
#6f6f6f → 5.02:1 pasa apenas
#333333 → 12.63:1 pasa de sobra
PERO EL COLOR NO ES LO PRINCIPAL
Un enlace que solo se distingue por su color desaparece para quien no
distingue tonos, y también en una impresión en blanco y negro. Por eso
cambian tres cosas a la vez, y cada una funciona sola:
· negritas — se ve el peso aunque no se vea el color;
· subrayado grueso y separado del texto — la señal universal de "esto se
pica", la que la gente reconoce sin pensarlo;
· un poco más grande, de 0.85 a 0.9rem.
Se escribe UNA vez aquí y vale para las veinte pantallas. El selector lleva
la etiqueta adelante (`a.back` en vez de `.back`) a propósito: así pesa más
que el `.back` que cada pantalla trae escrito adentro, y lo gana sin tener
que ir a borrarlos uno por uno.
-------------------------------------------------------------------------- */
a.back, button.back,
a.volver, button.volver,
a.enlace-editar, button.enlace-editar,
a.btn-tertiary,
a.resumen-editar,
a.menu-pie-sitio,
a.enlace, button.enlace,
a.logout, button.logout,
a.ver-sitio,
.ui-volver {
color: #333333;
font-weight: 700;
font-size: 0.9rem;
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 2px;
text-decoration-color: #b8b8b8;
}
a.back:hover, button.back:hover,
a.volver:hover, button.volver:hover,
a.enlace-editar:hover, button.enlace-editar:hover,
a.btn-tertiary:hover,
a.resumen-editar:hover,
a.menu-pie-sitio:hover,
a.enlace:hover, button.enlace:hover,
a.logout:hover, button.logout:hover,
a.ver-sitio:hover,
.ui-volver:hover {
color: #111111;
text-decoration-color: #111111;
}
/* QUIEN NAVEGA CON TECLADO TAMBIÉN TIENE QUE VER DÓNDE ESTÁ PARADO.
Sin esto, el recuadro que marca el foco es el gris pálido del navegador, que
sobre fondo blanco casi no se ve. Con `:focus-visible` solo aparece cuando se
navega con teclado — no le sale a nadie al picarle con el dedo. */
a.back:focus-visible, button.back:focus-visible,
a.volver:focus-visible, button.volver:focus-visible,
a.enlace-editar:focus-visible,
a.btn-tertiary:focus-visible,
a.resumen-editar:focus-visible,
a.menu-pie-sitio:focus-visible,
a.enlace:focus-visible, button.enlace:focus-visible,
a.logout:focus-visible, button.logout:focus-visible,
a.ver-sitio:focus-visible,
.ui-volver:focus-visible {
outline: 3px solid #111111;
outline-offset: 3px;
border-radius: 3px;
}
/* Sobre fondo oscuro se invierte: el mismo peso y el mismo subrayado, pero en
claro. Un #333333 sobre negro sería invisible. */
body.fondo-oscuro a.back, body.fondo-oscuro button.back,
body.fondo-oscuro a.volver, body.fondo-oscuro button.volver,
body.fondo-oscuro a.enlace, body.fondo-oscuro button.enlace,
body.fondo-oscuro .ui-volver {
color: #ffffff;
text-decoration-color: rgba(255, 255, 255, 0.55);
}
/* En celular, un enlace de navegación tiene que ser tan fácil de atinar como un
botón. 44px es el mínimo que un dedo acierta sin fallar; los márgenes
negativos devuelven el espacio que el relleno le quitaría al diseño, así que
el área crece sin que nada se recorra. */
@media (max-width: 860px) and (pointer: coarse) {
a.back, button.back,
a.volver, button.volver,
a.enlace-editar,
a.resumen-editar,
a.menu-pie-sitio,
a.enlace, button.enlace,
a.logout, button.logout,
a.ver-sitio {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 4px;
margin-left: -4px;
margin-right: -4px;
}
}
/* --------------------------------------------------------------------------
5) SE PUEDE TOCAR CON EL DEDO
44 píxeles es el mínimo que un dedo acierta sin fallar. En computadora el
ratón es preciso y no hace falta.
-------------------------------------------------------------------------- */
@media (max-width: 860px) and (pointer: coarse) {
button,
a.btn, .btn,
input[type="submit"], input[type="button"],
select {
min-height: 44px;
}
}
/* --------------------------------------------------------------------------
6) REJILLAS QUE SÍ SE APILAN
Esta es la trampa más común. Escribir:
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
parece responsivo, pero NO lo es: en una pantalla de 320px, esa columna de
260px más el relleno de la página no cabe, y la rejilla se sale.
La corrección es `min(100%, 260px)`: "260px, salvo que no quepa; entonces,
lo que haya". Con eso la misma línea sirve en las dos pantallas.
Uso:
...
columnas de ~260px
...
columnas de ~320px
...
columnas de ~180px
-------------------------------------------------------------------------- */
.rejilla {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: 14px;
}
.rejilla-ancha { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.rejilla-angosta { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
/* Cualquier hijo de una rejilla puede desbordar si su contenido es más ancho
que él. `min-width: 0` le da permiso de encogerse. */
.rejilla > * { min-width: 0; }
/* --------------------------------------------------------------------------
7) FILAS DE FILTROS Y BOTONES
En computadora van lado a lado; en celular, uno debajo de otro y a todo lo
ancho, que es como se usa un teléfono con una sola mano.
-------------------------------------------------------------------------- */
/* Ojo con los nombres: `.fila` NO se define aquí a propósito. Ya significa
cosas distintas en varias pantallas (un renglón de ficha, un renglón de
tabla), y una regla general con ese nombre las rompería todas. Un archivo
compartido no puede quedarse con nombres de uso común. */
.fila-flex { display: flex; flex-wrap: wrap; gap: 12px; }
.fila-flex > * { min-width: 0; }
.filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filtro-grupo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
@media (max-width: 860px) {
.filtros { flex-direction: column; align-items: stretch; gap: 10px; }
.filtro-grupo { width: 100%; }
.filtro-grupo select, .filtro-grupo input { width: 100%; min-width: 0; }
/* El contador de resultados deja de estar pegado a la derecha. */
.filtro-contador { margin-left: 0 !important; align-self: flex-start !important; }
}
/* --------------------------------------------------------------------------
8) TAMAÑOS DE TEXTO
Un título de 1.6rem se lee bien en un monitor y se come la pantalla de un
teléfono. Se bajan solo los títulos; el texto de lectura se queda igual,
porque achicar el cuerpo lo vuelve ilegible.
-------------------------------------------------------------------------- */
@media (max-width: 860px) {
h1 { font-size: 1.3rem; line-height: 1.25; }
h2 { font-size: 1.05rem; }
}
/* --------------------------------------------------------------------------
9) AYUDAS PARA CASOS SUELTOS
-------------------------------------------------------------------------- */
/* Para un dato que nunca debe partirse a media palabra (un folio, un total). */
.no-partir { white-space: nowrap; }
/* Para un correo o una dirección larga dentro de una caja angosta. */
.partir-todo { overflow-wrap: anywhere; word-break: break-word; }
/* Mostrar/ocultar según el dispositivo, cuando de verdad no hay otra forma.
Se usa con moderación: dos versiones del mismo contenido es el doble de
cosas que mantener. */
.solo-celular { display: none; }
@media (max-width: 860px) {
.solo-celular { display: block; }
.solo-computadora { display: none !important; }
}
/* --------------------------------------------------------------------------
10) QUIEN PREFIERE QUE NADA SE MUEVA
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* --------------------------------------------------------------------------
11) EL BOTÓN DE VOLVER
No es adorno. En la app instalada en el celular no se ve la barra del
navegador, así que sin este botón hay pantallas de las que literalmente no
se puede salir más que cerrando la app.
Lo pinta interfaz.js cuando la pantalla no trae ninguno. Las pantallas que
ya tenían su enlace conservan el suyo — solo se les agrega la inteligencia
de regresar a donde de verdad venías.
-------------------------------------------------------------------------- */
/* Va POSICIONADO, no en el flujo. Casi todas estas pantallas centran una
tarjeta a mitad de la ventana; un botón metido en el flujo se va al centro
junto con ella y queda flotando encima del texto. Anclado arriba a la
izquierda cae donde la gente ya lo busca, sin empujar nada. */
.ui-volver {
position: absolute;
top: calc(12px + env(safe-area-inset-top));
left: calc(12px + env(safe-area-inset-left));
z-index: 20;
display: inline-flex; align-items: center; gap: 7px;
background: none; border: none; cursor: pointer;
font-family: inherit;
padding: 10px 8px; margin: 0;
/* El tamaño, el peso, el color y el subrayado los pone el bloque 4c, que es
el mismo para todos los enlaces de navegación del HUB. Aquí solo queda lo
que es propio de este botón: dónde se para y cómo se acomoda. */
}
.ui-volver-flecha { font-size: 1rem; line-height: 1; }
body.fondo-oscuro .ui-volver:hover { color: #ffffff; }
/* --------------------------------------------------------------------------
12) LA PANTALLA DE CARGA
La animación es la marca: dos flechas que se encuentran en un punto medio.
Se cierra girando —las flechas se juntan— y se vuelve a abrir. No es un
girito genérico: es el logotipo diciendo lo que significa.
-------------------------------------------------------------------------- */
.ui-cargando {
position: fixed; inset: 0; z-index: 9000;
display: flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(3px);
animation: ui-aparecer 0.18s ease both;
}
body.fondo-oscuro .ui-cargando { background: rgba(17, 17, 17, 0.94); }
.ui-cargando-caja { text-align: center; }
.ui-cargando-marca {
/* 140px de ancho. La marca gira 360°, asi que lo que tiene que caber no es
el ancho sino la diagonal: raiz(140^2 + 59^2) = 152px, y en el pico de la
animacion (scale 1.06) son 161px. En el telefono mas angosto que nos
importa (390px) sobran 229px. No se desborda. */
width: 140px; height: auto; display: block; margin: 0 auto 22px;
animation: ui-implosion 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
/* Pantallas de verdad angostas: la marca se ajusta al ancho disponible en vez
de asomarse por los lados. 34vw de ancho deja la diagonal en ~37vw. */
@media (max-width: 380px) {
.ui-cargando-marca { width: 34vw; }
}
body.fondo-oscuro .ui-cargando-marca { filter: invert(1); }
.ui-cargando-texto {
font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
color: #8a8a8a;
}
@keyframes ui-aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-implosion {
/* Abierto, quieto un instante */
0% { transform: scale(1) rotate(0deg); opacity: 1; }
/* La implosión: se cierra girando, rápido */
28% { transform: scale(0.18) rotate(200deg); opacity: 0.55; }
/* El punto medio: un respiro diminuto, que es donde vive el nombre */
36% { transform: scale(0.14) rotate(360deg); opacity: 0.45; }
/* Se vuelve a abrir, un poco de más */
68% { transform: scale(1.06) rotate(360deg); opacity: 1; }
/* Y asienta */
80% { transform: scale(1) rotate(360deg); opacity: 1; }
100% { transform: scale(1) rotate(360deg); opacity: 1; }
}
/* Quien pidió que nada se mueva ve el logotipo quieto. La pantalla de carga
sigue apareciendo — lo que se quita es el movimiento, no el aviso. */
@media (prefers-reduced-motion: reduce) {
.ui-cargando-marca { animation: none; opacity: 0.75; }
.ui-cargando { animation: none; }
}
/* --------------------------------------------------------------------------
13) MICRO-INTERACCIONES — que se sienta que responde ⟨3/9⟩
Petición de Daniel: "que se vea interactivo, bonito y medio pop, respetando
los colores de Midpoint". La identidad sigue siendo blanco y negro (§9.5);
lo que cambia es que las cosas CONTESTAN cuando las tocas:
· Un botón se levanta 2px con sombra al pasar el cursor, y se hunde un
3% al picarlo. Es el "pop".
· Los botones de borde se invierten al pasar el cursor: el de borde
negro se rellena de negro, el de borde blanco (sobre fondo oscuro) se
rellena de blanco. Un solo movimiento de color, siempre el mismo.
· Las tarjetas que son enlaces se levantan 3px.
· Los campos muestran un halo suave al recibir el foco.
Vive aquí y no en cada pantalla por la misma razón que el resto de este
archivo: son ~30 pantallas, y una animación distinta en cada una no se ve
"pop", se ve descuidada. Los nombres de clase de botones de todo el HUB
están en la lista de abajo; una pantalla nueva que use cualquiera de
ellos hereda esto sin escribir nada.
Los selectores llevan dos clases (.btn.btn-secondary) a propósito: cada
pantalla trae su propio `.btn-secondary:hover { background: #f4f4f4 }`,
y con una sola clase el de la pantalla ganaría por cargarse después.
La sección 10 (quien prefiere que nada se mueva) apaga todo esto sola.
-------------------------------------------------------------------------- */
:root {
--pop-sombra: 0 8px 20px rgba(17, 17, 17, 0.16);
--pop-sombra-chica: 0 2px 6px rgba(17, 17, 17, 0.14);
}
/* Todos los botones del HUB, con el mismo pulso. El `:is(a, button)` no es
adorno: sube la especificidad para ganarle al `.boton { transition: … }`
que la portada trae escrito, que si no se comía el movimiento. */
.boton:is(a, button), .btn:is(a, button), .btn-submit:is(a, button), .ya-btn:is(a, button),
.btn-reenviar, .btn-mini,
.barra-hamburguesa, .btn-menu, .btn-traer,
.franja-admin button, .franja-admin a, .enlace-pista {
transition: transform 0.16s ease, box-shadow 0.22s ease,
background-color 0.18s ease, color 0.18s ease,
border-color 0.18s ease, opacity 0.18s ease;
}
.boton:hover, .btn:hover, .btn-submit:hover:not(:disabled), .ya-btn:hover,
.btn-reenviar:hover:not(:disabled), .btn-mini:hover {
transform: translateY(-2px);
box-shadow: var(--pop-sombra);
}
.boton:active, .btn:active, .btn-submit:active:not(:disabled), .ya-btn:active,
.btn-reenviar:active:not(:disabled), .btn-mini:active,
.barra-hamburguesa:active, .btn-menu:active, .btn-traer:active {
transform: translateY(0) scale(0.97);
box-shadow: var(--pop-sombra-chica);
transition-duration: 0.08s;
}
/* Un botón apagado no se mueve: moverse es prometer que va a hacer algo. */
.btn:disabled, .btn-submit:disabled, .btn-reenviar:disabled, .btn[aria-disabled="true"] {
transform: none !important;
box-shadow: none !important;
}
/* Los de borde NEGRO se rellenan de negro. */
.btn.btn-secondary:hover, .btn.btn-blanco:hover, .boton.boton-borde-oscuro:hover,
.ya-btn.ya-btn-borde:hover, .btn-reenviar:hover:not(:disabled) {
background: #111111;
color: #ffffff;
border-color: #111111;
}
/* Los de borde BLANCO (sobre fondo oscuro) se rellenan de blanco. */
.boton.boton-borde-claro:hover, .btn.btn-secundario:hover,
.franja-admin button:hover, .franja-admin a:hover {
background: #ffffff;
color: #111111;
border-color: #ffffff;
}
/* Los rellenos solo aclaran un pelo: el movimiento ya hace el trabajo. */
.btn.btn-primary:hover, .btn.btn-negro:hover, .btn-submit:hover:not(:disabled),
.ya-btn.ya-btn-negro:hover {
background: #2a2a2a;
opacity: 1;
}
.boton.boton-claro:hover, .btn.btn-principal:hover { background: #f2f2f2; }
/* Las tarjetas que son enlaces (el portal, la portada de Nayo) se levantan. */
a.tarjeta, a.caja, a.caja-linea, a.ficha {
transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.18s ease;
}
a.tarjeta:hover, a.caja:hover, a.caja-linea:hover, a.ficha:hover {
transform: translateY(-3px);
box-shadow: var(--pop-sombra);
border-color: #111111;
}
a.tarjeta:active, a.caja:active, a.caja-linea:active, a.ficha:active { transform: translateY(-1px) scale(0.99); }
/* Los enlaces de navegación: el subrayado se separa un poco al pasar. */
a.enlace-tenue, .flecha, .resumen-editar, .ir-sitio, button.enlace, .enlace-editar {
transition: color 0.15s ease, text-decoration-color 0.15s ease,
text-underline-offset 0.15s ease, opacity 0.15s ease;
}
a.enlace-tenue:hover, .flecha:hover, .resumen-editar:hover { text-underline-offset: 6px; }
/* Las casillas y opciones del formulario de leads responden al cursor y
marcan la elegida con un borde firme. */
.option, .radio-option {
transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.12s ease;
}
.option:hover, .radio-option:hover { border-color: #111111; }
.option:has(input:checked), .radio-option:has(input:checked) {
border-color: #111111;
background: #f6f5f3;
}
/* Los campos: un halo suave al recibir el foco, en vez de solo cambiar el borde. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select, textarea {
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus:not([type="checkbox"]):not([type="radio"]), select:focus, textarea:focus {
box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.10);
}