/* ==========================================================================
   CRM Contenido Digital — hoja de estilo única.
   Sustituye a: alertas.css, clientes.css, contratos.css, facturas.css,
   usuarios.css, crear-clientes.css, ficha-clientes.css, ficha-contratos.css,
   ficha-usuario.css, creacion-facturas.css, menu.css y menu_2.css.
   Se carga siempre DESPUÉS de Bootstrap 5, así que puede sobrescribirlo.
   ========================================================================== */

:root {
    /* Superficies, de la más al fondo a la más elevada. El fondo NO es blanco
       puro: los paneles son blancos y necesitan despegarse de él. */
    --crm-fondo: #f4f6fa;
    --crm-superficie: #ffffff;
    --crm-superficie-alta: #f1f4f9;
    --crm-superficie-viva: #e6ebf3;

    --crm-borde: #d3dae5;
    --crm-borde-suave: #e4e9f0;

    /* Escala de grises verificada contra blanco: 15.6:1, 7.5:1 y 4.8:1. El
       texto suave se queda justo por encima del mínimo AA de 4.5:1, que es lo
       que exigen los pies de KPI y las referencias de tabla a 0,78rem. */
    --crm-texto-fuerte: #0f172a;
    --crm-texto: #1f2937;
    --crm-texto-tenue: #4b5563;
    --crm-texto-suave: #6b7280;

    /* El índigo se baja dos escalones respecto al tema oscuro: el #6366f1 de
       antes sobre blanco da 3,6:1 y no llega para texto ni para iconos.
       "-claro" ya no significa más luminoso, significa el tono de los enlaces. */
    --crm-primario: #4f46e5;
    --crm-primario-claro: #4338ca;
    --crm-primario-oscuro: #3730a3;

    --crm-exito: #16a34a;
    --crm-peligro: #dc2626;
    --crm-aviso: #d97706;
    --crm-morado: #9333ea;
    --crm-info: #0284c7;

    /* Sombras multicapa: dan profundidad sin recurrir a bordes duros. Sobre
       claro el negro al 45-70% del tema oscuro ensuciaba; se tiñen de azul
       y se bajan mucho, compensando con los bordes. */
    --crm-sombra-1: 0 1px 2px rgba(15, 23, 42, .06);
    --crm-sombra-2: 0 4px 12px -2px rgba(15, 23, 42, .10), 0 2px 4px -2px rgba(15, 23, 42, .06);
    --crm-sombra-3: 0 16px 40px -12px rgba(15, 23, 42, .18), 0 4px 12px -4px rgba(15, 23, 42, .10);

    --crm-radio: 12px;
    --crm-radio-sm: 8px;
    --crm-radio-lg: 16px;

    --crm-ancho-sidebar: 244px;
    --crm-ancho-sidebar-min: 68px;
    --crm-alto-topbar: 60px;

    --crm-transicion: 160ms cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------- Base --- */

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

html {
    /* Para que los anclajes no queden ocultos bajo la barra fija. */
    scroll-padding-top: calc(var(--crm-alto-topbar) + 12px);
}

body {
    background-color: var(--crm-fondo);
    color: var(--crm-texto);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Inter tiene cifras de ancho variable; en un CRM las columnas de importes
   y fechas tienen que cuadrar unas debajo de otras. */
.table,
.crm-kpi-valor,
input,
select,
textarea,
.crm-cifra {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--crm-texto-fuerte);
    font-weight: 650;
    letter-spacing: -.011em;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }

a {
    color: var(--crm-primario-claro);
    text-decoration: none;
}

a:hover {
    color: var(--crm-primario-oscuro);
}

.crm-tenue {
    color: var(--crm-texto-tenue);
}

/* Foco visible solo con teclado, nunca con el ratón. */
:focus-visible {
    outline: 2px solid var(--crm-primario-claro);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection {
    background-color: rgba(79, 70, 229, .20);
}

/* Barras de scroll discretas, a juego con el tema. */
* {
    scrollbar-width: thin;
    scrollbar-color: #c5cdd9 transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-thumb {
    background-color: #c5cdd9;
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: #a9b3c2;
}

/* Enlace de salto para quien navega con teclado. */
.crm-saltar {
    position: absolute;
    left: -9999px;
    z-index: 1080;
    padding: 10px 16px;
    background-color: var(--crm-primario);
    color: #fff;
    border-radius: var(--crm-radio-sm);
}

.crm-saltar:focus {
    left: 12px;
    top: 12px;
    color: #fff;
}

/* ------------------------------------------------------- Armazón de la app --- */

.crm-app {
    display: flex;
    min-height: 100vh;
}

/* ------------------------------------------------------------ Sidebar --- */

.crm-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    width: var(--crm-ancho-sidebar);
    height: 100vh;
    background-color: var(--crm-superficie);
    /* Borde marcado, no suave: el sidebar es blanco y el contenido queda sobre
       un gris muy próximo; con el borde suave la separación desaparecía. */
    border-right: 1px solid var(--crm-borde);
    transition: width var(--crm-transicion), transform var(--crm-transicion);
}

.crm-sidebar-marca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: var(--crm-alto-topbar);
    padding: 0 14px;
    border-bottom: 1px solid var(--crm-borde-suave);
    flex-shrink: 0;
}

/* El logotipo es un anagrama casi cuadrado: a 30px de alto no se leía. */
.crm-sidebar-marca img {
    height: 44px;
    width: auto;
    flex-shrink: 0;
}

.crm-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.crm-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--crm-radio-sm);
    color: var(--crm-texto-tenue);
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color var(--crm-transicion), color var(--crm-transicion);
}

.crm-nav-item i {
    width: 20px;
    text-align: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.crm-nav-item:hover {
    background-color: var(--crm-superficie-alta);
    color: var(--crm-texto);
}

.crm-nav-item.activo {
    background-color: rgba(79, 70, 229, .10);
    color: var(--crm-primario-claro);
    font-weight: 600;
}

/* Barrita de la izquierda que marca la sección actual. */
.crm-nav-item.activo::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    border-radius: 0 3px 3px 0;
    background-color: var(--crm-primario);
}

.crm-nav-item.activo i {
    color: var(--crm-primario-claro);
}

.crm-sidebar-pie {
    flex-shrink: 0;
    padding: 12px 10px;
    border-top: 1px solid var(--crm-borde-suave);
}

.crm-usuario {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    min-width: 0;
}

/* Iniciales del usuario; evita depender de una foto que no existe. */
.crm-avatar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--crm-primario), var(--crm-morado));
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.crm-usuario-datos {
    min-width: 0;
    line-height: 1.25;
}

.crm-usuario-nombre {
    display: block;
    color: var(--crm-texto);
    font-size: 0.85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-usuario-rol {
    display: block;
    color: var(--crm-texto-suave);
    font-size: 0.72rem;
}

.crm-btn-salir {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 6px;
    padding: 8px 12px;
    background: none;
    border: none;
    border-radius: var(--crm-radio-sm);
    color: var(--crm-texto-tenue);
    font-size: 0.85rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--crm-transicion), color var(--crm-transicion);
}

.crm-btn-salir i {
    width: 20px;
    text-align: center;
}

.crm-btn-salir:hover {
    background-color: rgba(220, 38, 38, .09);
    color: #b91c1c;
}

/* --- Sidebar plegado: solo iconos. Lo conmuta el botón de la topbar. --- */

.crm-app.sidebar-plegado .crm-sidebar {
    width: var(--crm-ancho-sidebar-min);
}

.crm-app.sidebar-plegado .crm-sidebar .crm-nav-texto,
.crm-app.sidebar-plegado .crm-sidebar .crm-usuario-datos,
.crm-app.sidebar-plegado .crm-sidebar .crm-btn-salir span {
    display: none;
}

.crm-app.sidebar-plegado .crm-nav-item,
.crm-app.sidebar-plegado .crm-btn-salir,
.crm-app.sidebar-plegado .crm-usuario {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.crm-app.sidebar-plegado .crm-principal {
    margin-left: var(--crm-ancho-sidebar-min);
}

/* Rótulo flotante al pasar el ratón cuando está plegado. */
.crm-app.sidebar-plegado .crm-nav-item::after {
    content: attr(data-rotulo);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    padding: 5px 10px;
    background-color: var(--crm-superficie-viva);
    border: 1px solid var(--crm-borde);
    border-radius: var(--crm-radio-sm);
    box-shadow: var(--crm-sombra-2);
    color: var(--crm-texto);
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--crm-transicion);
}

.crm-app.sidebar-plegado .crm-nav-item:hover::after {
    opacity: 1;
}

/* Plegado no cabe el logo: se queda solo el botón, con la flecha al revés. */
.crm-app.sidebar-plegado .crm-sidebar-marca {
    justify-content: center;
}

.crm-app.sidebar-plegado .crm-sidebar-marca > a {
    display: none;
}

.crm-app.sidebar-plegado .crm-plegar i {
    transform: rotate(180deg);
}

/* -------------------------------------------------- Columna principal --- */

.crm-principal {
    flex: 1;
    min-width: 0;
    margin-left: var(--crm-ancho-sidebar);
    display: flex;
    flex-direction: column;
    transition: margin-left var(--crm-transicion);
}

/* La barra superior solo existe en pantallas estrechas, para poder abrir el
   menú; en escritorio el título de la página lo pone cada vista. */
.crm-topbar {
    display: none;
    position: sticky;
    top: 0;
    z-index: 1030;
    align-items: center;
    gap: 12px;
    height: var(--crm-alto-topbar);
    padding: 0 14px;
    background-color: rgba(255, 255, 255, .85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--crm-borde-suave);
}

.crm-topbar-titulo {
    font-size: 1rem;
    font-weight: 600;
    color: var(--crm-texto-fuerte);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-btn-icono {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--crm-radio-sm);
    color: var(--crm-texto-tenue);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color var(--crm-transicion), color var(--crm-transicion);
}

.crm-btn-icono:hover {
    background-color: var(--crm-superficie-alta);
    color: var(--crm-texto);
}

.crm-contenido {
    flex: 1;
    padding: 26px 22px 72px;
}

/* Las vistas envuelven todo en un .container de Bootstrap, que centraría el
   contenido en una columna estrecha al lado del sidebar. Aquí manda el
   ancho completo. */
.crm-contenido > .container,
.crm-contenido > .container-fluid {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
}

/* Capa que oscurece el contenido con el menú abierto en móvil. */
.crm-velo {
    position: fixed;
    inset: 0;
    z-index: 1035;
    background-color: rgba(15, 23, 42, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--crm-transicion), visibility var(--crm-transicion);
}

@media (max-width: 992px) {
    .crm-sidebar {
        transform: translateX(-100%);
        box-shadow: var(--crm-sombra-3);
    }

    .crm-app.menu-abierto .crm-sidebar {
        transform: translateX(0);
    }

    .crm-app.menu-abierto .crm-velo {
        opacity: 1;
        visibility: visible;
    }

    .crm-principal,
    .crm-app.sidebar-plegado .crm-principal {
        margin-left: 0;
    }

    .crm-contenido {
        padding: 20px 14px 64px;
    }

    .crm-topbar {
        display: flex;
    }

    /* Plegar no tiene sentido cuando el menú es un cajón deslizante. */
    .crm-plegar {
        display: none;
    }
}

/* ------------------------------------------------------------- Panel --- */

/* Bloque de contenido sobre el fondo (filtros, formularios...). */
.crm-panel {
    background-color: var(--crm-superficie);
    border: 1px solid var(--crm-borde-suave);
    border-radius: var(--crm-radio);
    box-shadow: var(--crm-sombra-1);
    padding: 20px;
    margin-bottom: 22px;
}

.crm-panel > h1:first-child,
.crm-panel > h2:first-child {
    margin-top: 0;
}

/* Barra de acciones bajo los filtros. */
.crm-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

/* Cabecera de página: título a la izquierda, acciones a la derecha. */
.crm-cabecera-pagina {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.crm-cabecera-pagina h1 {
    margin: 0;
}

/* --------------------------------------------------------- Formularios --- */

.form-label,
.crm-panel label {
    color: var(--crm-texto-tenue);
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    margin-bottom: 5px;
}

.form-control,
.form-select,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="password"],
input[type="number"] {
    background-color: var(--crm-fondo);
    color: var(--crm-texto);
    border: 1px solid var(--crm-borde);
    border-radius: var(--crm-radio-sm);
    padding: 8px 11px;
    font-size: 0.9rem;
    font-family: inherit;
    width: 100%;
    transition: border-color var(--crm-transicion), box-shadow var(--crm-transicion);
}

.form-control:hover,
select:hover,
textarea:hover {
    border-color: #b8c2d0;
}

.form-control:focus,
.form-select:focus,
select:focus,
textarea:focus,
input:focus {
    background-color: var(--crm-fondo);
    color: var(--crm-texto);
    border-color: var(--crm-primario);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .16);
    outline: none;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--crm-texto-suave);
}

.form-control[readonly],
input[readonly] {
    background-color: var(--crm-superficie-alta);
    color: var(--crm-texto-tenue);
    cursor: default;
}

/* El icono del selector de fecha que pinta el navegador ya es oscuro, así que
   sobre el tema claro se ve solo: fuera el invert(1) que hacía falta cuando el
   fondo era negro. Se mantiene agrandado y opaco porque con la opacidad de
   fábrica nadie se daba cuenta de que los campos de fecha tienen calendario. */
input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: .75;
    cursor: pointer;
    padding: 2px;
    width: 16px;
    height: 16px;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Grupo de campos que van juntos dentro de un formulario de filtros. El
   float y el ancho del 100% son de Bootstrap, que trata <legend> como un
   título de bloque; aquí interesa que se lea como una etiqueta pequeña. */
.crm-grupo {
    border: 1px solid var(--crm-borde);
    border-radius: var(--crm-radio-sm);
    padding: 10px 12px 12px;
}

.crm-grupo > legend {
    float: none;
    width: auto;
    padding: 0 6px;
    margin: 0 0 4px -6px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--crm-texto-tenue);
}

/* Rejilla propia de las fichas (NO es .form-row de Bootstrap 4). */
.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 22px;
    margin-bottom: 14px;
}

.form-row .form-group {
    width: auto;
    margin-bottom: 0;
}

.form-group {
    margin-bottom: 14px;
}

.form-group label {
    display: block;
    color: var(--crm-texto-tenue);
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    margin-bottom: 5px;
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

.form-col-left,
.form-col-right {
    display: flex;
    flex-direction: column;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--crm-borde-suave);
}

.error {
    color: #b91c1c;
    font-size: 0.85em;
}

.form-text {
    color: var(--crm-texto-tenue);
    font-size: 0.8rem;
}

/* Dentro de un input-group el ancho lo reparte Bootstrap, no el 100% de arriba. */
.input-group > .form-control {
    width: 1%;
}

/* --------------------------------------------------------------- Botones --- */

.btn {
    border-radius: var(--crm-radio-sm);
    font-size: 0.875rem;
    font-weight: 550;
    padding: 8px 15px;
    border: 1px solid transparent;
    transition: filter var(--crm-transicion), transform var(--crm-transicion),
                background-color var(--crm-transicion);
}

.btn:active {
    transform: translateY(1px);
}

/* Sobre fondo claro el hover tiene que OSCURECER. Con brightness(1.1), que era
   lo correcto en el tema oscuro, los botones secundarios se iban a blanco y
   parecía que se apagaban al pasar por encima. */
.btn:hover {
    filter: brightness(.94);
}

/* Antes había <button><a>...</a></button>: el enlace no heredaba el color. */
.btn a {
    color: inherit;
    text-decoration: none;
}

/* Las variantes se pintan con propiedades normales, no solo con las variables
   --bs-btn-*: esas llegaron en Bootstrap 5.3 y el CRM carga la 5.1.0 del CDN,
   así que no hacían absolutamente nada y los botones salían con los colores de
   fábrica (Buscar en el azul #0d6efd en vez del índigo del CRM). Las variables
   se dejan puestas para que siga cuadrando el día que se suba a 5.3. */
.btn-primary {
    --bs-btn-bg: var(--crm-primario);
    --bs-btn-border-color: var(--crm-primario);
    --bs-btn-hover-bg: var(--crm-primario-oscuro);
    --bs-btn-hover-border-color: var(--crm-primario-oscuro);
    --bs-btn-active-bg: var(--crm-primario-oscuro);
    --bs-btn-active-border-color: var(--crm-primario-oscuro);
    background-color: var(--crm-primario);
    border-color: var(--crm-primario);
    color: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .14), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-check:checked + .btn-primary {
    background-color: var(--crm-primario-oscuro);
    border-color: var(--crm-primario-oscuro);
    color: #fff;
}

.btn-secondary {
    --bs-btn-bg: var(--crm-superficie-viva);
    --bs-btn-border-color: var(--crm-borde);
    --bs-btn-color: var(--crm-texto);
    --bs-btn-hover-bg: #dae1ec;
    --bs-btn-hover-border-color: #c3ccda;
    --bs-btn-hover-color: var(--crm-texto-fuerte);
    background-color: var(--crm-superficie-viva);
    border-color: var(--crm-borde);
    color: var(--crm-texto);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: #dae1ec;
    border-color: #c3ccda;
    color: var(--crm-texto-fuerte);
}

.btn-danger {
    --bs-btn-bg: var(--crm-peligro);
    --bs-btn-border-color: var(--crm-peligro);
    background-color: var(--crm-peligro);
    border-color: var(--crm-peligro);
    color: #fff;
}

.btn-success {
    --bs-btn-bg: var(--crm-exito);
    --bs-btn-border-color: var(--crm-exito);
    background-color: var(--crm-exito);
    border-color: var(--crm-exito);
    color: #fff;
}

.btn-purple {
    background-color: var(--crm-morado);
    color: #fff;
}

.btn-green {
    background-color: var(--crm-exito);
    color: #fff;
}

/* Botones sueltos de la ficha de cliente, sin clase de Bootstrap. */
.form-actions button,
.volver-clientes,
.crear-contrato {
    border: none;
    border-radius: var(--crm-radio-sm);
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: 550;
    font-family: inherit;
    color: #fff;
    background-color: var(--crm-primario);
    cursor: pointer;
    transition: filter var(--crm-transicion), transform var(--crm-transicion);
}

.form-actions button:hover,
.volver-clientes:hover,
.crear-contrato:hover {
    filter: brightness(.94);
}

.form-actions button:active,
.volver-clientes:active,
.crear-contrato:active {
    transform: translateY(1px);
}

.volver-clientes { background-color: var(--crm-primario); }
.crear-contrato  { background-color: var(--crm-morado); }
/* Volver y cancelar son los únicos de fondo claro del grupo: heredaban el
   color: #fff de arriba y se quedaban en blanco sobre gris. */
.form-actions button.volver,
.form-actions button.cancelar {
    background-color: var(--crm-superficie-viva);
    border: 1px solid var(--crm-borde);
    color: var(--crm-texto);
}
.form-actions button.eliminar { background-color: var(--crm-peligro); }

/* --------------------------------------------------------------- Tablas --- */

.crm-tabla-caja {
    background-color: var(--crm-superficie);
    border: 1px solid var(--crm-borde-suave);
    border-radius: var(--crm-radio);
    box-shadow: var(--crm-sombra-1);
    overflow: hidden;
}

/* El scroll horizontal vive aquí para que la cabecera pueda quedar fija. */
.crm-tabla-scroll {
    max-height: 68vh;
    overflow: auto;
}

.table {
    color: var(--crm-texto);
    margin-bottom: 0;
    font-size: 0.875rem;
    border-color: var(--crm-borde-suave);
    --bs-table-color: var(--crm-texto);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--crm-borde-suave);
    --bs-table-striped-color: var(--crm-texto);
    --bs-table-striped-bg: rgba(15, 23, 42, .028);
    --bs-table-hover-color: var(--crm-texto-fuerte);
    --bs-table-hover-bg: rgba(79, 70, 229, .06);
}

.table > :not(caption) > * > * {
    background-color: transparent;
    border-bottom-color: var(--crm-borde-suave);
    padding: 11px 14px;
    vertical-align: middle;
}

.table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--crm-superficie-alta);
    color: var(--crm-texto-tenue);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--crm-borde);
}

.table tbody tr {
    transition: background-color var(--crm-transicion);
}

.table tbody tr:hover {
    background-color: rgba(79, 70, 229, .05);
}

.client-row,
.contract-row,
.fila-usuario,
.contracts-table tbody tr,
tr[data-factura-id],
tr[onclick] {
    cursor: pointer;
}

/* Las acciones de fila solo aparecen al pasar el ratón: menos ruido visual. */
.crm-acciones-fila {
    opacity: 0;
    transition: opacity var(--crm-transicion);
}

tr:hover .crm-acciones-fila,
tr:focus-within .crm-acciones-fila {
    opacity: 1;
}

/* Bootstrap 5.3 pinta el rayado y las variantes (.table-success, .table-danger)
   con un box-shadow interior que se salta nuestro background-color. Lo anulamos
   y pintamos el rayado a mano, para que el tinte sea el nuestro y no el suyo. */
.table > :not(caption) > * > * {
    box-shadow: none;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(15, 23, 42, .024);
}

.table.table-striped > tbody > tr:hover {
    background-color: rgba(79, 70, 229, .06);
}

/* --- Listados con celdas de texto largo (contratos y clientes) ------------
   Cada fila traía los seguimientos enteros, los cinco campos de contacto y las
   tres fechas, y una sola ocupaba media pantalla: en la tabla de contratos
   cabían dos filas por pantallazo. Ahora la celda se recorta a tres renglones
   y el texto completo se abre al pasar el ratón por encima. */

.crm-tabla-compacta > :not(caption) > * > * {
    padding: 8px 12px;
    vertical-align: top;
}

.crm-tabla-compacta td {
    position: relative;
}

/* El interlineado se fija aquí a propósito: el alto del recorte son "tres
   renglones" (3 x 1.5em) y con el 1.55 que hereda del tema no cuadraba, así que
   una celda de exactamente tres líneas se daba por cortada. */
.crm-recorte {
    position: relative;
    line-height: 1.5;
    max-height: 4.5em; /* tres renglones */
    overflow: hidden;
    max-width: 280px;
    /* Los correos largos no llevan espacios donde partir y se salían de la
       celda cortados a mitad de palabra. */
    overflow-wrap: anywhere;
}

/* Las fechas caben de sobra en un renglón cada una. Sin esto el propio guion
   del "2026-09-04" partía la celda en cuatro. */
.crm-recorte-fechas { white-space: nowrap; }

/* Sólo se marcan como "largo" las celdas que de verdad están cortadas; lo hace
   crmMarcarCeldasLargas() midiendo, porque el CSS no sabe si el texto cabe. */
.crm-recorte.largo {
    height: 4.5em; /* fija el hueco: al desplegar, la fila no cambia de alto */
    cursor: zoom-in;
}

/* Difuminado al pie del recorte: avisa de que sigue habiendo texto debajo. */
.crm-recorte.largo::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 15px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--crm-superficie));
    pointer-events: none;
}

/* El texto se despliega POR ENCIMA de las celdas vecinas, en posición absoluta.
   Si creciera dentro de la celda, la fila se estiraría y la tabla entera daría
   un salto cada vez que el ratón la cruza. */
td:hover > .crm-recorte.largo {
    overflow: visible;
}

td:hover > .crm-recorte.largo::after {
    display: none;
}

td:hover > .crm-recorte.largo > .crm-recorte-texto {
    position: absolute;
    top: -8px;
    left: -10px;
    z-index: 6;
    min-width: 260px;
    max-width: 420px;
    max-height: 280px;
    overflow: auto;
    padding: 8px 10px;
    white-space: normal;
    background-color: var(--crm-superficie);
    border: 1px solid var(--crm-borde);
    border-radius: 10px;
    box-shadow: var(--crm-sombra-3);
}

/* Columnas que no deben partirse en dos líneas (fechas, estados). */
.crm-celda-fija {
    white-space: nowrap;
}

/* Cifras: a la derecha y con dígitos de ancho constante, para que las unidades
   cuadren unas debajo de otras. */
.crm-celda-num,
th.crm-celda-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Textos largos (los conceptos de factura traen párrafos enteros): se cortan a
   dos líneas. El texto íntegro queda en el title y en la ficha. */
.crm-celda-larga {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 44ch;
    color: var(--crm-texto-tenue);
}

/* Rejilla de miniaturas: vista previa al subir y galería de la ficha. */
.crm-galeria {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.crm-galeria img {
    width: 104px;
    height: 104px;
    object-fit: cover;
    border: 1px solid var(--crm-borde);
    border-radius: var(--crm-radio-sm);
}

/* Miniatura con su botón de borrado encima. */
.crm-galeria-item {
    position: relative;
    margin: 0;
    line-height: 0;
}

.crm-borrar-imagen {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--crm-peligro);
    color: #fff;
    font-size: 0.7rem;
    cursor: pointer;
}

.crm-borrar-imagen:disabled {
    opacity: .5;
    cursor: progress;
}

/* Columnas de un solo icono o interruptor: el contenido va centrado. */
.crm-celda-centro,
th.crm-celda-centro {
    text-align: center;
    white-space: nowrap;
}

/* Interruptor de una celda (publicado, destacado): el estado se lee por el
   icono y por el color, no solo por el color. */
.crm-interruptor {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--crm-borde);
    border-radius: var(--crm-radio-sm);
    background: var(--crm-superficie-alta);
    color: var(--crm-texto-suave);
    cursor: pointer;
    transition: var(--crm-transicion);
}

.crm-interruptor:hover {
    border-color: var(--crm-primario);
    color: var(--crm-texto);
}

.crm-interruptor:disabled {
    opacity: .5;
    cursor: progress;
}

.crm-interruptor.activo[data-campo="visible"] {
    border-color: var(--crm-primario);
    color: var(--crm-primario-claro);
    background: rgba(79, 70, 229, .10);
}

.crm-interruptor.activo[data-campo="destacado"] {
    border-color: var(--crm-aviso);
    color: var(--crm-aviso);
    background: rgba(217, 119, 6, .12);
}

/* Celda de dos pisos: dato principal arriba, referencia debajo. */
.crm-celda-secundaria {
    display: block;
    color: var(--crm-texto-tenue);
    font-size: 0.78rem;
}

/* Franja de color a la izquierda de la fila, en lugar de teñirla entera. */
.fila-acento > td:first-child {
    border-left: 3px solid transparent;
}

.fila-acento-exito > td:first-child { border-left-color: var(--crm-exito); }
.fila-acento-peligro > td:first-child { border-left-color: var(--crm-peligro); }

/* Fila de totales del <tfoot>. Se despega del cuerpo con una línea gruesa para
   que no se lea como un comercial más. El !important es para ganarle a
   .table-striped, que pinta el fondo de las filas impares. */
.crm-fila-total > td {
    background-color: var(--crm-superficie-alta) !important;
    border-top: 2px solid var(--crm-borde);
    color: var(--crm-texto-fuerte);
}

/* Fila de "cargando" / "sin resultados". */
.crm-tabla-aviso td {
    color: var(--crm-texto-tenue);
    text-align: center;
    padding: 30px 10px !important;
    font-style: italic;
}

/* Pie de la tabla: recuento a la izquierda, paginación a la derecha. Va dentro
   de .crm-tabla-caja, así que comparte fondo y bordes con la propia tabla. */
.crm-tabla-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 10px 14px;
    background-color: var(--crm-superficie-alta);
    border-top: 1px solid var(--crm-borde);
}

/* Resumen de paginación. */
.crm-paginacion-info {
    color: var(--crm-texto-tenue);
    font-size: 0.82rem;
    margin: 0;
}

.crm-paginacion-info:empty {
    display: none;
}

/* Cuando no hay recuento, la paginación se queda centrada ella sola. */
.crm-tabla-pie > #paginationControls {
    margin-left: auto;
}

.pagination {
    display: flex;
    align-items: center;
    margin: 0;
    gap: 4px;
}

.pagination .page-item .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--crm-radio-sm);
    background-color: transparent;
    color: var(--crm-texto-tenue);
    font-size: 0.83rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    box-shadow: none;
    transition: background-color var(--crm-transicion), color var(--crm-transicion);
}

.pagination .page-item .page-link:hover {
    background-color: var(--crm-superficie-viva);
    color: var(--crm-texto);
}

.pagination .page-item .page-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .25);
}

.pagination .page-item.active .page-link {
    background-color: var(--crm-primario);
    color: #fff;
    box-shadow: 0 2px 8px -2px rgba(79, 70, 229, .45);
}

.pagination .page-item.disabled .page-link {
    pointer-events: none;
    color: var(--crm-texto-suave);
    opacity: .55;
}

/* Anterior y Siguiente son siempre el primer y el último elemento: les ponemos
   la flecha desde CSS para no tocar los cuatro buscadores que generan el HTML. */
.pagination .page-item:first-child .page-link::before,
.pagination .page-item:last-child .page-link::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.7rem;
}

.pagination .page-item:first-child .page-link::before {
    content: "\f053";
    margin-right: 7px;
}

.pagination .page-item:last-child .page-link::after {
    content: "\f054";
    margin-left: 7px;
}

/* En móvil sobra el texto: se quedan solo las flechas. */
@media (max-width: 575.98px) {
    .pagination .page-item:first-child .page-link,
    .pagination .page-item:last-child .page-link {
        font-size: 0;
        padding: 0;
    }

    .pagination .page-item:first-child .page-link::before { margin-right: 0; }
    .pagination .page-item:last-child .page-link::after { margin-left: 0; }
}

/* ------------------------------------------------- Distintivos de tabla --- */

/* Cuadraditos de estado que emiten buscar-clientes.php y buscar-contratos.php. */
.div-square,
.square,
.square2 {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--crm-radio-sm);
    color: #fff;
    font-size: 14px;
}

.div-green   { background-color: var(--crm-exito); }
.div-purple  { background-color: var(--crm-morado); }
.div-danger  { background-color: var(--crm-peligro); }
.div-primary { background-color: var(--crm-primario); }
.square      { background-color: var(--crm-peligro); }
.square2     { background-color: var(--crm-primario); }

/* Etiqueta de texto para estados, con punto de color delante. */
.crm-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

.crm-etiqueta::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
}

/* El texto va dos escalones más oscuro que el relleno: sobre pastel claro, los
   tonos pastel del tema oscuro (#4ade80, #fca5a5...) no se leían. */
.crm-etiqueta-exito {
    background-color: rgba(22, 163, 74, .10);
    border-color: rgba(22, 163, 74, .30);
    color: #15803d;
}

.crm-etiqueta-peligro {
    background-color: rgba(220, 38, 38, .10);
    border-color: rgba(220, 38, 38, .30);
    color: #b91c1c;
}

.crm-etiqueta-aviso {
    background-color: rgba(217, 119, 6, .10);
    border-color: rgba(217, 119, 6, .30);
    color: #b45309;
}

.crm-etiqueta-info {
    background-color: rgba(2, 132, 199, .10);
    border-color: rgba(2, 132, 199, .30);
    color: #0369a1;
}

.crm-etiqueta-neutra {
    background-color: rgba(100, 116, 139, .10);
    border-color: rgba(100, 116, 139, .28);
    color: var(--crm-texto-tenue);
}

/* ------------------------------------------------------------ Pestañas --- */

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 24px 0 18px;
    border-bottom: 1px solid var(--crm-borde-suave);
}

.tabs .tab {
    padding: 10px 16px;
    background: none;
    color: var(--crm-texto-tenue);
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 550;
    font-family: inherit;
    user-select: none;
    transition: color var(--crm-transicion), border-color var(--crm-transicion);
}

.tabs .tab:hover {
    color: var(--crm-texto);
}

.tabs .tab.active {
    color: var(--crm-texto-fuerte);
    background: none;
    border-bottom-color: var(--crm-primario);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: crm-aparecer 220ms ease both;
}

@keyframes crm-aparecer {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* -------------------------------------------------------- Seguimientos --- */

.seguimientos-list {
    max-height: 520px;
    overflow-y: auto;
    padding-right: 4px;
}

.seguimiento-item {
    background-color: var(--crm-superficie-alta);
    border: 1px solid var(--crm-borde-suave);
    border-left: 3px solid var(--crm-aviso);
    border-radius: var(--crm-radio-sm);
    padding: 13px 15px;
    margin-bottom: 12px;
    color: var(--crm-texto);
    font-size: 0.875rem;
}

.seguimiento-item p {
    margin-bottom: 6px;
}

.seguimiento-item p:first-child {
    color: var(--crm-texto-tenue);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: .045em;
}

.no-seguimientos {
    color: var(--crm-texto-tenue);
    font-style: italic;
}

/* ------------------------------------------------------------- Tarjeta --- */

.card {
    background-color: var(--crm-superficie);
    border: 1px solid var(--crm-borde-suave);
    border-radius: var(--crm-radio);
    box-shadow: var(--crm-sombra-1);
    color: var(--crm-texto);
}

.card-header {
    background-color: var(--crm-superficie-alta);
    border-bottom: 1px solid var(--crm-borde-suave);
    color: var(--crm-texto-fuerte);
}

/* -------------------------------------------------------------- Login --- */

.crm-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
    /* Un par de focos de color muy tenues rompen el fondo plano. */
    background:
        radial-gradient(60rem 30rem at 15% -10%, rgba(79, 70, 229, .10), transparent 60%),
        radial-gradient(50rem 28rem at 90% 110%, rgba(147, 51, 234, .08), transparent 60%);
}

.crm-login .crm-panel {
    width: 100%;
    max-width: 390px;
    margin-bottom: 0;
    padding: 30px 28px;
    box-shadow: var(--crm-sombra-3);
}

/* ------------------------------------------------- Cuadro de mando --- */

.crm-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.crm-kpi {
    position: relative;
    display: block;
    overflow: hidden;
    background-color: var(--crm-superficie);
    border: 1px solid var(--crm-borde-suave);
    border-radius: var(--crm-radio);
    box-shadow: var(--crm-sombra-1);
    padding: 18px;
    text-decoration: none;
    color: inherit;
    transition: transform var(--crm-transicion), border-color var(--crm-transicion),
                box-shadow var(--crm-transicion);
}

/* Franja superior de color en lugar del borde izquierdo de antes. */
.crm-kpi::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background-color: var(--crm-primario);
}

a.crm-kpi:hover {
    transform: translateY(-3px);
    border-color: var(--crm-borde);
    box-shadow: var(--crm-sombra-2);
    color: inherit;
}

.crm-kpi-etiqueta {
    display: block;
    color: var(--crm-texto-tenue);
    font-size: 0.73rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 8px;
}

.crm-kpi-valor {
    display: block;
    color: var(--crm-texto-fuerte);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.02em;
}

.crm-kpi-pie {
    display: block;
    color: var(--crm-texto-suave);
    font-size: 0.78rem;
    margin-top: 6px;
}

.crm-kpi-peligro::before { background-color: var(--crm-peligro); }
.crm-kpi-aviso::before   { background-color: var(--crm-aviso); }
.crm-kpi-exito::before   { background-color: var(--crm-exito); }

.crm-columnas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 20px;
    align-items: start;
}

.crm-bloque-titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.crm-bloque-titulo h2 {
    margin: 0;
    font-size: 1.02rem;
}

.crm-vacio {
    color: var(--crm-texto-tenue);
    font-style: italic;
    padding: 18px 0;
    margin: 0;
}

/* -------------------------------------------------------------- Avisos --- */

/* Pila de mensajes flotantes; los pinta crmAviso() en layout-pie.php. */
.crm-avisos {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(380px, calc(100vw - 36px));
}

.crm-aviso {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 15px;
    background-color: var(--crm-superficie-viva);
    border: 1px solid var(--crm-borde);
    border-left: 3px solid var(--crm-primario);
    border-radius: var(--crm-radio-sm);
    box-shadow: var(--crm-sombra-3);
    color: var(--crm-texto);
    font-size: 0.88rem;
    animation: crm-aviso-entra 240ms cubic-bezier(.4, 0, .2, 1) both;
}

.crm-aviso.saliendo {
    animation: crm-aviso-sale 200ms ease both;
}

.crm-aviso i {
    margin-top: 2px;
    flex-shrink: 0;
}

.crm-aviso-texto {
    flex: 1;
    min-width: 0;
}

.crm-aviso-cerrar {
    background: none;
    border: none;
    color: var(--crm-texto-suave);
    font-size: 0.95rem;
    line-height: 1;
    padding: 2px;
    cursor: pointer;
    flex-shrink: 0;
}

.crm-aviso-cerrar:hover {
    color: var(--crm-texto);
}

.crm-aviso-exito   { border-left-color: var(--crm-exito); }
.crm-aviso-exito i { color: #15803d; }

.crm-aviso-error   { border-left-color: var(--crm-peligro); }
.crm-aviso-error i { color: #b91c1c; }

.crm-aviso-info i  { color: var(--crm-primario-claro); }

@keyframes crm-aviso-entra {
    from { opacity: 0; transform: translateX(24px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

@keyframes crm-aviso-sale {
    to { opacity: 0; transform: translateX(24px) scale(.97); }
}

/* Quien haya pedido menos animación en su sistema, que no las sufra. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}