/* ==========================================================
   CRM - CONGRUENCIA VISUAL (tarjetas y botones)

   Va la ULTIMA de todas las hojas (despues de compacto.css): es la
   unica forma de que gane siempre, sin pelear letra por letra con
   las 20 hojas de arriba, cada una con su propia idea de cuanto
   redondeo o que borde le toca a cada cosa (ver auditoria: habia
   4 tokens de radio distintos y mas de 270 valores de border-radius
   sueltos en pixeles). En vez de tocar esas 20 hojas, se define UNA
   sola apariencia de "tarjeta" y UNA de "boton" y se la fuerza en
   todos lados. El contenido de cada tarjeta sigue siendo el que ya
   era (grilla de KPIs, lista de piezas, chat, etc.) — esto solo
   pinta el marco: radio, borde, resplandor.

   DE DONDE SALE ESTE LOOK. La tarjeta con el borde y el resplandor
   ambar que se pidio como referencia (Usuarios, tarjeta de un
   usuario) no es un estilo especial: es el :hover normal de
   `.user-card` (ver index.css) mostrado en la captura, mas el radio
   de 20px que ya trae `.glass-panel` (ver ui.css, --r-lg). Ese mismo
   patron —borde neutro en reposo, borde + resplandor de acento solo
   al pasar el mouse o enfocar con teclado— es el que se generaliza
   aca. El color del resplandor sale de --acento-rgb/--halo, que ya
   los reescribe js/apariencia.js segun el acento que el usuario
   elija: esto no fija un ambar a mano, sigue el acento de cada uno.

   RENDIMIENTO — por que el resplandor SOLO esta en :hover/:focus.
   rendimiento.css (la hoja de arriba) ya habia sacado los blur y los
   box-shadow permanentes de las tarjetas repetidas (filas de tabla,
   .lead-row, .resumen-item, .stat-card) porque cientos de sombras
   dibujadas a la vez son las que hacian pesado el arrastre/resize de
   la ventana. Un box-shadow que solo existe en :hover no repite ese
   problema: el navegador lo pinta para UN elemento, el que esta bajo
   el mouse, no para los cientos que hay en pantalla. Por eso aca:
     - nada de box-shadow ni de border-color de acento "siempre puesto"
     - nada de backdrop-filter (ya lo mato rendimiento.css, no se
       reintroduce)
     - las filas repetidas (.lead-row, .cliente-row, .resumen-item,
       filas de .custom-table) NO se tocan: siguen sin sombra, sin
       redondeo de tarjeta. Una fila de tabla no es una tarjeta y
       ponerle 20px de radio a cada una ademas se veria mal (bordes
       dentados en una lista de cientos).
   ========================================================== */

/* ----------------------------------------------------------------
   1. TARJETAS: mismo radio, mismo borde en reposo, en todas las
      pestañas. Reusa el radio grande que ya definia ui.css para
      .glass-panel (--r-lg, 20px) en vez de inventar un quinto valor.
   ---------------------------------------------------------------- */

.glass-panel,
.metric-card,
.chart-card,
.users-container,
.bitacora-panel,
.chat-lista,
.chat-panel,
.matcher-carta,
.modal-card.es-pagina,
.modal-content,
.user-card,
.tarjeta-panel,
.profile-header-card,
.stat-card,
.ap-seccion,
.marketing-pieza,
.marketing-plantilla,
.marketing-acceso,
.marketing-campanas,
.mked-bloque,
.mked-lienzo,
.prosp-cosecha,
.salud-luz {
    border-radius: var(--r-lg, 20px) !important;
    border: 1px solid var(--borde-luz, var(--border-color)) !important;
}

/* Las que viven adentro de otra tarjeta (una pieza dentro de la
   grilla de Piezas, una capa dentro del panel del Editor) no
   necesitan el mismo radio grande: se ven mejor un escalon mas
   chicas, si no la tarjeta de afuera parece un marco de fotos. */
.marketing-pieza,
.mked-capa-item,
.mked-bloque {
    border-radius: var(--r-md, 14px) !important;
}

/* Filo superior de luz (el detalle que ya usaba .glass-panel) se
   extiende a toda tarjeta nueva de la lista, para que no se note
   cual es "vieja" y cual "nueva". Barato: un pseudo-elemento mas,
   nada que se anime. */
.user-card::after,
.tarjeta-panel::after,
.profile-header-card::after,
.stat-card::after,
.marketing-pieza::after,
.marketing-plantilla::after,
.marketing-acceso::after {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
}

.user-card,
.tarjeta-panel,
.profile-header-card,
.stat-card,
.marketing-pieza,
.marketing-plantilla,
.marketing-acceso {
    position: relative;
}

/* ----------------------------------------------------------------
   2. RESPLANDOR — solo en :hover y :focus-visible. Ver el porque
      del rendimiento arriba. var(--halo) ya trae el acento del
      usuario (js/apariencia.js la reescribe al cambiar de color).
   ---------------------------------------------------------------- */

.glass-panel:hover,
.metric-card:hover,
.chart-card:hover,
.chat-panel:hover,
.matcher-carta:hover,
.user-card:hover,
.tarjeta-panel:hover,
.profile-header-card:hover,
.stat-card:hover,
.marketing-pieza:hover,
.marketing-plantilla:hover,
.marketing-acceso:hover {
    border-color: var(--primary) !important;
    box-shadow: var(--halo) !important;
    transition: border-color var(--t-medio, 200ms) ease, box-shadow var(--t-medio, 200ms) ease;
}

.glass-panel:focus-within,
.tarjeta-panel:focus-within {
    border-color: var(--primary) !important;
    box-shadow: var(--halo) !important;
}

/* ----------------------------------------------------------------
   3. BOTONES: mismo radio en todos lados. Los de icono/mini un
      escalon mas chico (son cuadrados o casi, un radio de 20px los
      dejaria redondos de mas). El relleno de cada boton (primario en
      degrade, secundario transparente, etc.) no se toca: eso sigue
      siendo cosa de cada hoja, aca solo se pareja el marco.
   ---------------------------------------------------------------- */

.btn,
a.btn,
.btn-primary,
.btn-primary-3d,
.btn-secondary,
.marketing-tab,
.mked-modo,
.marketing-canal-op {
    border-radius: var(--r-md, 14px) !important;
}

.btn-mini,
.btn-icon,
.btn-icono {
    border-radius: var(--r-sm, 10px) !important;
}

/* moderno.css apaga el icono de cada pestaña a 0.7 de opacidad, sin
   transicion y sin devolverlo a 1 en ningun estado (ni hover ni
   activo): por eso se veian mas oscuros y "muertos" que los del pie
   del panel (video, chat, ajustes, avisos, salir), que nunca tuvieron
   esa regla. Se pareja aca, con la misma transicion de color que ya
   usa el resto del boton. */
.tab-btn i {
    opacity: 1 !important;
    transition: color var(--d-fast, 140ms) var(--c-inout, ease) !important;
}

/* Y el color, que era el grueso del problema: moderno.css le clava
   `color: var(--text-dim) !important` al icono de cada pestaña. Es un
   gris mas oscuro que el --text-muted del boton que lo contiene, y al
   ser !important el icono queda desenganchado de su boton: no se
   aclara en hover ni toma el acento al activarse, se queda siempre en
   el mismo gris apagado. Los iconos del pie del panel no tienen
   ninguna regla de color propia —heredan del boton— y por eso se ven
   vivos y acompañan cada estado. Heredar es lo que los iguala. */
.tab-btn i {
    color: inherit !important;
}

/* Y el tamaño: iconos.css les da 1.12em a los iconos de las pestañas
   igual que a los del pie, pero escritorio.css fija 15px con
   !important y le gana, asi que arriba quedaban en 15px y abajo en
   ~19.7px (1.12em sobre el 1.1rem de .btn-icon, que ahi nadie pisa).
   No es un detalle de milimetros: `vector-effect: non-scaling-stroke`
   dibuja el trazo siempre a 1.75px reales, asi que el icono mas chico
   gasta la misma tinta en menos dibujo y se lee mas denso y mas
   pesado. Igualar el tamaño es lo que iguala el peso del trazo.
   Entran en la columna de 20px que define escritorio.css. */
html.nav-lateral body .main-tabs .tab-btn i.ico {
    font-size: 19.7px !important;
}

/* Las pestañas del menu lateral (.tab-btn) son botones de icono
   como cualquier .btn-icon, pero venian de escritorio.css con
   `border: none`, asi que no tenian donde encender el resplandor
   de abajo: el hover se quedaba en un simple cambio de texto, sin
   el acento que si tienen video/chat/ajustes/avisos/salir en el
   pie del panel. Un borde transparente les da ese lugar. */
.tab-btn {
    border: 1px solid transparent !important;
}

/* Resplandor de boton, tambien solo al pasar el mouse o enfocar:
   un boton por vez bajo el cursor, cero costo por los que no se
   tocan. Los que ya traen su propio :hover con transform/glow
   propio (el primario de .section-head__acciones en ui.css) no se
   pisan: esta regla solo agrega el borde de acento donde no habia
   ninguno, no reemplaza sombras mas fuertes ya definidas despues. */
.btn:hover,
a.btn:hover,
.btn-secondary:hover,
.btn-mini:hover,
.btn-icon:hover,
.btn-icono:hover,
.marketing-tab:hover,
.mked-modo:hover,
.marketing-canal-op:hover,
.tab-btn:hover:not(.active) {
    border-color: var(--primary) !important;
}

/* index.css sube 2px el boton primario en :hover en TODA la app,
   sin escopear. Un boton solo, eso no se nota; dos botones en fila
   (uno primario, uno no) se ven torcidos, porque el primario queda
   mas arriba que su vecino apenas se pasa el mouse cerca. Se apaga
   ese levante fuera de `.section-head__acciones` (que tiene su
   propio efecto 3D deliberado, con press incluido, y ese no se
   toca) y el resplandor de borde de arriba pasa a ser el unico
   feedback de hover: mismo lenguaje que el resto de la tarjeta. */
.btn-primary-3d:hover,
.btn-primary:hover,
a.btn-primary-3d:hover,
a.btn-primary:hover {
    transform: none !important;
}

.section-head__acciones .btn-primary-3d:hover,
.section-head__acciones .btn-primary:hover {
    transform: translateY(-2px) !important;
}

.btn:focus-visible,
a.btn:focus-visible,
.btn-secondary:focus-visible,
.btn-mini:focus-visible,
.btn-icon:focus-visible,
.btn-icono:focus-visible,
.tab-btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.campo:focus-visible {
    outline: none;
    border-color: var(--primary) !important;
    box-shadow: var(--halo) !important;
}

/* ----------------------------------------------------------------
   4. CELULAR: mismo marco, nada de tactil que dependa de :hover
      (no existe en touch) — el radio y el borde en reposo ya
      alcanzan para que se sienta igual que en escritorio. No hace
      falta duplicar reglas: los selectores de arriba no tienen
      media query, corren igual en las dos pantallas.
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   4. BOTONES QUE COMPARTEN RENGLON: misma altura y mismo tope.

   `.btn-primary-3d` (index.css) esta pensado para ir SOLO, debajo de
   un campo, en la pantalla de login: de ahi le viene el
   `margin-top: 0.5rem`, el `font-size: 1.05rem` y un padding vertical
   mas alto que el de `.btn`. Cuando comparte fila con un
   `.btn-secondary` (Cancelar / Exportar, la barra del Taller, el pie
   de un modal) esas tres diferencias se ven las tres juntas: nace mas
   abajo que su companero Y es mas alto que el.

   Ya habia dos parches sueltos para esto —marketing.css
   (`.marketing-form-botones`) y el editor de piezas (`.mked-botones`)—
   cada uno anulando el margen en su propia fila. Esto lo resuelve una
   sola vez para todas las filas de botones de la app: alinea el tope
   (margin-top: 0), iguala la caja (misma altura, mismo padding y
   tipografia que `.btn`) y centra verticalmente el contenido.

   `align-items: center` en el contenedor no alcanzaba: centra cajas de
   distinto alto, pero deja los bordes de arriba y de abajo corridos
   igual. Lo que hace falta es que las cajas MIDAN lo mismo.
   ---------------------------------------------------------------- */

.taller-modal__acciones,
.taller-toolbar,
.marketing-form-botones,
.mked-botones,
.modal-actions,
.crm-dialogo-acciones,
.campana-previa-acciones,
.perfil-sesion-acciones,
.matcher-botones,
.ap-pie-botones,
.avisos-acciones {
    display: flex;
    align-items: center;
}

.taller-modal__acciones > .btn-primary-3d,
.taller-toolbar > .btn-primary-3d,
.marketing-form-botones > .btn-primary-3d,
.mked-botones > .btn-primary-3d,
.modal-actions > .btn-primary-3d,
.crm-dialogo-acciones > .btn-primary-3d,
.campana-previa-acciones > .btn-primary-3d,
.perfil-sesion-acciones > .btn-primary-3d,
.matcher-botones > .btn-primary-3d,
.ap-pie-botones > .btn-primary-3d,
.avisos-acciones > .btn-primary-3d {
    margin-top: 0 !important;
    /* Las mismas medidas que `.btn` (index.css): asi las dos cajas del
       renglon miden igual, sin depender de que el texto de adentro
       tenga el mismo largo. */
    padding: 0.75rem 1.25rem !important;
    font-size: 0.9rem !important;
    /* inline-flex, igual que `.btn`: `display:flex` en un hijo de una
       fila flex no cambia como se lo mide, pero deja la caja sin el
       ajuste al contenido que si tiene el companero. */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* El icono de adentro tambien: 1.2rem contra el 0.9rem heredado del
   boton de al lado estiraba la linea y devolvia parte de la
   diferencia de alto por la ventana de atras. */
.taller-modal__acciones > .btn-primary-3d i,
.taller-toolbar > .btn-primary-3d i,
.marketing-form-botones > .btn-primary-3d i,
.mked-botones > .btn-primary-3d i,
.modal-actions > .btn-primary-3d i,
.crm-dialogo-acciones > .btn-primary-3d i,
.campana-previa-acciones > .btn-primary-3d i,
.perfil-sesion-acciones > .btn-primary-3d i,
.matcher-botones > .btn-primary-3d i,
.ap-pie-botones > .btn-primary-3d i,
.avisos-acciones > .btn-primary-3d i {
    font-size: 1em;
}