/* ==========================================================
   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;
}

/* 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 {
    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,
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.
   ---------------------------------------------------------------- */