/* ==========================================================
   CRM - PANTALLAS COMPACTAS

   Configuracion se ve mas chica y aprovecha mejor el espacio que
   el resto de las pestañas: tarjetas mas bajas, texto mas chico,
   menos aire entre secciones. Esta hoja lleva esa misma densidad
   a TODAS las pestañas MENOS Leads (la tabla tiene su propia
   escala) y Configuracion (es la referencia).

   Va ULTIMA de todas para ganarle por orden a cualquier padding o
   font-size con `!important` de las hojas de antes.

   A PROPOSITO NO HAY variables globales (`--e-2/3/4`) ni un margen
   generico tipo `> * + *`. La primera version de esta hoja tenia
   las dos cosas y rompio la relacion de aspecto de tarjetas que
   no son las metricas de siempre —Matcher, el tablero de Kanban—
   porque esos tokens tambien se usan para MEDIR, no solo para
   separar. Aca se toca SOLO lo que se sabe que es una tarjeta de
   metricas o un panel de texto, por su clase, uno por uno. Lo que
   no se nombra explicitamente no se toca. */

/* --- Tarjetas de metricas: la fila de arriba de Dashboard y
   Perfil, mas baja y con menos separacion, como en Configuracion. */
.tab-content:not(#tab-leads):not(#tab-config) .metrics-grid {
    gap: 8px !important;
    margin-bottom: 12px !important;
}

.tab-content:not(#tab-leads):not(#tab-config) .metric-card {
    padding: 10px 12px !important;
    gap: 8px !important;
    min-height: 0 !important;
}

.tab-content:not(#tab-leads):not(#tab-config) .metric-icon {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.85rem !important;
    border-radius: 8px !important;
}

.tab-content:not(#tab-leads):not(#tab-config) .metric-value {
    font-size: 1.2rem !important;
}

.tab-content:not(#tab-leads):not(#tab-config) .metric-data h3 {
    font-size: 0.68rem !important;
}

.tab-content:not(#tab-leads):not(#tab-config) .metric-subtext {
    font-size: 0.62rem !important;
}

/* --- Paneles de texto: chart-card, resumen-item, users-container,
   bitacora-panel. NO toca Matcher (.matcher-hero, .matcher-carta),
   ni el tablero (.kanban-*, .grid-consultas): esos miden su alto
   por su propio contenido (una foto, una columna) y apretarles el
   padding con una regla generica es lo que rompia la proporcion. */
.tab-content:not(#tab-leads):not(#tab-config) .chart-card,
.tab-content:not(#tab-leads):not(#tab-config) .resumen-item,
.tab-content:not(#tab-leads):not(#tab-config) .users-container,
.tab-content:not(#tab-leads):not(#tab-config) .bitacora-panel {
    padding: 10px 14px !important;
    border-radius: 14px !important;
    margin-bottom: 12px !important;
}

.tab-content:not(#tab-leads):not(#tab-config) .chart-card h3,
.tab-content:not(#tab-leads):not(#tab-config) .bitacora-panel h3,
.tab-content:not(#tab-leads):not(#tab-config) .section-head h2,
.tab-content:not(#tab-leads):not(#tab-config) .section-head h3 {
    font-size: 0.88rem !important;
    margin-bottom: 6px !important;
}

.tab-content:not(#tab-leads):not(#tab-config) .section-head {
    margin-bottom: 8px !important;
}

/* Perfil en particular: la fila de arriba (avatar, ADMIN, contador
   de horas) y los bloques que siguen (Bitacora, Avisos, Editar
   Datos) traen su propio aire de sobra en agenda.css/ajustes.css,
   pensado para cuando esas tarjetas eran las unicas en pantalla.
   Ahora conviven con el resto y se achican igual. */
#tab-profile .bitacora-resumen > span,
#tab-profile .bitacora-resumen > a {
    padding: 4px 10px !important;
    font-size: 0.76rem !important;
}

#tab-profile .form-group {
    margin-bottom: 8px !important;
}

#tab-profile input,
#tab-profile textarea {
    padding: 8px 10px !important;
    font-size: 0.85rem !important;
}

/* --- Texto de ayuda, un punto mas chico, como en Configuracion.
   Los `.campana-ayuda` y `.ap-ayuda` son parrafos de una linea de
   instrucciones, no contenido que dependa de medirse a si mismo. */
.tab-content:not(#tab-leads):not(#tab-config) .campana-ayuda,
.tab-content:not(#tab-leads):not(#tab-config) .ap-ayuda {
    font-size: 0.8rem !important;
}