/* =====================================================================
   CRM Green Plus Solutions — sistema de diseño
   Estructura extraída del boceto configuracion_comisiones_green_plus.html.

   Paleta cálida alineada con la imagen del sector energético en el que opera
   Green Plus Solutions. La MARCA no cambia: el nombre, el logotipo y la
   identidad siguen siendo de Green Plus, que es quien vende. Solo cambia el
   color, para que la herramienta que ve el cliente en la tablet resulte
   coherente con la energía que se le está ofreciendo.

   Al dejar de ser verde el color principal, el verde queda LIBRE para su uso
   semántico: confirmado, activo, al alza. Antes se confundía con la marca.
   ===================================================================== */

:root {
    --bg-main: #F2F7FB;
    --bg-main-soft: #EAF3FA;
    --bg-sidebar: #F8FAFC;
    --bg-card: #FFFFFF;
    --bg-table-header: #F3F7FA;
    --bg-hover: #EEF5FA;
    --blue-primary: #1559B7;
    --blue-dark: #102A56;
    --blue-medium: #367BC8;
    --blue-soft: #E7F1FB;
    --blue-gray: #607896;
    --blue-border: #DCE8F1;
    --orange-primary: #FF6B18;
    --orange-medium: #F9823A;
    --orange-soft: #FFF0E5;
    --orange-selection: #FFF3EB;
    --orange-pastel: #F8B766;
    --green-primary: #259D70;
    --green-soft: #E4F5EE;
    --green-text: #16855D;
    --red-primary: #EA4B55;
    --red-soft: #FDEBED;
    --text-primary: #14213D;
    --text-secondary: #64748B;
    --text-muted: #8796A8;
    --border: #DFE7EE;
    --border-soft: #EBF0F4;
    --shadow-card: 0 4px 16px rgba(39, 73, 105, 0.08);
    --shadow-soft: 0 2px 8px rgba(39, 73, 105, 0.06);

    /* Derivados: estados de interacción y textos sobre fondos de aviso. */
    --orange-hover: #E55A0C;      /* pulsado del botón principal */
    --orange-text: #9A4A11;       /* naranja legible sobre --orange-soft */
    --border-hover: #C4D7E7;      /* borde de botón secundario al pasar */
    --red-text: #B3323B;          /* rojo legible sobre --red-soft */
    --red-border: #F3B6BA;
    --toggle-off: #C3D2E0;        /* interruptor apagado */

    /* Aliases legacy para no romper clases existentes */
    --g: var(--orange-primary);
    --gd: var(--blue-primary);
    --bg: var(--bg-main);
    --ink: var(--text-primary);
    --mut: var(--text-secondary);
    --line: var(--border);
    --soft: var(--orange-selection);
    --warn: var(--orange-selection);
    --danger: var(--red-primary);
    --side-a: var(--bg-main-soft);
    --side-b: var(--bg-main);
    --ok: var(--green-primary);
    --ok-soft: var(--green-soft);
    --ok-ink: var(--green-text);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 14px "Segoe UI", Arial, sans-serif;
}

button, input, select, textarea { font: inherit; }
a { color: var(--blue-primary); }
h1, h2, h3 { color: var(--blue-dark); }

/* ---------- Cabecera ---------- */

header.crm-header {
    height: 76px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--blue-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    position: sticky;
    top: 0;
    z-index: 3;
}

.brand { display: flex; align-items: center; gap: 32px; }

/* Al logotipo no se le añade borde ni fondo: solo se le reserva el hueco y
   se escala sin deformarlo. */
.logo {
    width: 58px; height: 58px;
    flex: none;
    display: grid; place-items: center;
    text-decoration: none;
}
.logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

.user { display: flex; gap: 10px; align-items: center; }
.user small { color: var(--text-secondary); }

.avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--orange-soft);
    display: grid; place-items: center;
    font-weight: 800; color: var(--orange-primary);
}

.btn-salir {
    border: 1px solid var(--blue-border);
    background: #fff;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    color: var(--orange-primary);
    font-weight: 700;
}
.btn-salir:hover { color: var(--red-primary); border-color: var(--red-primary); }

/* ---------- Estructura ---------- */

.layout { display: grid; grid-template-columns: 220px 1fr; align-items: start; }

.side {
    background: var(--bg-sidebar);
    color: var(--text-primary);
    border-right: 1px solid var(--border);
    min-height: calc(100vh - 76px);
    padding: 14px 10px 0;
    position: sticky;
    top: 76px;
    height: calc(100vh - 76px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.side h5 { opacity: 1; margin: 0 10px 6px; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--orange-primary); }
.side h5.side-config { margin-top: 14px; }

.side .item {
    display: block;
    padding: 7px 10px;
    border-radius: 0 8px 8px 0;
    margin: 1px 0;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    line-height: 1.25;
    border-left: 3px solid transparent;
}
/* Los iconos son tipografía (Bootstrap Icons), así que el color se hereda del
   estado del enlace en vez de venir cocido en un emoji. El ancho fijo alinea
   las etiquetas aunque el glifo sea más estrecho. */
.ico { display: inline-block; width: 19px; text-align: center; font-size: 15px; }
.side .item .ico { color: var(--blue-medium); }
.side .item:hover { background: var(--bg-hover); }
.side .item.active { background: var(--orange-selection); color: var(--orange-primary); border-left-color: var(--orange-primary); }
.side .item.active .ico { color: var(--orange-primary); }
.side-nav { flex: 1 1 auto; }
.side-bg {
    height: 170px;
    flex: none;
    margin: 10px -10px 0;
    background: url('/img/IMAGEN.svg') bottom center / contain no-repeat;
    pointer-events: none;
}

/* isolation crea un contexto de apilamiento propio: así el motivo de puntos
   (z-index -1) queda detrás de TODO el contenido de la página, también de
   los avisos (.aviso-ok, .warn...), sin irse detrás del fondo general. */
main { padding: 28px 30px 40px; position: relative; overflow: hidden; isolation: isolate; }

/* Motivo decorativo de puntos de la cabecera de página */
main:before {
    content: "";
    position: absolute; top: 0; left: 430px;
    width: 500px; height: 86px;
    z-index: -1;
    opacity: .9;
    background-image: radial-gradient(circle, var(--blue-border) 5px, transparent 6px);
    background-size: 34px 28px;
    pointer-events: none;
}

.top { display: flex; justify-content: space-between; gap: 20px; position: relative; }
.crumb { color: var(--gd); font-weight: 700; }   /* el naranja vivo no contrasta a 14px */
.title { font: 38px Georgia, serif; margin: 8px 0; }
.sub { color: var(--mut); max-width: 900px; line-height: 1.5; }
.actions { display: flex; gap: 9px; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; }

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

.btn {
    border: 1px solid var(--line);
    background: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    color: var(--ink);
}
.btn:hover { border-color: var(--border-hover); }
.btn.g { background: var(--g); color: #fff; border-color: var(--g); }
.btn.g:hover { background: var(--orange-hover); border-color: var(--orange-hover); }
.btn.og { color: var(--gd); border-color: var(--blue-border); }
.btn.sm { padding: 6px 10px; font-size: 13px; }
.btn.link { border: 0; background: none; color: var(--gd); padding: 6px 4px; }

/* ---------- Tarjetas ---------- */

.banner, .card, .tabs {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 13px;
    box-shadow: var(--shadow-card);
}

.banner {
    margin-top: 22px;
    padding: 15px 18px;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
}

.pill {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px; font-weight: 700;
    background: var(--ok-soft); color: var(--ok-ink);
    display: inline-block;
}
.pill.gris { background: var(--bg-table-header); color: var(--text-secondary); }
.pill.amber { background: var(--orange-soft); color: var(--orange-text); }
.pill.roja { background: var(--red-soft); color: var(--red-text); }

.grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; margin-top: 16px; }
.grid.tres { grid-template-columns: repeat(3, 1fr); }
.grid.igual { grid-template-columns: 1fr 1fr; }
.grid.cuatro { grid-template-columns: repeat(4, 1fr); }

/* Cabecera de un suministro en el detalle de la venta: dirección debajo del
   título y, a la derecha, etiquetas y acciones que pueden saltar de línea. */
.card.suministro { border-left: 4px solid var(--g); }
.card .head .sub { font-size: 13px; color: var(--mut); margin-top: 2px; }
.acciones-head { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }

.card .head {
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.card .head h2 { font: 22px Georgia, serif; margin: 0; }
.card .body { padding: 17px 18px; }

.fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fields.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fields.una { grid-template-columns: minmax(0, 1fr); }
.fields > .f { min-width: 0; }

.f label {
    display: block;
    font-size: 11px; color: var(--mut); font-weight: 800;
    text-transform: uppercase; margin-bottom: 6px;
}
/* Casillas y radios quedan fuera: con el ancho y alto de un campo de texto se
   pintaban gigantes. */
.f input:not([type=checkbox]):not([type=radio]), .f select, .f textarea {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    background: #fff;
}
.f textarea { min-height: 80px; resize: vertical; }
/* Una opción larga no debe ensanchar el selector más allá de su columna. */
.f select { max-width: 100%; text-overflow: ellipsis; }

/* Producto con su estado dentro de una celda: separados entre sí y de la
   línea siguiente para que las etiquetas no queden pegadas. */
.producto-estado { display: flex; align-items: center; gap: 8px; }
.producto-estado + .producto-estado { margin-top: 6px; }

/* Gráficas del panel (Chart.js). El alto lo fija la vista según el número de
   filas; el lienzo ocupa el contenedor. */
.grafica { position: relative; width: 100%; margin-top: 8px; }
.grafica-titulo { font-size: 15px; margin: 22px 0 4px; }

/* Indicadores a la izquierda y roscas a la derecha; en pantallas estrechas,
   las roscas pasan debajo. */
.con-roscas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: stretch; }
.con-roscas > .stats { align-content: stretch; }
@media (max-width: 1100px) { .con-roscas { grid-template-columns: 1fr; } }

/* Pareja de roscas (mes / año) lado a lado; en móvil, una debajo de otra. */
.roscas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.rosca { margin: 0; border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; }
.rosca figcaption { font-weight: 700; color: var(--blue-dark); text-transform: capitalize; margin-bottom: 6px; }
.rosca-lienzo { position: relative; height: 230px; }

/* Leyenda de dos grupos: tipos de contrato (anillo interior) y servicios (exterior). */
.rosca-leyenda { margin-top: 10px; display: grid; gap: 6px; font-size: 12px; color: var(--mut); }
.rosca-leyenda-grupo { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
.rosca-leyenda-grupo span { display: inline-flex; align-items: center; gap: 5px; }
.rosca-leyenda-grupo i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* Casilla con su texto dentro de un campo: no hereda el estilo de etiqueta
   (mayúsculas pequeñas) de .f label. */
.f label.casilla {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 40px; margin: 0;
    text-transform: none; font-size: 14px; font-weight: 500; color: inherit;
    cursor: pointer;
}

input[type=checkbox], input[type=radio] {
    width: 17px; height: 17px;
    margin: 0;
    accent-color: var(--g);
    cursor: pointer;
    vertical-align: middle;
    flex: none;
}
.f input:focus, .f select:focus, .f textarea:focus {
    outline: 2px solid var(--soft);
    border-color: var(--g);
}
.f .ayuda { color: var(--mut); font-size: 12px; margin-top: 5px; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.stat b { font-size: 24px; display: block; margin-top: 5px; }
.stat.enlace { text-decoration: none; color: inherit; display: block; }
.stat.enlace:hover { border-color: var(--g); }
.stat small { color: var(--mut); font-size: 12px; display: block; margin-top: 4px; }
.stats.cuatro { grid-template-columns: repeat(4, 1fr); }
.stats.dos { grid-template-columns: repeat(2, 1fr); }

/* Lo estimado nunca debe leerse como consolidado: se marca en punteado. */
.stat.estimado { border-style: dashed; background: var(--bg-table-header); }
.stat.estimado b { color: var(--mut); }
.stat.aviso { border-color: var(--red-border); background: var(--red-soft); }

/* Variación respecto al mes anterior. */
.delta { font-size: 12px; font-weight: 600; }
.delta.sube { color: var(--ok-ink); }
.delta.baja { color: var(--danger); }
.delta.igual { color: var(--mut); }

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

.tabs { margin-top: 16px; }
.tabbar { display: flex; gap: 4px; padding: 9px; border-bottom: 1px solid var(--line); overflow: auto; }
.tab {
    border: 0; background: transparent;
    padding: 10px 13px; border-radius: 8px;
    font-weight: 700; color: var(--mut); white-space: nowrap;
    cursor: pointer; text-decoration: none;
}
.tab.active { background: var(--soft); color: var(--gd); }
.panel { display: none; padding: 18px; }
.panel.active { display: block; }

.section { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; }
.section h3 { margin: 0; font-size: 18px; }
.section p { margin: 4px 0 0; color: var(--mut); font-size: 13px; }

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

table.datos { width: 100%; border-collapse: collapse; font-size: 13px; }
table.datos th {
    text-align: left; background: var(--bg-table-header); color: var(--mut);
    font-size: 11px; text-transform: uppercase;
    padding: 10px; border-bottom: 1px solid var(--line);
}
table.datos td { padding: 10px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
table.datos tr.inactiva td { opacity: .55; }
table.datos td.acciones { text-align: right; white-space: nowrap; }
.vacio { padding: 26px; text-align: center; color: var(--mut); }

/* ---------- Cajas y avisos ---------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.box { border: 1px solid var(--line); border-radius: 11px; padding: 14px; background: var(--bg-table-header); }
.box h4 { margin: 0 0 10px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--border); }
.row:last-child { border: 0; }
.row .etq { display: block; }
.row .etq small { color: var(--mut); display: block; margin-top: 2px; }

/* Lista de casillas (centros, productos, servicios): casilla y texto en la
   misma línea y varias por fila. Lleva .f delante para ganar a ".f label",
   que las pintaba en bloque con la casilla debajo del texto. */
.opciones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px 12px;
}
.opcion, .f label.opcion {
    display: flex; align-items: center; gap: 9px;
    margin: 0; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: 8px;
    text-transform: none; font-size: 14px; font-weight: 500; color: var(--text-primary);
    cursor: pointer;
}
.opcion small { color: var(--mut); font-size: 12px; margin-left: 2px; white-space: nowrap; }
.opcion:has(input:checked) { border-color: var(--g); background: var(--soft); }

.warn {
    background: var(--orange-soft); border-left: 4px solid var(--orange-primary);
    padding: 12px; border-radius: 8px; color: var(--orange-text);
    font-size: 13px; margin: 12px 0;
}
.aviso-ok {
    background: var(--ok-soft); border-left: 4px solid var(--ok);
    padding: 12px; border-radius: 8px; color: var(--ok-ink);
    font-size: 13px; margin: 12px 0;
}
.aviso-error {
    background: var(--red-soft); border-left: 4px solid var(--danger);
    padding: 12px; border-radius: 8px; color: var(--red-text);
    font-size: 13px; margin: 12px 0;
}

/* ---------- Interruptor ---------- */

.tog {
    width: 43px; height: 23px; border-radius: 20px;
    background: var(--toggle-off); position: relative; display: inline-block;
    cursor: pointer; border: 0; padding: 0; flex: none;
}
.tog:after {
    content: ""; position: absolute;
    width: 17px; height: 17px; border-radius: 50%;
    background: #fff; top: 3px; left: 3px; transition: .2s;
}
.tog.on { background: var(--g); }
.tog.on:after { left: 23px; }
.tog input { position: absolute; opacity: 0; pointer-events: none; }

.foot { display: flex; justify-content: flex-end; gap: 9px; margin-top: 16px; }

/* ---------- Validación ---------- */

/* El tag helper asp-validation-for añade "field-validation-error"; los spans de
   las vistas llevan además "err" para que el estilo no dependa de una clase
   generada por el framework. Ambas se pintan igual. */
.field-validation-error, span.err { color: var(--danger); font-size: 12px; display: block; margin-top: 5px; }
.input-validation-error { border-color: var(--danger) !important; }
.validation-summary-errors {
    background: var(--red-soft); border-left: 4px solid var(--danger);
    padding: 12px 12px 12px 16px; border-radius: 8px; color: var(--red-text); font-size: 13px;
}
.validation-summary-errors ul { margin: 0; padding-left: 18px; }

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

.login-wrap {
    min-height: 100vh;
    display: grid; place-items: center;
    padding: 24px;
    background: linear-gradient(140deg, var(--side-a), var(--side-b));
}
.login-card {
    width: 100%; max-width: 420px;
    background: #fff; border-radius: 16px;
    padding: 32px;
    box-shadow: 0 24px 60px rgba(39, 73, 105, .18);
}
.login-card .logo { margin: 0 auto 18px; width: 96px; height: 96px; }
.login-card h1 { font: 26px Georgia, serif; margin: 0 0 4px; text-align: center; }
.login-card .sub { text-align: center; margin-bottom: 22px; font-size: 13px; }
.login-card .f { margin-bottom: 14px; }
.login-card .btn { width: 100%; text-align: center; }
.login-pie { text-align: center; margin-top: 16px; font-size: 13px; }

/* ---------- Configuración progresiva ----------

   Las pantallas de reglas (comisiones y retribución) no muestran de golpe
   todos los campos posibles: se avanza por pasos y lo que no participa en la
   regla queda dentro de un bloque plegable. */

.plegable > summary {
    padding: 16px 18px;
    cursor: pointer;
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    list-style: none;
}
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary:before {
    content: "▸";
    color: var(--mut);
    font-size: 13px;
}
.plegable[open] > summary:before { content: "▾"; }
.plegable[open] > summary { border-bottom: 1px solid var(--line); }
.plegable > summary small { color: var(--mut); font-size: 12px; }
.plegable > summary:hover { background: var(--bg-hover); border-radius: 13px 13px 0 0; }

/* Numeración de los pasos, para que se lea como una secuencia y no como un
   formulario plano. */
.paso .head h2:before {
    content: attr(data-paso);
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; margin-right: 10px;
    border-radius: 999px;
    background: var(--orange-soft); color: var(--orange-text);
    font: 700 13px/1 system-ui, sans-serif;
    vertical-align: 3px;
}

/* Campos que solo aplican a determinados tipos de regla. */
[data-solo-tipo] { display: none; }
[data-solo-tipo].visible { display: block; }
.fields [data-solo-tipo].visible { display: block; }

/* ---------- Configurador de comisiones ----------
   Tres pasos (configuración, simulación, resultado) con tablas editables en
   línea. Sigue el boceto Configurador_Simulador_Puntos_Comisiones_GreenPlus. */

.cfg-pasos { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.cfg-paso {
    border: 1px solid var(--line); background: #fff;
    padding: 10px 14px; border-radius: 10px;
    font-weight: 700; color: var(--ink); cursor: pointer;
}
.cfg-paso.active { background: var(--orange-primary); border-color: var(--orange-primary); color: #fff; }
.cfg-pagina { display: none; }
.cfg-pagina.active { display: block; }

.cfg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cfg-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 15px; padding: 18px; box-shadow: var(--shadow-card); min-width: 0; }
.cfg-card h2 { font: 500 20px Georgia, serif; margin: 0 0 5px; }
.cfg-ayuda { color: var(--mut); font-size: 13px; line-height: 1.45; margin: 0 0 14px; }
.cfg-nota {
    margin-top: 12px; padding: 11px 13px;
    border-left: 4px solid var(--orange-primary); background: var(--orange-selection);
    border-radius: 9px; font-size: 13px; line-height: 1.45;
}
.cfg-tabla { overflow: auto; border: 1px solid var(--line); border-radius: 11px; }
.cfg-tabla table { width: 100%; border-collapse: collapse; min-width: 560px; }
.cfg-tabla th, .cfg-tabla td { padding: 7px 8px; border-bottom: 1px solid var(--line); font-size: 13px; text-align: left; vertical-align: middle; }
.cfg-tabla th { background: var(--bg-table-header); font-size: 11px; text-transform: uppercase; color: var(--mut); }
.cfg-tabla tr:last-child td { border-bottom: 0; }
.cfg-tabla tr.inactiva td { opacity: .55; }
.cfg-card input:not([type=checkbox]), .cfg-card select,
.cfg-tabla input:not([type=checkbox]), .cfg-tabla select {
    width: 100%; height: 36px; border: 1px solid var(--line); border-radius: 8px;
    padding: 0 8px; background: #fff; color: var(--ink); font: inherit; font-size: 13px;
}
.cfg-card input[type=checkbox], .cfg-tabla input[type=checkbox] { width: 18px; height: 18px; }
.cfg-card input:disabled { background: var(--bg-table-header); }
.cfg-card input:focus, .cfg-card select:focus { outline: 2px solid var(--orange-soft); border-color: var(--orange-primary); }
.cfg-anadir { margin-top: 10px; }
.btn.borrar { color: var(--red-text); }
.cfg-avanzado { display: inline-block; margin-top: 3px; font-size: 11px; color: var(--orange-text); text-decoration: none; }
.cfg-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cfg-form label span, .cfg-venta label span { display: block; font-size: 12px; font-weight: 700; margin-bottom: 5px; color: var(--blue-gray); }

/* La tarjeta mide la mitad de la pantalla, así que las columnas se reparten
   por el ancho real (no por el de la ventana): los selectores nunca bajan de
   130 px y, si no caben, la fila pasa a otra línea. */
.cfg-venta { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; align-items: end; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.cfg-venta > label { min-width: 0; }
.cfg-venta > label:has(.cfg-servicios) { grid-column: span 2; }
.cfg-venta:last-of-type { border-bottom: 0; }
.cfg-servicios { display: flex; gap: 10px; flex-wrap: wrap; min-height: 36px; align-items: center; font-size: 13px; }
.cfg-servicios label { display: inline-flex; gap: 5px; align-items: center; }

.cfg-metricas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.cfg-metrica { padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg-sidebar); }
.cfg-metrica small { display: block; color: var(--mut); font-size: 11px; text-transform: uppercase; }
.cfg-metrica strong { display: block; font-size: 22px; margin-top: 4px; }
.cfg-metrica.azul { background: var(--blue-soft); border-color: var(--blue-border); }
.cfg-metrica.verde { background: var(--green-soft); border-color: #cdebdc; }
.cfg-metrica.naranja { background: var(--orange-soft); border-color: #ffddc5; }
.cfg-metrica.roja { background: var(--red-soft); border-color: var(--red-border); }

.cfg-resumen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cfg-linea { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.cfg-linea:last-child { border-bottom: 0; }
.cfg-final { font-size: 24px; color: var(--orange-primary); }
.cfg-explicacion { padding: 13px; border: 1px solid var(--blue-border); background: var(--blue-soft); border-radius: 11px; font-size: 13px; line-height: 1.6; }
.cfg-explicacion p { margin: 0 0 10px; }
.cfg-explicacion p:last-child { margin: 0; }
.cfg-sep { height: 1px; background: var(--line); margin: 16px 0; }
.cfg-calculando { opacity: .55; transition: opacity .15s; }

@media (max-width: 1100px) {
    .cfg-grid { grid-template-columns: 1fr; }
    .cfg-metricas { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .cfg-metricas, .cfg-form, .cfg-resumen { grid-template-columns: 1fr; }
}

/* ---------- Responsive ---------- */

/* Las tablas de datos son anchas por naturaleza (una liquidación tiene muchas
   columnas). Se desplazan dentro de su tarjeta en vez de forzar el scroll
   horizontal de toda la página.

   El scroll tiene que vivir en el CONTENEDOR, no en la tabla: un <table> con
   display:block deja de maquetarse como tabla —la cuadrícula pasa a ser una
   caja anónima ajustada a su contenido— y entonces el width:100% se aplica al
   bloque pero las columnas no rellenan el ancho disponible. */
.card, .panel { overflow-x: auto; }

@media (max-width: 1000px) {
    .layout { grid-template-columns: 70px 1fr; }
    .side .item { font-size: 0; padding: 8px 8px; text-align: center; }
    .side-bg { height: 80px; }
    .side .item .ico { font-size: 18px; }
    .side h5 { font-size: 0; margin-bottom: 4px; }
    .grid, .grid.tres, .grid.cuatro, .grid.igual, .split { grid-template-columns: 1fr; }
    .fields, .fields.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    main:before { display: none; }

    /* Cuatro indicadores en fila no caben: pasan a dos por fila. */
    .stats, .stats.cuatro { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    main { padding: 20px 16px 32px; }
    .top { flex-direction: column; }
    .actions { justify-content: flex-start; }
    .fields, .fields.dos { grid-template-columns: minmax(0, 1fr); }
    .title { font-size: 30px; }

    .stats, .stats.cuatro, .stats.dos { grid-template-columns: 1fr; }
    .stat b { font-size: 21px; }
}

/* El span de validación vacío no debe ocupar espacio */
.field-validation-valid { display: none; }

/* ---------- Chat interno ----------

   Dos columnas al estilo WhatsApp: conversaciones a la izquierda y la
   conversación abierta a la derecha, con los mensajes propios a la derecha y
   los del resto a la izquierda. Ocupa el alto disponible de la ventana para
   que solo haga scroll la zona de mensajes. */

/* Las piezas del chat se muestran y ocultan con el atributo hidden; sin esto
   un display:flex propio lo anularía. */
.chat [hidden], .chat-dialogo [hidden], .chat-badge[hidden] { display: none !important; }

.side .item .chat-badge {
    float: right;
    min-width: 20px; padding: 1px 6px;
    border-radius: 999px;
    background: var(--green-primary); color: #fff;
    font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
}

.chat {
    margin-top: 18px;
    height: calc(100vh - 76px - 28px - 40px - 96px);
    min-height: 460px;
    display: grid;
    grid-template-columns: 340px 1fr;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 13px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    position: relative;
}

/* Lista */
.chat-lista { display: flex; flex-direction: column; border-right: 1px solid var(--line); min-height: 0; }

.chat-filtros { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 12px 8px; }
.chat-filtros button {
    border: 1px solid var(--blue-border); background: #fff; color: var(--text-secondary);
    border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.chat-filtros button:hover { border-color: var(--border-hover); }
.chat-filtros button.activo { background: var(--orange-selection); border-color: var(--orange-primary); color: var(--orange-primary); }

.chat-buscar { position: relative; padding: 0 12px 10px; border-bottom: 1px solid var(--line); }
.chat-buscar i { position: absolute; left: 24px; top: 10px; color: var(--text-muted); font-size: 13px; }
.chat-buscar input {
    width: 100%; height: 36px; padding: 6px 10px 6px 32px;
    border: 1px solid var(--border); border-radius: 8px; background: var(--bg-main);
}

.chat-conversaciones { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1 1 auto; }
.chat-lista-vacia { padding: 24px 16px; color: var(--text-muted); text-align: center; }

.chat-item {
    display: flex; gap: 11px; align-items: center;
    padding: 10px 14px; cursor: pointer;
    border-bottom: 1px solid var(--border-soft);
}
.chat-item:hover, .chat-item:focus-visible { background: var(--bg-hover); outline: none; }
.chat-item.activo { background: var(--orange-selection); }
.chat-item-cuerpo { flex: 1; min-width: 0; }
.chat-item-fila { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.chat-item-fila b {
    color: var(--text-primary); font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-item-fila time { flex: none; font-size: 11px; color: var(--text-muted); }
.chat-item.no-leido .chat-item-fila time { color: var(--green-text); font-weight: 700; }
.chat-item-ultimo {
    font-size: 13px; color: var(--text-secondary); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-contador {
    flex: none; min-width: 20px; padding: 0 6px;
    border-radius: 999px; background: var(--green-primary); color: #fff;
    font-size: 11px; font-weight: 800; line-height: 20px; text-align: center;
}

.chat-avatar {
    flex: none; width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--blue-soft); color: var(--blue-primary);
    font-weight: 800; font-size: 14px;
}
.chat-avatar.t-grupo { background: var(--green-soft); color: var(--green-text); }
.chat-avatar.t-aviso { background: var(--orange-soft); color: var(--orange-primary); }
.chat-avatar.t-operacion { background: var(--bg-table-header); color: var(--blue-gray); }
.chat-avatar i { font-size: 18px; }

/* Panel de la conversación */
.chat-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg-main-soft); }

.chat-vacio {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--text-muted); text-align: center; padding: 20px;
}
.chat-vacio i { font-size: 46px; color: var(--blue-border); }

.chat-cab {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--line);
}
.chat-cab-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-cab-texto b { color: var(--blue-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-cab-texto small { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-cab-acciones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.chat-volver { display: none; border: 0; background: none; font-size: 20px; color: var(--blue-primary); cursor: pointer; padding: 4px; }

.chat-mensajes {
    flex: 1; overflow-y: auto; padding: 16px 6% 10px;
    display: flex; flex-direction: column; gap: 3px;
    background-color: var(--bg-main-soft);
    background-image: radial-gradient(circle, var(--blue-border) 1px, transparent 1.5px);
    background-size: 22px 22px;
}

.chat-dia { align-self: center; margin: 10px 0 6px; }
.chat-dia span {
    display: inline-block; padding: 4px 12px; border-radius: 8px;
    background: #fff; color: var(--text-secondary); font-size: 12px; font-weight: 600;
    box-shadow: var(--shadow-soft);
}

.chat-sin-mensajes { align-self: center; margin: auto; color: var(--text-muted); }
.chat-antiguos {
    align-self: center; margin-bottom: 6px;
    border: 1px solid var(--blue-border); background: #fff; color: var(--blue-primary);
    border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
}

.chat-msg {
    max-width: min(68%, 560px);
    padding: 6px 10px 5px;
    border-radius: 10px;
    box-shadow: 0 1px 1px rgba(20, 33, 61, .08);
    position: relative;
    margin-top: 4px;
}
.chat-msg.otro { align-self: flex-start; background: #fff; border-top-left-radius: 2px; }
.chat-msg.propio { align-self: flex-end; background: #D9F4E7; border-top-right-radius: 2px; }
.chat-msg-autor { display: block; font-size: 12px; font-weight: 800; margin-bottom: 1px; }
.chat-msg-autor.c0 { color: var(--blue-primary); }
.chat-msg-autor.c1 { color: var(--orange-hover); }
.chat-msg-autor.c2 { color: var(--green-text); }
.chat-msg-autor.c3 { color: #8B4FC2; }
.chat-msg-autor.c4 { color: var(--red-text); }
.chat-msg-autor.c5 { color: var(--blue-gray); }
.chat-msg-texto { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; color: var(--text-primary); }
.chat-msg-hora { display: block; text-align: right; font-size: 11px; color: var(--text-muted); margin-top: 1px; }

.chat-envio {
    display: flex; align-items: flex-end; gap: 10px;
    padding: 10px 14px; background: var(--bg-table-header); border-top: 1px solid var(--line);
}
.chat-envio textarea {
    flex: 1; resize: none; max-height: 140px;
    border: 1px solid var(--border); border-radius: 20px;
    padding: 9px 14px; background: #fff; line-height: 1.4;
}
.chat-envio textarea:focus { outline: none; border-color: var(--blue-medium); }
.chat-enviar {
    flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0;
    background: var(--green-primary); color: #fff; font-size: 16px; cursor: pointer;
}
.chat-enviar:hover { background: var(--green-text); }
.chat-enviar:disabled { opacity: .6; cursor: default; }

.chat-solo-lectura {
    padding: 13px 16px; text-align: center;
    background: var(--bg-table-header); border-top: 1px solid var(--line);
    color: var(--text-secondary); font-size: 13px; font-weight: 600;
}

/* Diálogos */
.chat-dialogo {
    width: min(520px, calc(100vw - 32px));
    border: 0; border-radius: 13px; padding: 0;
    box-shadow: 0 24px 60px rgba(39, 73, 105, .25);
}
.chat-dialogo::backdrop { background: rgba(16, 42, 86, .35); }
.chat-dialogo form { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.chat-dialogo h2 { font: 22px Georgia, serif; margin: 0; }
.chat-dialogo .foot { margin-top: 0; }

.chat-tipos { display: flex; gap: 16px; flex-wrap: wrap; font-weight: 600; }
.chat-tipos label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

.chat-filtro-usuarios { margin-bottom: 6px; }
.chat-usuarios {
    max-height: 220px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: 8px;
}
.chat-usuario {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; cursor: pointer; border-bottom: 1px solid var(--border-soft);
}
.chat-usuario:last-child { border-bottom: 0; }
.chat-usuario:hover { background: var(--bg-hover); }
.chat-usuario span { flex: 1; }
.chat-usuario small { color: var(--text-muted); font-size: 12px; }
.chat-usuario[hidden] { display: none; }

.chat-check { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.chat-check small { flex-basis: 100%; color: var(--text-muted); font-weight: 400; font-size: 12px; }

.chat-error {
    background: var(--red-soft); border-left: 4px solid var(--danger);
    padding: 10px 12px; border-radius: 8px; color: var(--red-text); font-size: 13px;
}

@media (max-width: 1000px) {
    .side .item .chat-badge { float: none; position: absolute; margin: -6px 0 0 -6px; font-size: 10px; min-width: 16px; line-height: 15px; padding: 0 4px; }
    .chat { grid-template-columns: 280px 1fr; }
}

/* En móvil se ve una cosa cada vez: la lista o la conversación abierta. */
@media (max-width: 760px) {
    .chat { grid-template-columns: 1fr; height: calc(100vh - 76px - 20px - 32px - 80px); }
    .chat-panel { display: none; }
    .chat.con-conversacion .chat-lista { display: none; }
    .chat.con-conversacion .chat-panel { display: flex; }
    .chat-volver { display: block; }
    .chat-cab-acciones .btn { padding: 5px 8px; font-size: 12px; }
    .chat-msg { max-width: 85%; }
    .chat-mensajes { padding: 12px 10px 8px; }
}

/* Nº de oportunidad editable dentro de la fila de una línea. */
.oportunidad-linea { display: flex; gap: 6px; align-items: center; margin: 0; }
.oportunidad-linea input { min-width: 0; width: 100%; max-width: 180px; height: 32px; border: 1px solid var(--border); border-radius: 8px; padding: 0 8px; font-size: 13px; }

/* Archivos en el chat */
.chat-envio-campo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.chat-envio-campo textarea { flex: none; width: 100%; box-sizing: border-box; }
.chat-adjuntar {
    flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0;
    background: transparent; color: var(--blue-gray); font-size: 20px; cursor: pointer;
}
.chat-adjuntar:hover { background: var(--line); color: var(--blue-primary); }
.chat-adjunto {
    display: flex; align-items: center; gap: 8px; padding: 6px 10px;
    background: #fff; border: 1px solid var(--border); border-radius: 12px; font-size: 13px;
}
.chat-adjunto[hidden] { display: none; }
.chat-adjunto span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-adjunto button { border: 0; background: transparent; cursor: pointer; color: var(--text-muted); }
.chat-msg-archivo {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 4px;
    background: rgba(0, 0, 0, .05); border-radius: 8px; color: var(--text-primary); text-decoration: none;
    overflow-wrap: anywhere;
}
.chat-msg-archivo:hover { background: rgba(0, 0, 0, .09); }
.chat-msg-archivo i { font-size: 22px; color: var(--blue-primary); flex: none; }
.chat-msg-archivo small { color: var(--text-muted); margin-left: auto; flex: none; }

/* Datos de la contratación en modo edición: ocupa todo el ancho y las tarjetas
   del formulario compartido se funden con la tarjeta que las contiene. */
.card.editando { grid-column: 1 / -1; }
.card[hidden], .card .body[hidden] { display: none; }
.editar-anidado .card { border: 0; box-shadow: none; padding: 0; background: transparent; margin-top: 12px !important; }
.editar-anidado .card .head { padding-left: 0; padding-right: 0; }
.editar-anidado .card .body { padding-left: 0; padding-right: 0; }