/*
 * Estilos propios sobre Bootstrap 5.3.
 *
 * Organizado en: tokens -> tipografia -> layout -> componentes -> tablas -> viz.
 *
 * Los colores viven en variables CSS declaradas dos veces (claro y oscuro). El modo
 * oscuro NO es una inversion automatica: los tonos de marca y del grafico son pasos
 * distintos, elegidos y medidos contra la superficie oscura.
 */

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
    /* Marca. Contraste 4.78:1 sobre blanco: alcanza incluso para texto. */
    --marca: #0E7C9E;
    --marca-fuerte: #0a6d8c;
    --marca-suave: #e6f2f6;

    /* Grafico. Una sola serie, asi que un solo tono: el mes que se esta mirando en
       pleno y el resto atenuado. Los dos pasos superan 3:1 contra su superficie
       (4.78:1 y 3.41:1 sobre blanco): un tono mas suave se veia lindo pero las once
       barras de contexto costaban de ver. */
    --viz-serie: #0E7C9E;
    --viz-serie-suave: #3f95b3;
    --viz-grilla: #e9ecef;
    --viz-eje: #ced4da;

    /* Estados. Fijos: nunca se usan como color de serie. */
    --estado-ok: #0ca30c;
    --estado-atencion: #b8860b;
    --estado-error: #d03b3b;

    /* Etapas del embudo. Progresion de frio a caliente: gris para el que recien
       entra, el tono de marca creciendo a medida que avanza, verde al cerrar. NO son
       siete colores distintos: siete colores arbitrarios no dicen nada y obligan a
       memorizarlos. Este degrade se lee de un vistazo -- cuanto mas saturada la
       columna, mas cerca esta la venta. */
    --etapa-contacto: #94a3b8;
    --etapa-seguimiento: #7fb0c4;
    --etapa-interes: #4e97b4;
    --etapa-cita: #0E7C9E;
    --etapa-presupuesto: #0a6d8c;
    --etapa-concretado: #0ca30c;
    --etapa-perdido: #b9bcc0;

    /* Bootstrap toma el primario de aca, sin recompilar nada. */
    --bs-primary: var(--marca);
    --bs-primary-rgb: 14, 124, 158;
    --bs-link-color-rgb: 14, 124, 158;
    --bs-link-hover-color-rgb: 10, 109, 140;

    --radio-card: .625rem;

    /* Ancho del menu lateral en escritorio. Fijo y no un porcentaje: ver el bloque
       "Layout" mas abajo. */
    --ancho-menu: 16rem;
}

[data-bs-theme="dark"] {
    /* Un paso mas claro del mismo tono: 3.84:1 sobre la superficie oscura, dentro
       de la banda de luminosidad. Aclarar el color claro no alcanzaba. */
    --marca: #1595bb;
    --marca-fuerte: #2aa7cc;
    --marca-suave: #10323d;

    /* 4.44:1 y 3.40:1 sobre la superficie oscura de Bootstrap (#212529). */
    --viz-serie: #1595bb;
    --viz-serie-suave: #20809c;
    --viz-grilla: #343a40;
    --viz-eje: #495057;

    --estado-ok: #2ec27e;
    --estado-atencion: #e5a50a;
    --estado-error: #e66767;

    /* Misma progresion, corrida hacia arriba en luminosidad: sobre la superficie
       oscura los tonos claros del modo dia se apagan y las siete columnas se
       vuelven indistinguibles entre si. */
    --etapa-contacto: #64748b;
    --etapa-seguimiento: #4a7f93;
    --etapa-interes: #1a8bb0;
    --etapa-cita: #1595bb;
    --etapa-presupuesto: #2aa7cc;
    --etapa-concretado: #2ec27e;
    --etapa-perdido: #545a61;

    --bs-primary-rgb: 21, 149, 187;
    --bs-link-color-rgb: 42, 167, 204;
    --bs-link-hover-color-rgb: 76, 191, 224;
}

/* El primario de Bootstrap se aplica por componente: las utilidades .bg-primary y
   .btn-primary no leen --bs-primary directamente. */
.btn-primary {
    --bs-btn-bg: var(--marca);
    --bs-btn-border-color: var(--marca);
    --bs-btn-hover-bg: var(--marca-fuerte);
    --bs-btn-hover-border-color: var(--marca-fuerte);
    --bs-btn-active-bg: var(--marca-fuerte);
    --bs-btn-active-border-color: var(--marca-fuerte);
    --bs-btn-disabled-bg: var(--marca);
    --bs-btn-disabled-border-color: var(--marca);
}

.btn-outline-primary {
    --bs-btn-color: var(--marca);
    --bs-btn-border-color: var(--marca);
    --bs-btn-hover-bg: var(--marca);
    --bs-btn-hover-border-color: var(--marca);
    --bs-btn-active-bg: var(--marca);
    --bs-btn-active-border-color: var(--marca);
}

.bg-primary { background-color: var(--marca) !important; }
.text-primary { color: var(--marca) !important; }

.form-control:focus,
.form-select:focus {
    border-color: var(--marca);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2);
}

/* Foco visible para teclado. Bootstrap lo resuelve por componente y deja huecos
   (enlaces del menu, celdas ordenables, paginador). */
:focus-visible {
    outline: 2px solid var(--marca);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* ==========================================================================
   Tipografia
   ========================================================================== */

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Los numeros en columna tienen que alinearse verticalmente. Solo en columnas: en
   un numero grande suelto, `tabular-nums` lo hace ver flojo. */
.num,
td.text-end,
th.text-end,
.tabla-datos td:last-child {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Layout: navbar y menu lateral
   ========================================================================== */

.navbar-marca {
    background-color: #0b2d38;
}

[data-bs-theme="dark"] .navbar-marca {
    background-color: #08222b;
}

.logo {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
}

.logo-grande {
    width: 3.5rem;
    height: 3.5rem;
}

/* El breakpoint tiene que coincidir con el del template (`offcanvas-lg` = 992px).
   Antes decia 768px, asi que entre 768 y 991 el offcanvas oculto quedaba sticky.

   El ancho es FIJO y no `col-lg-2`. `col-lg-2` es 16.67% del viewport: 240px en un
   portatil de 1440 y 427px en un monitor de 2560. Un menu de navegacion no tiene por
   que crecer con la pantalla -- su ancho lo define el texto mas largo, no el monitor.
   Con la columna porcentual, en 2560 quedaba una franja vacia al lado del arbol, con
   el `border-end` a 427px marcandola.

   `min-width: 0` en el contenido: sin eso una tabla ancha estira la columna en vez de
   scrollear adentro de `.table-responsive` (el minimo automatico de un item flex es
   el ancho de su contenido). */
@media (min-width: 992px) {
    .menu-lateral {
        flex: 0 0 var(--ancho-menu);
        width: var(--ancho-menu);
        position: sticky;
        top: 3.5rem;
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }

    .contenido {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    /* A partir de lg, Bootstrap le pone `display: flex` al `.offcanvas-body`. Eso
       convierte al `<ul>` del arbol en un item flex EN FILA, que se encoge al ancho de
       su contenido: el menu entero media lo que el texto mas largo ("Administracion de
       Django", 196px) sin importar el ancho de la columna. Volviendolo `block`, el
       `<ul>` ocupa la columna. */
    .menu-lateral .offcanvas-body {
        display: block;
    }
}

/* Y una vez que el `<ul>` ocupa la columna, hay que decirle a los items que lo ocupen
   a el: `.nav` de Bootstrap trae `flex-wrap: wrap`, y un contenedor flex EN COLUMNA
   con wrap dimensiona la linea al item mas ancho, asi que los `<li>` tampoco se
   estiran solos.

   Va con `width` y no con `flex-wrap: nowrap` porque en columna el nowrap deja que los
   items se compriman cuando el arbol es mas alto que la pantalla, en vez de scrollear.

   Las dos reglas hacen falta: sin esta el pill activo y el hover siguen cortando lejos
   del borde derecho del menu. */
.menu-lateral .nav-item {
    width: 100%;
}

.menu-lateral .nav-link {
    color: var(--bs-body-color);
    border-radius: .375rem;
    padding: .5rem .75rem;
    font-size: .9375rem;
}

.menu-lateral .nav-link:hover {
    background-color: var(--bs-secondary-bg);
}

.menu-lateral .nav-link.active {
    background-color: var(--marca);
    /* Blanco fijo, no una variable: el fondo es siempre el teal en los dos temas. */
    color: #fff;
    font-weight: 500;
}

/* La linea guia del arbol. Antes los hijos se distinguian solo por `padding-left`, y
   con un grupo largo abierto (Ventas son diez items) el sangrado solo no alcanza para
   ver donde empieza y donde termina la rama.

   Va como `border-left` del `<ul>` y no como un `::before` posicionado: un pseudo
   absoluto se pinta DESPUES de los fondos de los links (que no estan posicionados) y
   la linea quedaria cruzando por encima del pill activo. Con el borde en el `ul`, los
   pills arrancan despues del padding y nunca lo tapan. */
.menu-lateral .submenu {
    margin-left: 1.0625rem;
    padding-left: .5rem;
    border-left: 1px solid var(--bs-border-color);
}

.menu-lateral .submenu .nav-link {
    /* El sangrado ahora lo dan el margen y el padding del `ul` de arriba: el texto
       sigue arrancando donde arrancaba (~2rem del borde del menu). */
    padding-left: .5rem;
    font-size: .9063rem;
}

.menu-lateral .grupo > .indicador {
    transition: transform .15s ease-in-out;
}

.menu-lateral .grupo[aria-expanded="true"] > .indicador {
    transform: rotate(90deg);
}

/* ==========================================================================
   Login

   Pantalla partida: la marca a la izquierda, el formulario a la derecha.

   El panel de marca no es decoracion: es la unica pantalla que se ve sin sesion, y
   una caja centrada sobre gris no dice de que sistema es. Va SOLO en escritorio --
   en un telefono ocuparia la pantalla entera y dejaria el formulario abajo del
   pliegue, asi que ahi lo reemplaza una cabecera de una linea.

   Los colores del panel son literales y no `var(--marca)`: es una superficie oscura
   en los dos temas (igual que la navbar), y con la variable el degrade cambiaba de
   tono al pasar a oscuro sin que nadie lo hubiera decidido.
   ========================================================================== */

.login {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 992px) {
    .login {
        /* El panel de marca un poco mas ancho que el del formulario: el formulario
           tiene ancho maximo propio y de todas formas no crece. */
        grid-template-columns: 1.15fr 1fr;
    }
}

.login-marca {
    display: none;
    position: relative;
    overflow: hidden;
    flex-direction: column;
    /* Centrado, no pegado arriba: el formulario de al lado tambien esta centrado, y
       dos bloques con distinta linea de base se leen como un error de armado. */
    justify-content: center;
    padding: 3.5rem;
    color: #fff;
    background: linear-gradient(155deg, #08222b 0%, #0b2d38 45%, #0E7C9E 100%);
}

@media (min-width: 992px) {
    .login-marca { display: flex; }
}

/* Marca de agua: el mismo logo, gigante y casi transparente, sangrando por la
   esquina. Da profundidad sin sumar un asset ni una imagen de stock. */
.login-marca .login-agua {
    position: absolute;
    /* Sangra por la esquina a proposito: el centro del hexagono queda FUERA del
       panel, asi se lee como una textura recortada y no como un segundo logo
       compitiendo con el del encabezado. */
    right: -11rem;
    bottom: -13rem;
    width: 34rem;
    height: 34rem;
    opacity: .06;
    pointer-events: none;
}

.login-marca-cuerpo {
    position: relative;   /* por encima de la marca de agua */
    max-width: 30rem;
}

.login-marca-titulo {
    font-size: 2.25rem;
    font-weight: 600;
    letter-spacing: -.02em;
    margin: 1.25rem 0 .5rem;
}

.login-marca-bajada {
    font-size: 1.0625rem;
    line-height: 1.5;
    /* Blanco al 75%: el texto secundario tiene que ceder ante el titulo, y
       `--bs-secondary-color` sobre esta superficie fija no aplica. */
    color: rgba(255, 255, 255, .75);
    margin: 0 0 2rem;
}

.login-puntos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    font-size: .9375rem;
    color: rgba(255, 255, 255, .85);
}

.login-puntos li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.login-puntos .icono {
    margin-top: .18rem;
    color: #7fd3ea;
}

/* Absoluto y no al final del flex: si contara para el centrado, el bloque de la
   marca quedaria corrido hacia arriba. */
.login-pie {
    position: absolute;
    left: 3.5rem;
    bottom: 3.5rem;
    margin: 0;
    font-size: .8125rem;
    color: rgba(255, 255, 255, .55);
}

/* --- Panel del formulario --------------------------------------------------- */

.login-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.25rem;
    background-color: var(--bs-body-bg);
}

.login-caja {
    width: 100%;
    /* 23rem: mas ancho que esto y los dos campos se leen como una planilla; el ojo
       tiene que poder ir del final de un campo al principio del otro. */
    max-width: 23rem;
}

.login-marca-chica {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--marca);
    margin-bottom: 2rem;
}

@media (min-width: 992px) {
    /* En escritorio la marca ya esta al lado, repetirla seria ruido. */
    .login-marca-chica { display: none; }
}

.login-encabezado {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 .25rem;
}

.login-ayuda {
    color: var(--bs-secondary-color);
    font-size: .9375rem;
    margin: 0 0 1.5rem;
}

.login-error {
    padding: .6rem .75rem;
    font-size: .875rem;
}

.login-pie-chico {
    margin: 2rem 0 0;
    text-align: center;
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

@media (min-width: 992px) {
    /* En escritorio el pie ya esta en el panel de marca. */
    .login-pie-chico { display: none; }
}

/* --- Campo de contraseña con el ojo ----------------------------------------- */

.campo-clave {
    position: relative;
}

/* El texto se corta antes del boton: sin esto una clave larga pasa por abajo. */
.campo-clave .form-control {
    padding-right: 3rem;
}

.campo-clave .ojo {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 3rem;
    display: grid;
    place-items: center;
    border: 0;
    background: none;
    color: var(--bs-secondary-color);
    border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
}

.campo-clave .ojo:hover {
    color: var(--bs-body-color);
}

.aviso-mayusculas {
    margin: .5rem 0 0;
    font-size: .8125rem;
    color: var(--estado-atencion);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
    --bs-card-border-color: var(--bs-border-color-translucent);
    border-radius: var(--radio-card);
}

.card-header {
    background-color: transparent;
    font-weight: 600;
}

/* ==========================================================================
   KPIs
   ========================================================================== */

.kpi .etiqueta {
    font-size: .875rem;
    color: var(--bs-secondary-color);
}

.kpi .valor {
    font-weight: 600;
    line-height: 1.15;
    font-size: 1.5rem;
}

/* La figura hero: un solo numero por pantalla, el que la pantalla viene a responder.
   Figuras proporcionales a proposito (ver la regla de `tabular-nums` mas arriba). */
.kpi-hero .valor {
    font-size: 3rem;
    letter-spacing: -.02em;
}

.kpi-hero {
    background: linear-gradient(135deg, var(--marca-suave), transparent 70%);
}

.kpi .delta {
    font-size: .8125rem;
    font-weight: 500;
}

.kpi .delta.sube { color: var(--estado-ok); }
.kpi .delta.baja { color: var(--estado-error); }

/* El icono acompana a la etiqueta: un color de estado nunca carga el significado
   solo. */
.kpi .icono {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.kpi.estado-ok .valor,
.kpi.estado-ok .icono { color: var(--estado-ok); }

.kpi.estado-atencion .valor,
.kpi.estado-atencion .icono { color: var(--estado-atencion); }

.kpi.estado-error .valor,
.kpi.estado-error .icono { color: var(--estado-error); }

/* ==========================================================================
   Grafico (SVG generado en el servidor)
   ========================================================================== */

.grafico .barra {
    fill: var(--viz-serie-suave);
    transition: fill .1s ease-in-out;
}

/* El mes que se esta mirando va en el tono pleno; el resto, un paso mas suave. */
.grafico .barra.actual {
    fill: var(--viz-serie);
}

.grafico .barra:hover {
    fill: var(--marca-fuerte);
}

.grafico .barra.vacia {
    fill: var(--bs-secondary-bg);
}

/* Hairline solida y recesiva. Nunca punteada: el punteado se lee como
   "proyeccion" o "umbral" cuando es solo una grilla. */
.grafico .grilla {
    stroke: var(--viz-grilla);
    stroke-width: 1;
}

.grafico .eje {
    stroke: var(--viz-eje);
    stroke-width: 1;
}

.grafico .rotulo,
.grafico .tick {
    fill: var(--bs-secondary-color);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.grafico .rotulo { text-anchor: middle; }
.grafico .tick { text-anchor: end; }

/* ==========================================================================
   Tablas
   ========================================================================== */

.tabla-datos {
    margin-bottom: 0;
}

.tabla-datos > thead th {
    font-size: .8125rem;
    text-transform: none;
    color: var(--bs-secondary-color);
    font-weight: 600;
    white-space: nowrap;
}

/* Reserva de alto para que el pie no salte entre "cargando" y los datos. */
[data-tabla-contenedor] tbody {
    min-height: 8rem;
}

.tabla-datos .fila-estado td {
    padding-block: 3rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

/* Encabezado ordenable */
.tabla-datos th[data-orden] {
    cursor: pointer;
    user-select: none;
}

.tabla-datos th[data-orden]:hover {
    color: var(--bs-body-color);
}

.tabla-datos th[data-orden] .flecha {
    font-size: .75rem;
}

/* Pista de que la columna se puede ordenar. Sin esto la flecha solo aparece DESPUES
   de ordenar, asi que nadie descubre que la funcion existe. Tenue para no competir
   con los datos, y visible al pasar el mouse. */
.tabla-datos th[data-orden] .flecha::before {
    content: "⇅";
    opacity: .3;
}

.tabla-datos th[data-orden]:hover .flecha::before {
    opacity: .7;
}

/* Ya ordenada: manda la flecha real que pone el JS. */
.tabla-datos th[aria-sort] .flecha::before {
    content: none;
}

/* Los clientes sin resumen del mes van en su propio tbody: son otra cosa que las
   filas paginadas, y mezclarlos hacia que el contador del pie no cerrara. */
.tabla-datos .separador td {
    background-color: var(--bs-tertiary-bg);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    padding-block: .4rem;
}

.tabla-datos tr.pendiente td {
    background-color: var(--bs-tertiary-bg);
}

/* --- En mobile cada fila se convierte en una card ------------------------- */
/*
   Se resuelve con CSS y no con una rama en el JS: asi funciona al redimensionar sin
   volver a consultar el servidor, y el renderer de filas sigue siendo uno solo. El
   unico requisito es que cada <td> traiga `data-etiqueta`.
*/
@media (max-width: 991.98px) {
    .tabla-datos,
    .tabla-datos > tbody,
    .tabla-datos > tbody > tr,
    .tabla-datos > tbody > tr > td {
        display: block;
        width: auto;
    }

    .tabla-datos > thead {
        display: none;
    }

    .tabla-datos > tbody > tr {
        border: 1px solid var(--bs-border-color);
        border-radius: var(--radio-card);
        padding: .75rem 1rem;
        margin-bottom: .75rem;
        background-color: var(--bs-body-bg);
    }

    .tabla-datos > tbody > tr > td {
        border: 0;
        padding: .3rem 0;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        text-align: right;
    }

    .tabla-datos > tbody > tr > td::before {
        content: attr(data-etiqueta);
        color: var(--bs-secondary-color);
        font-weight: 500;
        text-align: left;
        flex: 0 0 auto;
    }

    /* La primera celda hace de titulo de la card. */
    .tabla-datos > tbody > tr > td:first-child {
        font-weight: 600;
        font-size: 1.0625rem;
        border-bottom: 1px solid var(--bs-border-color);
        margin-bottom: .35rem;
        padding-bottom: .5rem;
    }

    .tabla-datos > tbody > tr > td:first-child::before {
        display: none;
    }

    /* Una celda sin etiqueta (la de acciones) ocupa todo el ancho. */
    .tabla-datos > tbody > tr > td:not([data-etiqueta]) {
        justify-content: flex-end;
        padding-top: .5rem;
        flex-wrap: wrap;
        gap: .4rem;
    }

    /* Los estados y el separador no son registros: no se convierten en card. */
    .tabla-datos .fila-estado,
    .tabla-datos .separador {
        border: 0;
        padding: 0;
        margin: 0;
    }

    .tabla-datos .fila-estado td,
    .tabla-datos .separador td {
        display: block;
        text-align: center;
    }

    .tabla-datos .fila-estado td::before,
    .tabla-datos .separador td::before {
        display: none;
    }

    /* Ya no hay scroll horizontal que contener. */
    .table-responsive {
        overflow-x: visible;
    }
}

/* ==========================================================================
   Paginador
   ========================================================================== */

.paginador {
    font-size: .875rem;
}

.paginador .page-link {
    color: var(--marca);
}

.paginador .page-item.active .page-link {
    background-color: var(--marca);
    border-color: var(--marca);
    color: #fff;
}

.paginador .por-pagina {
    width: auto;
    display: inline-block;
}

/* ==========================================================================
   Formularios
   ========================================================================== */

.item-extra {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radio-card);
    padding: 1rem;
    margin-bottom: .75rem;
    background-color: var(--bs-tertiary-bg);
}

.item-extra:last-of-type {
    margin-bottom: 1rem;
}

/* Fila del formset de listas de precios. Mismo tratamiento visual que `.item-extra`
   pero con clase propia: `formset.js` usa la clase para saber que borrar y que
   renumerar, asi que dos formsets en la misma pagina no pueden compartirla. */
.lista-precio {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radio-card);
    padding: 1rem;
    margin-bottom: .75rem;
    background-color: var(--bs-tertiary-bg);
}

.lista-precio:last-of-type {
    margin-bottom: 1rem;
}

.item-presupuesto {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radio-card);
    padding: 1rem;
    margin-bottom: .75rem;
    background-color: var(--bs-tertiary-bg);
}

.item-presupuesto:last-of-type {
    margin-bottom: 1rem;
}

.cargo-programado {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radio-card);
    padding: 1rem;
    margin-bottom: .75rem;
    background-color: var(--bs-tertiary-bg);
}

.cargo-programado:last-of-type {
    margin-bottom: 1rem;
}

/* ==========================================================================
   Estados vacios
   ========================================================================== */

.vacio {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--bs-secondary-color);
}

.vacio .icono {
    width: 2.5rem;
    height: 2.5rem;
    opacity: .35;
    margin-bottom: .75rem;
}

/* ==========================================================================
   Iconos y acciones de tabla

   Los iconos son un sprite SVG inline (partials/_iconos.html). Se dibujan con
   TRAZO y no con relleno, y el grosor se define una sola vez acá: así ninguno se
   ve más pesado que otro y todos heredan el color del botón que los contiene.
   ========================================================================== */

.icono {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.145em;
    flex: 0 0 auto;
}

.btn-icono {
    --bs-btn-padding-x: .5rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    line-height: 1;
}

/* En escritorio el nombre lo da el tooltip; el rótulo solo ocupa lugar. Se oculta
   con `clip` y no con `display:none` para que siga estando en el DOM: es lo que
   hace que un buscador de texto del navegador (Ctrl+F) encuentre "Editar". */
.btn-icono .rotulo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* En un teléfono no hay hover, así que el tooltip nunca aparece y el ícono quedaría
   sin explicación: ahí el rótulo se muestra al lado.

   Este `@media` va PEGADO a la regla que revierte y no en el bloque responsive del
   final del archivo: las dos reglas tienen la misma especificidad, así que gana la
   última: escrita allá, la de escritorio la pisaba y el rótulo no aparecía nunca. */
@media (max-width: 991.98px) {
    .btn-icono .rotulo {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
    }
}

/* ==========================================================================
   Timeline de la oportunidad

   Una línea vertical con puntos: es la forma en que se lee una historia. Las
   entradas automáticas van más apagadas para que las que cargó una persona —que son
   las que tienen contenido— destaquen sobre el ruido del sistema.
   ========================================================================== */

.timeline {
    position: relative;
    margin: 0;
    padding-left: 1.25rem;
}

.timeline::before {
    content: "";
    position: absolute;
    left: .3rem;
    top: .35rem;
    bottom: .35rem;
    width: 2px;
    background-color: var(--bs-border-color);
}

.timeline-item {
    position: relative;
    padding: 0 0 1rem .75rem;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-punto {
    position: absolute;
    left: -1.03rem;
    top: .3rem;
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    background-color: var(--marca);
    border: 2px solid var(--bs-body-bg);
}

.timeline-item.es-automatica .timeline-punto {
    background-color: var(--bs-secondary-color);
}

.timeline-titulo {
    font-size: .875rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.timeline-item.es-automatica .timeline-titulo {
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.timeline-nota {
    font-size: .875rem;
    margin: .15rem 0 0;
    line-height: 1.4;
}

.timeline-meta {
    font-size: .75rem;
    color: var(--bs-secondary-color);
    margin: .15rem 0 0;
}

/* ==========================================================================
   Tira de KPI

   Una sola pieza con divisores, en vez de N cards con sombra: arriba de un tablero,
   cuatro cajas elevadas compiten visualmente con las tarjetas, que son lo que hay
   que mirar. Acá el peso lo tiene el número y nada más.
   ========================================================================== */

.kpi-tira {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radio-card);
    overflow: hidden;
}

.kpi {
    flex: 1 1 9rem;
    padding: .7rem .9rem;
    border-left: 1px solid var(--bs-border-color);
}

.kpi:first-child {
    border-left: 0;
}

.kpi-etiqueta {
    font-size: .75rem;
    color: var(--bs-secondary-color);
    margin: 0 0 .15rem;
    line-height: 1.2;
}

.kpi-valor {
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    margin: 0;
}

.kpi-detalle {
    display: block;
    font-size: .75rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
}

/* ==========================================================================
   Kanban de prospectos

   Scroll horizontal con snap: en escritorio entran varias columnas y se corre el
   resto; en mobile se ve una columna por vez y el snap la deja encuadrada. Se
   resuelve por CSS y no por ramas en JS, igual que el responsive de las tablas.
   ========================================================================== */

.kanban {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    padding-bottom: .75rem;
    scroll-snap-type: x proximity;
    /* `proximity` y no `mandatory`: con siete columnas angostas, `mandatory` pelea
       con el scroll libre y engancha la vista cada vez que se arrastra una tarjeta
       cerca del borde. */
}

.kanban-columna {
    /* 15rem: son SIETE columnas. Con 17rem en un portatil de 1440px entran cuatro y
       las tres ultimas quedan fuera de cuadro sin que nada sugiera que existen. */
    flex: 0 0 15rem;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background-color: var(--bs-tertiary-bg);
    border-radius: var(--radio-card);
    /* Sin borde: siete rectangulos delineados uno al lado del otro se leen como una
       reja. La separacion la da el fondo, que ya contrasta con el de la pagina. */
    padding: 0 .5rem .5rem;
    /* El color de la etapa lo pone el JS en `--etapa`; este es el fallback. */
    --etapa: var(--bs-secondary-color);
}

/* Feedback del drop con `outline` y no `border`: un borde cambiaria el tamano de
   la columna al pasar por encima y las tarjetas saltarian de lugar. */
.kanban-columna.encima {
    outline: 2px dashed var(--etapa);
    outline-offset: -2px;
    background-color: var(--bs-secondary-bg);
}

/* --- Encabezado de columna --- */

.kanban-titulo {
    position: sticky;
    top: 0;
    z-index: 2;
    /* Pegajoso: con ocho tarjetas en una columna, al scrollear se pierde de vista en
       que etapa se esta mirando. */
    background-color: var(--bs-tertiary-bg);
    padding: .6rem .25rem .5rem;
    margin: 0 0 .5rem;
    border-bottom: 2px solid var(--etapa);
    display: flex;
    align-items: baseline;
    gap: .4rem;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.kanban-titulo .kanban-cuenta {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    color: var(--bs-secondary-color);
    font-weight: 500;
}

/* Cuanta plata hay parada en la etapa. Va debajo del titulo y no como badge: es un
   numero que se compara entre columnas, y para eso tiene que estar alineado. */
.kanban-monto {
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    color: var(--bs-secondary-color);
    padding: 0 .25rem .5rem;
    margin: -.35rem 0 .35rem;
}

.kanban-candado {
    font-size: .75rem;
    opacity: .55;
}

.kanban-lista {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 0;
    min-height: 2.5rem;
    flex: 1;
}

/* --- Tarjeta --- */

.kanban-tarjeta {
    position: relative;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    /* La franja de color de la etapa: es lo que hace que una tarjeta arrastrada a
       otra columna se note al instante, incluso a media pantalla de distancia. */
    border-left: 3px solid var(--etapa);
    border-radius: .5rem;
    padding: .6rem .7rem;
    cursor: grab;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    transition: box-shadow .12s ease, transform .12s ease;
}

.kanban-tarjeta:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .09);
}

.kanban-tarjeta:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.kanban-tarjeta.arrastrando {
    opacity: .4;
    cursor: grabbing;
    transform: rotate(1.5deg);
}

/* Encabezado de la tarjeta: avatar + nombre. */
.kanban-cabecera {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: .35rem;
}

/* Las iniciales. Le dan a la tarjeta un ancla visual: en una columna de ocho, el ojo
   encuentra antes un bloque de color que una linea de texto. */
.kanban-avatar {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    background-color: var(--etapa);
}

.kanban-nombre {
    font-weight: 600;
    font-size: .875rem;
    line-height: 1.3;
    margin: 0;
    /* Dos lineas y despues elipsis: un nombre larguisimo no puede empujar el resto
       de la tarjeta fuera de la columna. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kanban-subtitulo {
    font-size: .75rem;
    color: var(--bs-secondary-color);
    line-height: 1.3;
    margin: 0;
}

/* Chips de contexto: que le interesa, de donde salio. */
.kanban-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: .4rem 0 .35rem;
}

.kanban-chip {
    font-size: .6875rem;
    line-height: 1.5;
    padding: 0 .4rem;
    border-radius: 1rem;
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kanban-chip.es-interes {
    background-color: var(--marca-suave);
    color: var(--marca-fuerte);
}

/* La plata de la tarjeta. Tabular para que las cifras se comparen en vertical. */
.kanban-plata {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    margin-bottom: .35rem;
}

.kanban-plata .monto {
    font-weight: 600;
}

.kanban-plata .probabilidad {
    font-size: .6875rem;
    color: var(--bs-secondary-color);
}

.kanban-dato {
    font-size: .75rem;
    color: var(--bs-secondary-color);
    line-height: 1.35;
    margin: 0;
}

/* Acciones: aparecen al pasar por encima, pero SIEMPRE visibles en foco y en
   pantallas tactiles (donde no hay hover y esconderlas las volveria inalcanzables). */
.kanban-acciones {
    display: flex;
    gap: .25rem;
    align-items: center;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--bs-border-color);
    opacity: .35;
    transition: opacity .12s ease;
}

.kanban-tarjeta:hover .kanban-acciones,
.kanban-tarjeta:focus-within .kanban-acciones {
    opacity: 1;
}

@media (hover: none) {
    .kanban-acciones { opacity: 1; }
}

/* Tarjeta sin actividad hace mucho. El aviso NO es solo el color: lleva su propia
   linea de texto ("Sin actividad hace N dias"), porque un borde amarillo no le dice
   nada a quien no distingue ese tono ni a quien nunca vio el tablero "normal". */
.kanban-tarjeta.es-viejo {
    background-color: var(--bs-warning-bg-subtle);
}

.kanban-viejo {
    font-size: .6875rem;
    color: var(--bs-warning-text-emphasis);
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: .25rem;
}

.kanban-vacia {
    padding: .75rem .5rem;
    font-size: .75rem;
    color: var(--bs-secondary-color);
    text-align: center;
    border: 1px dashed var(--bs-border-color);
    border-radius: .5rem;
}

/* Las columnas a las que no se llega arrastrando no invitan a hacerlo. */
.kanban-columna:not([data-acepta]) .kanban-tarjeta {
    cursor: default;
}

/* En mobile la columna ocupa casi todo el ancho: una columna por vez, con la
   siguiente asomando para que se note que hay mas. */
@media (max-width: 575.98px) {
    .kanban-columna { flex: 0 0 85%; }
}