/* ============================================================================
   crm-theme.css — Capa de tema para Gestión JuguetesAbaco
   ----------------------------------------------------------------------------
   Se carga DESPUÉS de bootstrap.min.css y crm.css, y es la última hoja de cada
   página. No sustituye a crm.css: solo repinta encima. Para desactivar el tema
   basta con quitar la línea <link> de las páginas; nada más depende de él.

   REGLAS QUE HAY QUE RESPETAR AL EDITAR ESTE ARCHIVO
   ==================================================
   1. La altura de la barra de navegación ya se puede cambiar. Antes no: crm.css
      posicionaba .content-wrapper con "position: absolute; top: 150px", un alto
      medido a mano. Ahora el contenedor va en flujo normal y el hueco superior
      lo calcula Scripts/crm-theme.js con el alto real de la barra. Si tocas el
      alto de la barra, no hay que cuadrar nada a mano — pero ese archivo tiene
      que seguir cargándose.

   2. NO tocar el fondo de las filas de datos de los GridView con reglas
      genéricas. Hay código que marca estados fila a fila:
         BusquedaPedidos.aspx.cs:607  crm-row-critical  (impago con aviso)
         BusquedaPedidos.aspx.cs:621  crm-row-warn      (impago de +7 días)
         FichaContacto.aspx.cs:336    crm-row-critical  (incidencia abierta)
      Un "background !important" sobre las filas borraría esa señal. Las clases
      de estado se definen al final del apartado 7.

   3. El !important que aparece más abajo NO es pereza. Los GridView llevan
      HeaderStyle/PagerStyle/FooterStyle como atributos en el .aspx, y ASP.NET
      los renderiza como estilo inline. Sin !important no hay forma de ganarles
      desde una hoja de estilos.

   4. Los selectores de tabla NO pueden depender de <thead>. web.config no
      declara targetFramework, así que ASP.NET renderiza los GridView en modo
      compatible 3.5: saca <th scope="col"> pero NO envuelve nada en
      <thead>/<tbody>. El navegador crea un <tbody> implícito que se lo come
      todo, cabecera incluida, de modo que "table > thead > tr > th" no llega a
      aplicarse nunca. Por eso la cabecera se estiliza sobre "th" a secas.
   ========================================================================== */


/* ---------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Marca. Dos oscurecidos, y el segundo tiene un mínimo que NO se puede
       aflojar:

       #d4a55c -> #B8873B  para que el dorado cumpliera como texto sobre blanco.
       #B8873B -> #966927  porque no lo cumplía: 3,20:1, por debajo del 4,5:1 que
                           pide un texto de este tamaño. Y el dorado no sólo es
                           texto — hace de FONDO con rótulo blanco encima en
                           siete sitios (botón principal, marca "JA" de la barra,
                           entrada actual del menú, página actual del paginado,
                           cabecera de las ventanas modales, día activo del
                           calendario), y los siete estaban igual de lavados.
                           Medido en el navegador, no deducido.

       #926726 es el mismo tono (36) con más saturación, para no perder el
       carácter dorado al bajar la luminosidad del 48% al 36%.

       SI ALGUIEN LO ACLARA, se rompen de golpe los siete sitios y los enlaces, y
       no lo avisa nada. El dorado tiene que pasar de 4,5:1 en CUATRO papeles a la
       vez, y el 36% es el primero que lo consigue en todos —medido—:

         como texto sobre el fondo de página (--crm-bg, #F7F5F2)  4,61:1
         como texto sobre blanco (dentro de una tarjeta)          5,01:1
         de fondo con rótulo blanco encima                        5,01:1
         lo mismo con el hover de .btn, que aplica
         "filter: brightness(.96)" y oscurece fondo Y texto       4,91:1

       El fondo de página es el que aprieta: no es blanco puro, así que un dorado
       que cumple sobre blanco puede no cumplir ahí. Al 37% daba 4,83:1 sobre
       blanco pero 4,44:1 sobre el fondo de página, y los enlaces se quedaban
       cortos por seis centésimas.

       El oliva se mantiene tal cual. */
    --crm-brand: #926726;
    --crm-brand-dark: #5D5125;
    --crm-brand-soft: #FBF9F6;
    /* Relleno MEDIO del dorado, para cuando --crm-brand-soft (que es casi
       blanco: sirve de superficie, no de color) se queda en nada. Completa el
       patrón que ya tienen los cinco colores de estado, que llevan todos su
       pareja X / X-bg. Lo usa la píldora del puesto del cliente (apartado 12).
       El tono no se elige a ojo. Empezó en #F5EAD5 y se subió un paso al medirlo:
       aquél quedaba a 1,10:1 del fondo de la página —el mismo claro, distinto
       matiz— y la píldora se sostenía sólo por su borde. Éste sube a 1,24:1, que
       en un relleno claro es lo que se puede pedir sin irse al dorado macizo, y
       que NO es opción aquí: la medalla de oro sobre fondo dorado deja de
       distinguirse, y es lo primero que se mira.

       Contrastes medidos en el banco sobre este relleno: 5,84:1 con
       --crm-brand-dark, que es el texto que lleva encima, y 3,72:1 con
       --crm-brand, que es su borde. */
    --crm-brand-bg: #EFDCB8;

    /* Neutros con sesgo cálido, para que acompañen al dorado en vez de pelearse */
    --crm-ink: #2A2419;
    --crm-muted: #6E6759;
    --crm-label: #6B5A2E;
    --crm-bg: #F7F5F2;
    --crm-surface: #FFFFFF;
    --crm-border: #E5E1DA;
    --crm-border-input: #DDD8CE;

    /* Estados. Escala aparte del dorado: un estado no debe confundirse
       nunca con el color de marca. */
    --crm-critical: #B3261E;
    --crm-critical-bg: #FDECEA;
    --crm-critical-bd: #F3C9C4;
    --crm-warn: #8A6100;
    --crm-warn-bg: #FDF4E3;
    --crm-ok: #1B6E3C;
    --crm-ok-bg: #EBF6EF;
    /* Cancelado. Tono 285: el hueco que queda entre el azul de "info" (212) y
       el rojo de "critical" (3), para que no se confunda con ninguno de los
       dos. Contraste 5,7:1 sobre su fondo, en la misma banda que el resto de
       la escala. */
    --crm-void: #883DA1;
    --crm-void-bg: #F8EDFB;
    --crm-void-bd: #E5C6F0;

    /* En tránsito ("Enviado"). Estaba en el verde de --crm-ok junto a "Pagado",
       "Entregado" y "Finalizado", y en la columna de estado no se distinguía un
       pedido que va de camino de uno ya cobrado.

       Tono 243: el hueco que queda entre el azul de "info" (212) y el morado de
       "void" (285), a 31 grados del primero y 42 del segundo —la separación más
       amplia que admitía la escala—. Fuera del verde-azulado, que habría sido la
       lectura natural de "en camino", porque queda a 10 grados de --crm-accent y
       en la ficha de pedido la píldora de la cabecera y los botones de acento se
       ven a la vez. Contraste 6,5:1 sobre su fondo. */
    --crm-transit: #4A45B5;
    --crm-transit-bg: #EEEDFB;
    --crm-transit-bd: #CFCCEF;

    /* Acento para una acción destacada que NO es la principal de la pantalla.
       En la ficha de pedido lo llevan "Enviar documentación" y "Albarán".
       Fuera de la gama cálida a propósito: en dorado se leería como una segunda
       principal, y en la escala de estados diría algo del pedido que no es
       cierto. Contraste 5,7:1 con el blanco del texto. */
    --crm-accent: #1F6F8B;
    --crm-accent-dark: #185666;

    /* Serie del año ANTERIOR en el gráfico del panel de inicio (apartado 11.b).
       Ni marca ni estado: es la misma magnitud del año pasado, así que va en
       neutro cálido y el dorado se queda para el año en curso, que es el que se
       mira.

       Son DOS tokens y no uno porque con un solo color plano el problema no
       tiene solución. Medido:

         un gris lo bastante oscuro para separarse del blanco de la tarjeta
         (3:1) se queda a 1,6:1 del dorado y las dos barras se confunden;
         uno lo bastante claro para separarse del dorado (3:1) se queda a
         1,5:1 del blanco y la barra deja de verse.

       Se resuelve con relleno claro + borde oscuro: el relleno da 3,33:1 contra
       el dorado —las dos series se distinguen— y el borde 3,47:1 contra el
       blanco, que es lo que dibuja la silueta de la barra. Si alguien quita el
       borde, la barra del año anterior desaparece sobre la tarjeta. */
    --crm-chart-previo: #D9D2C4;
    --crm-chart-previo-bd: #918977;

    --crm-radius: 10px;
    --crm-radius-sm: 6px;
    --crm-shadow: 0 1px 2px rgba(42, 36, 25, .06), 0 10px 28px rgba(42, 36, 25, .05);

    /* Tipografía del sistema: se ve nativa en cualquier equipo y no añade
       ninguna descarga ni dependencia externa al servidor. Sustituye a
       Candara, que solo existe en Windows. */
    --crm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}


/* ---------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
body {
    font-family: var(--crm-font);
    background-color: var(--crm-bg);
    color: var(--crm-ink);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Neutraliza el bloque heredado de css/styles.css (solo lo carga Index.aspx),
   que fija Arial, font-size:small y color #000033 sobre p, td, th y a. */
p,
td,
th,
a {
    font-family: var(--crm-font);
    font-size: inherit;
    color: inherit;
}

a {
    color: var(--crm-brand);
}

a:hover,
a:focus {
    color: var(--crm-brand-dark);
}

/* Foco visible en todo lo enfocable. Antes no había ninguno. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--crm-brand);
    outline-offset: 2px;
}

hr {
    border-top: 1px solid var(--crm-border);
}

/* El contenedor deja de ser una losa blanca para que las tarjetas y tablas
   blancas se despeguen del fondo.

   Y, sobre todo, vuelve al flujo normal. Estaba en "position: absolute;
   top: 150px", que tiene dos consecuencias: el hueco bajo la barra es un número
   fijo escrito a mano, y el contenido no empuja al <body> —por estar fuera del
   flujo— así que en las páginas con rejillas largas el scroll se queda corto.

   El margen superior lo afina Scripts/crm-theme.js con el alto real de la barra.
   Estos 150px son el valor que ya había: si ese archivo no se cargara, la página
   se ve exactamente como antes. */
.content-wrapper {
    background-color: transparent;
    position: static;
    top: auto;
    margin-top: 150px;
    padding-top: 10px;
    padding-bottom: 48px;
}


/* ---------------------------------------------------------------------------
   3. Barra de navegación — repintado sin tocar la geometría
   -------------------------------------------------------------------------- */
.navbar-default {
    background-color: var(--crm-surface);
    background-image: none;
    border: none;
    border-bottom: 1px solid var(--crm-border);
    box-shadow: 0 1px 3px rgba(42, 36, 25, .04);
}

.RolUsuario {
    font-family: var(--crm-font);
    font-size: 15px;
    font-weight: 650;
    color: var(--crm-ink);
}

.FechaIndex {
    font-family: var(--crm-font);
    font-size: 12.5px;
    font-weight: 400;
    color: var(--crm-muted);
}

.labelBoton {
    font-family: var(--crm-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--crm-brand-dark);
}

/* crm.css daba un halo negro en hover a los botones de la barra. Se sustituye
   por un realce suave del propio contenedor. */
.btnBlack {
    border-radius: var(--crm-radius-sm);
    transition: background-color .15s ease;
}

.btnBlack:hover {
    background-color: var(--crm-brand-soft);
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}


/* ---------------------------------------------------------------------------
   3.b Barra compacta — marca, navegación en texto y usuario en una sola fila
   ----------------------------------------------------------------------------
   Sustituye a la fila de iconos con etiqueta debajo. De momento solo la usa
   Index.aspx: todo cuelga de .crm-topbar, así que las páginas que siguen con
   la barra antigua no ven ni una de estas reglas y se quedan exactamente igual.

   El alto de la barra no está escrito en ningún sitio: sale del contenido, y
   el hueco superior lo calcula Scripts/crm-theme.js midiendo la barra real
   (ver regla 1 de la cabecera de este archivo).
   -------------------------------------------------------------------------- */
.crm-topbar {
    /* crm.css fija "min-height: 80px" para .navbar; esta barra es más baja */
    min-height: 0;
    margin-bottom: 0;
}

.crm-topbar-inner {
    display: flex;
    align-items: center;
    /* Envuelve en pantallas estrechas en lugar de plegarse a un botón: son
       cinco enlaces y caben en dos filas. Al crecer la barra, el JS recalcula
       el hueco de .content-wrapper. */
    flex-wrap: wrap;
    gap: 10px 20px;
    padding: 12px 22px;
}

.crm-brandmark {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--crm-brand-dark);
    text-decoration: none;
}

.crm-brandmark:hover,
.crm-brandmark:focus {
    color: var(--crm-brand-dark);
    text-decoration: none;
}

.crm-brandmark b {
    width: 27px;
    height: 27px;
    border-radius: var(--crm-radius-sm);
    background-color: var(--crm-brand);
    color: #FFFFFF;
    font-size: 14px;
    text-align: center;
    /* Centrado vertical con line-height: el cuadro tiene alto fijo y una sola
       línea, así no hace falta flex dentro de flex. */
    line-height: 27px;
}

.crm-navacts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.crm-navacts a {
    padding: 7px 12px;
    /* Borde transparente en reposo para que el hover no desplace el texto */
    border: 1px solid transparent;
    border-radius: var(--crm-radius-sm);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--crm-brand-dark);
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.crm-navacts a:hover,
.crm-navacts a:focus {
    background-color: var(--crm-brand-soft);
    border-color: var(--crm-border);
    color: var(--crm-brand-dark);
    text-decoration: none;
}

/* La página en la que se está. Se marca con aria-current en el .aspx, que es
   además lo que anuncia un lector de pantalla. */
.crm-navacts a[aria-current] {
    background-color: var(--crm-brand);
    border-color: var(--crm-brand);
    color: #FFFFFF;
}

.crm-who {
    /* Empuja el bloque hasta el borde derecho sin necesidad de pull-right */
    margin-left: auto;
    text-align: right;
    line-height: 1.35;
}

/* lblnombreUsuario y lblFecha salen como <span>: uno debajo del otro, y ya no
   hacen falta los <br /> que llevaba el marcado antiguo. */
.crm-who .RolUsuario,
.crm-who .FechaIndex {
    display: block;
}

@media (max-width: 767px) {
    .crm-who {
        margin-left: 0;
        text-align: left;
    }
}


/* ---------------------------------------------------------------------------
   4. Títulos y etiquetas
   -------------------------------------------------------------------------- */
.TituloPaginaGrande {
    font-family: var(--crm-font);
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--crm-brand);
}

.TituloPagina {
    font-family: var(--crm-font);
    font-size: 19px;
    font-weight: 620;
    letter-spacing: -.01em;
    color: var(--crm-brand-dark);
}

label {
    font-family: var(--crm-font);
}

/* 72 usos en el markup. Pasan a etiqueta de dato: pequeña, en versalitas y con
   un tono que sí cumple contraste sobre blanco (#BA8432 se quedaba corto). */
.label-forms {
    font-family: var(--crm-font);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--crm-label);
    margin-bottom: 4px;
}


/* ---------------------------------------------------------------------------
   5. Formularios
   -------------------------------------------------------------------------- */
.form-control {
    font-family: var(--crm-font);
    font-size: 13.5px;
    color: var(--crm-ink);
    background-color: var(--crm-surface);
    border: 1px solid var(--crm-border-input);
    border-radius: var(--crm-radius-sm);
    box-shadow: none;
    height: 36px;
    padding: 7px 11px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

textarea.form-control {
    height: auto;
    line-height: 1.5;
}

/* Bootstrap 3 trae un foco azul que no pega con la paleta.
   El rgba va con los componentes de --crm-brand escritos a mano porque rgba() no
   admite un hex de variable; si se cambia el token, hay que cambiar esto y el
   realce de fila del apartado 7, que son los dos únicos sitios así. */
.form-control:focus {
    border-color: var(--crm-brand);
    box-shadow: 0 0 0 3px rgba(146, 103, 38, .16);
    outline: none;
}

.form-control[readonly],
.form-control[disabled] {
    background-color: var(--crm-brand-soft);
    color: var(--crm-muted);
}


/* ---------------------------------------------------------------------------
   6. Botones
   -------------------------------------------------------------------------- */
.btn {
    font-family: var(--crm-font);
    font-size: 13.5px;
    font-weight: 600;
    border-radius: var(--crm-radius-sm);
    padding: 8px 16px;
    text-shadow: none;
    background-image: none;
    box-shadow: none;
    transition: filter .15s ease, background-color .15s ease;
}

.btn-sm {
    font-size: 11.5px;
    padding: 4px 10px;
}

.btn-primary {
    background-color: var(--crm-brand);
    border-color: var(--crm-brand);
    color: #fff;
}

/* Y estos tres estados hay que declararlos, no es redundante: Bootstrap trae
   ".btn-primary:hover, :focus, :active { background-color: #3071a9 }" —su azul—,
   que con clase MÁS pseudoclase gana en especificidad a un ".btn-primary" a
   secas, por muy detrás que vaya esta hoja. El botón principal se ponía AZUL al
   pasar el ratón, al recibir el foco y al pulsarlo. Medido en el navegador; venía
   de antes de oscurecer el dorado.

   El oscurecido del hover no se pone aquí: lo da el "filter: brightness(.96)" de
   .btn:hover, que ya sirve a todos los botones por igual. */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--crm-brand);
    border-color: var(--crm-brand);
    color: #fff;
}

/* Acción destacada que no es la principal. Ver --crm-accent (apartado 1) */
.btn-accent {
    background-color: var(--crm-accent);
    border-color: var(--crm-accent);
    color: #fff;
}

.btn-accent:hover,
.btn-accent:focus {
    background-color: var(--crm-accent-dark);
    border-color: var(--crm-accent-dark);
    color: #fff;
}

/* btn-warning se usa en el botón "Ver artículos" de las fichas */
.btn-warning {
    background-color: var(--crm-brand-soft);
    border-color: var(--crm-border);
    color: var(--crm-brand-dark);
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: #fff;
    border-color: var(--crm-brand);
    color: var(--crm-brand);
}

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

.btn:hover {
    filter: brightness(.96);
}


/* ---------------------------------------------------------------------------
   7. Tablas de GridView
   ---------------------------------------------------------------------------
   Aquí es obligatorio el !important: HeaderStyle, PagerStyle y FooterStyle
   están declarados como atributos en los .aspx y ASP.NET los saca como estilo
   inline. Ojo: NO se toca el fondo de las filas de datos (regla 2).
   -------------------------------------------------------------------------- */
.table {
    background-color: var(--crm-surface);
    border: 1px solid var(--crm-border);
    margin-bottom: 0;
}

.table.small,
.table {
    font-size: 13px;
}

/* Cifras y referencias alineadas en columna: se lee mucho mejor un listado
   de importes en diagonal. */
.table > tbody > tr > td {
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
    padding: 10px 12px;
    color: var(--crm-ink);
    border-top: 1px solid var(--crm-border);
}

/* Realce de la fila bajo el cursor. Sustituye al onmouseover/onmouseout que
   FichaContacto.aspx.cs escribía como atributo en cada fila y que pintaba la
   fila entera de dorado con el texto en blanco.

   Va ANTES que las clases de estado del final de este apartado a propósito:
   misma especificidad (0,2,3), así que gana la última declarada y el tinte de
   estado no se pierde al pasar el ratón por encima. */
.table > tbody > tr:hover > td {
    background-color: rgba(146, 103, 38, .07);
}

/* table-bordered dibuja una rejilla completa. Quitando las verticales queda un
   listado, no una hoja de cálculo.

   El selector de la cabecera es "> tbody > tr > th" y no un simple "th" por dos
   motivos que se suman. Uno, la regla 4: sin <thead>, la fila de cabecera acaba
   dentro del <tbody> implícito. Y dos, Bootstrap declara exactamente
   ".table-bordered > tbody > tr > th { border: 1px solid #ddd }", de modo que un
   ".table-bordered th" pierde por especificidad y las verticales se quedaban
   sólo en la cabecera. Medido en el navegador, no deducido. */
.table-bordered,
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > thead > tr > th {
    border-left: none;
    border-right: none;
}

.table-bordered {
    border: 1px solid var(--crm-border);
}

/* Cabecera: gana al BackColor="#d4a55c" inline. También unifica el GridView
   que venía con la cabecera en #A09B8A.

   Se estiliza sobre "th" a secas, sin pasar por thead, porque en este proyecto
   los GridView no renderizan thead (regla 4 de la cabecera). El BackColor y el
   ForeColor de HeaderStyle salen inline en el <tr>, no en las celdas: un fondo
   opaco sobre el <th> lo tapa por completo, y el color de texto se gana sin
   más porque un valor heredado nunca compite con una regla propia.

   El "> tbody > tr > th" del medio es sólo por el relleno: Bootstrap declara
   ".table > tbody > tr > th { padding: 8px }" y le ganaba a un ".table th",
   así que la cabecera quedaba 4px a la izquierda de su propia columna. */
.table th,
.table > tbody > tr > th,
.table > thead > tr > th,
.table > thead > tr {
    background-color: var(--crm-brand-soft) !important;
    color: var(--crm-label) !important;
    font-family: var(--crm-font) !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--crm-border) !important;
    white-space: nowrap;
}

/* Las cabeceras ordenables son LinkButton: heredarían el dorado de los enlaces */
.table th a {
    color: var(--crm-label) !important;
    text-decoration: none;
}

.table th a:hover {
    color: var(--crm-brand) !important;
    text-decoration: underline;
}

/* Paginador: gana al BackColor="#5d5125" + Font-Names="Candara" inline */
.paginado,
.paginado td,
.table > tbody > tr.paginado,
tr.paginado > td {
    background-color: var(--crm-brand-soft) !important;
    color: var(--crm-brand-dark) !important;
    font-family: var(--crm-font) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: normal;
    padding: 9px 12px !important;
    border-top: 1px solid var(--crm-border) !important;
}

.paginado a,
.paginado span {
    color: var(--crm-brand-dark) !important;
    padding: 3px 8px;
    border-radius: 4px;
    text-decoration: none;
}

.paginado a:hover {
    background-color: #fff;
    color: var(--crm-brand) !important;
}

.paginado span {
    background-color: var(--crm-brand);
    color: #fff !important;
    font-weight: 650;
}


/* Estados de fila
   ---------------------------------------------------------------------------
   Sustituyen al relleno macizo OrangeRed/Orange + texto blanco que ponía el
   código con e.Row.BackColor. El problema de aquello no era el color: era que
   la fila que más te interesa leer es justamente la que dejaba de leerse.

   Aquí el estado se señala con un tinte muy claro y una barra de acento en el
   borde izquierdo, y el texto se queda legible. Se aplican desde el código con
   e.Row.CssClass (BusquedaPedidos.aspx.cs, FichaContacto.aspx.cs), así que no
   hacen falta !important: las filas de datos no llevan estilo inline.

   Van sobre las celdas y no sobre la fila porque un fondo en el <tr> lo tapa
   cualquier <td> opaco; poniéndolo en las celdas no hay nada que pueda taparlo. */
.table > tbody > tr.crm-row-critical > td {
    background-color: var(--crm-critical-bg);
    color: var(--crm-critical);
}

.table > tbody > tr.crm-row-critical > td:first-child {
    box-shadow: inset 3px 0 0 var(--crm-critical);
}

.table > tbody > tr.crm-row-warn > td {
    background-color: var(--crm-warn-bg);
    color: var(--crm-warn);
}

.table > tbody > tr.crm-row-warn > td:first-child {
    box-shadow: inset 3px 0 0 var(--crm-warn);
}

/* En una fila teñida el texto entero sigue el color del estado, y el enlace que
   abre la ficha —el número de pedido, el nombre del cliente— también: en rojo
   sobre rojo claro, el dorado de enlace se leería como un dato de otra fila.
   Se queda subrayado, que es lo que lo delata como pulsable (.crm-linkcell). */
.table > tbody > tr.crm-row-critical > td a:not(.btn),
.table > tbody > tr.crm-row-warn > td a:not(.btn) {
    color: inherit;
    text-decoration: underline;
}


/* ---------------------------------------------------------------------------
   8. Aviso de incidencia abierta (FichaContacto.aspx)
   ---------------------------------------------------------------------------
   El control es un asp:HyperLink con clase glyphicon y el aviso en su atributo
   ToolTip, que se renderiza como title. CSS puede sacar ese texto a la vista
   con content: attr(title), así que el icono se convierte en una etiqueta
   legible sin tocar el markup de la página.
   -------------------------------------------------------------------------- */
a.glyphicon-warning-sign[title] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px !important;
    color: var(--crm-critical) !important;
    background-color: var(--crm-critical-bg);
    border: 1px solid var(--crm-critical-bd);
    border-radius: 999px;
    padding: 4px 12px 4px 10px;
    text-decoration: none;
    vertical-align: middle;
}

a.glyphicon-warning-sign[title]::after {
    content: attr(title);
    font-family: var(--crm-font);
    font-size: 12.5px;
    font-weight: 620;
    line-height: 1;
}

a.glyphicon-warning-sign[title]:hover {
    background-color: #fff;
    border-color: var(--crm-critical);
}


/* ---------------------------------------------------------------------------
   9. Ventanas modales
   ---------------------------------------------------------------------------
   La cabecera lleva style="background-color: #6EC2C2" inline en el markup de
   todas las páginas (un turquesa que no pertenece a la paleta), de ahí el
   !important para unificarla con la marca.
   -------------------------------------------------------------------------- */
.modal-content {
    border: none;
    border-radius: var(--crm-radius);
    box-shadow: var(--crm-shadow);
    overflow: hidden;
}

.modal-header {
    background-color: var(--crm-brand) !important;
    color: #fff !important;
    border-bottom: none;
    padding: 14px 20px;
}

.modal-title {
    font-family: var(--crm-font);
    font-size: 16px;
    font-weight: 620;
    letter-spacing: -.01em;
}

.modal-header .close {
    color: #fff;
    opacity: .85;
    text-shadow: none;
    font-weight: 400;
}

.modal-header .close:hover {
    opacity: 1;
}

.modal-body {
    font-size: 14px;
    color: var(--crm-ink);
    padding: 22px 20px;
}

/* Sólo lo usa el modal de confirmación de los envíos masivos
   (BusquedaPedidos.aspx): los demás modales de la aplicación son de aviso y no
   tienen pie. La acción confirmada va a la derecha, y Cancelar a su izquierda. */
.modal-footer {
    padding: 14px 20px;
    background-color: var(--crm-brand-soft);
    border-top: 1px solid var(--crm-border);
}

.modal-body p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------------------------
   10. Popover de líneas de pedido
   -------------------------------------------------------------------------- */
.popover {
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    box-shadow: var(--crm-shadow);
    font-family: var(--crm-font);
}

.popover-title {
    background-color: var(--crm-brand-soft);
    border-bottom: 1px solid var(--crm-border);
    color: var(--crm-label);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.tablePedidos th {
    background: var(--crm-brand-soft) !important;
}


/* ---------------------------------------------------------------------------
   11. Panel de inicio (Index.aspx) — tarjetas de indicador
   ---------------------------------------------------------------------------
   Los seis indicadores llevaban Font-Size="64pt" en la primera fila y "94pt"
   en la segunda, puestos como atributo del control. No había ninguna razón
   detrás de esa diferencia, y hacía que la pantalla se leyera como si la fila
   de abajo importara más. Los dos atributos se han quitado del .aspx, así que
   la escala se decide aquí y en un solo sitio: sin !important y sin depender
   de selectores por atributo.

   La tarjeta es un <div class="crm-kpi"> dentro de la columna, no la columna
   misma: las columnas de Bootstrap 3 llevan el gutter como padding propio, de
   modo que un borde sobre la columna dejaría las tarjetas pegadas entre sí.
   -------------------------------------------------------------------------- */
.crm-kpi {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-height: 150px;
    margin-bottom: 22px;
    padding: 20px 18px;
    background-color: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    box-shadow: var(--crm-shadow);
}

.crm-kpi-value {
    display: block;
    font-family: var(--crm-font);
    font-size: 44px;
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: var(--crm-ink);
    font-variant-numeric: tabular-nums;
}

/* El pie de la tarjeta reutiliza .label-forms (apartado 4): versalitas
   pequeñas. Solo hay que quitarle el margen inferior suelto. */
.crm-kpi .label-forms {
    margin-bottom: 0;
}

/* Indicador en rojo cuando el dato pide atención. La clase la pone el código
   sobre el número (Index.aspx.cs, pedidos PENDIENTE SALIR con más de 0), no
   sobre la tarjeta: tiñendo el fondo, las seis tarjetas dejan de leerse como
   una misma rejilla y el aviso pierde fuerza justo donde importa.
   Mismo rojo que las filas críticas del apartado 7. */
.crm-kpi-value.crm-kpi-critical {
    color: var(--crm-critical);
}


/* ---------------------------------------------------------------------------
   11.b Panel de inicio — gráfico de base imponible por mes
   ---------------------------------------------------------------------------
   Doce columnas dentro de una .crm-tablecard, y en cada una DOS barras: el año
   anterior a la izquierda, en neutro, y el año en curso a la derecha, en
   dorado. El HTML lo escribe PintaGraficoMensual (Index.aspx.cs) y lo único que
   trae de dinámico son el "height:N%" de cada barra y el "bottom:N%" del par de
   cifras; todo lo demás se decide aquí.

   La leyenda son los dos totales de la línea del título, cada uno con el color
   de su serie delante (.crm-chart-clave). Una leyenda aparte habría gastado una
   línea entera para decir lo mismo dos veces.

   Va como 11.b y no como apartado 22 para que quede junto al resto del panel de
   inicio. Renumerar los apartados no era opción: hay comentarios en el código y
   en esta misma hoja que citan "el apartado 7" y "el apartado 11".

   Sin librería de gráficos: son doce rectángulos con un alto en tanto por
   ciento, y cargar una en una pantalla que ya trae jQuery, Bootstrap, moment y
   el datetimepicker no compensa.

   La línea de base es el borde inferior de cada .crm-chart-track y no una regla
   suelta, así que las columnas van SIN hueco entre ellas —el aire lo pone el
   ancho de la barra, que es menor que su columna—. Con gap la línea saldría a
   trozos.
   -------------------------------------------------------------------------- */
.crm-chart {
    /* Doce columnas no caben en un móvil sin quedar en tiras de dos píxeles.
       Antes que reducirlas, la tarjeta deja arrastrar en horizontal: el gráfico
       se lee entero moviéndolo, que es mejor que leerlo mal entero. */
    overflow-x: auto;
    padding: 4px 6px 12px;
}

.crm-chart-barras {
    display: flex;
    align-items: flex-end;
    /* El hueco de arriba es para las DOS cifras del mes más alto, que se
       colocan por encima de su barra y se saldrían de la tarjeta sin él. Eran
       26px cuando la cifra era una sola. */
    padding: 40px 8px 0;
    margin: 0;
    list-style: none;
    /* Con dos barras por mes hacen falta unos 50px de columna para que el par se
       distinga; por debajo de eso el gráfico se arrastra dentro de la tarjeta en
       lugar de encogerse hasta dejar de leerse. */
    min-width: 620px;
}

.crm-chart-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.crm-chart-track {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* El hueco entre las dos barras del mes. Pequeño a propósito: el par tiene
       que leerse como un mes con dos años, no como dos meses distintos —de eso
       se encarga el hueco mayor que dejan los laterales de la columna—. */
    gap: 3px;
    width: 100%;
    /* El hueco necesita medida DEFINIDA: el "height:N%" de las barras se resuelve
       contra ella, y con un alto automático o en porcentaje las veinticuatro
       saldrían a cero. Pero fija del todo tampoco: a 190px sobraba media pantalla
       por debajo de la tarjeta en un monitor normal y las barras de los meses
       flojos quedaban en un dedo.

       De ahí el clamp: el hueco crece con la ventana y se come el sitio que
       sobraba, sin pasarse.

       Los 630px que se restan NO son un número redondo puesto a ojo: es todo lo
       que hay por encima y por debajo del hueco de las barras —barra de
       navegación, los dos pisos de tarjetas de indicador, el título del apartado,
       el sitio de las dos cifras, el rótulo del mes con su porcentaje y el
       padding inferior de .content-wrapper—. Medido en el banco reproduciendo la
       pantalla entera, indicadores incluidos: en una ventana de 895 de alto, todo
       lo que queda por encima del borde inferior de la tarjeta sin contar el
       hueco de las barras suma 582px. Más los 48px de padding que tienen que
       seguir viéndose por debajo: 630.

       Comprobado luego a cuatro altos de ventana: 768 -> 190 (el suelo, y la
       página se arrastra 4px, como antes de esto), 800 -> 190, 895 -> 265 y
       1040 -> 410; en los dos últimos quedan los 45-48px de padding justos.

       Los topes: 190px es lo que tenía —por debajo de una ventana de 820 se
       queda ahí y la página se arrastra un poco, como antes—, y 420px es donde
       deja de tener sentido estirar más un gráfico de doce columnas.

       Si alguien añade o quita una fila de indicadores, este 630 se queda corto o
       largo: es la única cifra de aquí que depende de lo que haya ALREDEDOR. */
    height: clamp(190px, calc(100vh - 630px), 420px);
    border-bottom: 1px solid var(--crm-border);
}

.crm-chart-barra {
    position: relative;
    /* flex-shrink a cero: si no, el navegador encoge las dos barras para que
       quepan con el gap y el ancho deja de ser el mismo en todas las columnas. */
    flex: 0 0 auto;
    width: 40%;
    max-width: 30px;
    background-color: var(--crm-brand);
    border-radius: 3px 3px 0 0;
    transition: background-color .12s ease;
}

/* La serie del año anterior. Relleno claro con borde oscuro, no un gris plano:
   la razón está en la nota de --crm-chart-previo (apartado 1) y no es de gusto,
   es que un solo color no puede separarse a la vez del dorado y del blanco.

   El borde va por DENTRO gracias al "* { box-sizing: border-box }" que trae
   Bootstrap, y de eso depende que las dos barras del mes midan lo mismo: sumado
   por fuera, la del año anterior saldría dos píxeles más ancha y más alta, y en
   un mes empatado parecería que ganó. */
.crm-chart-barra-previo {
    background-color: var(--crm-chart-previo);
    border: 1px solid var(--crm-chart-previo-bd);
}

/* Año sin pedidos facturados en ese mes: la barra sigue estando, con alto cero,
   para que el par no se descoloque y la que sí tiene datos siga bajo su año.
   Sin fondo ni borde, o quedaría una pastilla de un píxel sobre el eje. */
.crm-chart-barra-vacia {
    background-color: transparent;
    /* border y no border-color: con box-sizing: border-box un borde de un píxel
       arriba y otro abajo NO se pueden encoger, así que la barra de alto cero
       seguía midiendo dos píxeles. Invisible, pero la caja estaba ahí. */
    border: none;
}

.crm-chart-col:hover .crm-chart-barra {
    background-color: var(--crm-brand-dark);
}

.crm-chart-col:hover .crm-chart-barra-previo {
    background-color: var(--crm-chart-previo-bd);
}

/* Las dos cifras del mes, encima de la más alta de sus dos barras. El "bottom"
   lo escribe el code-behind, que es donde se conocen los dos altos: colgadas de
   su propia barra se metían dentro de la otra cuando el año anterior era mejor,
   y en una fila fija arriba del todo quedaban a diez centímetros de un mes
   flojo.

   El bloque ocupa el ancho de la columna y centra con text-align en lugar de
   con un translateX: los números quedan centrados sobre el PAR de barras, que
   es lo que representan, y no sobre una de las dos.

   APILADAS, una por línea, y no una sobre cada barra. Medido en el banco: a
   1280px la columna da 76px y dos números de seis cifras miden 33px cada uno
   —66px, que ya rozan—; de siete cifras, 48px cada uno, y se solapan. En dos
   líneas cada número tiene la columna entera y no se solapa nunca. Cuál es cuál
   lo dice el color, el mismo de la leyenda del título. */
.crm-chart-cifras {
    position: absolute;
    left: 0;
    right: 0;
    margin-bottom: 5px;
    text-align: center;
}

.crm-chart-cifra {
    display: block;
    font-size: 11px;
    font-weight: 600;
    /* 1.35 y no 1: a línea justa los dos números se tocan y se leen como uno
       solo de dos pisos. */
    line-height: 1.35;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--crm-ink);
}

/* La del año anterior, en el mismo gris que su total en la leyenda del título.
   No en el color de la barra —#918977, que se queda en 3,47:1 sobre blanco—:
   eso vale para una silueta, no para un número que hay que leer. --crm-muted da
   5,60:1 y sigue quedando claramente por debajo del 15,39:1 del año en curso. */
.crm-chart-cifra-previo {
    font-weight: 500;
    color: var(--crm-muted);
}

.crm-chart-cifra-vacia {
    font-weight: 400;
    color: var(--crm-muted);
}

/* El rótulo del mes, en la escala de .label-forms (apartado 4) pero sin las
   versalitas: "ENE FEB MAR" en mayúsculas y espaciado no se lee de un vistazo,
   y aquí hay doce seguidos. */
.crm-chart-mes {
    padding-top: 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: var(--crm-muted);
}

/* El mes en curso está a medias —el dato no es comparable con los cerrados—, y
   eso lo dice el rótulo, no el color de la barra: teñirla la haría parecer el
   mes destacado del año. El title de la columna lo escribe con todas las
   letras. */
.crm-chart-col-actual .crm-chart-mes {
    font-weight: 700;
    color: var(--crm-brand-dark);
}


/* La variación contra el mismo mes del año anterior, debajo del rótulo.
   ---------------------------------------------------------------------------
   Estaba sólo en el title de la columna y había que pasar el ratón mes a mes.
   Aquí se barre la fila entera de un vistazo.

   Va ABAJO, a la misma altura en las doce columnas, y no arriba con los
   importes: los porcentajes se comparan entre ellos, y en una línea recta se
   comparan; colgados de las barras quedarían a doce alturas distintas.

   Verde y rojo salen de la escala de ESTADOS (--crm-ok / --crm-critical) y no
   de la de marca. No es un estado de pedido —la fuente de esos colores sigue
   siendo ClaseEstadoPedido, y esto no la toca—, pero subir y bajar es la misma
   idea de "bien / mal" y merece los mismos dos colores en vez de inventar un
   par nuevo. Y el color no va solo: el signo + o - dice lo mismo sin depender
   de verlos. Contraste sobre la tarjeta: 6,28:1 el verde y 6,54:1 el rojo. */
.crm-chart-var {
    margin-top: 3px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.crm-chart-var-sube {
    color: var(--crm-ok);
}

.crm-chart-var-baja {
    color: var(--crm-critical);
}

/* Sin comparación posible —el año anterior no vendió ese mes, o el mes aún no
   ha llegado— y también el empate exacto. En gris y sin negrita: no hay nada
   que destacar, y pintar de verde un "0 %" sería darle color a una diferencia
   que el propio número dice que no existe. */
.crm-chart-var-nula {
    font-weight: 400;
    color: var(--crm-muted);
}

/* Los dos totales de la línea del título, que hacen de leyenda del gráfico.
   Los escribe DibujaTotales (Index.aspx.cs) dentro de #lblTotalAnio, que ya es
   un .crm-sec-dato (apartado 12): de ahí heredan el tamaño y el color del
   rótulo, y el <b> de cada cifra el tamaño grande. */
.crm-chart-total {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.crm-chart-total + .crm-chart-total {
    margin-left: 16px;
}

/* El año, con la muestra de color de su serie delante. El cuadrito es un
   ::before y no un elemento aparte para que el code-behind no tenga que
   escribirlo: así el HTML del total dice sólo lo que vale cada año. */
.crm-chart-clave::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    border-radius: 2px;
    background-color: var(--crm-brand);
    /* Borde del mismo color que el relleno, para que la muestra del año en curso
       y la del anterior midan exactamente igual: una con borde y la otra sin él
       se verían de tamaños distintos. */
    border: 1px solid var(--crm-brand);
}

.crm-chart-total-previo .crm-chart-clave::before {
    background-color: var(--crm-chart-previo);
    border-color: var(--crm-chart-previo-bd);
}

/* El año anterior es la referencia, no el dato: su cifra pesa menos que la del
   año en curso. Sin llegar al gris de rótulo —sigue siendo un importe que se
   lee—, y con el mismo salto de tamaño que separa .crm-resumen-cifra de
   .crm-resumen-cifra-final (apartado 13).

   Lleva delante .crm-sec-dato para ganar en especificidad, igual que hay que
   hacer con Bootstrap en los botones: la regla que hay que vencer es
   ".crm-sec-dato b" del apartado 12, que empata en especificidad (0,1,1) y va
   DESPUÉS en la hoja, así que con ".crm-chart-total-previo b" a secas ganaba
   ella y las dos cifras salían idénticas —medido en el banco—. */
.crm-sec-dato .crm-chart-total-previo b {
    font-size: 15px;
    font-weight: 600;
    color: var(--crm-muted);
}

/* En pantalla estrecha caben las barras pero no las cifras: la columna baja de
   50px y dos líneas de números encima de cada mes tapan el propio gráfico. Se
   quitan y queda lo que se mira de un vistazo, que es la comparación de altos;
   los importes exactos de los dos años siguen en el title de cada columna. */
@media (max-width: 991px) {
    .crm-chart-cifras {
        display: none;
    }

    .crm-chart-track {
        height: 150px;
    }

    .crm-chart-barras {
        padding-top: 6px;
    }
}


/* ---------------------------------------------------------------------------
   11.c Gráfico de una sola serie (FichaContacto.aspx — gasto por año)
   ---------------------------------------------------------------------------
   El gasto del cliente por año, dentro de la misma tarjeta que la rejilla de
   pedidos y encima de ella. Es la capa de 11.b con UNA barra por columna en vez
   de un par, así que aquí sólo están las diferencias: el hueco de las barras y
   su línea de base, la barra, la cifra colgada encima, el rótulo bajo el eje y
   los tres colores de la variación se heredan de allí sin tocar ni una línea de
   aquel apartado. Se toca 11.b y este gráfico cambia con él; es lo que se quiere.

   Va como 11.c por lo mismo que 11.b va como 11.b: los apartados no se
   renumeran —hay comentarios en el código y en esta hoja que citan «el apartado
   7» y «el apartado 11»— y una variante de la capa de gráficos tiene que quedar
   junto a la capa de gráficos.

   .crm-chart-anios es el ENVOLTORIO y no un modificador de .crm-chart: lleva
   dentro el rótulo y, aparte, el .crm-chart que arrastra en horizontal. Metido
   dentro del que arrastra, el rótulo se iría de la vista al mover las barras.
   -------------------------------------------------------------------------- */
.crm-chart-anios {
    /* Cierra el bloque por abajo y lo separa de la tabla que va debajo dentro de
       la misma tarjeta, igual que hace .crm-tablecard-resumen (apartado 13) con
       la tira de cifras de la ficha de pedido. */
    padding: 11px 18px 4px;
    border-bottom: 1px solid var(--crm-border);
}

/* El rótulo es además el BOTÓN que despliega el gráfico, que empieza plegado.
   ---------------------------------------------------------------------------
   Lleva la clase de los rótulos de resumen (apartado 13) y el texto es corto a
   propósito: qué pedidos entran lo dice ya el total de la línea del título del
   apartado, justo encima («Total pagado, cerrado y enviado»), y repetirlo aquí en
   versalitas serían cuarenta caracteres en mayúsculas.

   El botón se ajusta a su contenido (inline-flex) y no ocupa la fila entera: un
   botón invisible de un metro de ancho no se lee como un control, y así el cerco
   del foco marca justo lo que se puede pulsar.

   Se le quita todo lo que trae un <button> de fábrica —fondo, borde, relleno y
   tipografía—; el "font: inherit" es imprescindible, porque si no el navegador le
   pone su propia familia y .crm-resumen-cap sólo arregla el tamaño y el grosor. */
.crm-chart-anios > .crm-disclosure {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 2px;
    padding: 0;
    font: inherit;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}

/* Al apuntarlo, subrayado. El cambio de color por sí solo no vale aquí: de
   --crm-label a --crm-brand-dark hay dos tonos de la misma oliva oscura
   (#6B5A2E -> #5D5125) y la diferencia no se ve, mientras que en un enlace sí se
   nota porque el color de partida es otro. El subrayado dice sin ambigüedad que
   esto se pulsa.
   El cerco del foco no hay que ponerlo: lo da ya el "button:focus-visible" del
   apartado 2, dorado y con separación. */
.crm-chart-anios > .crm-disclosure:hover .crm-resumen-cap,
.crm-chart-anios > .crm-disclosure:focus .crm-resumen-cap {
    color: var(--crm-brand-dark);
    text-decoration: underline;
}

/* El galón, más pequeño que el rótulo: es una señal, no un icono de acción */
.crm-chart-anios > .crm-disclosure .glyphicon {
    font-size: 9px;
    line-height: 1;
    color: var(--crm-label);
}

/* Plegado la punta mira a la derecha; desplegado, hacia abajo. El giro lo hace el
   CSS a partir de la clase del envoltorio y no el JavaScript cambiando el glifo:
   así el script sólo tiene que poner o quitar una clase, y el estado del dibujo y
   el del gráfico no pueden quedar descosidos.

   Sin transición, como el resto de la hoja: una animación de despliegue tendría
   que medir el alto por JavaScript y en este proyecto nada que dependa del bucle
   de render se puede comprobar antes de desplegar. */
.crm-chart-anios:not(.crm-plegado) > .crm-disclosure .glyphicon {
    transform: rotate(90deg);
}

/* Plegado: el gráfico no se pinta y el bloque se queda en una sola línea, con el
   mismo relleno arriba y abajo que la tira de cifras de .crm-tablecard-resumen
   (apartado 13), que es lo que es mientras está cerrado. */
.crm-chart-anios.crm-plegado > .crm-chart {
    display: none;
}

.crm-chart-anios.crm-plegado {
    padding-bottom: 11px;
}

/* El relleno lateral y el de arriba los pone ya el envoltorio. Abajo NO puede ir
   a cero, y esto es la parte importante de esta regla:

   .crm-chart arrastra en horizontal (overflow-x: auto en 11.b) y el CSS obliga a
   que, si un eje no es "visible", el otro tampoco: el navegador calcula
   overflow-y: auto por su cuenta. A partir de ahí, cualquier cosa que sobresalga
   un píxel por abajo saca una BARRA VERTICAL en un gráfico de alto fijo, que no
   tiene ningún sentido.

   Y sobresale: .crm-chart-var lleva line-height: 1 con 10px de letra, así que la
   caja del glifo es más alta que su línea y se sale unos 2px por debajo. Medido:
   scrollHeight 210 contra clientHeight 208, idéntico con cuatro, siete y once
   años y a cualquier ancho de ventana. En 11.b no se ve porque allí .crm-chart
   tiene 12px de relleno inferior que se los comen; aquí se habían puesto a cero.

   Se arregla por los dos lados a la vez, y los dos hacen falta: el relleno da
   sitio de verdad para que nada quede recortado, y el overflow-y: hidden asegura
   que no aparezca la barra por mucho que el navegador redondee de otra forma. La
   cifra de encima de la barra más alta, que es lo único que podría recortarse,
   tiene 6px de holgura medidos por encima. */
.crm-chart-anios .crm-chart {
    padding: 0 0 4px;
    overflow-y: hidden;
}

.crm-chart-anios .crm-chart-barras {
    /* Sin el min-width de 620px de 11.b: allí son DOCE columnas fijas con dos
       barras cada una, y por debajo de eso el par deja de distinguirse. Aquí el
       número de columnas lo pone el cliente —puede tener un año o diez— y el
       suelo lo pone el ancho de la columna, no la lista. */
    min-width: 0;
    /* El hueco de arriba es para UNA cifra y no para dos: son los 26px que
       medía 11.b antes de la segunda serie. */
    padding: 26px 8px 0;
}

.crm-chart-anios .crm-chart-col {
    /* Ancho propio y sin crecer, al revés que el "flex: 1 1 0" de 11.b: con doce
       columnas fijas repartir el hueco es lo correcto, pero aquí un cliente de un
       solo año se llevaría la tarjeta entera y su barra —que mide un 58% de la
       columna, con tope— quedaría perdida en medio de un metro de blanco. */
    flex: 0 1 auto;
    width: 84px;
    min-width: 52px;
}

/* Pocas columnas se quedan CENTRADAS en lugar de estirarse (el ancho propio de la
   columna es el de la regla de encima), y se centran con márgenes automáticos en los
   extremos y NO con un justify-content: center.
   No es un rodeo: medido en el banco a 375px de ancho con once años, con
   justify-content el gráfico se pasa 136px y los 136 se van ENTEROS por la
   izquierda, donde el arrastre no llega —scrollLeft no puede ser negativo—, así
   que los primeros años quedaban invisibles y sin forma de alcanzarlos. Un
   margen "auto" se come el hueco libre cuando lo hay, y cuando no lo hay vale
   cero: se centra igual y no recorta nunca. */
.crm-chart-anios .crm-chart-col:first-child {
    margin-left: auto;
}

.crm-chart-anios .crm-chart-col:last-child {
    margin-right: auto;
}

.crm-chart-anios .crm-chart-track {
    /* Alto FIJO, no el clamp contra la ventana de 11.b. Aquel "100vh - 630px" es
       la suma medida de todo lo que rodea al gráfico EN EL PANEL DE INICIO, que
       es lo último de una pantalla que no se desplaza. Este gráfico va a media
       ficha, con un formulario encima y dos rejillas debajo: el alto de la
       ventana no dice nada de cuánto sitio le toca, y estirándose empujaría los
       pedidos y las incidencias fuera de la pantalla. */
    height: 168px;
}

.crm-chart-anios .crm-chart-barra {
    /* Más ancha que en 11.b: allí son dos barras compartiendo la columna y aquí
       hay una sola, y con el 40% de allá el año quedaba en una raya. */
    width: 58%;
    max-width: 44px;
}

/* En pantalla estrecha 11.b esconde las cifras: doce columnas de menos de 50px
   con DOS números encima tapan el propio gráfico. Aquí son pocas columnas y un
   número por columna, así que se quedan —es el dato que se viene a leer, y en un
   móvil no hay ratón que enseñe el title—. Gana por especificidad (0,2,0 contra
   el 0,1,0 de allí) sin depender del orden, pero tiene que ir dentro de una media
   del mismo ancho o no se aplicaría. */
@media (max-width: 991px) {
    .crm-chart-anios .crm-chart-cifras {
        display: block;
    }

    .crm-chart-anios .crm-chart-track {
        height: 150px;
    }
}


/* ---------------------------------------------------------------------------
   12. Ficha de cliente (FichaContacto.aspx)
   ---------------------------------------------------------------------------
   La ficha era una sucesión de filas de Bootstrap sin más jerarquía que un <hr>
   suelto: los datos fiscales, los de envío y las dos rejillas se leían como un
   único bloque. Aquí se le da la estructura del boceto — apartados con título,
   rejilla de campos propia, barra de acciones y tablas dentro de una tarjeta.

   La rejilla de campos es CSS Grid y no columnas de Bootstrap: así los campos
   se reparten solos según el ancho disponible, sin repartir "col-lg-2" a mano
   fila por fila (que es lo que obligaba a recolocar campos al añadir uno).
   -------------------------------------------------------------------------- */

/* Título de apartado: "Datos fiscales", "Datos de Envío", "Pedidos del cliente",
   "Incidencias del cliente".
   Eran versalitas de 11px, del tamaño de un rótulo de campo, porque encima
   estaba el título "Ficha de cliente" y por debajo de él tenían que quedar. Ese
   título ya no está, así que los cuatro apartados son ahora lo primero que
   ordena la página y llevan la tipografía que tenía él: los mismos valores que
   .TituloPagina, copiados y no heredados porque esa clase la usan otras seis
   pantallas y aquí no hay que tocarlas.
   Sin mayúsculas ni el espaciado entre letras: a 11px abrían un texto muy corto,
   pero a 19px lo que hacen es gritar. La línea inferior se queda: es lo que
   separa un apartado del anterior. */
.crm-sec {
    margin: 34px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--crm-border);
    font-family: var(--crm-font);
    font-size: 19px;
    font-weight: 620;
    letter-spacing: -.01em;
    color: var(--crm-brand-dark);
}

/* El primero no necesita separarse de nada: va pegado al nombre de la pantalla */
.crm-sec:first-child {
    margin-top: 6px;
}

/* Apartado que lleva un dato calculado al lado del título: "Pedidos del cliente"
   saca a la derecha el total de lo pagado por el cliente. Va en la línea del
   título y no como un campo del formulario porque no se escribe, se lee; y en la
   línea del título y no debajo para no separar el rótulo de su tabla.
   El align-items: baseline alinea las dos letras por su base, que es lo que se
   ve, y no por la caja —el dato es más grande que el título. */
.crm-sec-condato {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 14px;
}

/* El dato no hereda el tamaño, el peso ni el color del título del apartado: el
   rótulo que acompaña al importe es texto corriente, no un encabezado. */
.crm-sec-dato {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--crm-muted);
}

/* El importe, dentro de la frase que dice de qué es. Lo que se busca al llegar a
   la ficha es la cifra, no el rótulo, así que se destaca por tres vías a la vez
   —negrita, un tamaño por encima del texto que la acompaña y el tinta frente al
   gris— en lugar de solo por la negrita: sobre 13px una negrita sola apenas se
   despega del rótulo.
   Escala reducida de .crm-kpi-value (apartado 11): mismas tabular-nums y el
   mismo tinta, que es como se pintan los importes del panel de inicio. */
.crm-sec-dato b {
    margin-left: 2px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--crm-ink);
    font-variant-numeric: tabular-nums;
}

/* Cabecera de página: el volver a la izquierda del título de la pantalla, y a su
   derecha el aviso de incidencia abierta cuando lo hay.
   Estaba al pie del formulario, en la fila de botones, donde no se busca: para
   salir de una ficha se mira arriba. Como icono redondo tampoco compite con
   Grabar, que es la acción principal de la página.
   El flex-wrap es por el aviso: en una pantalla estrecha baja a la línea de
   abajo en vez de estrujar el título. */
.crm-page-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.crm-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border: 1px solid var(--crm-border);
    border-radius: 50%;
    background-color: var(--crm-surface);
    color: var(--crm-brand-dark);
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.crm-back:hover,
.crm-back:focus {
    background-color: var(--crm-brand-soft);
    border-color: var(--crm-brand);
    color: var(--crm-brand-dark);
    text-decoration: none;
}

/* Bootstrap le pone top:1px a .glyphicon para alinearla con texto; dentro de un
   flex centrado eso la descuadra. */
.crm-back .glyphicon {
    top: 0;
    font-size: 12px;
}

/* Lo que va al otro extremo de la cabecera, no pegado al título: en la ficha de
   pedido, el aviso de incidencias abiertas. Se empuja con margen automático y no
   con justify-content porque el resto de la fila sí va junto y a la izquierda.
   Al envolver la cabecera el margen no estorba: el elemento cae a la línea de
   abajo y allí el auto no tiene sobrante que repartir. */
.crm-page-head-derecha {
    margin-left: auto;
}

/* El puesto del cliente por importe gastado: el botón que lo pide y la píldora
   que lo enseña, "🥇 1 / 1.153".
   ---------------------------------------------------------------------------
   Reutiliza la forma de .crm-pill del apartado 15 —la misma píldora que los
   estados de pedido y de incidencia— y aquí sólo está lo que le falta. El color no
   lo hereda de .crm-pill-neutral: lo declara esta regla, ver abajo.

   Va en el DORADO de marca, con --crm-brand-bg de relleno. Empezó en gris para
   no arrimarse a la escala de marca, pero en gris no se veía: es el dato que se
   viene a mirar. Y el dorado aquí no crea la confusión que la hoja evita en los
   estados —esto no es un estado de nada—, así que se queda.

   El relleno es CLARO y no el dorado macizo con rótulo blanco: la medalla de oro
   sobre un fondo dorado deja de distinguirse, y es lo primero que se mira.

   El selector es compuesto (.crm-pill.crm-puesto) y no .crm-puesto a secas para
   que no dependa del orden: .crm-pill llega en el apartado 15, después de éste, y
   con un selector de una sola clase ganaría ella el display por ir más abajo. */
/* El botón que lo pide y la píldora que lo enseña comparten forma y color, y
   ocupan el mismo hueco de la cabecera: al pulsar, el uno se esconde y la otra
   aparece justo donde estaba, así que se lee como que el botón se convierte en el
   dato. De ahí que las dos vayan en la misma declaración y no copiadas. */
.crm-pill.crm-puesto,
.crm-pill.crm-verranking {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--crm-brand-bg);
    border-color: var(--crm-brand);
    color: var(--crm-brand-dark);
}

/* Lo que distingue al botón de la píldora: que se puede pulsar. El selector es
   compuesto para ganarle a la regla de "a" del apartado 2, que le pondría el
   dorado de enlace y su subrayado. */
.crm-pill.crm-verranking {
    cursor: pointer;
    text-decoration: none;
}

/* Al apuntarlo sí se rellena de dorado macizo con rótulo blanco: aquí no hay
   medalla que perder de vista —la medalla llega con el dato, cuando el botón ya
   no está—, y es el realce más claro de que esto se pulsa. */
.crm-pill.crm-verranking:hover,
.crm-pill.crm-verranking:focus {
    background-color: var(--crm-brand);
    border-color: var(--crm-brand-dark);
    color: #FFFFFF;
    text-decoration: none;
}

/* El glifo, más pequeño que el rótulo: acompaña, no manda. */
.crm-pill.crm-verranking .glyphicon {
    font-size: 10px;
    line-height: 1;
}

/* Mientras la consulta va y viene. El segundo clic se bloquea con pointer-events
   y no con "disabled", que en un <a> no existe. */
.crm-pill.crm-verranking-cargando {
    pointer-events: none;
    opacity: .65;
}

/* La medalla, más grande que el texto de la píldora: a 11,5px no se distingue de
   qué metal es. Line-height a 1 para que no estire la píldora por encima del alto
   que tienen las demás. */
.crm-puesto-medalla {
    font-size: 15px;
    line-height: 1;
}

/* Los dos números con numeración tabular, como el resto de las cifras de la
   aplicación: el puesto cambia de cliente en cliente y con cifras de ancho
   variable la píldora baila de tamaño al pasar de una ficha a otra. */
.crm-puesto-dato {
    /* Más peso que el 620 de .crm-pill: es la cifra del dato y tiene que ganarle
       al resto de la píldora. */
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* .crm-ficha-head y .crm-sub vivían aquí: eran la fila del título "Ficha de
   cliente" con el aviso de incidencia al lado, y la línea de "Cliente 123 ·
   última modificación" que iba debajo. Al quitarse los dos rótulos de la ficha
   no quedó ningún marcado que las usara. El aviso se ha mudado a
   .crm-page-head, junto al nombre de la pantalla. */

/* De quién es el pedido, en la cabecera de FichaPedido.aspx. El nombre del
   cliente estaba sólo en un recuadro deshabilitado dentro del formulario: se
   leía como un campo más y no llevaba a ninguna parte. Aquí acompaña al número
   del pedido —"Pedido 3418 · Colegio Santa María"— y abre la ficha del cliente.

   El punto va en el CSS y no en el marcado porque es separación, no contenido:
   si el enlace se oculta (un pedido nuevo aún no tiene cliente) se va con él en
   lugar de quedarse suelto detrás del título. */
.crm-head-cliente {
    font-size: 13.5px;
    color: var(--crm-brand);
    text-decoration: underline;
}

.crm-head-cliente::before {
    content: "·";
    margin-right: 7px;
    color: var(--crm-muted);
    text-decoration: none;
    display: inline-block;
}

.crm-head-cliente:hover,
.crm-head-cliente:focus {
    color: var(--crm-brand-dark);
    text-decoration: underline;
}

.crm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 15px 16px;
}

/* Dos y cuatro columnas fijas, para cuando el reparto automático no sirve.
   El "auto-fit, minmax(210px, 1fr)" de .crm-grid está pensado para recuadros de
   una línea: sobre las cuatro áreas de observaciones de la ficha de pedido
   dejaría cuatro columnas de 210px, y un texto largo en una tira estrecha no se
   lee. Y la fila de "Añadir artículo" son cuatro campos que van juntos siempre,
   no cuatro campos que quepan donde puedan.
   El minmax(0, 1fr) y no 1fr a secas: el mínimo por omisión de una pista de
   rejilla es "auto", y un desplegable con un texto largo dentro la ensancharía
   por encima de su parte. */
.crm-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crm-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Siete y cinco columnas: las dos filas de "Datos fiscales" de la ficha de
   cliente, que van en un orden pedido y no en el que quepa.

   Se cortan antes que .crm-grid-4 porque son más columnas: a 1199px siete
   recuadros de ~150px ya no dan para leer un email, así que bajan a cuatro y
   tres —los mismos anchos que el resto de las fichas— y de 767px para abajo a
   uno. Al envolver, el orden de los campos se mantiene. */
.crm-grid-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.crm-grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1199px) {
    .crm-grid-7 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .crm-grid-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .crm-grid-7,
    .crm-grid-5 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991px) {
    .crm-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .crm-grid-2,
    .crm-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Una línea de captura: campos y botones en la misma fila ("Añadir artículo" de
   la ficha de pedido). Los botones estaban en un pie aparte, debajo de los
   cuatro campos; como añadir artículos es lo que más veces se hace en esa
   pantalla, cada línea del pedido costaba bajar la vista de la fila al pie.

   Los dos primeros huecos se reparten lo que sobre —son desplegables con
   nombres de artículo, que es texto largo— y los dos siguientes van a medida:
   una cantidad son dos cifras y un precio son seis, y con un cuarto del ancho
   de la tarjeta cada uno sobraba recuadro por todos lados. El "auto" del final
   se lo queda lo que midan los botones.

   El align-items: end alinea por abajo, que es donde están los recuadros: sin
   él la rejilla estira cada celda a todo el alto de la fila y los botones —que
   no llevan rótulo encima— se irían a la altura de las etiquetas. */
.crm-grid-linea {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 96px 124px auto;
    align-items: end;
}

/* Un campo y su botón al lado: la búsqueda por referencia de "Añadir artículo".
   El campo se queda en una columna estrecha —una referencia son unos pocos
   caracteres— y el botón ocupa justo lo que mide.

   El align-items: end es lo que hace falta de verdad, y es el mismo motivo que
   en .crm-grid-linea: sin él la pista de la rejilla estira la celda del botón
   —que no lleva rótulo encima, así que sobra el alto de la etiqueta— y el
   .crm-fld-acciones de dentro, que es un flex, estira el botón con ella. Medido
   en el navegador: 58px de alto frente a los 37px de los botones de la fila de
   abajo. Alineando por el final, el botón queda a la altura del recuadro. */
.crm-grid-busca {
    grid-template-columns: minmax(0, 260px) auto;
    align-items: end;
}

@media (max-width: 767px) {
    .crm-grid-busca {
        grid-template-columns: 1fr;
    }
}

/* Los datos de una incidencia: tres recuadros cortos a la izquierda y las
   observaciones a la derecha, ocupando las tres filas de alto.

   Antes era un .crm-grid a secas, y ahí se juntaban los dos problemas que esa
   rejilla tiene cuando el contenido no es homogéneo: con "auto-fit, minmax(210px)"
   a 1280px salen CINCO pistas y sólo hay tres campos, y como las observaciones
   llevaban .crm-fld-wide —que abarca la fila entera— ninguna pista quedaba vacía
   del todo y auto-fit no colapsaba ninguna. Resultado medido: dos columnas de
   215px muertas, 430px de hueco, y un área de texto de 1.000 caracteres metida en
   una tira de 62px de alto.

   Aquí las columnas son dos y fijas, así que no hay pista que sobre, y el área de
   texto se lleva el alto de las tres filas: 191px medidos frente a los 62px de
   antes, con el mismo bloque creciendo sólo 52px. Los 340px de la izquierda son
   lo que necesita el nombre de un cliente sin cortarse; lo que sobre se lo queda
   el texto.

   Las filas van declaradas y no implícitas a propósito: el "grid-row: 1 / -1" de
   .crm-fld-alto cuenta líneas del grid EXPLÍCITO, y sin grid-template-rows la
   línea -1 es la 1 —el área de texto no abarcaría nada y quedaría del alto de un
   recuadro—. Medido en el navegador, no deducido. */
.crm-grid-datos {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    grid-template-rows: repeat(3, auto);
    align-items: start;
}

.crm-grid-datos > .crm-fld {
    grid-column: 1;
}

/* El área de texto de las observaciones, a la altura de los tres recuadros. */
.crm-grid-datos > .crm-fld-alto {
    grid-column: 2;
    grid-row: 1 / -1;
    /* Contra el align-items: start de la rejilla: los tres de la izquierda no
       deben estirarse —serían recuadros de 34px en una celda de 58px— pero ésta
       sí, que es de lo que va. */
    align-self: stretch;
}

/* .crm-fld es una columna flex con el rótulo arriba; el "flex: 1" es lo que hace
   que el área de texto se coma todo el alto que le sobra a la celda. El
   min-height es el mismo que .crm-fld-wide, como suelo para el móvil, donde la
   celda ya no abarca tres filas. */
.crm-grid-datos > .crm-fld-alto textarea.form-control {
    flex: 1 1 auto;
    min-height: 62px;
    resize: vertical;
}

/* En estrecho, todo a una columna y en el orden del documento: las observaciones
   caen al final, debajo de los tres recuadros. Hay que deshacer también las filas
   y la colocación, o el área de texto seguiría intentando abarcar tres filas que
   ya no existen. */
@media (max-width: 767px) {
    .crm-grid-datos {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .crm-grid-datos > .crm-fld,
    .crm-grid-datos > .crm-fld-alto {
        grid-column: 1;
        grid-row: auto;
    }
}

/* Los .crm-fld son <label>, y Bootstrap deja a toda etiqueta 5px de margen
   inferior. Esta celda es un <div>, así que hay que igualarlo a mano o los
   botones se alinean 5px por debajo de los recuadros. Mismo caso que
   .crm-fld-check (apartado 12). */
.crm-fld-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 5px;
}

/* De 1200px para abajo los dos desplegables se quedan sin sitio: los botones
   bajan a una línea propia, pegados al borde derecho de la tarjeta —debajo de
   Precio total, que es el último campo que se rellena antes de pulsar. */
@media (max-width: 1199px) {
    .crm-grid-linea {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 96px 124px;
    }

    .crm-grid-linea .crm-fld-acciones {
        grid-column: 1 / -1;
        justify-content: flex-end;
        margin-bottom: 0;
    }
}

@media (max-width: 767px) {
    .crm-grid-linea {
        grid-template-columns: 1fr;
    }
}

.crm-fld {
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* .label-forms y .form-control ya traen su propio aspecto (apartados 4 y 5);
       aquí sólo se colocan. El margen suelto de la etiqueta sobra dentro de una
       columna flex con gap. */
}

.crm-fld .label-forms {
    margin-bottom: 0;
}

/* Casilla dentro de la rejilla de campos ("Mismos datos para el envío", junto al
   IBAN). No lleva rótulo encima como los demás campos, así que se alinea abajo,
   con la fila de los recuadros y no con la de los rótulos: si no, quedaría
   flotando a media altura de la celda de al lado.
   Los 34px son el alto de .form-control en Bootstrap 3 —la casilla queda
   centrada sobre la banda del recuadro vecino. */
.crm-fld-check {
    display: flex;
    align-items: center;
    align-self: end;
    min-height: 34px;
    /* Los .crm-fld son elementos <label>, y Bootstrap deja a toda etiqueta 5px de
       margen inferior; como lo llevan todos por igual, ahí no se nota. Esta celda
       es un <div> —un <label> dentro del <label> que genera el propio CheckBox
       rompería el clic sobre el rótulo—, así que ese margen hay que igualarlo a
       mano: sin él la casilla se alinea 5px por debajo de los recuadros vecinos.
       Medido en el navegador. */
    margin-bottom: 5px;
}

/* Un asp:CheckBox envuelve la casilla y su rótulo en un <span> en cuanto lleva
   ToolTip, CssClass o cualquier atributo, y los saca sueltos si no lleva nada:
   la celda puede tener un hijo o dos según lo que se le ponga al control desde
   el .aspx. Declarando el span también como flex, la casilla y su texto se
   centran entre sí igual en los dos casos.
   Por lo mismo la separación va en el margen del rótulo y no en un "gap" de la
   celda: un gap no separa nada si los dos elementos viajan dentro del span. */
.crm-fld-check > span {
    display: flex;
    align-items: center;
}

/* Bootstrap pone las etiquetas en negrita y con margen inferior, que es lo que
   quiere un rótulo de campo y no el texto de una casilla: aquí es una frase
   normal, y el margen la descentraría respecto a la propia casilla. */
.crm-fld-check label {
    margin: 0 0 0 8px;
    font-weight: 400;
    cursor: pointer;
}

.crm-fld-check input[type="checkbox"] {
    flex: none;
    margin: 0;
}

/* Dos casillas que van juntas ("Recargo de equivalencia" y "Contrarrembolso" en
   la ficha de pedido). Sueltas eran dos celdas de .crm-grid, y como esa rejilla
   reparte columnas según quepan, el ancho de la ventana decidía si caían en la
   misma fila o en dos: quedaban desalineadas sin que nadie hubiera tocado nada.
   Aquí son UNA celda con las dos dentro, así que se alinean entre sí siempre.

   El span 2 es porque los dos rótulos juntos no caben en los 210px de una
   columna; align-self y min-height repiten lo de .crm-fld-check —la celda se
   pega abajo, a la altura de los recuadros vecinos y no a la de sus rótulos. */
.crm-fld-checks {
    grid-column: span 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-self: end;
    gap: 6px 28px;
    min-height: 34px;
    margin-bottom: 5px;
}

/* Las de dentro ya no colocan: de eso se encarga la celda que las agrupa. Sin
   esto sumarían un segundo margen inferior y bajarían 5px de más. */
.crm-fld-checks .crm-fld-check {
    align-self: auto;
    min-height: 0;
    margin-bottom: 0;
}

/* En una sola columna, el span 2 obligaría a la rejilla a mantener dos pistas de
   210px y la página se saldría de la pantalla. */
@media (max-width: 767px) {
    .crm-fld-checks {
        grid-column: auto;
    }
}

/* Celda de rejilla que es un campo MÁS su botón ("Pedido masivo" y "Cargar
   pedido masivo"). El botón estaba debajo de la rejilla entera, lo que en dos
   columnas lo dejaba al pie de la izquierda mientras su caja estaba arriba a la
   derecha. Aquí viaja con ella. */
.crm-fld-conaccion {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* El campo de dentro es un <label>, y Bootstrap le deja 5px de margen inferior
   que aquí se sumarían al gap. */
.crm-fld-conaccion .crm-fld {
    margin-bottom: 0;
}

/* A la derecha, bajo el borde de la caja: es el final del recorrido del campo
   —se pega el texto y se pulsa—, y a la izquierda se confundiría con el pie de
   la columna de al lado. */
.crm-fld-accion {
    display: flex;
    justify-content: flex-end;
}

/* Ocupa la fila entera: para Observaciones */
.crm-fld-wide {
    grid-column: 1 / -1;
}

.crm-fld-wide textarea.form-control {
    min-height: 62px;
}

/* Barra de acciones al pie del formulario. Sustituye a los seis ImageButton de
   la barra superior: los iconos eran seis dibujos casi idénticos con la etiqueta
   debajo, y no se distinguía Grabar de Grabar y salir sin leerla. */
.crm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 22px;
}

/* Acción secundaria: el mismo botón, sin el relleno dorado */
.btn-ghost {
    background-color: var(--crm-surface);
    border: 1px solid var(--crm-border);
    color: var(--crm-brand-dark);
}

.btn-ghost:hover,
.btn-ghost:focus {
    background-color: var(--crm-brand-soft);
    border-color: var(--crm-brand);
    color: var(--crm-brand-dark);
}

/* Tarjeta que envuelve cada rejilla: mismo tratamiento que las tarjetas de
   indicador del panel. El overflow-x deja que una tabla ancha se desplace
   dentro de la tarjeta en vez de ensanchar la página entera. */
.crm-tablecard {
    margin-top: 0;
    background-color: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    box-shadow: var(--crm-shadow);
    overflow: hidden;
}

.crm-tablewrap {
    overflow-x: auto;
}

/* Cabecera de la tarjeta con las mismas cifras que su pie (FichaPedido.aspx).
   Un pedido de treinta líneas obliga a recorrer la tabla entera para ver cómo va
   quedando el total; repetido arriba se ve al llegar.

   Es sólo lectura, y por eso son etiquetas y no una segunda pareja de recuadros:
   ningún control de ASP.NET puede estar dos veces en la página, y txtTOTAL /
   txtTOTAL_A_PAGAR son columnas de trans_pedidos que el grabado busca por el
   nombre del control. Se enseñan aquí y se siguen escribiendo abajo.

   Sin fondo propio, al revés que el pie: los dos con la banda de marca dejarían
   la tabla emparedada entre dos franjas iguales y no se sabría cuál es la que se
   rellena. */
.crm-tablecard-resumen {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    gap: 4px 26px;
    padding: 11px 18px;
    border-bottom: 1px solid var(--crm-border);
}

.crm-resumen-dato {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

/* El rótulo, en la escala de .label-forms pero al lado de su cifra y no encima:
   son dos datos sueltos en una tira, no dos campos de un formulario. */
.crm-resumen-cap {
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--crm-label);
}

.crm-resumen-cifra {
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--crm-ink);
}

/* La misma tira, cerrando la tarjeta por abajo (BusquedaPedidos.aspx). Se repite
   arriba y abajo por lo mismo que en la ficha de pedido: la rejilla pagina de
   quince en quince y la suma tiene que estar donde se acabe de mirar, sin volver
   a subir.

   Ésta sí lleva la banda de marca, como el pie de totales de la ficha
   (.crm-tablecard-totales): es el borde de la tarjeta y cierra el listado. La de
   arriba no puede llevarla porque va pegada a .crm-bulkbar, que ya es de ese
   color, y las dos juntas se leerían como una sola barra. */
.crm-tablecard-resumen-pie {
    border-bottom: none;
    border-top: 1px solid var(--crm-border);
    background-color: var(--crm-brand-soft);
}

/* El total a pagar manda también aquí arriba, igual que en el pie */
.crm-resumen-cifra-final {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--crm-brand-dark);
}

/* Celda de acción de una rejilla: el borrado de líneas de la ficha de pedido.
   No es un dato, así que ni se estira ni se alinea como los importes.
   El !important es el de la regla 3 de la cabecera —el ItemStyle-Width del
   ButtonField sale como estilo inline y sin él no hay forma de ganarle. */
.table .crm-cell-accion {
    width: 44px !important;
    text-align: center;
    padding-left: 6px !important;
    padding-right: 6px !important;
}

/* El botón de dentro. Era Imagenes/ko.png, un aspa de 30×30 con su propio
   relleno que estiraba la fila por encima del alto del texto; el glifo de
   Glyphicons se pinta a la altura de la línea.

   Se cuelga del enlace de la celda y no de una clase propia a propósito: un
   ButtonField no deja poner clase al <a> más que por ControlStyle, y de eso no
   se puede depender sin verlo renderizado. La celda sí lleva su ItemStyle.

   Gris hasta que se apunta: una columna entera de iconos rojos es lo primero
   que se ve de la tabla, y lo que se viene a leer son los artículos. */
.table .crm-cell-accion a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--crm-radius-sm);
    color: var(--crm-muted);
    line-height: 1;
    transition: background-color .15s ease, color .15s ease;
}

.table .crm-cell-accion a:hover,
.table .crm-cell-accion a:focus {
    background-color: var(--crm-critical-bg);
    color: var(--crm-critical);
    text-decoration: none;
}

/* El candado que sustituye a la papelera cuando la fila no se puede borrar (una
   incidencia cuya devolucion ya se descontó en un pedido).

   Sin esto es un <span> pelado que hereda el color del texto de la tabla, y
   quedaba MAS oscuro que la propia papelera —que va en --crm-muted—: el icono
   apagado pesaba más que el que sí se puede pulsar, justo al revés de lo que
   tiene que comunicar. Medido en el navegador: rgb(42,36,25) contra
   rgb(110,103,89).

   Se le baja un paso más que a la papelera, y el cursor de ayuda avisa de que
   tiene algo que contar (el ToolTip explica por qué no se puede borrar). */
.table .crm-cell-accion .glyphicon-lock {
    color: var(--crm-muted);
    opacity: .55;
    cursor: help;
}

/* La tabla ya está dentro de la tarjeta: su propio borde sobraría */
.crm-tablecard .table,
.crm-tablecard .table-bordered {
    border: none;
}

/* Pie de totales de la tarjeta (FichaPedido.aspx)
   ---------------------------------------------------------------------------
   La base imponible y el total a pagar estaban en su propio apartado "Totales",
   debajo de la tabla pero fuera de ella. Aquí van dentro de la tarjeta que los
   suma, alineados a la derecha, que es donde se busca una suma.

   Siguen siendo asp:TextBox y no texto a propósito: txtTOTAL y txtTOTAL_A_PAGAR
   son columnas de trans_pedidos, y LlenarControles/GrabarDatos
   (App_Code/CRMPage.cs) localizan los controles por el prefijo "txt" + nombre de
   columna. Convertirlos en etiquetas los sacaría del grabado. Lo que cambia es
   dónde se pintan y cómo, no qué son.

   El justify-content: flex-end deja los totales a la derecha; con la tabla
   estrecha el pie no se estira, se queda pegado a su borde. */
.crm-tablecard-totales {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 12px 26px;
    padding: 12px 18px;
    background-color: var(--crm-brand-soft);
    border-top: 1px solid var(--crm-border);
}

/* Cada total es rótulo encima y recuadro debajo, como un campo del formulario,
   pero estrecho: son cifras de seis u ocho caracteres y un recuadro a todo lo
   ancho las dejaría flotando en un hueco vacío. */
.crm-tablecard-totales .crm-fld {
    flex: none;
    width: 148px;
    margin-bottom: 0;
}

/* El rótulo del total repite la escala de .label-forms, pero alineado a la
   derecha para que caiga sobre su cifra y no sobre el hueco de la izquierda. */
.crm-tablecard-totales .label-forms {
    text-align: right;
}

/* Cifras a la derecha y con tabular-nums: dos importes uno debajo del otro sólo
   se comparan de un vistazo si sus dígitos ocupan lo mismo. */
.crm-tablecard-totales .form-control {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* El total a pagar es la cifra que se busca al llegar al pie: se separa del
   resto por tamaño y por el tinta de marca, no sólo por la negrita. Va
   deshabilitado (lo calcula el código), así que hereda el fondo apagado de
   .form-control[disabled]; el color se recupera aquí. */
.crm-tablecard-totales .crm-total-final .form-control {
    height: 40px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--crm-brand-dark);
}

/* Importes a la derecha; referencias en un tono más callado que el dato.
   Van calificadas con .table por especificidad, no por gusto: sin el .table
   delante pierden contra las reglas del apartado 7 —".table th" fija el texto
   a la izquierda y ".table > tbody > tr > td" fija el color—, y ni el importe
   se alineaba ni la referencia se apagaba. Medido en el navegador. */
.table .crm-num {
    text-align: right;
}

.table .crm-ref {
    color: var(--crm-muted);
}

/* El importe es el dato que se busca en la fila: en negrita se localiza sin
   leer la tabla entera. Va aparte de .crm-num porque alinear a la derecha y
   destacar son cosas distintas: una columna de cantidades futura querrá lo
   primero sin lo segundo. */
.table .crm-amount {
    font-weight: 700;
}

/* Columna de identificador que abre la ficha (Pedido, Incidencia). El dorado
   de enlace solo no basta para leerse como pulsable dentro de una rejilla, así
   que se subraya siempre en vez de solo al pasar por encima. El :not(.btn)
   evita pisar cualquier botón que caiga en la misma celda. */
.table .crm-linkcell a:not(.btn) {
    font-weight: 700;
    text-decoration: underline;
}

.table .crm-linkcell a:not(.btn):hover,
.table .crm-linkcell a:not(.btn):focus {
    color: var(--crm-brand-dark);
}

/* Estado dentro de la rejilla
   ---------------------------------------------------------------------------
   El estado del pedido era una palabra más entre las demás celdas. Como
   píldora va donde se busca y se distingue de un vistazo. Los colores salen de
   la escala de estados del apartado 1, aparte del dorado de marca a propósito:
   un estado no debe confundirse nunca con la identidad.

   El texto lo compone el código (FichaContacto.aspx.cs): la píldora sólo pinta. */
.crm-pill {
    display: inline-block;
    padding: 3px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 620;
    letter-spacing: .01em;
    white-space: nowrap;
}

.crm-pill-critical {
    background-color: var(--crm-critical-bg);
    border-color: var(--crm-critical-bd);
    color: var(--crm-critical);
}

.crm-pill-warn {
    background-color: var(--crm-warn-bg);
    border-color: #EFDCB4;
    color: var(--crm-warn);
}

.crm-pill-info {
    background-color: #EDF3FB;
    border-color: #C7DAF0;
    color: #1F5FA9;
}

/* En tránsito: "Enviado". Separado del verde de abajo, que ahora significa
   terminado —entregado, pagado, finalizado—. Ver la nota de --crm-transit. */
.crm-pill-transit {
    background-color: var(--crm-transit-bg);
    border-color: var(--crm-transit-bd);
    color: var(--crm-transit);
}

.crm-pill-ok {
    background-color: var(--crm-ok-bg);
    border-color: #C2E2CE;
    color: var(--crm-ok);
}

/* Cancelado / Anulado. Tenía el gris de .crm-pill-neutral, el mismo que
   "Cerrado", y en la rejilla los dos estados se leían igual de un vistazo.
   Un pedido cancelado no es un pedido cerrado: uno se anuló y el otro se
   completó, así que va con color propio. */
.crm-pill-void {
    background-color: var(--crm-void-bg);
    border-color: var(--crm-void-bd);
    color: var(--crm-void);
}

/* Estados que no son ninguno de los anteriores (Cerrado, y cualquiera que se
   dé de alta en m_estado_pedido a partir de ahora). Se ven como estado, pero
   sin reclamar atención que no les corresponde. */
.crm-pill-neutral {
    background-color: var(--crm-brand-soft);
    border-color: var(--crm-border);
    color: var(--crm-muted);
}


/* ---------------------------------------------------------------------------
   13. Tarjeta de filtros (las dos búsquedas y "Añadir artículo")
   ---------------------------------------------------------------------------
   Las dos búsquedas repartían los filtros a mano en filas de "col-lg-2" y
   colocaban el botón "Buscar" con un "margin-top: 25px" suelto para que
   quedase a la altura de los recuadros. Ese 25 es el alto del rótulo medido a
   ojo: cada vez que se añade un filtro hay que recolocar la fila entera.

   Aquí los campos van en .crm-grid —que se reparte solo— y el botón baja a un
   pie propio, donde no tiene que alinearse con nada.

   El armazón repite los valores de .crm-tablecard en lugar de heredarlos: son
   dos piezas distintas (una envuelve un formulario, la otra una tabla) y
   encadenar las dos clases en el marcado obligaría a recordar que la tarjeta
   de filtros "es" una tarjeta de tabla, que no lo es.
   -------------------------------------------------------------------------- */
.crm-filtros {
    background-color: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    box-shadow: var(--crm-shadow);
    overflow: hidden;
}

.crm-filtros-cuerpo {
    padding: 17px 18px;
}

/* Pie de la tarjeta: la acción principal a la izquierda, y lo que se separe con
   .crm-sp se va al borde derecho. El fondo apagado lo despega del cuerpo sin
   necesidad de una línea más. */
.crm-filtros-pie {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    padding: 12px 18px;
    background-color: var(--crm-brand-soft);
    border-top: 1px solid var(--crm-border);
}

/* Empuja al borde derecho lo que venga detrás. Es un <span> vacío en el marcado
   y no un margin-left en el propio botón porque así el mismo botón sirve para
   los dos lados de la barra. */
.crm-sp {
    margin-left: auto;
}


/* ---------------------------------------------------------------------------
   14. Barra de acciones sobre la selección (BusquedaPedidos.aspx)
   ---------------------------------------------------------------------------
   El cambio de estado en masa estaba en la fila de filtros, con un desplegable
   rotulado "Estado pedido" idéntico al del filtro y a cuatro columnas de
   distancia: uno buscaba y el otro modificaba los pedidos marcados.

   La barra baja hasta la tabla y se pega a ella por arriba —sin borde inferior
   ni esquinas de abajo— para que se lea como parte de la rejilla: lo que hay
   aquí actúa sobre lo que está marcado ahí. La tarjeta de la tabla lleva
   entonces .crm-tablecard-unida, que le quita las esquinas de arriba.
   -------------------------------------------------------------------------- */
.crm-bulkbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    padding: 12px 18px;
    background-color: var(--crm-brand-soft);
    border: 1px solid var(--crm-border);
    border-bottom: none;
    border-radius: var(--crm-radius) var(--crm-radius) 0 0;
}

/* "3 pedidos seleccionados". Lo escribe el código al pintar la rejilla y lo
   recuenta el navegador al marcar y desmarcar (Scripts/crm-theme.js). */
.crm-bulkbar-cuenta {
    font-size: 12.5px;
    font-weight: 650;
    color: var(--crm-brand-dark);
    /* Los rótulos del proyecto son <label>, y Bootstrap les deja 5px abajo:
       dentro de una barra centrada eso los sube. */
    margin-bottom: 0;
}

/* Rótulo de un control que no lleva etiqueta encima porque va en línea con él:
   "Cambiar estado a [PENDIENTE SALIR] [Aplicar]". Mismos valores que
   .label-forms, sin el margen inferior, que aquí descentraría el texto. */
.crm-inline-lab {
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--crm-label);
    margin: 0 3px 0 0;
}

/* El desplegable de la barra es más bajo que un campo de formulario: aquí
   acompaña a botones pequeños, no a otros recuadros. El "width: auto" gana al
   Width="95%" que algunos controles traen del .aspx. */
.crm-bulkbar .form-control {
    display: inline-block;
    width: auto;
    max-width: 200px;
    height: 30px;
    padding: 4px 9px;
    font-size: 12.5px;
}

.crm-tablecard-unida {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Celda de selección de la rejilla de pedidos. Llevaba también la lupa que
   abría la ficha —las separaban nueve &nbsp; seguidos—, y ahora que el enlace
   es el número del pedido se queda sólo con la casilla, centrada. */
.crm-selcell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Un control deshabilitado tiene que verse deshabilitado: las acciones de la
   barra salen apagadas mientras no haya ningún pedido marcado. Bootstrap 3 sólo
   cubre ".btn.disabled" y el atributo en <a>, no el "disabled" que ASP.NET pone
   en un <input type="submit">. */
.crm-bulkbar .btn[disabled],
.crm-bulkbar .form-control[disabled] {
    opacity: .5;
    cursor: not-allowed;
}


/* ---------------------------------------------------------------------------
   15. Leyenda de color de fila (BusquedaPedidos.aspx)
   ---------------------------------------------------------------------------
   Las filas de la búsqueda de pedidos se tiñen de rojo o de ámbar según los
   días que lleve el impago (.crm-row-critical y .crm-row-warn, apartado 7), y
   en pantalla no había nada que dijera qué significaba cada color: el
   criterio vivía sólo en BusquedaPedidos.aspx.cs.

   Las muestras repiten el tinte de la fila y su barra de acento con el mismo
   inset del apartado 7, para que lo que se ve en la leyenda sea literalmente
   lo que se ve en la rejilla.
   -------------------------------------------------------------------------- */
.crm-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    padding: 10px 2px 0;
    font-size: 12px;
    color: var(--crm-muted);
}

.crm-leyenda span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.crm-leyenda i {
    flex: none;
    width: 22px;
    height: 12px;
    border: 1px solid var(--crm-border);
    border-radius: 3px;
}

.crm-leyenda i.crm-leyenda-critica {
    background-color: var(--crm-critical-bg);
    box-shadow: inset 3px 0 0 var(--crm-critical);
}

.crm-leyenda i.crm-leyenda-aviso {
    background-color: var(--crm-warn-bg);
    box-shadow: inset 3px 0 0 var(--crm-warn);
}


/* ---------------------------------------------------------------------------
   16. Grupo de acciones con rótulo (FichaPedido.aspx)
   ---------------------------------------------------------------------------
   Los cinco documentos del pedido —factura, factura sin IVA, factura Word,
   albarán, albarán Word— eran cinco ImageButton con EL MISMO dibujo
   (Encargo.png) y el rótulo debajo, y entre ellos estaba el botón que finaliza
   el pedido. Aquí van juntos, bajo un rótulo que dice de qué es el grupo, y en
   una segunda fila separada de la barra de acciones principal.
   -------------------------------------------------------------------------- */
.crm-actions-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 14px;
}

.crm-actions-cap {
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--crm-label);
    margin: 0 3px 0 0;
}


/* ---------------------------------------------------------------------------
   17. Pantalla de entrada (Login.aspx)
   ---------------------------------------------------------------------------
   Sustituye a css/signin.css, una plantilla ajena que no usa ninguna otra
   página. La tarjeta caía muy abajo (un "padding-top: 5%" del body más un
   "margin-top: 100px" de la propia tarjeta) y el logo salía recortado en
   círculo con un border-radius del 50 % sobre una imagen rectangular.

   Login.aspx no tiene barra fija ni .content-wrapper, así que aquí no
   interviene Scripts/crm-theme.js: el centrado es del propio CSS.
   -------------------------------------------------------------------------- */
.crm-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.crm-login {
    display: grid;
    /* El formulario se lleva la parte ancha: es donde se trabaja. El panel de
       marca acompaña. */
    grid-template-columns: 42% 58%;
    width: 100%;
    max-width: 940px;
    min-height: 430px;
    background-color: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    box-shadow: var(--crm-shadow);
    overflow: hidden;
}

/* Panel de marca. El degradado va del oliva de marca al dorado oscuro: los dos
   tonos son de la paleta, no hay color nuevo. */
.crm-login-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    padding: 34px 32px;
    background-image: linear-gradient(160deg, #5D5125 0%, #7A6733 58%, #93762F 100%);
    color: var(--crm-brand-soft);
}

/* La marca es la misma pieza de la barra compacta (apartado 3.b), aquí sobre
   fondo oscuro: el cuadro pasa a un blanco translúcido con su propio filo,
   porque el dorado macizo sobre el oliva no se despegaba. */
.crm-login-panel .crm-brandmark,
.crm-login-panel .crm-brandmark:hover,
.crm-login-panel .crm-brandmark:focus {
    font-size: 17px;
    color: #FFFFFF;
}

.crm-login-panel .crm-brandmark b {
    background-color: rgba(255, 255, 255, .16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
}

.crm-login-panel h1 {
    font-family: var(--crm-font);
    font-size: 22px;
    font-weight: 620;
    letter-spacing: -.015em;
    line-height: 1.28;
    margin: 0 0 8px;
    /* Corta el titular en dos líneas por su sitio, sin un <br /> en el marcado */
    max-width: 15ch;
}

.crm-login-panel p {
    margin: 0;
    font-size: 13.5px;
    color: rgba(251, 249, 246, .78);
    max-width: 30ch;
}

.crm-login-panel .crm-login-pie {
    font-size: 11.5px;
    color: rgba(251, 249, 246, .6);
}

.crm-login-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
    padding: 38px 44px;
}

.crm-login-form h1 {
    font-family: var(--crm-font);
    font-size: 19px;
    font-weight: 620;
    color: var(--crm-brand-dark);
    margin: 0;
}

.crm-login-form .crm-login-sub {
    font-size: 13.5px;
    color: var(--crm-muted);
    /* Sube hasta su titular: los 15px de hueco de la columna separan bloques,
       y estas dos líneas son un solo bloque. */
    margin: -11px 0 0;
}

/* El logo, a su tamaño, sin recortar en círculo */
.crm-login-form .crm-login-logo {
    max-width: 150px;
    height: auto;
    margin-bottom: 2px;
}

/* La casilla de "recordar usuario" reutiliza .crm-fld-check (apartado 12), que
   está pensada para una celda de .crm-grid: allí se alinea abajo, con la fila de
   los recuadros. Aquí el contenedor es una columna flex, así que su eje
   transversal es el horizontal y ese "align-self: end" empujaría la casilla
   contra el borde derecho. */
.crm-login-form .crm-fld-check {
    align-self: stretch;
    min-height: 0;
    margin-bottom: 0;
}

/* Botón de entrar: más alto que un botón de barra porque es la única acción de
   la pantalla. No se usa .btn-lg de Bootstrap porque el ".btn" del apartado 6 le
   gana el relleno —misma especificidad, y crm-theme.css se carga después—, así
   que la clase estaría en el marcado sin hacer nada. */
.crm-login-form .btn-block {
    padding: 11px 16px;
    font-size: 15px;
}

/* Aviso de error. Sustituye a los dos .alert-danger de Bootstrap, que traen su
   propio rojo, y se coloca por encima del botón: es donde se está mirando al
   pulsar. */
.crm-alerta {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 13px;
    background-color: var(--crm-critical-bg);
    border: 1px solid var(--crm-critical-bd);
    border-radius: var(--crm-radius-sm);
    font-size: 13px;
    color: var(--crm-critical);
}

.crm-alerta .glyphicon {
    top: 2px;
}

/* Variante del aviso para algo que hay que atender pero que no es un error: la
   devolución pendiente de la ficha de pedido. El rojo de .crm-alerta es para lo
   que ha ido mal —las dos del login—, y aquí no ha ido nada mal: hay un dinero
   del cliente esperando a descontarse.

   El amarillo se pinta con la misma pareja de tokens que el realce de fila del
   apartado 7 (fondo apagado + barra de 3px a la izquierda con el tono fuerte) en
   lugar de con un borde de color: no hay --crm-warn-bd, y el borde de 1px que
   trae .crm-alerta se deja transparente en vez de quitarlo para que la caja no
   cambie de tamaño respecto a la roja.

   align-items pasa a center porque esta variante lleva un botón: con el
   flex-start de .crm-alerta el botón quedaría pegado al borde de arriba. */
.crm-alerta-warn {
    align-items: center;
    background-color: var(--crm-warn-bg);
    border-color: transparent;
    box-shadow: inset 3px 0 0 var(--crm-warn);
    color: var(--crm-warn);
}

/* El texto se come el ancho que sobra y empuja el botón al extremo derecho. Sin
   esto los tres hijos se agrupan a la izquierda y el botón queda en medio de la
   nada. */
.crm-alerta-texto {
    flex: 1 1 auto;
}

/* El botón no se estira ni se encoge con el texto: .crm-alerta es un flex, y sin
   esto un aviso largo —tres incidencias y un importe de cuatro cifras— le comería
   el ancho hasta partirle el rótulo en dos líneas. Medido a 375px: con flex:none
   se queda en sus 148px y el que crece es el aviso. */
.crm-alerta .btn {
    flex: none;
}

@media (max-width: 767px) {
    .crm-login-page {
        padding: 0;
        align-items: stretch;
    }

    .crm-login {
        grid-template-columns: 1fr;
        max-width: none;
        min-height: 100vh;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    /* En una pantalla estrecha el panel se queda en una tira con la marca: el
       titular y el pie empujarían el formulario fuera de la vista. */
    .crm-login-panel {
        padding: 18px 22px;
    }

    .crm-login-panel > :not(.crm-brandmark) {
        display: none;
    }

    .crm-login-form {
        padding: 28px 22px;
    }
}


/* ---------------------------------------------------------------------------
   18. Rejilla sin resultados
   ---------------------------------------------------------------------------
   Las dos búsquedas sacaban el aviso de "sin resultados" en rojo
   (EmptyDataRowStyle ForeColor="Red"). Una búsqueda que no encuentra nada no
   es un error: es una respuesta. Se queda como texto del cuerpo de la tarjeta.
   -------------------------------------------------------------------------- */
.crm-empty td {
    padding: 22px 18px !important;
    color: var(--crm-muted) !important;
    text-align: center;
}


/* ---------------------------------------------------------------------------
   19. Selector de fecha
   -------------------------------------------------------------------------- */
.bootstrap-datetimepicker-widget {
    font-family: var(--crm-font);
    border-radius: var(--crm-radius);
    box-shadow: var(--crm-shadow);
}

.bootstrap-datetimepicker-widget td.day.active,
.bootstrap-datetimepicker-widget td.hour.active,
.bootstrap-datetimepicker-widget td.minute.active {
    background-color: var(--crm-brand);
    color: #fff;
    text-shadow: none;
}

.bootstrap-datetimepicker-widget td.today:before {
    border-bottom-color: var(--crm-brand);
}


/* ---------------------------------------------------------------------------
   20. Barra de acciones fija (FichaPedido.aspx)
   ---------------------------------------------------------------------------
   Las ocho acciones del pedido —finalizar, incidencia, documentación y los cinco
   documentos— vivían al final del formulario. En una ficha con las líneas del
   pedido en medio eso son varias pantallas de scroll para llegar a "Finalizar
   pedido", y hay que volver a subir para seguir trabajando. Aquí se quedan
   pegadas al borde inferior de la ventana: se ven desde el primer momento y no
   se pierden al recorrer la ficha.

   Es la contrapartida de .crm-topbar, que hace lo mismo por arriba, y comparte
   con ella el reparto del trabajo: el CSS fija la barra, y el alto real que hay
   que dejar libre para que el contenido no quede debajo lo mide
   Scripts/crm-theme.js, porque depende de cuántas filas ocupe la barra al
   envolver.

   Por qué fija y no dentro del flujo con position: sticky: la barra tiene que
   flotar sobre la tabla de líneas, que es lo que se desplaza; un sticky dentro
   de .content-wrapper se detendría al llegar al final del contenedor, que es
   justo donde deja de hacer falta.

   El z-index queda por debajo del backdrop de Bootstrap (1040) y de sus modales
   (1050) a propósito: al abrir el aviso de "grabado correctamente" la barra
   tiene que quedar detrás del velo, como el resto de la página.
   -------------------------------------------------------------------------- */
/* Hueco de respaldo, en el contenedor de la página que lleva la barra. Lo afina
   Scripts/crm-theme.js al alto real; esto es lo que se ve si el script no llega
   a cargarse, y evita que el último apartado quede tapado. 96px es el alto de la
   barra con los botones en dos filas, que es como sale en un portátil. */
.crm-con-actionbar {
    padding-bottom: 96px;
}

.crm-actionbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1020;
    background-color: var(--crm-surface);
    border-top: 1px solid var(--crm-border);
    /* Sombra hacia arriba: separa la barra del contenido que pasa por debajo */
    box-shadow: 0 -2px 10px rgba(42, 36, 25, .07);
}

/* Mismo padding lateral que .crm-topbar-inner, para que las dos barras alineen
   su contenido con los mismos márgenes. */
.crm-actionbar-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px 18px;
    padding: 11px 22px;
}

/* Los dos grupos que ya existían —la barra de acciones y el grupo de documentos—
   entran aquí tal cual, pero sin el margen superior que los separaba del
   formulario: dentro de la barra ese aire lo pone el padding. */
.crm-actionbar .crm-actions,
.crm-actionbar .crm-actions-group {
    margin-top: 0;
}

/* Raya de separación entre las acciones sobre el pedido y los documentos. Sin
   ella son ocho botones seguidos y los dos grupos se leen como uno solo.
   Desaparece cuando la barra envuelve y el grupo cae a la línea de abajo: ahí ya
   los separa el propio salto.

   El margin-left auto se come todo el hueco libre de la barra, así que la raya y
   lo que va detrás —el grupo de documentos— se van al extremo derecho: lo que se
   hace con el pedido a un lado y lo que se imprime de él al otro. Va aquí y no
   en .crm-actions-group a propósito: cuando la barra envuelve, esta raya está
   oculta (regla de abajo) y con ella se va el empuje, de modo que el grupo cae
   alineado a la izquierda en su propia línea en vez de quedarse colgando a la
   derecha. */
.crm-actionbar-sep {
    align-self: stretch;
    width: 1px;
    min-height: 26px;
    margin-left: auto;
    background-color: var(--crm-border);
}

@media (max-width: 991px) {
    .crm-actionbar-sep {
        display: none;
    }
}

/* En papel la barra no separa nada: no hay ventana que la fije, y flotando sobre
   la última página taparía las líneas del pedido. */
@media print {
    .crm-actionbar {
        display: none;
    }
}


/* ---------------------------------------------------------------------------
   21. Respeto por las preferencias del usuario
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}