/* =====================================================================
   CRM Xencal — estilos
   Todos los colores y medidas base están acá arriba, en variables.
   ===================================================================== */

:root {
    /* Paleta */
    --marino:          #0B2E5C;
    --azul:            #1B6DC1;
    --azul-hover:      #155AA1;
    --azul-suave:      #E8F1FB;
    --fondo:           #F5F7FA;
    --superficie:      #FFFFFF;
    --texto:           #1F2733;
    --texto-sec:       #5A6472;
    --borde:           #DDE1E8;

    /* Sobre fondo marino */
    --claro:           #FFFFFF;
    --claro-80:        rgba(255, 255, 255, .85);
    --claro-60:        rgba(255, 255, 255, .62);
    --claro-40:        rgba(255, 255, 255, .45);
    --claro-hover:     rgba(255, 255, 255, .08);
    --claro-linea:     rgba(255, 255, 255, .12);

    /* Mensajes */
    --error:           #9B2C22;
    --error-fondo:     #FDECEA;
    --error-borde:     #F3C5BF;
    --ok:              #1E6B37;
    --ok-fondo:        #E6F4EA;
    --ok-borde:        #BFE0C9;
    --peligro-hover:   #7E231B;

    /* Estados de consulta: texto / fondo */
    --estado-nueva:          #1B5FA8;  --estado-nueva-fondo:         #E3EEFB;
    --estado-contactada:     #93580E;  --estado-contactada-fondo:    #FCEFD8;
    --estado-presupuestada:  #5A3DAE;  --estado-presupuestada-fondo: #ECE7FB;
    --estado-concretada:     #1E7A3C;  --estado-concretada-fondo:    #E3F4E8;
    --estado-no_concretada:  #B3261E;  --estado-no_concretada-fondo: #FCE8E6;
    --estado-pendiente:      #93580E;  --estado-pendiente-fondo:     #FCEFD8;
    --estado-atendida:       #1E7A3C;  --estado-atendida-fondo:      #E3F4E8;
    --estado-descartada:     #5A6472;  --estado-descartada-fondo:    #EEF0F3;

    /* Consultas de más de 3 meses ("Antigua") */
    --antigua:               #8A93A0;  --antigua-fondo:              #EEF0F3;

    /* Tipos de consulta (punto de color) */
    --tipo-comercial:       #1B6DC1;
    --tipo-proveedor:       #6FA8DC;
    --tipo-empleo:          #2A9D8F;
    --tipo-prensa:          #C9507F;
    --tipo-administrativo:  #7B5CC4;
    --tipo-otro:            #8A6D3B;
    --tipo-sin_clasificar:  #A0A8B4;

    /* Canales con color propio */
    --canal-whatsapp:   #1FA855;
    --canal-instagram:  #D6336C;

    /* Fila sin asignar */
    --sin-asignar-fondo: #F4F8FD;

    /* Forma */
    --radio:           6px;
    --radio-chico:     4px;
    --sombra:          0 1px 2px rgba(11, 46, 92, .05);
    --sombra-flotante: 0 8px 24px rgba(11, 46, 92, .14);
    --foco:            0 0 0 3px rgba(27, 109, 193, .30);

    /* Tipografía */
    --fuente: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Medidas */
    --ancho-menu:           232px;
    --alto-barra:           60px;
    --alto-barra-mobile:    56px;
    --alto-barra-inferior:  64px;
    --alto-tactil:          44px;
}

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

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--fuente);
    font-size: 15px;
    line-height: 1.5;
    color: var(--texto);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }

a { color: var(--azul); }

[hidden] { display: none !important; }

.icono {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke-width: 1.75;
}

.resaltado { color: var(--azul); }

.bajada {
    color: var(--texto-sec);
    margin-top: 4px;
}

/* ---------------------------------------------------------------------
   Marca (logos PNG blanco y marino, proporción 1636 × 546)
   --------------------------------------------------------------------- */

.marca {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.marca-logo {
    display: block;
    width: auto;
    height: 40px;
}

/* ---------------------------------------------------------------------
   Menú lateral (escritorio)
   --------------------------------------------------------------------- */

.menu-lateral {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--ancho-menu);
    display: flex;
    flex-direction: column;
    background: var(--marino);
    color: var(--claro);
    overflow-y: auto;
    z-index: 20;
}

.menu-lateral > .marca {
    height: var(--alto-barra);
    flex-shrink: 0;
    padding: 0 24px;
    border-bottom: 1px solid var(--claro-linea);
}

.menu-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 12px 24px;
}

/* Lo que va al pie del menú (Ayuda) */
.menu-abajo { margin-top: auto; }

.menu-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--alto-tactil);
    padding: 8px 12px;
    border-radius: var(--radio);
    color: var(--claro-80);
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
}

a.menu-item:hover { background: var(--claro-hover); color: var(--claro); }

a.menu-item:focus-visible {
    outline: 2px solid var(--claro);
    outline-offset: -2px;
}

.menu-item.activo {
    background: var(--azul);
    color: var(--claro);
    font-weight: 600;
}

.menu-item.deshabilitado {
    color: var(--claro-40);
    cursor: default;
}

.menu-item-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

/* Pendientes de la Bandeja */
.menu-contador {
    margin-left: auto;
    min-width: 24px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--claro);
    color: var(--marino);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.menu-item.activo .menu-contador { color: var(--azul); }

.menu-item .pronto {
    font-size: 11px;
    font-weight: 500;
    color: var(--claro-40);
}

.menu-separador {
    border: 0;
    border-top: 1px solid var(--claro-linea);
    margin: 14px 8px;
}

.menu-titulo {
    margin: 0 0 6px;
    padding: 0 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--claro-60);
}

/* ---------------------------------------------------------------------
   Barra superior
   --------------------------------------------------------------------- */

.app-cuerpo { margin-left: var(--ancho-menu); }

.barra-superior {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--alto-barra);
    padding: 0 24px 0 28px;
    background: var(--marino);
    color: var(--claro);
}

.marca-mobile { display: none; }

.barra-titulo {
    font-size: 20px;
    font-weight: 700;
}

.buscador {
    position: relative;
    flex: 1;
    max-width: 420px;
    margin-left: auto;
}

.buscador .icono {
    position: absolute;
    left: 12px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    color: var(--claro-60);
    pointer-events: none;
}

.buscador input {
    width: 100%;
    height: 40px;
    padding: 0 12px 0 40px;
    border: 1px solid var(--claro-linea);
    border-radius: var(--radio);
    background: var(--claro-hover);
    color: var(--claro);
    font: inherit;
    font-size: 14px;
}

.buscador input::placeholder { color: var(--claro-60); }

.buscador input:focus {
    outline: none;
    border-color: var(--claro-60);
    background: rgba(255, 255, 255, .14);
}

.boton-icono {
    display: inline-grid;
    place-items: center;
    width: var(--alto-tactil);
    height: var(--alto-tactil);
    padding: 0;
    border: 0;
    border-radius: var(--radio);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.boton-icono:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }

.campana { cursor: default; }

/* Usuario en sesión */

.usuario-menu { position: relative; }

.usuario-boton {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--alto-tactil);
    padding: 4px 8px;
    border: 0;
    border-radius: var(--radio);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.usuario-boton:hover { background: var(--claro-hover); }
.usuario-boton:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }

.avatar {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--superficie);
    color: var(--azul);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}

.usuario-datos { line-height: 1.25; }
.usuario-datos strong { display: block; font-size: 14px; font-weight: 600; }
.usuario-datos small { display: block; font-size: 12.5px; color: var(--claro-60); }

.usuario-chevron { width: 18px; height: 18px; }

.desplegable {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 240px;
    padding: 6px;
    background: var(--superficie);
    color: var(--texto);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-flotante);
}

.desplegable-cabecera {
    padding: 8px 12px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--borde);
    line-height: 1.3;
}

.desplegable-cabecera strong { display: block; font-size: 14px; }
.desplegable-cabecera small { display: block; font-size: 12.5px; color: var(--texto-sec); word-break: break-all; }

.desplegable-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: var(--alto-tactil);
    padding: 0 12px;
    border: 0;
    border-radius: var(--radio-chico);
    background: none;
    color: var(--texto);
    font: inherit;
    font-size: 14.5px;
    cursor: pointer;
}

a.desplegable-item { text-decoration: none; }

.desplegable-item:hover,
.desplegable-item:focus-visible { background: var(--fondo); outline: none; }

/* ---------------------------------------------------------------------
   Contenido
   --------------------------------------------------------------------- */

.contenido {
    padding: 28px 32px 48px;
    max-width: 1440px;
}

.migas {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--texto-sec);
}

.migas .icono { width: 14px; height: 14px; }

.pagina-cabecera {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.pagina-titulo {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 24px;
}

.vacio {
    padding: 56px 24px;
    text-align: center;
    color: var(--texto-sec);
}

.vacio-icono {
    width: 40px;
    height: 40px;
    color: var(--azul);
    stroke-width: 1.5;
    margin-bottom: 12px;
}

.vacio-titulo {
    margin-bottom: 6px;
    font-size: 18px;
    font-weight: 600;
    color: var(--texto);
}

.vacio .boton { margin-top: 16px; }

/* ---------------------------------------------------------------------
   Botones y formularios
   --------------------------------------------------------------------- */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--alto-tactil);
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--radio);
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.boton:focus-visible { outline: none; box-shadow: var(--foco); }

.boton-primario { background: var(--azul); color: var(--claro); }
.boton-primario:hover { background: var(--azul-hover); }

.boton-bloque { width: 100%; }

.campo { margin-bottom: 18px; }

.campo label {
    display: block;
    margin-bottom: 6px;
    font-size: 13.5px;
    font-weight: 600;
}

.input {
    width: 100%;
    min-height: var(--alto-tactil);
    padding: 10px 12px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    color: var(--texto);
    font: inherit;
    font-size: 15px;
}

.input:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: var(--foco);
}

.alerta {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: var(--radio);
    font-size: 14px;
}

/* Botón dentro del aviso (ej. "Deshacer"), a la derecha */
.alerta { flex-wrap: wrap; }
.alerta > span { flex: 1; min-width: 180px; }
.alerta-accion { margin: -4px 0 -4px auto; }
.alerta-accion .boton { min-height: 34px; }

.alerta-error {
    background: var(--error-fondo);
    border: 1px solid var(--error-borde);
    color: var(--error);
}

.alerta-ok {
    background: var(--ok-fondo);
    border: 1px solid var(--ok-borde);
    color: var(--ok);
}

.boton-chico {
    min-height: 32px;
    padding: 0 12px;
    font-size: 13.5px;
}

.boton-secundario {
    background: var(--superficie);
    border-color: var(--borde);
    color: var(--azul);
}

.boton-secundario:hover { border-color: var(--azul); }

.boton.deshabilitado { opacity: .5; cursor: default; }
.boton.deshabilitado:hover { background: var(--azul); }

.solo-lector {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.solo-mobile { display: none; }

.texto-sec { color: var(--texto-sec); }

/* ---------------------------------------------------------------------
   Listado de consultas
   --------------------------------------------------------------------- */

.cabecera-acciones {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Contadores */

.contadores {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.contador {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.contador-numero {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}

.contador-titulo {
    margin-top: 6px;
    font-size: 14px;
    font-weight: 500;
}

.contador-detalle {
    font-size: 12.5px;
    color: var(--texto-sec);
}

.contador-icono {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--azul-suave);
    color: var(--azul);
}

.contador-icono-ok { background: var(--estado-concretada-fondo); color: var(--estado-concretada); }

/* Pestañas */

.pestanas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.pestana {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    color: var(--texto);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.pestana:hover { border-color: var(--azul); color: var(--azul); }

.pestana.activa {
    background: var(--azul);
    border-color: var(--azul);
    color: var(--claro);
    font-weight: 600;
}

.pestana:focus-visible { outline: none; box-shadow: var(--foco); }

/* Filtros */

.filtros {
    display: grid;
    /* La cantidad de selectores cambia según la vista: la pone la página en --filtros-selectores */
    grid-template-columns: minmax(220px, 2.5fr) repeat(var(--filtros-selectores, 5), minmax(0, 1fr)) auto;
    align-items: end;
    gap: 12px;
    margin-bottom: 16px;
}

.filtro { display: block; }

.filtro > span {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    color: var(--texto-sec);
}

.filtro .input {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 14px;
}

select.input {
    appearance: none;
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
}

.filtro-busqueda { position: relative; }

.filtro-busqueda .icono {
    position: absolute;
    left: 12px;
    bottom: 11px;
    width: 18px;
    height: 18px;
    color: var(--texto-sec);
    pointer-events: none;
}

.filtro-busqueda .input { padding-left: 38px; }

.filtros-acciones {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
}

.filtros-acciones .boton { min-height: 40px; }

/* "Ordenar por": solo en el celular; en escritorio se ordena con los títulos de la tabla */
.filtro-orden { display: none; }

.enlace-limpiar {
    font-size: 13.5px;
    white-space: nowrap;
}

/* Etiquetas */

.etiqueta-estado {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radio-chico);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.estado-nueva         { color: var(--estado-nueva);         background: var(--estado-nueva-fondo); }
.estado-contactada    { color: var(--estado-contactada);    background: var(--estado-contactada-fondo); }
.estado-presupuestada { color: var(--estado-presupuestada); background: var(--estado-presupuestada-fondo); }
.estado-concretada    { color: var(--estado-concretada);    background: var(--estado-concretada-fondo); }
.estado-no_concretada { color: var(--estado-no_concretada); background: var(--estado-no_concretada-fondo); }
.estado-pendiente     { color: var(--estado-pendiente);     background: var(--estado-pendiente-fondo); }
.estado-atendida      { color: var(--estado-atendida);      background: var(--estado-atendida-fondo); }
.estado-descartada    { color: var(--estado-descartada);    background: var(--estado-descartada-fondo); }

/* Cuándo entró: "hace 2 horas"; con más de 3 meses, en gris y con la marca "Antigua" */
.recepcion { white-space: nowrap; color: var(--texto); font-weight: 500; }
.recepcion.antigua { color: var(--antigua); font-weight: 400; }

/* En la tabla, "Antigua" va debajo de la fecha: la columna queda angosta */
.col-fecha .recepcion { display: block; }
.col-fecha .marca-antigua { margin: 2px 0 0; }

.marca-antigua {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: var(--radio-chico);
    background: var(--antigua-fondo);
    color: var(--antigua);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.tipo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    white-space: nowrap;
}

.tipo-punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tipo-sin_clasificar);
}

.tipo-comercial      .tipo-punto { background: var(--tipo-comercial); }
.tipo-proveedor      .tipo-punto { background: var(--tipo-proveedor); }
.tipo-empleo         .tipo-punto { background: var(--tipo-empleo); }
.tipo-prensa         .tipo-punto { background: var(--tipo-prensa); }
.tipo-administrativo .tipo-punto { background: var(--tipo-administrativo); }
.tipo-otro           .tipo-punto { background: var(--tipo-otro); }

.canal { display: inline-flex; color: var(--azul); }
.canal-whatsapp  { color: var(--canal-whatsapp); }
.canal-instagram { color: var(--canal-instagram); }

.sin-asignar-etiqueta {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radio-chico);
    background: var(--estado-descartada-fondo);
    color: var(--texto-sec);
    font-size: 12.5px;
    white-space: nowrap;
}

/* "Nª consulta" con las anteriores al pasar el mouse */

.repetida {
    position: relative;
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: var(--radio-chico);
    background: var(--azul-suave);
    color: var(--azul);
    font-size: 12px;
    font-weight: 600;
    cursor: help;
}

.repetida:focus-visible { outline: none; box-shadow: var(--foco); }

.repetida-panel {
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 15;
    min-width: 280px;
    padding: 10px 12px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-flotante);
    color: var(--texto);
    font-weight: 400;
    cursor: default;
}

.repetida:hover .repetida-panel,
.repetida:focus .repetida-panel,
.repetida.abierta .repetida-panel { display: block; }

.repetida-panel strong {
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
}

.repetida-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.repetida-panel li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    font-size: 12.5px;
    white-space: nowrap;
}

.repetida-panel li + li { border-top: 1px solid var(--borde); }

.repetida-panel .etiqueta-estado { font-size: 11.5px; padding: 1px 8px; }

.repetida-mas { color: var(--texto-sec); display: block !important; }

/* Tabla (escritorio) */

/* Sin overflow: así el globo de "Nª consulta" no queda cortado en las últimas filas */
.tabla-contenedor { padding: 0; }

.tabla-consultas {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.tabla-consultas th {
    padding: 12px 8px;
    background: var(--fondo);
    border-bottom: 1px solid var(--borde);
    color: var(--texto-sec);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

/* Títulos que ordenan */
.orden-titulo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.orden-titulo:hover { color: var(--azul); }
.orden-titulo:focus-visible { outline: none; box-shadow: var(--foco); border-radius: 2px; }
.orden-titulo.activo { color: var(--azul); }

.orden-flecha { width: 14px; height: 14px; stroke-width: 2.25; }
.orden-flecha-inactiva { opacity: 0; }
.orden-titulo:hover .orden-flecha-inactiva,
.orden-titulo:focus-visible .orden-flecha-inactiva { opacity: .6; }

.tabla-consultas td {
    padding: 12px 8px;
    border-bottom: 1px solid var(--borde);
    vertical-align: middle;
}

.tabla-consultas tbody tr:last-child td { border-bottom: 0; }

.fila-consulta { cursor: pointer; }
.fila-consulta:hover td { background: var(--fondo); }

.fila-consulta.sin-asignar td { background: var(--sin-asignar-fondo); }
.fila-consulta.sin-asignar:hover td { background: var(--azul-suave); }
.fila-consulta.sin-asignar td:first-child { box-shadow: inset 3px 0 0 var(--azul); }

.contacto-nombre {
    display: block;
    color: var(--texto);
    font-weight: 600;
    text-decoration: none;
}

.contacto-nombre:hover { color: var(--azul); }
.contacto-nombre:focus-visible { outline: none; box-shadow: var(--foco); border-radius: 2px; }

.contacto-empresa {
    display: block;
    color: var(--texto-sec);
    font-size: 13px;
}

.tabla-consultas th:first-child,
.tabla-consultas td:first-child { padding-left: 16px; }

.col-contacto { min-width: 150px; }
.col-asunto { min-width: 140px; max-width: 240px; }
.col-fecha { white-space: nowrap; color: var(--texto-sec); }

.col-acciones {
    text-align: right;
    white-space: nowrap;
}

.col-acciones .form-tomar,
.col-acciones .boton-mas { display: inline-flex; vertical-align: middle; }

.boton-mas {
    width: 36px;
    height: 36px;
    color: var(--texto-sec);
    cursor: default;
}

/* Paginación */

.paginacion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.paginacion-texto {
    color: var(--texto-sec);
    font-size: 13.5px;
}

.paginacion-botones {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pagina-boton {
    display: inline-grid;
    place-items: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    color: var(--texto);
    font-size: 14px;
    text-decoration: none;
}

.pagina-boton .icono { width: 18px; height: 18px; }
.pagina-boton:hover { border-color: var(--azul); color: var(--azul); }
.pagina-boton.activa { background: var(--azul); border-color: var(--azul); color: var(--claro); font-weight: 600; }

.pagina-puntos { padding: 0 4px; color: var(--texto-sec); }

.vacio-sugerencias {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Tarjetas: en mobile y en pantallas medianas, donde la tabla no entra */

.lista-tarjetas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.tarjeta-consulta {
    padding: 14px 16px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    cursor: pointer;
}

.tarjeta-consulta:hover { border-color: var(--azul); }

.tarjeta-consulta.sin-asignar {
    background: var(--sin-asignar-fondo);
    box-shadow: inset 3px 0 0 var(--azul), var(--sombra);
}

.tc-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.tc-cabecera .contacto-nombre { font-size: 15.5px; }

.tc-fecha {
    flex-shrink: 0;
    font-size: 12.5px;
    color: var(--texto-sec);
}

.tc-asunto {
    margin-top: 4px;
    font-size: 14px;
}

.tc-pie {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.tc-asignado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: 13px;
    color: var(--texto-sec);
}

.tc-asignado .icono { width: 16px; height: 16px; }

/* ---------------------------------------------------------------------
   Detalle de consulta
   --------------------------------------------------------------------- */

.volver {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.volver .icono { width: 18px; height: 18px; }
.volver:hover { text-decoration: underline; }

.detalle-cabecera { margin-bottom: 20px; }

.dc-contacto {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 15px;
}

.dc-contacto .repetida { margin-top: 0; }

.dc-asunto {
    margin-top: 4px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
}

.dc-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    font-size: 13.5px;
    color: var(--texto-sec);
}

.dc-meta .icono { width: 16px; height: 16px; }

/* Barra de avance: Nueva → Contactada → Presupuestada → Ganada/Perdida */

.progreso {
    display: flex;
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}

.progreso li {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.progreso li + li::before {
    content: '';
    position: absolute;
    top: 7px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--borde);
}

.progreso-punto {
    position: relative;
    z-index: 1;
    width: 16px;
    height: 16px;
    border: 2px solid var(--borde);
    border-radius: 50%;
    background: var(--superficie);
}

.progreso-texto {
    font-size: 13px;
    color: var(--texto-sec);
}

.progreso li.hecho::before,
.progreso li.actual::before { background: var(--azul); }

.progreso li.hecho .progreso-punto { background: var(--azul); border-color: var(--azul); }

.progreso li.actual .progreso-punto {
    border-color: var(--azul);
    box-shadow: inset 0 0 0 3px var(--superficie), inset 0 0 0 8px var(--azul);
}

.progreso li.actual .progreso-texto { color: var(--azul); font-weight: 600; }

.progreso li.concretada .progreso-punto  { border-color: var(--estado-concretada);  box-shadow: inset 0 0 0 3px var(--superficie), inset 0 0 0 8px var(--estado-concretada); }
.progreso li.concretada .progreso-texto  { color: var(--estado-concretada); }
.progreso li.no_concretada .progreso-punto { border-color: var(--estado-no_concretada); box-shadow: inset 0 0 0 3px var(--superficie), inset 0 0 0 8px var(--estado-no_concretada); }
.progreso li.no_concretada .progreso-texto { color: var(--estado-no_concretada); }

/* Escritorio: cada paso es un botón */

.progreso-paso {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 8px 6px;
    border: 0;
    border-radius: var(--radio);
    background: none;
    font: inherit;
    cursor: pointer;
}

.progreso-paso:hover:not(:disabled) .progreso-punto { border-color: var(--azul); }
.progreso-paso:hover:not(:disabled) .progreso-texto { color: var(--azul); text-decoration: underline; }
.progreso-paso:focus-visible { outline: none; box-shadow: var(--foco); }
.progreso-paso:disabled { cursor: default; }

.progreso-cierre {
    display: flex;
    gap: 6px;
}

.cierre-boton {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    color: var(--texto-sec);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.cierre-concretada:hover:not(:disabled)  { border-color: var(--estado-concretada);  color: var(--estado-concretada); }
.cierre-no_concretada:hover:not(:disabled) { border-color: var(--estado-no_concretada); color: var(--estado-no_concretada); }
.cierre-boton:focus-visible { outline: none; box-shadow: var(--foco); }

.cierre-boton.elegido { cursor: default; font-weight: 600; }
.cierre-concretada.elegido  { background: var(--estado-concretada-fondo);  border-color: var(--estado-concretada);  color: var(--estado-concretada); }
.cierre-no_concretada.elegido { background: var(--estado-no_concretada-fondo); border-color: var(--estado-no_concretada); color: var(--estado-no_concretada); }

/* Celular: barra solo informativa + botón "Cambiar estado" (se muestran en mobile) */
.progreso-mobile,
.boton-cambiar-estado { display: none; }

/* Columnas: izquierda ancha (mensaje y notas), derecha angosta (contacto, gestión, datos) */

.detalle {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(290px, 1fr);
    align-items: start;
    gap: 20px;
}

.detalle-principal,
.detalle-lateral {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.detalle-otras,
.historial { margin-top: 20px; }

.tarjeta-titulo {
    margin-bottom: 14px;
    font-size: 16px;
    font-weight: 700;
}

.mensaje {
    padding: 14px 16px;
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    font-size: 15px;
    line-height: 1.6;
    white-space: pre-line;          /* respeta los saltos de línea del mensaje original */
    overflow-wrap: anywhere;
}

/* "Producto: ..." arriba del mensaje, aparte del texto que escribió la persona */
.mensaje-producto {
    margin-bottom: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.mensaje-producto strong { font-weight: 600; }

/* Notas */

.nota-form { margin-bottom: 16px; }

.nota-form textarea {
    display: block;
    min-height: 84px;
    resize: vertical;
}

.nota-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

.nota-pie .ayuda { margin-top: 0; }

.notas-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nota {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--borde);
}

.nota-cuerpo { min-width: 0; flex: 1; }

.nota-cabecera {
    font-size: 13px;
    color: var(--texto-sec);
}

.nota-cabecera strong { color: var(--texto); font-weight: 600; }

.nota-texto {
    margin-top: 4px;
    font-size: 14.5px;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.nota-vacia {
    padding-top: 12px;
    border-top: 1px solid var(--borde);
    font-size: 14px;
}

.avatar-chico {
    width: 32px;
    height: 32px;
    background: var(--azul-suave);
    color: var(--azul);
    font-size: 11.5px;
}

/* Contacto */

.accesos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.acceso {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--alto-tactil);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    color: var(--azul);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.acceso .icono { width: 18px; height: 18px; }
.acceso:hover { border-color: var(--azul); }
.acceso-whatsapp { color: var(--canal-whatsapp); }
.acceso-whatsapp:hover { border-color: var(--canal-whatsapp); }

.boton-whatsapp { background: var(--canal-whatsapp); color: var(--claro); }

.contacto-datos {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13.5px;
    color: var(--texto-sec);
}

.contacto-datos li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    overflow-wrap: anywhere;
}

.contacto-datos .icono { width: 15px; height: 15px; }

.contacto-otras {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: var(--radio);
    background: var(--azul-suave);
    font-size: 13.5px;
    text-decoration: none;
}

.contacto-otras .icono { width: 16px; height: 16px; }

/* Gestión */

.gestion-tomar {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--borde);
}

.ayuda {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--texto-sec);
}

.gestion .campo { margin-bottom: 14px; }

/* Datos secundarios, compactos */

.datos {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    margin: 0;
    font-size: 13.5px;
}

.datos dt { color: var(--texto-sec); }
.datos dd { margin: 0; overflow-wrap: anywhere; }
.dd-linea { display: block; }

/* Otras consultas del contacto */

.otras-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.otras-lista li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 10px 0;
    border-top: 1px solid var(--borde);
    font-size: 14px;
}

.otras-lista li:first-child { border-top: 0; }
.otras-lista a { font-weight: 600; }

.marca-nueva {
    padding: 2px 8px;
    border-radius: var(--radio-chico);
    background: var(--azul-suave);
    color: var(--azul);
    font-size: 12px;
    font-weight: 600;
}

/* Historial: cerrado por defecto, letra chica, con raya de línea de tiempo */

.tarjeta.historial { padding: 0; }

.historial summary {
    display: flex;
    align-items: center;
    min-height: var(--alto-tactil);
    padding: 0 20px;
    color: var(--azul);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.historial summary::-webkit-details-marker { display: none; }

.historial summary::before {
    content: '';
    width: 7px;
    height: 7px;
    margin-right: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .15s;
}

.historial[open] summary::before { transform: rotate(45deg); }

.historial summary:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--radio); }

.historial-lista {
    list-style: none;
    margin: 0 20px 18px 26px;
    padding: 0 0 0 18px;
    border-left: 2px solid var(--borde);
    font-size: 12.5px;
    color: var(--texto-sec);
}

.historial-lista li {
    position: relative;
    padding: 5px 0;
}

.historial-lista li::before {
    content: '';
    position: absolute;
    left: -24px;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--superficie);
    border: 2px solid var(--azul);
}

.historial-fecha {
    display: inline-block;
    min-width: 110px;
    margin-right: 8px;
}

.historial-lista strong { color: var(--texto); font-weight: 600; }

/* Hoja de estados (celular) */

.estados-opciones {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
}

.estado-opcion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 0 16px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    font: inherit;
    cursor: pointer;
}

.estado-opcion .etiqueta-estado { font-size: 15px; padding: 5px 14px; }

.estado-opcion.actual {
    border: 2px solid var(--azul);
    background: var(--azul-suave);
    cursor: default;
}

.estado-actual {
    font-size: 13px;
    font-weight: 600;
    color: var(--azul);
}

.hoja-titulo { flex: 1; font-size: 16px; }

.barra-contacto { display: none; }

@media (max-width: 1100px) and (min-width: 861px) {
    .detalle { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Nueva consulta
   --------------------------------------------------------------------- */

.form-nueva {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 760px;
}

.form-angosto { max-width: 480px; }

.form-nueva fieldset {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    min-width: 0;
}

.form-nueva legend {
    margin-bottom: 8px;
    padding: 0;
    font-size: 13.5px;
    font-weight: 600;
}

.obligatorio {
    font-weight: 400;
    color: var(--texto-sec);
}

.opciones-canal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Estas etiquetas no son títulos de campo: anulan el estilo general de ".campo label" */
.campo .opcion-canal { display: inline-block; margin: 0; font-weight: 400; font-size: inherit; }
.campo .casilla { display: flex; margin: 0; font-weight: 400; font-size: inherit; }

.opcion-canal { position: relative; }

.opcion-canal input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.opcion-canal span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--alto-tactil);
    padding: 0 14px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    font-size: 14px;
    cursor: pointer;
}

.opcion-canal .icono { width: 18px; height: 18px; color: var(--azul); }
.opcion-canal span:hover { border-color: var(--azul); }

.opcion-canal input:checked + span {
    border: 2px solid var(--azul);
    padding: 0 13px;
    background: var(--azul-suave);
    color: var(--azul);
    font-weight: 600;
}

.opcion-canal input:focus-visible + span { box-shadow: var(--foco); }

.campos-par {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

.ayuda-par { margin: -10px 0 18px; }

.campo-error {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--error);
}

.con-error .input { border-color: var(--error); }
.con-error .input:focus { box-shadow: 0 0 0 3px rgba(155, 44, 34, .2); }
.con-error legend { color: var(--error); }

textarea.input { resize: vertical; min-height: 96px; }

.casilla {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--fondo);
    cursor: pointer;
}

.casilla input {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    flex-shrink: 0;
    accent-color: var(--azul);
}

.casilla strong { display: block; font-size: 14.5px; font-weight: 600; }
.casilla small { display: block; font-size: 13px; color: var(--texto-sec); }

.asignar-a { margin-top: 12px; }
.asignar-a label { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; }

.aviso-contacto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: -4px 0 18px;
    padding: 10px 14px;
    border: 1px solid var(--estado-contactada-fondo);
    border-left: 3px solid var(--estado-contactada);
    border-radius: var(--radio);
    background: #FFF8EC;
    color: var(--texto);
    font-size: 14px;
}

.aviso-contacto a { font-weight: 600; white-space: nowrap; }

.form-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.form-acciones .boton { min-width: 140px; }

/* La tabla necesita ~1000 px al lado del menú (con las columnas Tipo y Estado): desde 1300 px de ventana. Antes, tarjetas. */
.vista-tarjetas { display: none; }

@media (max-width: 1299px) {
    .vista-tabla { display: none; }
    .vista-tarjetas { display: grid; }
    .filtro-orden { display: block; }   /* sin títulos de tabla: se ordena desde acá */
    .contadores { grid-template-columns: repeat(2, 1fr); }
    .filtros { grid-template-columns: repeat(3, 1fr); }
    .filtro-busqueda { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------
   Derivar y estados según el tipo
   --------------------------------------------------------------------- */

/* Embudo de Ventas: los pasos del circuito con una flechita entre medio */
.embudo .embudo-paso + .embudo-paso::before {
    content: '›';
    margin-right: 8px;
    color: var(--texto-sec);
}

.embudo .pestana.activa::before { color: var(--claro); }

/* Ficha: título a la izquierda, acciones principales (Derivar, Papelera) a la derecha */
.dc-arriba {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 24px;
}

.dc-titulo { min-width: 0; flex: 1; }

.dc-acciones {
    display: flex;
    flex-shrink: 0;
    gap: 8px;
}

.dc-meta .marca-antigua { margin-left: 2px; }

/* Ficha sin tipo: lo primero es derivar */
.aviso-derivar {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid var(--azul-suave);
    border-left: 3px solid var(--azul);
    border-radius: var(--radio);
    background: var(--sin-asignar-fondo);
    font-size: 14.5px;
}

/* Ficha no comercial: Pendiente / Atendida */
.estado-simple {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.estado-simple-boton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--alto-tactil);
    padding: 0 18px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    color: var(--texto);
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
}

.estado-simple-boton .icono { width: 18px; height: 18px; }
.estado-simple-boton:hover:not(:disabled) { border-color: var(--azul); color: var(--azul); }
.estado-simple-boton:focus-visible { outline: none; box-shadow: var(--foco); }
.estado-simple-boton.elegido { cursor: default; }
.estado-simple-pendiente.elegido { background: var(--estado-pendiente-fondo); border-color: var(--estado-pendiente); color: var(--estado-pendiente); }
.estado-simple-atendida.elegido  { background: var(--estado-atendida-fondo);  border-color: var(--estado-atendida);  color: var(--estado-atendida); }

.dc-motivo { margin-top: 12px; font-size: 14px; color: var(--texto-sec); }
.dc-motivo strong { color: var(--texto); }

.gestion-datos { margin-bottom: 14px; }

/* Ventana Derivar: los tipos como botones grandes, de un toque */
.opciones-tipo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

.campo .opcion-tipo { display: block; margin: 0; font-weight: 400; font-size: inherit; }
.opcion-tipo { position: relative; }

.opcion-tipo input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.opcion-tipo > span {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    font-size: 14.5px;
    cursor: pointer;
}

.opcion-tipo > span:hover { border-color: var(--azul); }

.opcion-tipo input:checked + span {
    border: 2px solid var(--azul);
    padding: 0 13px;
    background: var(--azul-suave);
    color: var(--azul);
    font-weight: 600;
}

.opcion-tipo input:focus-visible + span { box-shadow: var(--foco); }

.opcion-tipo .tipo-punto { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.tipo-punto.tipo-comercial      { background: var(--tipo-comercial); }
.tipo-punto.tipo-proveedor      { background: var(--tipo-proveedor); }
.tipo-punto.tipo-empleo         { background: var(--tipo-empleo); }
.tipo-punto.tipo-prensa         { background: var(--tipo-prensa); }
.tipo-punto.tipo-administrativo { background: var(--tipo-administrativo); }
.tipo-punto.tipo-otro           { background: var(--tipo-otro); }

.hoja-modal .campos-par { gap: 0 14px; }

/* Grupos de opciones en las ventanas: sin el recuadro del navegador */
.hoja-modal fieldset { margin: 0 0 16px; padding: 0; border: 0; min-width: 0; }
.hoja-modal legend { margin-bottom: 8px; padding: 0; font-size: 13.5px; font-weight: 600; }

/* Que los botones no se partan en dos renglones */
.boton, .cierre-boton { white-space: nowrap; }

/* Ventana No concretada: motivos como botones */
.opciones-motivo { display: flex; flex-wrap: wrap; gap: 8px; }
.campo .opciones-motivo .opcion-canal { display: inline-block; margin: 0; font-weight: 400; }

@media (min-width: 861px) {
    #modal-derivar.hoja-modal { width: min(620px, calc(100vw - 32px)); }
}

/* ---------------------------------------------------------------------
   Configuración → Sectores
   --------------------------------------------------------------------- */

.migas { margin-bottom: 8px; font-size: 13.5px; color: var(--texto-sec); }

.lista-sectores { padding: 0; }
.ls-lista { list-style: none; margin: 0; padding: 0; }

.ls-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 14px 20px;
    border-top: 1px solid var(--borde);
}

.ls-item:first-child { border-top: 0; }
.ls-item.inactivo { background: var(--fondo); }
.ls-item.inactivo .ls-nombre strong { color: var(--texto-sec); }

.ls-nombre { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 15px; }
.ls-datos { margin-top: 2px; font-size: 13.5px; }
.ls-acciones { display: flex; gap: 8px; }

.etiqueta-sector {
    padding: 2px 10px;
    border-radius: var(--radio-chico);
    font-size: 12px;
    font-weight: 700;
}

.etiqueta-sector.activo   { background: var(--ok-fondo); color: var(--ok); }
.etiqueta-sector.inactivo { background: var(--antigua-fondo); color: var(--texto-sec); }

@media (max-width: 860px) {
    .ls-item { padding: 14px 16px; }
    .ls-acciones { width: 100%; }
    .ls-acciones .boton, .ls-acciones form { flex: 1; }
    .ls-acciones form .boton { width: 100%; }
    .ls-acciones .boton { min-height: var(--alto-tactil); }
}

/* ---------------------------------------------------------------------
   Casillas, barra de selección y papelera
   --------------------------------------------------------------------- */

.boton-peligro { background: var(--error); color: var(--claro); }
.boton-peligro:hover { background: var(--peligro-hover); }

.boton-secundario-peligro {
    background: var(--superficie);
    border-color: var(--borde);
    color: var(--error);
}

.boton-secundario-peligro:hover { border-color: var(--error); }

.enlace-boton {
    padding: 0;
    border: 0;
    background: none;
    color: var(--azul);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* Casilla de fila: el área que se toca es de 44 px aunque el cuadradito sea chico */
.casilla-fila {
    display: inline-grid;
    place-items: center;
    width: var(--alto-tactil);
    height: var(--alto-tactil);
    margin: -10px 0;
    flex-shrink: 0;
    cursor: pointer;
}

.casilla-fila input,
.elegir-pagina input,
.lp-cabecera input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--azul);
    cursor: pointer;
}

.tabla-consultas .col-casilla { width: 44px; padding: 0 0 0 8px; }
.tabla-consultas th.col-casilla:first-child,
.tabla-consultas td.col-casilla:first-child { padding-left: 8px; }

.tc-cabecera .casilla-fila { margin: -12px -6px -12px -12px; }
.tc-cabecera .contacto-nombre { flex: 1; min-width: 0; }

.elegir-pagina {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--alto-tactil);
    padding: 0 4px;
    font-size: 14px;
    color: var(--texto-sec);
    cursor: pointer;
}

/* Flota abajo: al aparecer no corre el listado (si lo corriera, el próximo toque caería en otra fila) */
.barra-seleccion {
    position: fixed;
    left: calc(var(--ancho-menu) + 32px);
    right: 32px;
    bottom: 20px;
    z-index: 26;
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 8px 12px 8px 16px;
    background: var(--azul-suave);
    border: 1px solid var(--azul);
    border-radius: var(--radio);
    box-shadow: var(--sombra-flotante);
}

.bs-texto {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 14px;
}

.bs-acciones { display: flex; gap: 8px; }

body.con-seleccion .contenido { padding-bottom: 96px; }

/* Ventanas de confirmación (en escritorio, en el centro; en el celular, hoja desde abajo) */
.modal-cuerpo { padding: 16px 0 4px; }
.modal-pregunta { margin-bottom: 6px; font-size: 16px; font-weight: 600; }
.modal-cuerpo .texto-sec { margin-bottom: 16px; font-size: 14px; }

.modal-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 16px;
}

@media (min-width: 861px) {
    /* .hoja.hoja-modal: le gana a ".hoja { display: none }" de escritorio, que está más abajo */
    .hoja.hoja-modal {
        display: block;
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: 50;
        width: min(480px, calc(100vw - 32px));
        max-height: 85vh;
        overflow-y: auto;
        padding: 8px 24px 20px;
        background: var(--superficie);
        border-radius: var(--radio);
        box-shadow: var(--sombra-flotante);
        transform: translate(-50%, -50%);
    }

    .hoja-modal .hoja-cabecera {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 0 12px;
        border-bottom: 1px solid var(--borde);
    }

    body.hoja-abierta .hoja-fondo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 40;
        background: rgba(11, 46, 92, .45);
    }
}


/* Ficha: pestañas Consulta / Otras consultas (solo en el celular) */
.ficha-pestanas { display: none; }

.otras-lista li { padding: 0; }

.otra-consulta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 10px 0;
    color: var(--texto);
    font-weight: 400;
    text-decoration: none;
}

.otra-consulta:hover .otra-asunto { color: var(--azul); text-decoration: underline; }
.otra-consulta:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--radio-chico); }

.otra-asunto { font-weight: 600; color: var(--azul); }

.otra-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 13.5px;
}

/* Pantalla Papelera */
.lista-papelera { padding: 0; }

.lp-cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--alto-tactil);
    padding: 0 16px 0 21px;
    background: var(--fondo);
    border-bottom: 1px solid var(--borde);
    border-radius: var(--radio) var(--radio) 0 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--texto-sec);
    cursor: pointer;
}

.lp-lista { list-style: none; margin: 0; padding: 0; }

.lp-item {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 16px 12px 8px;
    border-top: 1px solid var(--borde);
}

.lp-item:first-child { border-top: 0; }
.lp-item .casilla-fila { margin: -8px 0 0; }

.lp-cuerpo { flex: 1; min-width: 0; }

.lp-contacto {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 14.5px;
}

.lp-asunto { margin-top: 2px; font-size: 14px; }

.lp-mensaje {
    margin-top: 4px;
    font-size: 13.5px;
    color: var(--texto-sec);
    overflow-wrap: anywhere;
}

.lp-meta {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--texto-sec);
    overflow-wrap: anywhere;
}

.etiqueta-spam {
    padding: 1px 8px;
    border-radius: var(--radio-chico);
    background: var(--error-fondo);
    color: var(--error);
    font-size: 12px;
    font-weight: 600;
}

.paginacion-actual { padding: 0 8px; font-size: 14px; color: var(--texto-sec); }

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

body.login {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px 16px;
}

.login-caja {
    width: 100%;
    max-width: 400px;
}

.login-tarjeta {
    padding: 0;
    overflow: hidden;
}

.login-franja {
    display: flex;
    justify-content: center;
    padding: 28px 24px;
    background: var(--marino);
}

.login-franja .marca-logo { height: 48px; }

.login-cuerpo { padding: 32px; }

.login-titulo {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.login-tarjeta .bajada { margin-bottom: 24px; }

.login-tarjeta .boton { margin-top: 6px; }

.login-ayuda {
    margin-top: 20px;
    text-align: center;
    font-size: 13.5px;
    color: var(--texto-sec);
}

/* ---------------------------------------------------------------------
   Barra inferior y hoja "Más" (solo mobile)
   --------------------------------------------------------------------- */

.barra-inferior,
.hoja,
.hoja-fondo { display: none; }

.aviso-flotante {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 60;
    transform: translateX(-50%);
    padding: 10px 16px;
    border-radius: var(--radio);
    background: var(--texto);
    color: var(--claro);
    font-size: 14px;
    box-shadow: var(--sombra-flotante);
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Mobile
   --------------------------------------------------------------------- */

@media (max-width: 860px) {

    .menu-lateral { display: none; }

    .app-cuerpo { margin-left: 0; }

    /* Oscura, como en escritorio */
    .barra-superior {
        height: var(--alto-barra-mobile);
        padding: 0 8px 0 16px;
        gap: 4px;
    }

    .marca-mobile { display: flex; }
    .marca-mobile .marca-logo { height: 34px; }

    .barra-titulo,
    .buscador,
    .usuario-datos,
    .usuario-chevron { display: none; }

    .campana { margin-left: auto; color: var(--claro); }

    .usuario-boton { padding: 4px; }
    .usuario-boton:hover { background: transparent; }

    /* En la hoja "Más" (fondo blanco) el avatar va marino; en la barra (marino), blanco como en escritorio */
    .hoja .avatar { background: var(--marino); color: var(--claro); }

    /* Pendientes de la Bandeja en la barra inferior */
    .bi-item { position: relative; }

    .bi-contador {
        position: absolute;
        top: 4px;
        left: calc(50% + 6px);
        min-width: 20px;
        padding: 1px 6px;
        border-radius: 999px;
        background: var(--error);
        color: var(--claro);
        font-size: 11px;
        font-weight: 700;
        line-height: 1.4;
        text-align: center;
    }

    /* Ventana Derivar: dos tipos por fila, campos uno debajo del otro */
    .opciones-tipo { grid-template-columns: 1fr 1fr; }
    .hoja-modal .campos-par { grid-template-columns: 1fr; }

    .estado-simple-boton { flex: 1; justify-content: center; }

    .contenido {
        padding: 20px 16px calc(var(--alto-barra-inferior) + 28px + env(safe-area-inset-bottom));
    }

    .pagina-titulo { font-size: 24px; }

    .tarjeta { padding: 20px 16px; }

    /* 16px evita que el iPhone haga zoom al tocar un campo */
    .input { font-size: 16px; }

    .login-tarjeta { padding: 0; }
    .login-cuerpo { padding: 24px 20px; }
    .login-franja { padding: 24px 20px; }
    .login-franja .marca-logo { height: 42px; }

    /* Barra inferior */

    .barra-inferior {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        display: flex;
        align-items: stretch;
        height: calc(var(--alto-barra-inferior) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--superficie);
        border-top: 1px solid var(--borde);
    }

    .bi-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: var(--alto-tactil);
        padding: 0;
        border: 0;
        background: none;
        color: var(--texto-sec);
        font: inherit;
        font-size: 11.5px;
        font-weight: 500;
        text-decoration: none;
        cursor: pointer;
    }

    .bi-item .icono { width: 22px; height: 22px; }

    .bi-item.activo { color: var(--azul); font-weight: 600; }

    .bi-item.deshabilitado { opacity: .45; cursor: default; }

    .bi-circulo {
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--azul);
        color: var(--claro);
    }

    .bi-circulo .icono { width: 24px; height: 24px; stroke-width: 2.25; }

    .aviso-flotante {
        bottom: calc(var(--alto-barra-inferior) + 16px + env(safe-area-inset-bottom));
    }

    /* Hoja "Más" */

    .hoja-fondo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 40;
        background: rgba(11, 46, 92, .45);
    }

    .hoja {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        max-height: 85vh;
        overflow-y: auto;
        padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
        background: var(--superficie);
        border-radius: var(--radio) var(--radio) 0 0;
        box-shadow: var(--sombra-flotante);
    }

    .hoja-cabecera {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 0 12px;
        border-bottom: 1px solid var(--borde);
    }

    .hoja-usuario { flex: 1; line-height: 1.3; }
    .hoja-usuario strong { display: block; font-size: 15px; }
    .hoja-usuario small { display: block; font-size: 13px; color: var(--texto-sec); }

    .hoja-grupo {
        margin: 16px 8px 4px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--texto-sec);
    }

    .hoja-lista {
        list-style: none;
        margin: 8px 0 0;
        padding: 0;
    }

    .hoja-item {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 48px;
        padding: 0 8px;
        border: 0;
        border-radius: var(--radio);
        background: none;
        color: var(--texto);
        font: inherit;
        font-size: 15px;
        text-decoration: none;
        cursor: pointer;
    }

    .hoja-item .icono { color: var(--azul); }

    .hoja-item.activo { background: var(--azul-suave); font-weight: 600; }

    .hoja-item.deshabilitado { color: var(--texto-sec); cursor: default; }
    .hoja-item.deshabilitado .icono { color: var(--texto-sec); opacity: .6; }

    .hoja-item .pronto {
        margin-left: auto;
        padding: 2px 8px;
        border-radius: var(--radio-chico);
        background: var(--fondo);
        font-size: 12px;
        color: var(--texto-sec);
    }

    .hoja-salir {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--borde);
    }

    body.hoja-abierta { overflow: hidden; }

    /* Listado de consultas */

    .solo-escritorio { display: none !important; }
    .cabecera-acciones .solo-mobile { display: inline-grid; }

    .pagina-cabecera { align-items: center; margin-bottom: 14px; }

    .pestanas {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 -16px 14px;
        padding: 0 16px 2px;
        scrollbar-width: none;
    }

    .pestanas::-webkit-scrollbar { display: none; }

    .pestana { min-height: var(--alto-tactil); }

    .filtros {
        display: none;
        grid-template-columns: 1fr 1fr;
        padding: 16px;
        background: var(--superficie);
        border: 1px solid var(--borde);
        border-radius: var(--radio);
    }

    .filtros[data-abierto] { display: grid; }

    .filtro-busqueda { grid-column: 1 / -1; }
    .filtro-busqueda .icono { bottom: 13px; }
    .filtro-orden { grid-column: 1 / -1; }
    .filtros-acciones { grid-column: 1 / -1; }

    .filtro .input,
    .filtros-acciones .boton { min-height: var(--alto-tactil); font-size: 16px; }

    .lista-tarjetas { grid-template-columns: 1fr; }

    .tc-asignado .boton-chico { min-height: var(--alto-tactil); padding: 0 18px; }

    .repetida-panel { min-width: 0; width: min(300px, calc(100vw - 64px)); }

    /* Detalle de consulta: una sola columna (mensaje, notas, contacto, gestión, datos, historial) */

    .detalle { grid-template-columns: 1fr; gap: 14px; }
    .detalle-principal, .detalle-lateral { gap: 14px; }
    .detalle-otras, .historial { margin-top: 14px; }

    .dc-asunto { font-size: 20px; }

    .progreso-mobile { display: flex; }
    .progreso-texto { font-size: 11.5px; }

    .boton-cambiar-estado {
        display: flex;
        margin-top: 16px;
        min-height: var(--alto-tactil);
    }

    .historial summary { padding: 0 16px; }
    .historial-lista { margin: 0 16px 16px 22px; }
    .historial-fecha { display: block; min-width: 0; }

    /* Acciones de la ficha fijas abajo, arriba de la barra inferior: Derivar, Papelera, Llamar, WhatsApp */
    .barra-contacto {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(var(--alto-barra-inferior) + env(safe-area-inset-bottom));
        z-index: 25;
        display: flex;
        gap: 8px;
        padding: 8px 12px;
        background: var(--superficie);
        border-top: 1px solid var(--borde);
    }

    .ba-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: 52px;
        padding: 4px;
        border: 1px solid var(--borde);
        border-radius: var(--radio);
        background: var(--superficie);
        color: var(--azul);
        font: inherit;
        font-size: 12.5px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
    }

    .ba-item .icono { width: 20px; height: 20px; }
    .ba-principal { flex: 1.4; background: var(--azul); border-color: var(--azul); color: var(--claro); }
    .ba-peligro { color: var(--error); }
    .ba-whatsapp { color: var(--canal-whatsapp); }

    body.pagina-detalle .contenido {
        padding-bottom: calc(var(--alto-barra-inferior) + 96px + env(safe-area-inset-bottom));
    }

    body.pagina-detalle .aviso-flotante {
        bottom: calc(var(--alto-barra-inferior) + 80px + env(safe-area-inset-bottom));
    }

    /* Nueva consulta: un campo debajo del otro */
    .form-nueva { gap: 14px; }
    .campos-par { grid-template-columns: 1fr; }
    .ayuda-par { margin-top: -8px; }
    .form-acciones { flex-direction: column-reverse; }
    .form-acciones .boton { width: 100%; }
    .opcion-canal span { font-size: 14.5px; }

    .paginacion { justify-content: center; }
    .paginacion-texto { width: 100%; text-align: center; }
    .pagina-boton { min-width: var(--alto-tactil); height: var(--alto-tactil); }

    /* Barra de selección: fija abajo, arriba de la barra inferior, para tenerla a mano */
    .barra-seleccion {
        left: 8px;
        right: 8px;
        bottom: calc(var(--alto-barra-inferior) + 8px + env(safe-area-inset-bottom));
        padding: 10px 12px;
    }

    .bs-texto { width: 100%; }
    .bs-acciones { width: 100%; }
    .bs-acciones .boton { flex: 1; min-height: var(--alto-tactil); }
    .enlace-boton { min-height: var(--alto-tactil); text-align: left; }

    body.con-seleccion .contenido {
        padding-bottom: calc(var(--alto-barra-inferior) + 150px + env(safe-area-inset-bottom));
    }

    /* Ventanas de confirmación: botones a lo ancho, el principal arriba */
    .modal-acciones { flex-direction: column-reverse; }
    .modal-acciones .boton { width: 100%; }

    /* Ficha: pestañas Consulta / Otras consultas */
    .ficha-pestanas {
        display: flex;
        gap: 8px;
        margin-bottom: 14px;
    }

    .ficha-pestanas .pestana {
        flex: 1;
        justify-content: center;
        font: inherit;
        font-size: 14.5px;
        cursor: pointer;
    }

    .ficha:not([data-ver="otras"]) .detalle-otras { display: none; }
    .ficha[data-ver="otras"] .ficha-consulta,
    .ficha[data-ver="otras"] .historial { display: none; }
    .ficha[data-ver="otras"] .detalle-otras { margin-top: 0; }

    .lp-item { padding-right: 12px; }
}