/* Tema visual: identidad de marca Ingresa Marketing (verde bosque + oro,
   neutros hueso). Los nombres --granate-* se conservan del CRM original;
   aquí valen verde. Solo colores/tipografía — nada de estructura, JS ni datos.
   Las fuentes se cargan desde base.html con preconnect para no bloquear el pintado. */

:root {
    /* Marca */
    --granate: #173F36;
    --granate-900: #0F2B25;
    --granate-700: #1D4D42;
    --oro: #C9961A;
    --oro-soft: #B08D57;
    --oro-050: #FBF3E2;
    --crema: #F4EAD2;     /* fondo claro de burbujas y resúmenes (texto principal encima: 13,4:1) */

    /* Neutros cálidos (antes grises fríos) */
    --gris-100: #EFEFED;   /* fondo de página (antes gris frío) */
    --gris-200: #DCDBD6;   /* bordes */
    --gris-400: #6F6660;   /* texto terciario (5,6:1 sobre blanco) */
    --gris-600: #5C544E;   /* texto secundario */
    --gris-800: #2A2422;   /* texto principal */
    --linea-suave: #E6E5E1; /* bordes suaves / zebra */

    /* Semánticos: mismo significado (verde=bien, rojo=mal, ámbar=pendiente),
       tono cálido en vez de frío */
    --verde: #2F6B4F;
    --verde-bg: #E8F2EC;
    --rojo: #A4362C;
    --rojo-bg: #FAEAE7;
    --amarillo: #8A5A00;
    --amarillo-bg: #FBF1DC;

    /* Acento de acción/foco (antes "azul"): oro, como pide la guía de marca */
    --azul: #C9961A;
    --azul-bg: #FBF3E2;

    --gris-badge-bg: #EFE9DD;
    --gris-badge-fg: #5C544E;

    --sans: 'Hanken Grotesk', system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --display: 'Cormorant Garamond', Georgia, serif;
}

* { box-sizing: border-box; }

body {
    font-family: var(--sans);
    margin: 0;
    background: var(--gris-100);
    color: var(--gris-800);
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--oro-050); color: var(--granate); }

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--granate);
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--granate-900);
    position: sticky;
    top: 0;
    z-index: 10;
}
.topbar .logo { display: flex; align-items: center; text-decoration: none; }
.topbar .logo img { height: 28px; width: auto; display: block; }
.topbar nav { display: flex; gap: 1.25rem; align-items: center; }
.topbar nav a { text-decoration: none; color: rgba(243, 236, 220, .86); font-weight: 600; }
.topbar nav a:hover { color: var(--oro); }
.topbar .boton-nuevo {
    background: var(--oro);
    color: var(--granate-900) !important;
    font-weight: 700;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
}
.topbar .boton-nuevo:hover { background: #B48514; color: var(--granate-900) !important; }

main { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
/* Listado de leads e informes: todo el ancho de la ventana (con su margen),
   para no tener que moverse a la derecha en las tablas. Lo pone la plantilla
   con el bloque clase_pagina de base.html. */
body.pagina-ancha main, body.pagina-ancha .avisos { max-width: none; }

h1 {
    font-family: var(--display);
    font-weight: 700;
    color: var(--granate);
    letter-spacing: -0.01em;
    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum" 1;
}

.pestanas-grupo {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--gris-200);
}
.pestanas-grupo .pestana {
    text-decoration: none;
    color: var(--gris-600);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.6rem 1rem;
    border-bottom: 2px solid transparent;
}
.pestanas-grupo .pestana:hover { color: var(--granate); }
.pestanas-grupo .pestana.activa { color: var(--granate); border-bottom-color: var(--oro); }
.pestanas-grupo .pestana .n {
    display: inline-block;
    background: var(--linea-suave);
    color: var(--gris-600);
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
    font-size: 0.78rem;
    margin-left: 0.3rem;
}
.pestanas-grupo .pestana.activa .n { background: var(--oro-050); color: var(--granate); }

.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    background: white;
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid var(--gris-200);
    margin-bottom: 1rem;
}
.filtros input[type="text"] { flex: 1 1 240px; }
.filtros select, .filtros input {
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    border: 1px solid var(--gris-200);
    font-size: 0.9rem;
    font-family: inherit;
    background: white;
    color: var(--gris-800);
}
.filtros button {
    background: var(--oro);
    color: var(--granate-900);
    font-weight: 700;
    border: none;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    cursor: pointer;
}
.filtros button:hover { background: #B48514; color: var(--granate-900); }
.filtros .limpiar {
    align-self: center;
    color: var(--gris-600);
    text-decoration: underline;
    font-size: 0.85rem;
}
.filtros .boton-exportar {
    align-self: center;
    margin-left: auto;
    background: var(--verde-bg);
    color: var(--verde);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
}

.contador { color: var(--gris-600); font-size: 0.9rem; margin: 0.5rem 0; }

/* Scroll propio (horizontal y vertical) para que la cabecera se quede
   congelada dentro de la tabla, como en Excel, en vez de flotar sobre la
   página al hacer scroll. */
.tabla-scroll {
    overflow: auto;
    max-height: 72vh;
    background: white;
    border-radius: 12px;
    border: 1px solid var(--gris-200);
}
/* table-layout fijo para que los anchos que arrastra el usuario manden */
table.tabla-leads {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.88rem;
    white-space: nowrap;
    table-layout: fixed;
    font-variant-numeric: tabular-nums;
}
table.tabla-leads th { position: relative; }
table.tabla-leads td {
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Tirador para arrastrar el borde de la columna */
.tirador-columna {
    position: absolute;
    top: 0;
    right: -3px;
    width: 7px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    z-index: 4;
}
.tirador-columna:hover { background: var(--oro); opacity: 0.5; }
/* El de la última columna no sobresale: si no, la tabla tiene siempre 3 px de scroll lateral */
table.tabla-leads th:last-child .tirador-columna { right: 0; }

.orden-columna {
    background: none;
    border: none;
    color: var(--oro-050);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0 0.15rem;
    vertical-align: middle;
}
.orden-columna:hover { color: var(--oro); }

.semana-evolucion { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.dia-evolucion {
    flex: 1 1 90px;
    text-align: center;
    background: var(--gris-100);
    border: 1px solid var(--gris-200);
    border-radius: 10px;
    padding: 0.7rem 0.4rem;
}
/* Toda la caja del día lleva a sus leads (el enlace del número la cubre). */
.dia-evolucion { position: relative; }
.dia-evolucion a.cifra::after { content: ""; position: absolute; inset: 0; border-radius: 10px; }
.dia-evolucion:has(a.cifra:hover) { border-color: var(--oro); }
.dia-evolucion .valor-dia { font-family: var(--display); font-size: 1.7rem; font-weight: 700; color: var(--granate); line-height: 1; }
.dia-evolucion .etiqueta-dia { margin-top: 0.3rem; font-size: 0.72rem; color: var(--gris-600); text-transform: uppercase; letter-spacing: 0.05em; }
.dia-evolucion.es-hoy { background: var(--oro-050); border-color: var(--oro); }
.dia-evolucion.es-hoy .valor-dia { color: var(--granate); }
.dia-evolucion.es-hoy .etiqueta-dia { color: var(--granate); font-weight: 700; }
body.redimensionando { cursor: col-resize; user-select: none; }
body.redimensionando td.editable:hover { background: none; outline: none; }

.enlace-boton {
    background: none;
    border: none;
    color: var(--granate);
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
    padding: 0;
}
.enlace-boton:hover { color: var(--oro); }
/* Estado del botón «Grabar NFC» (static/nfc.js) */
.nfc-estado { display: block; margin-top: 0.3rem; font-size: 0.82rem; color: var(--gris-600); white-space: pre-line; }
.nfc-estado:empty { display: none; }
.nfc-estado.ok { color: var(--verde); }
.nfc-estado.error { color: var(--rojo); }
table.tabla-leads th {
    text-align: left;
    padding: 0.6rem 0.8rem;
    background: var(--granate);
    border-bottom: 1px solid var(--granate-900);
    color: #F3ECDC;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    position: sticky;
    top: 0;
}
table.tabla-leads td { padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--linea-suave); color: var(--gris-800); }
table.tabla-leads tbody tr:nth-child(even) td { background: #FCFAF5; }
table.tabla-leads tbody tr:hover td { background: var(--oro-050); }

.celda-abrir { width: 1%; text-align: center; }
.celda-abrir a { color: var(--gris-400); text-decoration: none; font-size: 0.95rem; }
.celda-abrir a:hover { color: var(--granate); }

.celda-eliminar { width: 1%; text-align: center; }
.boton-eliminar {
    background: none; border: none; cursor: pointer; font-size: 0.9rem;
    color: var(--gris-400); padding: 0.2rem 0.4rem; border-radius: 5px;
    opacity: 0.5; transition: opacity 0.15s, color 0.15s;
}
table.tabla-leads tbody tr:hover .boton-eliminar { opacity: 1; }
.boton-eliminar:hover { color: var(--rojo); background: var(--rojo-bg); }
.boton-eliminar:disabled { opacity: 0.3; cursor: default; }

td.editable { cursor: text; }
td.editable:hover { background: var(--oro-050); outline: 1px solid var(--oro); outline-offset: -1px; }
td.editable.editando { padding: 0.3rem 0.4rem; }
td.editable.guardado { background: var(--verde-bg); transition: background 0.6s ease; }
td.editable.error { background: var(--rojo-bg); }
.mas-presupuestos { color: var(--gris-400); font-size: 0.8rem; }
.editor-celda {
    width: 100%;
    min-width: 90px;
    padding: 0.35rem 0.4rem;
    border-radius: 6px;
    border: 1px solid var(--oro);
    font-size: 0.88rem;
    font-family: inherit;
}
.editor-celda:focus { outline: none; box-shadow: 0 0 0 3px rgba(201, 150, 26, .25); }
.vacio { text-align: center; color: var(--gris-400); padding: 2rem !important; cursor: default; }

/* Selección múltiple de celdas (como en una hoja de cálculo): arrastra o
   usa mayúsculas+clic dentro de la misma columna para seleccionar varias,
   luego escribe un valor y Enter para aplicarlo a todas. */
td.editable.seleccionada { background: var(--oro-050); outline: 2px solid var(--oro); outline-offset: -2px; }
td.editable.copiada { outline: 2px dashed var(--granate-700); outline-offset: -2px; transition: outline-color 0.9s ease; }
.editor-masivo {
    position: fixed;
    z-index: 40;
    background: #fff;
    border: 1px solid var(--oro);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    padding: 0.6rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 220px;
}
.editor-masivo .aviso { font-size: 0.78rem; color: var(--gris-600); }
.editor-masivo select,
.editor-masivo input {
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--gris-200);
    font-size: 0.88rem;
    font-family: inherit;
}
.editor-masivo select:focus,
.editor-masivo input:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px rgba(201, 150, 26, .25); }

.badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    background: var(--gris-badge-bg);
    color: var(--gris-badge-fg);
}
.badge[data-estado="CERRADO"], .badge[data-estado="B CERRADA"], .badge[data-estado="FACTURADO"] {
    background: var(--verde-bg); color: var(--verde);
}
.badge[data-estado="NI"], .badge[data-estado="NI precio"], .badge[data-estado="NI competencia"], .badge[data-estado="Cerrado en otro"],
.badge[data-estado="ANULADO"], .badge[data-estado="denegado"] {
    background: var(--rojo-bg); color: var(--rojo);
}
.badge[data-estado="Pendiente"], .badge[data-estado="Cerrando"], .badge[data-estado="no_contactado"] {
    background: var(--amarillo-bg); color: var(--amarillo);
}
.badge[data-estado="Pendiente validar WA"], .badge[data-estado="Pendiente validar Web"], .badge[data-estado="Pendiente validar IG"],
.badge[data-estado="Pendiente validar Bodas.net"] {
    background: var(--oro-050); color: var(--granate);
}

/* Autorrelleno */
.caja-autorrelleno {
    background: var(--oro-050);
    border: 1px dashed var(--oro-soft);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}
.caja-autorrelleno > label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gris-600);
    margin-bottom: 0.4rem;
}
.caja-autorrelleno textarea {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    border: 1px solid var(--gris-200);
    font-family: inherit;
    font-size: 0.88rem;
    resize: vertical;
}
.autorrelleno-controles {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.6rem;
    flex-wrap: wrap;
}
.autorrelleno-archivo {
    font-size: 0.85rem;
    color: var(--gris-600);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
#autorrelleno-boton {
    background: var(--oro);
    color: var(--granate-900);
    border: none;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700;
}
#autorrelleno-boton:hover { background: #B48514; color: var(--granate-900); }
#autorrelleno-boton:disabled { opacity: 0.6; cursor: default; }
.autorrelleno-estado { font-size: 0.82rem; color: var(--gris-600); }

.campos-faltantes {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.campos-faltantes.aviso { background: var(--amarillo-bg); color: var(--amarillo); }
.campos-faltantes.ok { background: var(--verde-bg); color: var(--verde); }

/* Ficha */
.ficha-cabecera { margin-bottom: 1rem; }
.ficha-cabecera .volver { color: var(--gris-600); text-decoration: none; font-size: 0.85rem; }
.ficha-cabecera .volver:hover { color: var(--granate); }
.ficha-cabecera h1 { margin: 0.3rem 0 0; font-size: 1.7rem; }

.grid-ficha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}
fieldset {
    background: white;
    border: 1px solid var(--gris-200);
    border-radius: 12px;
    padding: 1rem;
}
fieldset.fieldset-ancho { grid-column: 1 / -1; }
legend { font-weight: 700; color: var(--granate); padding: 0 0.4rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; }

.form-ficha label {
    display: block;
    margin-bottom: 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gris-600);
}
.form-ficha input, .form-ficha select, .form-ficha textarea {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    border: 1px solid var(--gris-200);
    font-size: 0.92rem;
    font-weight: 400;
    color: var(--gris-800);
    font-family: inherit;
    background: white;
}
.form-ficha input:focus, .form-ficha select:focus, .form-ficha textarea:focus {
    outline: none;
    border-color: var(--oro);
    box-shadow: 0 0 0 3px rgba(201, 150, 26, .20);
}
.campo-estado select { font-weight: 700; }

/* Huecos obligatorios sin rellenar. El asterisco va con ::before para que
   caiga junto al texto de la etiqueta y no detrás del campo. */
.form-ficha label.casilla-ficha { display: flex; gap: 0.5rem; align-items: center; font-weight: 400; }
.form-ficha label.casilla-ficha input { width: auto; margin: 0; }
.form-ficha label.obligatorio::before {
    content: "* ";
    color: var(--granate);
    font-weight: 700;
}
.form-ficha .campo-pendiente {
    background: var(--amarillo-bg);
    border-color: var(--amarillo);
    box-shadow: inset 3px 0 0 var(--amarillo);
}
.form-ficha .campo-pendiente-suave { background: var(--oro-050); }

/* Estado con color según la fase */
.form-ficha select.estado-no-contactado { background: var(--amarillo-bg); color: var(--amarillo); border-color: var(--amarillo); }
.form-ficha select.estado-denegado { background: var(--rojo-bg); color: var(--rojo); border-color: var(--rojo); }
.form-ficha select.estado-cerrado { background: var(--verde-bg); color: var(--verde); border-color: var(--verde); }

/* Presupuestos de un lead (bloque Facturación). Filas como div, no tabla,
   para que en el móvil cada campo baje debajo del anterior. */
/* .form-ficha label pone display:block: sin esto, `hidden` no ocultaría la casilla de efectivo. */
.form-ficha .campo-efectivo[hidden], .pregunta-aceptados[hidden], .fila-presupuesto [hidden], .error-efectivo[hidden] { display: none; }
.titulo-presupuestos { margin: 0 0 0.35rem; font-weight: 700; color: var(--granate); font-size: 0.9rem; }
.lista-presupuestos { margin-top: 0.6rem; }
.fila-presupuesto {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0 0.75rem;
    padding: 0.6rem 0 0.1rem;
    border-top: 1px solid var(--linea-suave);
}
.fila-presupuesto .nombre-presupuesto { flex: 0 0 7.5rem; align-self: center; font-weight: 700; font-size: 0.85rem; color: var(--granate); }
.fila-presupuesto > label { flex: 1 1 9rem; }
.form-ficha .fila-presupuesto label.casilla-aceptado { flex: 0 0 auto; align-self: center; margin-bottom: 0.7rem; }
.fila-presupuesto .quitar-presupuesto { align-self: center; margin-bottom: 0.7rem; }
.total-presupuestos { margin: 0.5rem 0 0.25rem; font-size: 0.9rem; color: var(--gris-800); }
.historial-presupuestos { margin: 0.5rem 0 0.75rem; font-size: 0.82rem; color: var(--gris-600); }
.historial-presupuestos summary { cursor: pointer; }
.historial-presupuestos ul { margin: 0.4rem 0 0 1rem; padding: 0; }
.historial-presupuestos li { margin-bottom: 0.2rem; }
.grid-facturacion {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0 1rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gris-200);
}
/* Neutra si el lead ya estaba cerrado y hay alguno aceptado; en amarillo
   (.aviso-pendiente, lo pone presupuestos.js) si falta contestarla. */
.pregunta-aceptados { border: 1px solid var(--gris-200); border-radius: 8px; padding: 0.6rem 0.75rem; margin: -0.2rem 0 0.8rem; }
.pregunta-aceptados-titulo { margin: 0 0 0.4rem; font-weight: 700; color: var(--granate); font-size: 0.88rem; }
.pregunta-aceptados.aviso-pendiente .pregunta-aceptados-titulo { color: var(--amarillo); }
.fila-presupuesto input:invalid { border-color: var(--rojo); }
.error-efectivo { display: block; margin-top: 0.25rem; color: var(--rojo); font-weight: 700; font-size: 0.78rem; }
.nota-repite { margin: 0.2rem 0 0; font-size: 0.88rem; color: var(--gris-600); }
.form-ficha .pregunta-aceptados label.casilla-ficha { margin-bottom: 0.3rem; }
.error-aceptados { margin: 0.3rem 0 0; color: var(--rojo); font-weight: 700; font-size: 0.82rem; }

.acciones-ficha { margin-top: 1.25rem; display: flex; align-items: center; gap: 1rem; }
.boton-guardar {
    background: var(--oro);
    color: var(--granate-900);
    border: none;
    padding: 0.6rem 1.4rem;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.95rem;
}
.boton-guardar:hover { background: #B48514; color: var(--granate-900); }
.meta-ficha { color: var(--gris-400); font-size: 0.8rem; }

.form-eliminar { margin-top: 1rem; }
.form-eliminar .boton-eliminar {
    background: none;
    border: 1px solid var(--rojo);
    color: var(--rojo);
    padding: 0.45rem 1rem;
    border-radius: 999px;
    cursor: pointer;
    opacity: 1;
}

/* Informes */
.tarjetas-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.tarjeta { background: white; border: 1px solid var(--gris-200); border-radius: 12px; padding: 1rem; }
.tarjeta .valor {
    font-family: var(--sans); font-weight: 800; font-size: 1.7rem;
    letter-spacing: -0.02em; color: var(--granate);
    font-variant-numeric: tabular-nums;
}
.tarjeta .etiqueta { color: var(--gris-400); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.3rem; }

.selector-anio { margin-bottom: 1rem; }
.selector-anio select { padding: 0.4rem 0.7rem; border-radius: 8px; border: 1px solid var(--gris-200); font-family: inherit; }

.bloque-informe { background: white; border: 1px solid var(--gris-200); border-radius: 12px; padding: 1rem; margin-bottom: 1.25rem; overflow-x: auto; }
.bloque-informe h2 {
    margin-top: 0; font-size: 1.05rem; font-weight: 700; color: var(--gris-800);
    font-family: var(--sans);
}
table.tabla-informe { width: 100%; border-collapse: collapse; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
table.tabla-informe th, table.tabla-informe td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--linea-suave); }
table.tabla-informe th { color: var(--gris-600); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.06em; font-weight: 700; }
table.tabla-informe tbody tr:nth-child(even) { background: #FCFAF5; }
table.tabla-informe tbody tr:hover { background: var(--oro-050); }
table.tabla-informe tr.fila-top { background: var(--oro-050); font-weight: 700; }
table.tabla-informe tr.fila-top:nth-child(even) { background: var(--oro-050); }
table.tabla-informe tr.fila-top td:first-child::before { content: "🏆 "; }

/* Evento dentro de 30 días: prioridad alta, se nota a simple vista */
table.tabla-informe tr.fila-urgente { background: var(--rojo-bg); font-weight: 700; }
table.tabla-informe tr.fila-urgente:nth-child(even) { background: var(--rojo-bg); }
/* Números de los informes que llevan a su lista de leads: mismo color que
   el texto, subrayados solo al pasar el ratón o al llegar con el teclado. */
/* Número que lleva a su lista de leads: subrayado de puntos discreto para
   que se vea que se puede pinchar (también en móvil, donde no hay ratón). */
a.cifra {
    color: inherit; text-decoration: underline dotted; text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px;
}
a.cifra:hover, a.cifra:focus-visible { color: inherit; text-decoration: underline; text-decoration-color: currentColor; }
.aviso-informe-leads { margin: 0 0 0.75rem; }
.aviso-informe-leads .que { font-weight: 700; }
table.tabla-informe tr.fila-urgente td { color: var(--rojo); }

/* Informes estilo Excel */
.subnav-informes {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    border-bottom: 1px solid var(--gris-200);
    margin-bottom: 1.25rem;
}
.pestanas-excel { display: flex; gap: 2px; }
.pestanas-excel .pestana-excel {
    text-decoration: none;
    color: var(--gris-600);
    font-weight: 600;
    font-size: 0.88rem;
    padding: 0.55rem 1rem;
    background: var(--linea-suave);
    border: 1px solid var(--gris-200);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}
.pestanas-excel .pestana-excel:hover { color: var(--granate); background: var(--oro-050); }
.pestanas-excel .pestana-excel.activa {
    background: white;
    color: var(--granate);
    box-shadow: inset 0 3px 0 var(--oro);
    font-weight: 700;
}
.selector-anio-informe { padding-bottom: 0.4rem; font-size: 0.85rem; color: var(--gris-600); }
.selector-anio-informe select {
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    border: 1px solid var(--gris-200);
    font-weight: 600;
    font-family: inherit;
}

.subtitulo-informe { color: var(--gris-600); font-size: 0.88rem; max-width: 780px; margin: 0.3rem 0 1rem; }
.nota-informe { color: var(--gris-600); font-size: 0.8rem; margin-top: 0.75rem; }
.aviso-diferencia {
    background: var(--amarillo-bg);
    color: var(--amarillo);
    border-left: 3px solid var(--amarillo);
    padding: 0.5rem 0.75rem;
    border-radius: 5px;
    font-size: 0.8rem;
    max-width: 820px;
    margin: 0 0 1rem;
}

table.tabla-excel { white-space: nowrap; font-size: 0.83rem; font-variant-numeric: tabular-nums; }
table.tabla-excel th {
    background: var(--granate);
    color: #F3ECDC;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.45rem 0.6rem;
    text-align: center;
    border: 1px solid var(--granate-900);
    position: sticky;
    top: 0;
    z-index: 3;
}
table.tabla-excel thead tr:first-child th { background: var(--granate-900); }
table.tabla-excel thead tr:nth-child(2) th { top: 27px; }
table.tabla-excel td {
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--gris-200);
    color: var(--gris-800);
}
table.tabla-excel td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tabla-excel td.destacado { font-weight: 700; }
table.tabla-excel td.gris { color: var(--gris-400); }
table.tabla-excel tbody tr:nth-child(even) { background: #FCFAF5; }
table.tabla-excel tbody tr:hover { background: var(--oro-050); }
table.tabla-excel .fila-total td { background: #F2EADA; font-weight: 700; color: var(--granate); border-top: 2px solid var(--oro-soft); }
table.tabla-excel .fila-total.secundaria td { background: #F7F1E4; }
table.tabla-excel .fila-subtotal td { background: #F2EADA; font-weight: 600; color: var(--granate); }
table.tabla-excel .sticky-col {
    position: sticky;
    left: 0;
    background: white;
    font-weight: 600;
    z-index: 2;
}
table.tabla-excel tbody tr:nth-child(even) .sticky-col { background: #FCFAF5; }
table.tabla-excel .fila-total .sticky-col { background: #F2EADA; }
/* Rojo/verde de las comparativas: mismo significado (verde = sube vs. año
   anterior, rojo = baja), tono cálido */
/* La esquina (cabecera de la columna fija) por encima de todo al hacer scroll */
table.tabla-excel th.sticky-col { z-index: 4; }
/* Informes a todo el ancho: celdas más compactas y cabeceras (letra algo
   menor) que pueden partirse en varias líneas en vez de ensanchar la tabla.
   Los rótulos de grupo de la primera fila (los que abarcan varias columnas)
   siguen en una línea: la segunda fila de cabecera va pegada debajo. */
body.pagina-ancha .bloque-informe { padding: 0.75rem; }
body.pagina-ancha table.tabla-informe th, body.pagina-ancha table.tabla-informe td { padding: 0.35rem 0.45rem; }
body.pagina-ancha table.tabla-excel th {
    padding: 0.4rem 0.3rem; font-size: 0.66rem; letter-spacing: 0.01em; line-height: 1.2;
    white-space: normal; vertical-align: bottom;
}
body.pagina-ancha table.tabla-excel thead tr:first-child:not(:only-child) th:not([rowspan]) { white-space: nowrap; vertical-align: middle; }
body.pagina-ancha table.tabla-excel thead tr:nth-child(2) th { top: 25px; }
body.pagina-ancha table.tabla-excel th[rowspan] { min-width: 4em; }
body.pagina-ancha table.tabla-excel th.sticky-col { min-width: 0; }
/* 0.3rem a los lados: Conversión (24 columnas) cabe entera a 1366 px. */
body.pagina-ancha table.tabla-excel td { padding: 0.3rem; }
/* Nombres largos de la primera columna (tipo de evento) en dos líneas, no a lo ancho. */
body.pagina-ancha table.tabla-excel td.sticky-col { white-space: normal; max-width: 8.5rem; }
table.tabla-excel td.celda-verde { background: var(--verde-bg); color: var(--verde); font-weight: 700; }
table.tabla-excel td.celda-roja { background: var(--rojo-bg); color: var(--rojo); font-weight: 700; }
.dif-verde { color: var(--verde); font-weight: 700; }
.dif-roja { color: var(--rojo); font-weight: 700; }
.tarjeta.tarjeta-verde { background: var(--verde-bg); border-color: var(--verde); }
.tarjeta.tarjeta-verde .valor { color: var(--verde); }
.tarjeta.tarjeta-roja { background: var(--rojo-bg); border-color: var(--rojo); }
.tarjeta.tarjeta-roja .valor { color: var(--rojo); }

.marca-extra {
    font-size: 0.68rem;
    background: var(--amarillo-bg);
    color: var(--amarillo);
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-weight: 700;
}

.fila-donuts {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    background: white;
    border: 1px solid var(--gris-200);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}
.grafico-donut { margin: 0; text-align: center; width: 130px; }
.grafico-donut svg { width: 130px; height: 130px; }
.donut-valor { font-size: 26px; font-weight: 800; fill: var(--granate); }
.grafico-donut figcaption { font-size: 0.8rem; color: var(--gris-600); font-weight: 600; margin-top: 0.3rem; }
.tarjetas-kpi { display: flex; gap: 0.75rem; flex-wrap: wrap; flex: 1; }
.tarjetas-kpi .tarjeta { flex: 1 1 170px; }
.tarjeta.destacada { background: var(--verde-bg); border-color: var(--verde); }
.tarjeta.destacada .valor { color: var(--verde); }

.grafico-barras { margin: 0.5rem 0 0; }
.grafico-barras figcaption { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.6rem; color: var(--gris-800); }
.grafico-scroll { overflow-x: auto; }
.barra-valor { font-size: 11px; font-weight: 700; fill: var(--gris-600); }
.barra-etiqueta { font-size: 10px; fill: var(--gris-600); }
.leyenda { display: flex; gap: 1rem; font-size: 0.78rem; color: var(--gris-600); margin-top: 0.5rem; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 0.25rem; }

/* Admin de opciones */
.subtitulo-admin { color: var(--gris-600); font-size: 0.9rem; max-width: 700px; margin-bottom: 1.5rem; }
.grid-admin {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}
.bloque-admin { background: white; border: 1px solid var(--gris-200); border-radius: 12px; padding: 1rem; }
.lista-opciones { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.lista-opciones li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.2rem;
    border-bottom: 1px solid var(--linea-suave);
    font-size: 0.9rem;
}
.lista-opciones li.vacio-opciones { color: var(--gris-400); font-style: italic; }
.lista-opciones form { margin: 0; }
.boton-quitar-opcion {
    background: none;
    border: none;
    color: var(--gris-400);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.1rem 0.4rem;
}
.boton-quitar-opcion:hover { color: var(--rojo); }
.form-anadir-opcion { display: flex; gap: 0.4rem; }
.form-anadir-opcion input {
    flex: 1;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    border: 1px solid var(--gris-200);
    font-size: 0.85rem;
    font-family: inherit;
}
.form-anadir-opcion button {
    background: var(--oro);
    color: var(--granate-900);
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}
.form-anadir-opcion button:hover { background: #B48514; color: var(--granate-900); }

/* Scrollbar cálida */
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: var(--gris-100); }
*::-webkit-scrollbar-thumb { background: #DBD1BE; border-radius: 999px; border: 3px solid var(--gris-100); }
*::-webkit-scrollbar-thumb:hover { background: var(--oro-soft); }

@media (max-width: 700px) {
    .topbar { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
}

/* Papelera / correos fallidos / duplicados / adjuntos ------------------- */
.acciones-papelera { display: flex; gap: 0.5rem; align-items: center; white-space: nowrap; }
.boton-restaurar {
    background: var(--oro-050);
    border: 1px solid var(--oro);
    color: var(--granate);
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}
.boton-restaurar:hover { background: var(--oro); color: var(--granate-900); }

.bloque-adjuntos { margin-top: 1.5rem; }
.lista-adjuntos { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.lista-adjuntos li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.2rem;
    border-bottom: 1px solid var(--linea-suave);
    font-size: 0.9rem;
    gap: 0.5rem;
}
.lista-adjuntos a { color: var(--granate); text-decoration: none; }
.lista-adjuntos a:hover { text-decoration: underline; }
.lista-adjuntos .tamano { color: var(--gris-400); font-size: 0.78rem; margin-left: 0.4rem; }
.form-subir-adjunto { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.6rem; }
.form-subir-adjunto input[type="file"] { font-size: 0.85rem; min-width: 0; max-width: 100%; }
.form-subir-adjunto button {
    background: var(--granate);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.form-subir-adjunto button:hover { background: var(--granate-700); }

/* Lanzador de apps (estilo Odoo) ------------------------------------------ */
.apps-cabecera { text-align: center; margin: 1.5rem 0 2.5rem; }
.apps-cabecera h1 { margin-bottom: 0.3rem; }

.rejilla-apps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}
.app-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    width: 140px;
    text-decoration: none;
    padding: 0.5rem;
    border-radius: 14px;
    transition: transform 0.15s ease, background 0.15s ease;
}
.app-tile:hover { background: var(--oro-050); transform: translateY(-2px); }
.app-icono {
    width: 88px;
    height: 88px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}
.app-icono--crm { background: linear-gradient(160deg, var(--granate), var(--granate-900)); }
.app-icono--resenas { background: linear-gradient(160deg, var(--oro), var(--oro-soft)); }
.app-icono--instagram { background: linear-gradient(160deg, #833ab4, #fd1d1d, #fcb045); }
.app-icono--email { background: linear-gradient(160deg, #0b996e, #0b6e4f); }
.app-icono--apollo { background: linear-gradient(160deg, #4a4f5c, #1f2229); }
.app-icono--whatsapp { background: linear-gradient(160deg, #25d366, #128c7e); }
.app-icono--calendario { background: linear-gradient(160deg, #3d6fa8, #27486e); }
.app-nombre { font-weight: 700; color: var(--gris-800); font-size: 0.92rem; }
.app-badge {
    position: absolute;
    top: 0;
    right: 0.4rem;
    background: var(--amarillo-bg);
    color: var(--amarillo);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
}

.app-notificacion {
    position: absolute;
    top: -4px;
    right: 22px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e53935;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    border: 2px solid var(--fondo, #faf6ee);
}

.volver-apps { margin-bottom: 0.5rem; }
.volver-apps a { color: var(--gris-600); text-decoration: none; font-size: 0.88rem; }
.volver-apps a:hover { color: var(--granate); }

.aviso-pendiente { border: 1px solid var(--amarillo); background: var(--amarillo-bg); }
.pasos-pendiente { margin: 0.5rem 0 0.75rem 1.2rem; }
.pasos-pendiente li { margin-bottom: 0.3rem; }

/* Bandeja de reseñas ---------------------------------------------------- */
.resena-tarjeta {
    border: 1px solid var(--gris-200);
    border-radius: 12px;
    padding: 1rem;
    margin-top: 1rem;
    background: #fff;
}

/* Mensajes de una conversación (Instagram y WhatsApp) */
.burbuja {
    border: 1px solid var(--gris-200);
    border-radius: 12px;
    padding: 0.8rem 1rem;
    margin-top: 0.8rem;
    margin-right: 2rem;
    background: #fff;
}
.burbuja--saliente { margin-right: 0; margin-left: 2rem; background: var(--crema); }
.burbuja--ia { border-color: var(--oro); }
.burbuja--ia .resena-autor { color: var(--granate); }
.burbuja .resena-fecha { color: var(--gris-600); }
@media (max-width: 600px) {
    .burbuja { margin-right: 0.8rem; }
    .burbuja--saliente { margin-left: 0.8rem; margin-right: 0; }
}

/* Plazo de 24 h de Instagram */
.plazo {
    display: inline-block; border-radius: 999px; padding: 0.05rem 0.55rem;
    font-size: 0.78rem; font-weight: 700; white-space: nowrap;
    background: var(--verde-bg); color: var(--verde);
}
.plazo--ambar { background: var(--amarillo-bg); color: var(--amarillo); }
.plazo--rojo { background: var(--rojo-bg); color: var(--rojo); }
.plazo--vencido { background: var(--gris-200); color: var(--gris-600); }
.estado-sofia { font-size: 0.85rem; font-weight: 600; color: var(--gris-600); }
.estado-sofia--encendida { color: var(--verde); }
.resena-cabecera { display: flex; gap: 0.7rem; align-items: baseline; flex-wrap: wrap; font-size: 0.85rem; }
.resena-plataforma {
    background: var(--granate); color: #fff; border-radius: 999px;
    padding: 0.1rem 0.55rem; font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.resena-estrellas { color: var(--oro); letter-spacing: 0.1em; }
.resena-autor { font-weight: 700; color: var(--gris-800); }
.resena-fecha { color: var(--gris-400); font-size: 0.78rem; }
.resena-texto { margin: 0.6rem 0 0.9rem; color: var(--gris-800); line-height: 1.5; }
.resena-sin-texto { color: var(--gris-400); font-style: italic; }
.resena-responder label { display: block; font-size: 0.82rem; font-weight: 700; color: var(--gris-600); margin-bottom: 0.3rem; }
.resena-ia { color: var(--granate-700); font-weight: 400; font-style: italic; }
.resena-responder textarea {
    width: 100%; box-sizing: border-box; padding: 0.55rem 0.6rem;
    border-radius: 8px; border: 1px solid var(--gris-200);
    font-family: inherit; font-size: 0.9rem; line-height: 1.5; resize: vertical;
}
.resena-responder textarea:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px rgba(201,150,26,.2); }
.resena-acciones { margin-top: 0.6rem; }
.resena-ignorar { margin-top: 0.4rem; }

.resena-respondida { margin: 0.6rem 0 0; padding: 0.55rem 0.7rem; background: var(--verde-bg); border-radius: 8px; font-size: 0.88rem; color: var(--gris-800); }
.resena-tarjeta--negativa { border: 2px solid var(--rojo); }
.resena-negativa-nota { color: var(--rojo); margin: 0 0 0.5rem; }
.resena-antes { color: var(--rojo); font-size: 0.78rem; font-weight: 700; }
.resena-secundarias { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin-top: 0.4rem; }
.resena-secundarias form { margin: 0; }
.enlace-boton--secundario { color: var(--gris-400); }
.resena-sustituir { margin-top: 0.5rem; font-size: 0.85rem; }
.resena-sustituir summary { cursor: pointer; color: var(--gris-600); }
.barra-deshacer { margin: 0.6rem 0 0; padding: 0.45rem 0.7rem; background: var(--gris-100); border-radius: 8px; font-size: 0.88rem; }
.aviso-rojo { border: 1px solid var(--rojo); background: var(--rojo-bg); }
.aviso-resena { padding: 0.35rem 0; border-top: 1px solid rgba(164, 54, 44, .2); font-size: 0.9rem; }
.aviso-resena:first-of-type { border-top: 0; }
.reparto-estrellas { margin-bottom: 1rem; max-width: 420px; }
.reparto-fila { display: flex; align-items: center; gap: 0.5rem; margin: 0.2rem 0; font-size: 0.85rem; }
.reparto-etiqueta { width: 2rem; }
.reparto-barra { flex: 1; height: 10px; background: var(--gris-200); border-radius: 999px; overflow: hidden; }
.reparto-relleno { display: block; height: 100%; background: var(--oro); }
.reparto-relleno--baja { background: var(--rojo); }
.reparto-n { width: 2.5rem; text-align: right; color: var(--gris-600); }
.grafico-notas { width: 100%; max-width: 640px; height: auto; margin-bottom: 0.3rem; }
.grafico-guia { stroke: var(--gris-200); stroke-width: 1; }
.grafico-texto { fill: var(--gris-400); font-size: 11px; }
.grafico-acumulada { fill: none; stroke: var(--granate); stroke-width: 2.5; }
.grafico-mes { fill: var(--oro); }
.app-alerta {
    position: absolute; top: -4px; right: 22px; width: 22px; height: 22px; border-radius: 999px;
    background: #e53935; color: #fff; font-size: 0.8rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; border: 2px solid var(--fondo, #faf6ee);
}

/* Estadísticas de publicaciones de Instagram --------------------------- */
.post-ig-tarjeta {
    border: 1px solid var(--gris-200);
    border-radius: 12px;
    padding: 1rem;
    margin-top: 1rem;
    background: #fff;
}
.post-ig-mejor { border-color: var(--oro); box-shadow: 0 0 0 2px rgba(201,150,26,.15); }
.post-ig-cabecera { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; font-size: 0.85rem; }
.post-ig-trofeo { font-size: 1.1rem; }
.post-ig-tasa {
    margin-left: auto; font-weight: 700; color: var(--granate);
    background: var(--crema); border-radius: 999px; padding: 0.1rem 0.6rem; font-size: 0.8rem;
}
.post-ig-metricas { display: flex; gap: 0.9rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--gris-600); margin-top: 0.3rem; }
.post-ig-barra-fondo { margin-top: 0.6rem; height: 6px; border-radius: 999px; background: var(--gris-200); overflow: hidden; }
.post-ig-barra { height: 100%; background: linear-gradient(90deg, var(--oro), var(--granate)); border-radius: 999px; }

.analisis-resumen {
    margin: 0.8rem 0; padding: 0.9rem 1rem; background: var(--crema);
    border-left: 4px solid var(--oro); border-radius: 8px; font-size: 1rem; line-height: 1.5; color: var(--gris-800);
}
.analisis-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; margin: 1rem 0; }
.analisis-columnas h3, .bloque-informe > h3 { font-size: 0.95rem; margin-bottom: 0.4rem; color: var(--granate); }
.analisis-lista { margin: 0 0 0 1.2rem; padding: 0; line-height: 1.6; }
.analisis-lista li { margin-bottom: 0.4rem; }
.analisis-recomendaciones { font-weight: 500; }

/* Panel: barras de reseñas por mes */
.meses-resenas { display: flex; gap: 0.35rem; align-items: flex-end; overflow-x: auto; padding-bottom: 0.3rem; }
.mes-resena { flex: 0 0 42px; text-align: center; }
.mes-barra { background: var(--oro); border-radius: 4px 4px 0 0; margin: 0 auto; width: 26px; }
.mes-total { font-size: 0.72rem; font-weight: 700; color: var(--granate); margin-top: 0.2rem; }
.mes-etiqueta { font-size: 0.62rem; color: var(--gris-400); }

/* Franjas de aviso bajo la cabecera (todas las pantallas) y estado de las
   tareas automáticas en Admin → Salud del sistema */
.franja-aviso { padding: 0.6rem 1.5rem; font-size: 0.88rem; font-weight: 600; }
.franja-aviso a { color: inherit; margin-left: 0.5rem; }
.franja-roja { background: var(--rojo); color: #fff; }
.franja-local { background: var(--amarillo-bg); color: var(--amarillo); border-bottom: 1px solid var(--amarillo); }
.franja-tareas { background: var(--oro-050); color: var(--granate); border-bottom: 1px solid var(--oro); }
.estado-tarea { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.estado-tarea--verde { background: var(--verde-bg); color: var(--verde); }
.estado-tarea--ambar { background: var(--amarillo-bg); color: var(--amarillo); }
.estado-tarea--rojo { background: var(--rojo-bg); color: var(--rojo); }
.detalle-tecnico { color: var(--gris-400); font-size: 0.72rem; margin-top: 0.2rem; word-break: break-word; }

/* Avisos tras una acción (flash) */
.avisos { max-width: 1200px; margin: 1rem auto 0; padding: 0 1.5rem; display: grid; gap: 0.5rem; }
.aviso { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.7rem 1rem; border-radius: 8px; border-left: 4px solid; font-size: 0.92rem; line-height: 1.4; }
.aviso-ok { background: var(--verde-bg); color: var(--verde); }
.aviso-error { background: var(--rojo-bg); color: var(--rojo); }
.aviso-aviso { background: var(--amarillo-bg); color: var(--amarillo); }
.aviso-texto { flex: 1; }
.aviso-cerrar { background: none; border: 0; color: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 0.2rem; }

/* Botón mientras se envía su formulario */
button.cargando, input.cargando { opacity: 0.75; cursor: progress; }
.spinner { display: inline-block; width: 0.85em; height: 0.85em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -0.1em; animation: girar 0.7s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Páginas de error */
.pagina-error { max-width: 560px; margin: 3rem auto; text-align: center; }
.pagina-error h1 { margin-bottom: 0.8rem; }
.pagina-error p { color: var(--gris-600); margin-bottom: 1.4rem; }
.boton-volver { display: inline-block; background: var(--granate); color: #fff; padding: 0.6rem 1.2rem; border-radius: 8px; text-decoration: none; font-weight: 600; }
.boton-volver:hover { background: var(--oro); color: var(--granate-900); }

/* Login propio y usuarios */
.pagina-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.caja-login { background: white; border: 1px solid var(--gris-200); border-radius: 14px; padding: 2rem 1.75rem; width: 100%; max-width: 380px; }
.caja-login .logo-login { height: 40px; width: auto; display: block; margin: 0 auto 1rem; }
.caja-login h1 { font-size: 1.3rem; text-align: center; margin: 0 0 1.2rem; color: var(--granate); }
.caja-login form, .form-cuenta { display: flex; flex-direction: column; gap: 0.9rem; }
.form-cuenta { max-width: 420px; margin-bottom: 2rem; }
.caja-login label, .form-cuenta label { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 600; font-size: 0.88rem; color: var(--gris-600); }
.form-cuenta label.casilla { flex-direction: row; align-items: center; gap: 0.5rem; }
.caja-login input[type=text], .caja-login input[type=password],
.form-cuenta input[type=text], .form-cuenta input[type=password] {
    font: inherit; font-size: 1rem; padding: 0.6rem 0.7rem; border: 1px solid var(--gris-200); border-radius: 8px; background: white; color: var(--gris-800);
}
.caja-login button, .form-cuenta button {
    font: inherit; font-weight: 700; padding: 0.7rem 1rem; border: 0; border-radius: 8px; background: var(--granate); color: white; cursor: pointer;
}
.caja-login button:hover, .form-cuenta button:hover { background: var(--oro); }
.login-error { background: var(--rojo-bg); color: var(--rojo); border-radius: 8px; padding: 0.6rem 0.8rem; font-size: 0.9rem; }
.login-aviso { background: var(--verde-bg); color: var(--verde); border-radius: 8px; padding: 0.6rem 0.8rem; font-size: 0.9rem; }
.login-ayuda { color: var(--gris-400); font-size: 0.8rem; text-align: center; margin: 1.2rem 0 0; }
.caja-formulario { max-width: 520px; }
.usuario-sesion { display: flex; align-items: center; gap: 0.6rem; }
.usuario-sesion .form-salir { margin: 0; }
.usuario-sesion button {
    font: inherit; font-size: 0.85rem; font-weight: 600; background: transparent; color: rgba(243, 236, 220, .86);
    border: 1px solid rgba(243, 236, 220, .4); border-radius: 6px; padding: 0.2rem 0.6rem; cursor: pointer;
}
.usuario-sesion button:hover { color: var(--oro); border-color: var(--oro); }
.caja-temporal { background: var(--amarillo-bg); border: 1px solid var(--amarillo); border-radius: 10px; padding: 1rem 1.2rem; margin-bottom: 1.5rem; max-width: 640px; }
.caja-temporal p { margin: 0.3rem 0; }
.contrasena-temporal { font-family: ui-monospace, Menlo, monospace; font-size: 1.4rem; font-weight: 700; letter-spacing: 0.06em; color: var(--granate); }
.acciones-usuario { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.acciones-usuario form { margin: 0; }

/* Reseñas: QR de empleados y canales */
.mini-grafica { display: inline-flex; align-items: flex-end; gap: 2px; height: 24px; }
.mini-grafica span { display: inline-block; width: 5px; background: var(--oro); border-radius: 1px; }
.filtro-periodo, .form-codigo { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.8rem; }
.form-codigo input[type=text] { flex: 1; min-width: 12rem; }
.detalles-codigo { margin-top: 0.3rem; }
.detalles-codigo summary { cursor: pointer; color: var(--gris-600); font-size: 0.8rem; }
.detalles-codigo .form-codigo { margin: 0.4rem 0 0; }

.cabecera-email { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.acciones-email { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.plegable > summary { cursor: pointer; font-weight: 600; }
details.bloque-informe > summary { font-size: 1.1rem; }

/* Navegación: sección activa y que nada se salga por los lados en el móvil */
.topbar nav { flex-wrap: wrap; row-gap: 0.4rem; }
.topbar nav a.activa { color: var(--oro); }
.pestanas-grupo { overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.pestanas-grupo::-webkit-scrollbar { display: none; }

/* Listado: orden y paginación */
.orden-columna { text-decoration: none; color: var(--gris-400); margin-left: 0.2rem; }
.orden-columna:hover { color: var(--granate); }
.paginacion { display: flex; gap: 1rem; align-items: center; justify-content: center; margin: 1rem 0; color: var(--gris-600); font-size: 0.9rem; }
.paginacion a { color: var(--granate); font-weight: 700; text-decoration: none; padding: 0.4rem 0.9rem; border: 1px solid var(--gris-200); border-radius: 999px; background: white; }
.paginacion a:hover { border-color: var(--oro); }

/* Fechas en texto ("Navidad"): se ven, pero no cuentan como fecha */
.texto-fecha-vaga { border-bottom: 1px dashed var(--amarillo); color: var(--amarillo); }
.fecha-vaga { margin: -0.4rem 0 0.7rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: 0.8rem; }
.insignia-fecha-vaga { background: var(--amarillo-bg); color: var(--amarillo); border-radius: 999px; padding: 0.1rem 0.6rem; font-weight: 600; }
.campo-fecha > .enlace-boton { display: block; margin: -0.4rem 0 0.7rem; font-size: 0.8rem; }

/* Ficha: barra fija con Guardar, estado y Volver */
.barra-ficha {
    position: sticky; top: 3.6rem; z-index: 9;
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
    background: var(--gris-100); padding: 0.6rem 0; margin: -0.5rem 0 0.5rem;
    border-bottom: 1px solid var(--gris-200);
}
.barra-ficha .volver { color: var(--gris-600); text-decoration: none; font-size: 0.9rem; }
.barra-ficha .volver:hover { color: var(--granate); }
.barra-ficha-titulo { font-weight: 700; color: var(--granate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }
.barra-ficha-cambios { color: var(--amarillo); font-weight: 700; font-size: 0.85rem; }
.barra-ficha .boton-guardar { margin-left: auto; }
.plegable-autorrelleno { margin-bottom: 1rem; }
.plegable-autorrelleno > summary { cursor: pointer; color: var(--granate); font-weight: 600; margin-bottom: 0.5rem; }

/* Llamar, WhatsApp y email de un toque */
.acciones-contacto { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0.4rem 0; }
.acciones-contacto--campo { margin: -0.4rem 0 0.7rem; }
.boton-contacto {
    display: inline-block; text-decoration: none; font-size: 0.8rem; font-weight: 700;
    color: var(--granate); background: var(--oro-050); border: 1px solid var(--gris-200);
    border-radius: 999px; padding: 0.2rem 0.7rem; white-space: nowrap;
}
.boton-contacto:hover { border-color: var(--oro); }

/* Inicio: pendientes por urgencia */
.titulo-urgencia { font-size: 1rem; margin: 1rem 0 0.4rem; color: var(--gris-800); }
.titulo-urgencia--rojo { color: var(--rojo); }
.titulo-urgencia--ambar { color: var(--amarillo); }
.tabla-scroll--corta { max-height: 40vh; }
table.tabla-informe tr.fila-urgencia--rojo, table.tabla-informe tr.fila-urgencia--rojo:nth-child(even) { background: var(--rojo-bg); }
table.tabla-informe tr.fila-urgencia--ambar, table.tabla-informe tr.fila-urgencia--ambar:nth-child(even) { background: var(--amarillo-bg); }
tr[data-href] { cursor: pointer; }

@media (pointer: coarse) {
    .solo-escritorio { display: none; }
    /* Zona de toque de al menos ~24 px sin mover la tabla (márgenes negativos). */
    a.cifra { display: inline-block; padding: 0.4rem 0.65rem; margin: -0.4rem -0.65rem; }
}
@media (max-width: 700px) {
    .tabla-scroll { max-height: none; }
    .barra-ficha {
        position: fixed; top: auto; bottom: 0; left: 0; right: 0; margin: 0;
        padding: 0.6rem 1rem; border-top: 1px solid var(--gris-200); border-bottom: none;
        background: white; box-shadow: 0 -4px 12px rgba(0, 0, 0, .06);
    }
    .barra-ficha-titulo { max-width: 14ch; }
    main:has(.barra-ficha) { padding-bottom: 5rem; }
    /* Que la barra y el autorrelleno no se salgan de la pantalla. */
    .barra-ficha { width: auto; max-width: 100vw; box-sizing: border-box; }
    .barra-ficha > * { min-width: 0; }
    .autorrelleno-archivo, .autorrelleno-archivo input { max-width: 100%; min-width: 0; box-sizing: border-box; }
}

/* ===================================================================
   Componentes comunes: botones, campos, secciones, pestañas y avisos
   =================================================================== */
.badge[data-estado="NC"], .badge[data-estado="Completos"], .badge[data-estado="Completos/Rechazados"] {
    background: var(--crema); color: var(--granate-700); box-shadow: inset 0 0 0 1px var(--gris-200);
}
.badge[title] { cursor: help; }

a { color: var(--granate); }
a:hover { color: var(--granate-700); }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
abbr[title] { text-decoration: underline dotted; cursor: help; }

/* :where() deja la especificidad a cero: los estilos propios de cada formulario mandan */
:where(main) :where(input:not([type=checkbox], [type=radio], [type=file], [type=hidden], [type=submit]), select, textarea) {
    font-family: inherit; font-size: 0.92rem; color: var(--gris-800);
    background: white; border: 1px solid var(--gris-200); border-radius: 8px;
    padding: 0.45rem 0.6rem; max-width: 100%;
}
:where(main) :where(textarea) { width: 100%; line-height: 1.45; }
:where(main) :where(input, select, textarea):focus {
    outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px rgba(201, 150, 26, .25);
}
:where(main) :where(input[type=checkbox], input[type=radio]) { accent-color: var(--granate); }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
    font-family: inherit; font-size: 0.9rem; font-weight: 700; line-height: 1.2;
    padding: 0.5rem 1.1rem; border-radius: 999px; border: 1px solid transparent;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    background: var(--oro-050); color: var(--granate); border-color: var(--oro);
}
.btn:hover { background: var(--oro); color: var(--granate-900); }
.btn:disabled, .btn[aria-disabled=true] { opacity: .55; cursor: not-allowed; }
.btn--primario { background: var(--oro); color: var(--granate-900); border-color: var(--oro); }
.btn--primario:hover { background: #B48514; color: var(--granate-900); border-color: #B48514; }
.btn--secundario { background: white; color: var(--granate); border-color: var(--gris-200); }
.btn--secundario:hover { background: white; color: var(--granate); border-color: var(--oro); }
.btn--peligro { background: white; color: var(--rojo); border-color: var(--rojo); }
.btn--peligro:hover { background: var(--rojo-bg); color: var(--rojo); }
.btn--enlace {
    background: none; border-color: transparent; color: var(--granate);
    text-decoration: underline; padding-left: 0.2rem; padding-right: 0.2rem; font-weight: 600;
}
.btn--enlace:hover { background: none; color: var(--granate-700); }
.btn--pequeno { font-size: 0.8rem; padding: 0.3rem 0.75rem; }
.btn .icono { width: 1em; height: 1em; }

.icono { width: 1.1em; height: 1.1em; vertical-align: -0.18em; flex: none; }

.seccion { background: white; border: 1px solid var(--gris-200); border-radius: 12px; padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; }
.seccion-cabecera {
    display: flex; justify-content: space-between; align-items: center;
    gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.75rem;
}
.seccion-cabecera h1, .seccion-cabecera h2, .seccion-cabecera h3 { margin: 0; }
.acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.acciones form { margin: 0; }
.fila-campos { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin: 0.5rem 0; }
.fila-campos > input:not([type=checkbox]), .fila-campos > select { flex: 1 1 180px; }
.formulario-apilado { display: flex; flex-direction: column; gap: 0.6rem; max-width: 640px; }
.formulario-apilado label { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 600; font-size: 0.88rem; color: var(--gris-600); }
.formulario-apilado label.casilla { flex-direction: row; align-items: center; gap: 0.5rem; font-weight: 500; }
.sin-margen { margin: 0; }
.mt-1 { margin-top: 1rem; }
.texto-suave { color: var(--gris-600); font-size: 0.88rem; }

.pestanas-grupo--segundo { margin-top: 0.6rem; }
.segmentado { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0.6rem 0 1rem; }
.segmentado a {
    text-decoration: none; font-size: 0.85rem; font-weight: 600; color: var(--gris-600);
    padding: 0.3rem 0.85rem; border-radius: 999px; border: 1px solid var(--gris-200); background: white;
}
.segmentado a:hover { color: var(--granate); border-color: var(--oro); }
.segmentado a.activa { background: var(--granate); color: white; border-color: var(--granate); }
.segmentado a .n { font-size: 0.75rem; opacity: .85; margin-left: 0.25rem; }

.estado-vacio {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center;
    padding: 1.5rem 1rem; color: var(--gris-600); background: white;
    border: 1px dashed var(--gris-200); border-radius: 12px; margin: 0.5rem 0 1rem;
}
.estado-vacio .icono { width: 1.8rem; height: 1.8rem; color: var(--oro-soft); }
.estado-vacio p { margin: 0; }

.aviso--ok { background: var(--verde-bg); color: var(--verde); }
.aviso--aviso { background: var(--amarillo-bg); color: var(--amarillo); }
.aviso--error { background: var(--rojo-bg); color: var(--rojo); }
.aviso--ok, .aviso--aviso, .aviso--error { border-radius: 10px; padding: 0.6rem 0.9rem; margin: 0 0 1rem; }

.aviso-config { background: white; border: 1px solid var(--gris-200); border-left: 4px solid var(--oro); border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.aviso-config > p:first-child { margin-top: 0; font-weight: 600; color: var(--granate); }
.detalle-tecnico-plegable { margin-top: 0.6rem; font-size: 0.85rem; color: var(--gris-600); }
.detalle-tecnico-plegable summary { cursor: pointer; font-weight: 600; }

.ia-pausada-texto { font-size: 0.78rem; font-weight: 700; color: var(--amarillo); margin-left: 0.25rem; }

/* Barra: nombre de la app, menú propio y selector de apps */
.topbar-izquierda { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.topbar .app-actual {
    color: var(--oro); font-family: var(--display); font-weight: 700; font-size: 1.25rem;
    text-decoration: none; white-space: nowrap; padding-left: 0.9rem; border-left: 1px solid rgba(243, 236, 220, .25);
}
.selector-apps { position: relative; }
.selector-apps > summary {
    list-style: none; cursor: pointer; color: rgba(243, 236, 220, .86); display: flex; align-items: center;
    padding: 0.3rem; border-radius: 8px;
}
.selector-apps > summary::-webkit-details-marker { display: none; }
.selector-apps > summary:hover, .selector-apps[open] > summary { color: var(--oro); background: rgba(255, 255, 255, .06); }
.selector-apps > summary .icono { width: 1.35rem; height: 1.35rem; }
.selector-apps-panel {
    position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 20;
    display: grid; grid-template-columns: repeat(3, 6.2rem); gap: 0.35rem;
    background: white; border: 1px solid var(--gris-200); border-radius: 12px; padding: 0.6rem;
    box-shadow: 0 10px 30px rgba(42, 36, 34, .18);
}
.topbar nav .selector-apps-panel a {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    color: var(--gris-800); font-size: 0.78rem; font-weight: 600; padding: 0.6rem 0.3rem;
    border-radius: 10px; text-align: center;
}
.topbar nav .selector-apps-panel a:hover, .topbar nav .selector-apps-panel a.activa { background: var(--oro-050); color: var(--granate); }
.selector-apps-panel .icono { width: 1.5rem; height: 1.5rem; color: var(--granate); }
.selector-apps-panel .contador-app {
    position: absolute; top: 0.25rem; right: 0.35rem; background: var(--rojo); color: white;
    font-size: 0.68rem; font-weight: 800; border-radius: 999px; padding: 0 0.35rem; line-height: 1.3rem; min-width: 1.3rem;
}
.variable-plegada > summary { cursor: pointer; color: var(--gris-600); font-weight: 600; }

@media (max-width: 700px) {
    .topbar { padding: 0.6rem 1rem; }
    .topbar-izquierda { width: 100%; justify-content: space-between; }
    .topbar nav { gap: 0.4rem 0.9rem; }
    .topbar nav a { font-size: 0.92rem; }
    .selector-apps { position: static; }
    .selector-apps-panel { left: 1rem; right: 1rem; top: calc(100% - 0.25rem); grid-template-columns: repeat(3, 1fr); }
    main { padding: 1rem; }
    .seccion { padding: 0.9rem 1rem; }
    .seccion-cabecera .acciones { width: 100%; }

    /* Listado en tarjetas: cliente, estado, fecha del evento, tipo y teléfono */
    .tabla-scroll:has(table.tabla-leads) { border: none; background: none; overflow: visible; }
    table.tabla-leads { table-layout: auto; width: 100% !important; }
    table.tabla-leads colgroup, table.tabla-leads thead { display: none; }
    table.tabla-leads, table.tabla-leads tbody { display: block; }
    table.tabla-leads tbody tr {
        display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.6rem;
        background: white; border: 1px solid var(--gris-200); border-radius: 12px;
        padding: 0.75rem 0.9rem; margin-bottom: 0.6rem;
    }
    table.tabla-leads tbody td { display: none; padding: 0; border: none; width: auto !important; white-space: normal; }
    table.tabla-leads tbody td[data-movil] { display: block; }
    table.tabla-leads tbody td[data-movil="cliente"] { font-weight: 700; color: var(--granate); grid-column: 1; }
    table.tabla-leads tbody td[data-movil="estado"] { grid-column: 2; grid-row: 1; text-align: right; }
    table.tabla-leads tbody td[data-movil="fecha"], table.tabla-leads tbody td[data-movil="tipo"],
    table.tabla-leads tbody td[data-movil="importe"],
    table.tabla-leads tbody td[data-movil="telefono"] { grid-column: 1 / -1; font-size: 0.85rem; color: var(--gris-600); }
    table.tabla-leads tbody td[data-movil="abrir"] { grid-column: 1 / -1; text-align: right; }
}

/* Anchos iniciales de las columnas del listado (el usuario los cambia arrastrando).
   Suman unos 1.200 px: en un portátil de 1366 px se ve hasta el Importe sin
   moverse a la derecha (en una pantalla mayor la tabla se estira). */
table.tabla-leads th[data-col="abrir"] { width: 28px; }
table.tabla-leads th[data-col="cliente"] { width: 190px; }
table.tabla-leads th[data-col="numero_presupuesto"], table.tabla-leads th[data-col="comercial"] { width: 92px; }
table.tabla-leads th[data-col="medio"] { width: 85px; }
table.tabla-leads th[data-col="tipo_evento"] { width: 122px; }
table.tabla-leads th[data-col="categoria"] { width: 90px; }
table.tabla-leads th[data-col="invitados"] { width: 80px; }
table.tabla-leads td[data-campo="n_cestas"] { white-space: nowrap; }
table.tabla-leads th[data-col="fecha_solicitud"], table.tabla-leads th[data-col="fecha_evento"] { width: 86px; }
table.tabla-leads th[data-col="estado"] { width: 118px; }
table.tabla-leads th[data-col="importe_sin_iva"] { width: 100px; }
table.tabla-leads th[data-col="eliminar"] { width: 32px; }
/* Cabeceras y celdas un poco más compactas para que quepan más columnas */
table.tabla-leads th { padding: 0.6rem 0.4rem 0.6rem 0.55rem; letter-spacing: 0.04em; }
table.tabla-leads td { padding: 0.55rem 0.55rem; }
table.tabla-leads .orden-columna { margin-left: 0; padding: 0 0.1rem; }
@media (min-width: 701px) {
    table.tabla-leads td[data-campo="invitados"], table.tabla-leads td[data-campo="n_cestas"], table.tabla-leads td[data-campo="importe_sin_iva"],
    table.tabla-leads th[data-col="invitados"], table.tabla-leads th[data-col="importe_sin_iva"] { text-align: right; }
}
/* Ventana estrecha (sin llegar a móvil): se ocultan primero las columnas
   menos importantes; Cliente, Estado e Importe se ven siempre. */
@media (min-width: 701px) and (max-width: 1200px) {
    table.tabla-leads th[data-col="categoria"], table.tabla-leads td[data-campo="categoria"],
    table.tabla-leads th[data-col="invitados"], table.tabla-leads td[data-campo="invitados"], table.tabla-leads td[data-campo="n_cestas"] { display: none; }
}
@media (min-width: 701px) and (max-width: 1120px) {
    table.tabla-leads th[data-col="medio"], table.tabla-leads td[data-campo="medio"] { display: none; }
}
@media (min-width: 701px) and (max-width: 1020px) {
    table.tabla-leads th[data-col="fecha_solicitud"], table.tabla-leads td[data-campo="fecha_solicitud"],
    table.tabla-leads th[data-col="comercial"], table.tabla-leads td[data-campo="comercial"] { display: none; }
}
@media (min-width: 701px) and (max-width: 860px) {
    table.tabla-leads th[data-col="numero_presupuesto"], table.tabla-leads td[data-campo="numero_presupuesto"] { display: none; }
}
.solo-movil { display: none; }
@media (max-width: 700px) {
    span.solo-movil { display: inline; }
    table.tabla-leads tbody td[data-movil="abrir"] { grid-row: 6; }
    table.tabla-leads tbody td[data-movil="abrir"] a { font-weight: 700; text-decoration: none; }
    table.tabla-leads tbody td.vacio { display: block; grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    table.tabla-leads tbody td[data-movil="fecha"]::before { content: "Fecha del evento: "; }
    table.tabla-leads tbody td[data-movil="tipo"]::before { content: "Tipo: "; }
    table.tabla-leads tbody td[data-movil="importe"]::before { content: "Importe sin IVA: "; }
}

.en-linea { display: inline; }
/* Nota de un campo de la ficha, pegada a él (no parece del recuadro entero). */
.nota-campo { margin-top: -0.35rem; }
tr.fila-destacada td { font-weight: 700; }
.titulo-bloque { margin-bottom: 0.4rem; }
.tabla-scroll--margen { margin-bottom: 1rem; }
.formulario-apilado > button { align-self: flex-start; }
.campo-bloque { display: block; margin: 0.6rem 0; }
.campo-bloque > input, .campo-bloque > select { display: block; width: 100%; max-width: 28rem; margin-top: 0.25rem; }
.casilla-linea { display: block; font-weight: normal; margin: 0.15rem 0; }
.campo-bloque > textarea { display: block; width: 100%; max-width: 40rem; margin-top: 0.25rem; }
/* /apollo, paso 3: «Reservar al menos N plazas… de más de X empleados», en una sola frase. */
.campo-bloque > input.campo-numero-corto { display: inline-block; width: 6rem; margin: 0 0.25rem; }
.campo-bloque > .nota-bajo-campo { display: block; margin-top: 0.25rem; }
.badge.badge-grande { background: var(--amarillo-bg); color: var(--amarillo); }
fieldset.familia-cargo { margin: 0.8rem 0; padding: 0.4rem 0.9rem; border: 1px solid var(--gris-200); border-radius: 6px; }
#tabla-tramos select { max-width: 11rem; }
.mt-pequeno { margin-top: 0.3rem; }
.lista-estrecha { max-width: 640px; }
.app-icono { color: white; }
.app-icono--resenas { color: var(--granate-900); }
.app-icono .icono { width: 2.4rem; height: 2.4rem; }

/* Año hasta la fecha */
.pestanas-excel { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.pestanas-excel::-webkit-scrollbar { display: none; }
.pestanas-excel .pestana-excel { white-space: nowrap; }
.filtros-ytd { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 0.9rem; margin-bottom: 1.25rem; font-size: 0.85rem; color: var(--gris-600); }
.filtros-ytd label { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 600; }
.filtros-ytd input, .filtros-ytd select { padding: 0.35rem 0.6rem; border-radius: 8px; border: 1px solid var(--gris-200); font-family: inherit; font-size: 0.9rem; }
.separador-ytd { padding-bottom: 0.45rem; }
.tarjetas-ytd { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.tarjetas-ytd--compactas { margin-bottom: 0.75rem; }
.tarjeta-ytd .etiqueta { margin: 0 0 0.35rem; }
.tarjeta-ytd .anterior-ytd { color: var(--gris-600); font-size: 0.82rem; margin-top: 0.2rem; font-variant-numeric: tabular-nums; }
.variacion-ytd { font-size: 0.85rem; margin-top: 0.35rem; font-variant-numeric: tabular-nums; }
.variacion-ytd.igual-ytd { color: var(--gris-600); font-weight: 700; }
.variacion-ytd .sin-base-ytd { font-weight: 400; color: var(--gris-600); }
.nota-ytd ul { margin: 0; padding-left: 1.1rem; font-size: 0.85rem; color: var(--gris-800); line-height: 1.5; }
@media (max-width: 600px) {
    .tarjetas-ytd { grid-template-columns: 1fr 1fr; }
    .tarjeta-ytd .valor { font-size: 1.3rem; }
}

/* Tareas de los leads: bloque «Seguimiento» de la ficha */
/* .form-ficha label pone display:block y .nueva-tarea display:grid: sin esto, `hidden` no los ocultaría. */
.form-ficha [data-solo-cierre][hidden], .form-ficha [data-campo-cantidad][hidden], .nueva-tarea[hidden], .atajos-fecha[hidden] { display: none; }
.lista-tareas { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.lista-tareas .tarea {
    display: flex; flex-direction: column; gap: 0.2rem; padding: 0.6rem 0.8rem; margin-bottom: 0.5rem;
    background: white; border: 1px solid var(--gris-200); border-left: 4px solid var(--gris-200); border-radius: 8px;
}
.lista-tareas .tarea--vencida { border-left-color: var(--rojo); background: var(--rojo-bg); }
.lista-tareas .tarea--hoy { border-left-color: var(--oro); background: var(--amarillo-bg); }
.tarea-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
.tarea-texto { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.fecha-tarea { font-weight: 700; color: var(--granate); font-size: 0.88rem; }
.fecha-vencida, .fecha-tarea--vencida { color: var(--rojo); }
.fecha-tarea--hoy { color: var(--amarillo); }
.tarea-hecha .tarea-texto { opacity: 0.6; }
.tarea-hecha .fecha-tarea { text-decoration: line-through; }
.comentario-tarea { margin: 0.1rem 0 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 0.88rem; color: var(--gris-800); }
.resultado-tarea { margin: 0.1rem 0 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 0.88rem; color: var(--verde); }
.tipo-tarea {
    display: inline-block; padding: 0.05rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.02em; background: var(--gris-badge-bg); color: var(--gris-badge-fg); white-space: nowrap;
}
.tipo-tarea--llamada { background: var(--azul-bg); color: var(--granate); }
.tipo-tarea--whatsapp { background: var(--verde-bg); color: var(--verde); }
.tipo-tarea--correo { background: var(--crema); color: var(--granate-700); }
.tipo-tarea--reunion { background: var(--granate); color: white; }
.tipo-tarea--nota { background: white; color: var(--gris-600); border: 1px dashed var(--gris-200); }
.acciones-tarea { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.35rem; align-items: flex-start; }
.accion-tarea > summary { list-style: none; }
.accion-tarea > summary::-webkit-details-marker { display: none; }
.accion-tarea[open] { flex-basis: 100%; }
.panel-accion-tarea {
    margin-top: 0.45rem; padding: 0.7rem 0.75rem 0.4rem; border: 1px solid var(--gris-200); border-radius: 8px; background: var(--oro-050);
}
.panel-accion-tarea p { margin: 0 0 0.6rem; font-size: 0.88rem; }
.panel-accion-tarea > .btn { margin-bottom: 0.4rem; }
.campos-accion-tarea { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 0.8rem; }
.subtitulo-accion { font-weight: 700; color: var(--granate); font-size: 0.85rem; }
.opcional { font-weight: 400; color: var(--gris-400); font-size: 0.78rem; }
.campo-fecha-tarea { margin-bottom: 0.7rem; }
.form-ficha .campo-fecha-tarea label { margin-bottom: 0; }
.atajos-fecha { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.3rem 0 0.1rem; }
.chip-fecha {
    font: inherit; font-size: 0.78rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--gris-200); background: white; color: var(--granate);
}
.chip-fecha:hover, .chip-fecha.activo { border-color: var(--oro); background: var(--oro); color: var(--granate-900); }
.etiqueta-tarea { display: block; font-size: 0.85rem; font-weight: 600; color: var(--gris-600); margin-bottom: 0.3rem; }
.chips-tipo { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.7rem; }
.form-ficha label.chip-tipo { display: inline-block; margin: 0; position: relative; }
.form-ficha .chip-tipo input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; }
.chip-tipo span {
    display: inline-block; padding: 0.3rem 0.85rem; border-radius: 999px; cursor: pointer; font-size: 0.85rem;
    border: 1px solid var(--gris-200); background: white; color: var(--granate);
}
.chip-tipo input:checked + span { background: var(--granate); border-color: var(--granate); color: white; }
.chip-tipo input:focus-visible + span { outline: 3px solid rgba(201,150,26,.45); outline-offset: 1px; }
.historial-tareas { margin: 0.25rem 0 0.9rem; }
.historial-tareas > summary { cursor: pointer; color: var(--gris-600); font-weight: 600; font-size: 0.88rem; margin-bottom: 0.4rem; }
.lista-historial .tarea { background: var(--gris-100); }
.anotar-tarea { margin: 0 0 1rem; }
.anotar-fila { display: flex; gap: 0.5rem; align-items: flex-end; }
.anotar-fila textarea { flex: 1; }
.seguimiento-estado:empty { display: none; }
.seguimiento-estado { font-size: 0.85rem; color: var(--verde); font-weight: 600; margin-bottom: 0.4rem; }
.form-ficha .campo-crear-tarea { max-width: 14rem; }
.nueva-tarea {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1rem;
    padding: 0.75rem 0.75rem 0; border: 1px solid var(--gris-200); border-radius: 8px; background: var(--oro-050);
}
.nueva-tarea .campo-ancho, .nueva-tarea .nota-tarea { grid-column: 1 / -1; }
.nueva-tarea .nota-tarea { margin: 0 0 0.75rem; }
/* Pantalla /tareas: grupos (Vencidas, Hoy...) y, en el móvil, tarjetas con «Hecha» arriba */
.cabecera-tareas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; }
.filtro-persona { display: flex; align-items: center; gap: 0.4rem; }
.filtro-persona label { font-size: 0.85rem; font-weight: 600; color: var(--gris-600); }
.grupo-tareas { margin-top: 1.4rem; }
.grupo-tareas h2 { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.05rem; margin: 0 0 0.5rem; color: var(--granate); }
.grupo-tareas h2 .n { font-size: 0.78rem; font-weight: 700; background: var(--gris-badge-bg); color: var(--gris-badge-fg); border-radius: 999px; padding: 0 0.5rem; }
.grupo-tareas--vencidas h2 .n { background: var(--rojo-bg); color: var(--rojo); }
.grupo-tareas--hoy h2 .n { background: var(--amarillo-bg); color: var(--amarillo); }
details.grupo-tareas > summary { cursor: pointer; list-style: revert; }
details.grupo-tareas > summary h2 { margin-bottom: 0.3rem; }
table.tabla-tareas td { vertical-align: top; }
table.tabla-tareas td.fecha-tarea { white-space: nowrap; }
table.tabla-tareas td.comentario-tarea { min-width: 14rem; max-width: 36rem; margin: 0; }
table.tabla-tareas td .resultado-tarea { display: block; }
/* Las mismas columnas en todos los grupos (cada grupo es su propia tabla). */
@media (min-width: 701px) {
    table.tabla-tareas { table-layout: fixed; width: 100%; }
    table.tabla-tareas th:nth-child(1) { width: 8.5rem; }
    table.tabla-tareas th:nth-child(2) { width: 18%; }
    table.tabla-tareas th:nth-child(3) { width: 7rem; }
    table.tabla-tareas th:nth-child(4) { width: 16rem; }
    table.tabla-tareas th:nth-child(5), table.tabla-tareas th:nth-child(6) { width: 9rem; }
    table.tabla-tareas td { overflow-wrap: anywhere; }
    table.tabla-tareas td.fecha-tarea { white-space: normal; }
    table.tabla-tareas td.comentario-tarea { min-width: 0; max-width: none; }
    table.tabla-tareas tr.tarea-fila--vencida td[data-movil="accion"] { box-shadow: inset 4px 0 0 var(--rojo); }
    table.tabla-tareas tr.tarea-fila--hoy td[data-movil="accion"] { box-shadow: inset 4px 0 0 var(--oro); }
}
.form-reasignar { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.form-reasignar select { max-width: 11rem; }
@media (max-width: 700px) {
    .tabla-scroll:has(table.tabla-tareas) { border: none; background: none; overflow: visible; }
    table.tabla-tareas, table.tabla-tareas tbody { display: block; width: 100%; }
    table.tabla-tareas thead { display: none; }
    table.tabla-tareas tbody tr {
        display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.7rem; align-items: start;
        background: white; border: 1px solid var(--gris-200); border-left: 4px solid var(--gris-200);
        border-radius: 12px; padding: 0.7rem 0.8rem; margin-bottom: 0.6rem;
    }
    table.tabla-tareas tbody tr.tarea-fila--vencida { border-left-color: var(--rojo); }
    table.tabla-tareas tbody tr.tarea-fila--hoy { border-left-color: var(--oro); }
    table.tabla-tareas tbody td { display: block; padding: 0; border: none; white-space: normal; min-width: 0; max-width: none; }
    table.tabla-tareas tr td[data-movil="accion"] { grid-column: 1; grid-row: 1 / span 2; }
    table.tabla-tareas td[data-movil="cliente"] { grid-column: 2; font-weight: 700; color: var(--granate); }
    table.tabla-tareas td[data-movil="tipo"], table.tabla-tareas td[data-movil="fecha"] { grid-column: 2; font-size: 0.85rem; }
    table.tabla-tareas td.fecha-tarea { white-space: normal; }
    table.tabla-tareas td[data-movil="para"], table.tabla-tareas td[data-movil="de"],
    table.tabla-tareas td[data-movil="comentarios"] { grid-column: 1 / -1; font-size: 0.85rem; color: var(--gris-600); }
    table.tabla-tareas td[data-movil="para"]::before { content: "Para: "; font-weight: 600; }
    table.tabla-tareas td[data-movil="de"]::before { content: "De: "; font-weight: 600; }
    table.tabla-tareas td[data-movil="comentarios"] { color: var(--gris-800); white-space: pre-line; }
    .form-reasignar select { max-width: 100%; }
}
.filtros input.filtro-encargado { flex: 0 1 150px; }

/* App Calendario: rejilla del mes (lunes a domingo); en el móvil, lista por días */
.calendario-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.calendario-cabecera h1 { margin: 0; }
.calendario-nav { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.calendario-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 1rem; margin: 0.9rem 0 0.6rem; }
.calendario-filtros label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; font-weight: 600; color: var(--gris-600); }
.calendario-filtros label.casilla-calendario { flex-direction: row; align-items: center; gap: 0.35rem; padding-bottom: 0.45rem; }
.leyenda-calendario { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.6rem; }
.leyenda-calendario .chip-cal { display: inline-block; }
.calendario-rejilla {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    border-top: 1px solid var(--gris-200); border-left: 1px solid var(--gris-200); background: white;
}
.cal-dia-semana {
    padding: 0.4rem 0.5rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--gris-600); background: var(--gris-100); border-right: 1px solid var(--gris-200); border-bottom: 1px solid var(--gris-200);
}
.cal-dia {
    min-height: 7.5rem; min-width: 0; padding: 0.35rem 0.4rem 0.5rem; display: flex; flex-direction: column; gap: 0.2rem;
    border-right: 1px solid var(--gris-200); border-bottom: 1px solid var(--gris-200);
}
.cal-dia--fuera { background: var(--gris-100); }
.cal-dia--fuera .cal-num { color: var(--gris-400); }
.cal-dia--hoy { box-shadow: inset 0 0 0 2px var(--oro); background: var(--oro-050); }
.cal-num { align-self: flex-start; font-weight: 700; font-size: 0.85rem; color: var(--granate); min-width: 1.6rem; text-align: center; border-radius: 999px; padding: 0.05rem 0.3rem; }
.cal-dia--hoy .cal-num { background: var(--oro); color: var(--granate-900); }
.cal-fecha-larga, .cal-nada { display: none; }
.chip-cal {
    display: block; font-size: 0.75rem; line-height: 1.3; padding: 0.15rem 0.4rem; border-radius: 5px; text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 3px solid currentColor;
}
.chip-cal:hover { filter: brightness(0.96); text-decoration: underline; }
.chip-cal-tipo { font-weight: 700; }
.chip-cal-quien { opacity: 0.85; }
.chip-persona-0 { background: #E2EEF8; color: #1F4E79; }
.chip-persona-1 { background: #E6F2EA; color: #2F6B4F; }
.chip-persona-2 { background: #EFE6F6; color: #5B3A7A; }
.chip-persona-3 { background: #FBF1DC; color: #7A4F00; }
.chip-persona-4 { background: #E0F1F1; color: #1E5F5F; }
.chip-persona-5 { background: #F3E6DC; color: #6A3A1F; }
.chip-persona-6 { background: #EEF0DC; color: #555B12; }
.chip-persona-7 { background: #EDEBE6; color: #4A4540; }
/* Vencida sin hacer: en rojo, sea de quien sea. */
.chip-cal--vencida { background: var(--rojo); color: white; border-left-color: var(--granate-900); }
.chip-cal--hecha { text-decoration: line-through; opacity: 0.6; }
.chip-evento { background: white; color: var(--granate); border: 1px dashed var(--oro); border-left: 3px solid var(--oro); font-weight: 600; }
.cal-vacio { margin-top: 1rem; }
@media (max-width: 700px) {
    .calendario-rejilla { display: block; border: none; background: none; }
    .cal-dia-semana, .cal-dia--fuera, .cal-dia--sin-nada:not(.cal-dia--hoy) { display: none; }
    .cal-dia { min-height: 0; border: 1px solid var(--gris-200); border-radius: 10px; margin-bottom: 0.5rem; padding: 0.6rem 0.75rem; background: white; }
    .cal-dia--hoy { background: var(--oro-050); }
    .cal-num { display: none; }
    .cal-fecha-larga { display: block; font-weight: 700; color: var(--granate); font-size: 0.9rem; margin-bottom: 0.15rem; }
    .cal-nada { display: block; font-size: 0.85rem; color: var(--gris-600); }
    .chip-cal { white-space: normal; font-size: 0.85rem; padding: 0.3rem 0.5rem; }
}

/* Reseñas por locales */
.etiqueta-local { display: inline-block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gris-600); background: var(--gris-200); border-radius: 999px; padding: 0.1rem 0.55rem; vertical-align: middle; }
.form-mover-local { display: flex; gap: 0.4rem; align-items: center; margin-top: 0.3rem; }
.form-mover-local select { font-size: 0.8rem; }
.fila-local { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.4rem 0; border-bottom: 1px solid var(--gris-200); }
.fila-local .form-local { flex: 1; margin: 0; }
.fila-local--inactiva { opacity: 0.6; }
.form-codigo input.campo-corto { flex: 0 1 9rem; min-width: 7rem; }
.tabla-locales tfoot th { border-top: 2px solid var(--gris-200); }
.variacion { font-weight: 600; white-space: nowrap; color: var(--gris-600); }
.variacion--sube { color: var(--verde); }
.variacion--baja { color: var(--rojo); }
.resena-local { background: var(--gris-200); color: var(--gris-800); border-radius: 999px; padding: 0.1rem 0.55rem; font-size: 0.72rem; font-weight: 600; }
.filtro-local { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0.6rem 0; font-size: 0.85rem; }

/* Apollo → Búsqueda de empresas: los cuatro pasos, con su número en un círculo */
.paso-cabecera { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.5rem; }
.paso-cabecera h2 { margin: 0.15rem 0 0; }
.paso-numero {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: 50%;
    background: var(--granate); color: var(--oro-050); border: 2px solid var(--oro);
    font-weight: 700; font-size: 1.1rem; line-height: 1;
}
.paso-estado { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--gris-600); }
.paso-estado--ok { color: var(--verde); font-weight: 600; }
.paso-estado--falta { color: var(--rojo); font-weight: 600; }
.acciones-paso { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0; }
.btn--grande { font-size: 1rem; padding: 0.65rem 1.25rem; }
#ajustes-avanzados { margin-top: 1rem; }