/* dilecto-style.css - Personalización MudBlazor (MODO CLARO) */

/* --- Layout y Espaciado --- */
.main-content-padding-20 {
    padding: 0 10px;
}

.body-padding {
    padding: 80px 20px 50px 20px !important;
}

.pa-30 {
    padding: 30px !important;
}

.mb-4, .my-4 {
    margin-bottom: 1.5rem !important;
    margin-top: 1rem !important;
}

.mb-51 {
    margin-bottom: 10px !important;
}

/* --- MudBlazor Theme Overrides --- */

:root {
    --mud-palette-warning: #ff7300 !important;
    --mud-palette-warning-darken: #d66f00 !important;
    --mud-palette-warning-lighten: #ff8e24 !important;
    /* Variables de texto para helpers “campo-dilecto” (modo claro) */
    --dilecto-text: #1f2937;
    --dilecto-muted: #6b7280;
    --dilecto-surface: var(--bg-dark-2, #ffffff);
    --dilecto-line: rgba(15, 23, 42, 0.08);
    --dilecto-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

/* Drawer (Menú lateral) */
.mud-drawer {
    background-color: var(--bg-drawer) !important;
    box-shadow: 6px 0 24px rgba(15, 23, 42, 0.08);
    border-right: 1px solid var(--dilecto-line);
    margin-top: 10px;
}

.mud-nav-link {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    border-radius: 0 999px 999px 0;
    margin-right: 10px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .mud-nav-link .mud-nav-link-text {
        opacity: 1;
        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        color: var(--text-main, #1f2937) !important;
    }

.mud-drawer--closed .mud-nav-link .mud-nav-link-text {
    opacity: 0;
}

.mud-nav-link:hover {
    background-color: rgba(37, 99, 235, 0.08);
}

.mud-nav-link.mud-nav-link-active,
.mud-nav-link.active {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.16), rgba(37, 99, 235, 0.05));
    color: var(--primary-color, #2563eb);
}

/* --- Tablas (MODO CLARO: Más aire y contraste suave) --- */

.mud-table-root {
    border-radius: var(--border-radius) !important;
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 6px 18px rgba(0,0,0,0.08));
    background-color: #fff;
    border: 1px solid var(--dilecto-line);
}

.mud-table-head {
    background-color: var(--bg-dark-2) !important; /* blanco */
    border-bottom: 1px solid rgba(15, 23, 42, 0.12);
}

.mud-table-root .mud-table-head .mud-table-cell {
    color: #0f172a !important;
    font-size: 0.85rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 14px 12px !important;
}

.mud-table-striped tbody tr:nth-child(odd) {
    background-color: #ffffff !important;
}

.mud-table-striped tbody tr:nth-child(even) {
    background-color: var(--bg-dark-3) !important; /* gris muy suave */
}

/* Hover en filas (claro) */
.mud-table-striped tbody tr:hover {
    background-color: rgba(37, 99, 235, 0.06) !important;
    transition: background-color 0.2s;
}

.mud-table-dense .mud-table-cell {
    padding: 8px 12px !important;
}

.mud-table-cell {
    font-size: 0.95rem !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
    color: var(--text-main, #1f2937) !important;
}

/* --- Botones e Inputs --- */

.mud-button {
    text-transform: none !important;
    letter-spacing: 0.3px;
    border-radius: 10px !important;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.mud-button-root:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.btnLogout {
    padding: 6px 16px !important;
}

.btnNuevo {
    height: 38px !important;
    font-size: 0.85em !important;
    float: left !important;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.2);
}

.inputBuscar {
    font-size: 1rem !important;
    background-color: rgba(15, 23, 42, 0.04);
    border-radius: 10px;
    padding: 5px 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.mud-input-text {
    font-size: 0.95rem !important;
}

.mud-input-root {
    background-color: #ffffff;
}

/* Antes era “texto-blanco” para dark; en CLARO lo dejamos “texto oscuro” sin renombrar la clase */
.texto-blanco .mud-input-slot input,
.texto-blanco .mud-input-label,
.texto-blanco .mud-input-slot.mud-input-focused input {
    color: #1f2937 !important;
}

    .texto-blanco .mud-input-slot input::placeholder {
        color: rgba(31, 41, 55, 0.45) !important;
    }

.texto-blanco .mud-input-underline:after {
    border-bottom-color: var(--mud-palette-warning) !important;
}

/* --- Iconos y Tipografía --- */

.mud-primary-text {
    color: #1f2937 !important;
}

.mud-typography-h4 {
    font-size: 1.75rem !important;
    margin-bottom: 1rem;
    color: #111827 !important;
}

.mud-icon-size-medium {
    font-size: 1.3rem !important;
}

.mud-icon-size-medium2 svg {
    font-size: 1.5rem !important;
}

/* --- Dialogos (Modales) --- */

.mud-dialog-width-md {
    width: 340px !important;
}

/* Dialogo Instalación XL */
.dialog-instalacion-xl .mud-dialog-paper {
    width: 95vw;
    max-width: 1200px;
    border-radius: 16px;
    background-color: #ffffff; /* CLARO */
    border: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.18);
}

.dialog-instalacion-xl .cuerpo-instalacion {
    max-height: 75vh;
    overflow-y: auto;
    padding: 24px;
}

.dialog-instalacion-xl .acciones-instalacion {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background-color: rgba(15, 23, 42, 0.02);
    padding: 12px 24px;
}

/* --- Responsive (Mobile) --- */
@media (max-width: 600px) {
    .body-padding {
        padding: 70px 10px 40px 10px !important;
    }

    .mud-typography-h4 {
        font-size: 1.4rem !important;
    }

    .dialog-instalacion-xl .mud-dialog-paper {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        margin: 0;
        border-radius: 0;
    }

    .dialog-instalacion-xl .cuerpo-instalacion {
        padding: 16px !important;
        max-height: calc(100vh - 120px);
    }

    .btnNuevo {
        float: none !important;
        width: 100%;
        margin-bottom: 10px;
    }
}

/* ---------------------------
   Header de página (título + acción derecha)
   --------------------------- */
.page-header {
    gap: 12px;
}

.btnNuevo-right {
    margin-left: auto;
}

/* En móvil */
@media (max-width: 600px) {
    .page-header {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .btnNuevo-right {
        margin-left: 0 !important;
        width: 100%;
    }
}

/* ---------------------------
   Tablas - Estilo unificado (MudTable + MudDataGrid)
   --------------------------- */

.tabla-dilecto {
    width: 100%;
}

/* Toolbar superior */
.mud-table-toolbar {
    background-color: rgba(15, 23, 42, 0.03) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    padding: 10px 12px !important;
}

/* Input buscar */
.inputBuscar {
    min-width: 320px;
    max-width: 520px;
}

@media (max-width: 600px) {
    .inputBuscar {
        min-width: 100%;
        max-width: 100%;
    }
}

/* Extender look al MudDataGrid */
.mud-data-grid,
.mud-table-root {
    border-radius: var(--border-radius) !important;
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 6px 18px rgba(0,0,0,0.08));
    background-color: #fff;
    border: 1px solid var(--dilecto-line);
}

    .mud-data-grid .mud-table-head,
    .mud-table-head {
        background-color: #ffffff !important;
        border-bottom: 1px solid rgba(15, 23, 42, 0.12);
    }

        .mud-data-grid .mud-table-head .mud-table-cell,
        .mud-table-root .mud-table-head .mud-table-cell {
            color: #0f172a !important;
            font-size: 0.85rem !important;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 14px 12px !important;
        }

    .mud-data-grid .mud-table-striped tbody tr:nth-child(odd),
    .mud-table-striped tbody tr:nth-child(odd) {
        background-color: #ffffff !important;
    }

    .mud-data-grid .mud-table-striped tbody tr:nth-child(even),
    .mud-table-striped tbody tr:nth-child(even) {
        background-color: var(--bg-dark-3) !important;
    }

    .mud-data-grid .mud-table-striped tbody tr:hover,
    .mud-table-striped tbody tr:hover {
        background-color: rgba(37, 99, 235, 0.06) !important;
        transition: background-color 0.2s;
    }

    .mud-data-grid .mud-table-cell,
    .mud-table-cell {
        font-size: 0.95rem !important;
        border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
        color: var(--text-main, #1f2937) !important;
    }

    /* Denso cómodo */
    .mud-data-grid .mud-table-dense .mud-table-cell,
    .mud-table-dense .mud-table-cell {
        padding: 8px 12px !important;
    }

/* Topbar tipo Dispositivos */
.page-topbar {
    width: 100%;
}

/* Lado derecho */
.page-topbar-actions {
    flex-wrap: wrap;
}

/* Buscar en el topbar */
.inputBuscar-topbar {
    width: 520px;
    max-width: 52vw;
}

/* Responsive topbar */
@media (max-width: 600px) {
    .page-topbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px;
    }

    .page-topbar-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .inputBuscar-topbar {
        width: 100%;
        max-width: 100%;
    }

    .btnNuevo {
        width: 100%;
    }
}

/* Base: texto en modo claro */
.campo-dilecto,
.campo-dilecto * {
    color: var(--dilecto-text, #1f2937) !important;
}

    /* Label + helper */
    .campo-dilecto .mud-input-label,
    .campo-dilecto .mud-input-helper-text {
        color: var(--dilecto-muted, #6b7280) !important;
    }

    /* Placeholder */
    .campo-dilecto input::placeholder {
        color: rgba(107, 114, 128, 0.70) !important;
        opacity: 1;
    }

    /* Disabled */
    .campo-dilecto.mud-disabled,
    .campo-dilecto.mud-disabled * {
        color: rgba(107, 114, 128, 0.65) !important;
    }

/* Valor seleccionado */
.mud-select-value,
.mud-select-input,
.mud-select > .mud-input-control input {
    color: var(--dilecto-text, #1f2937) !important;
}

/* Override global (MudBlazor): sin negrita en ningún texto */
.mud-typography,
.mud-typography *,
.mud-table-root,
.mud-table-root *,
.mud-data-grid,
.mud-data-grid *,
.mud-drawer,
.mud-drawer *,
.mud-button,
.mud-button *,
.mud-input,
.mud-input *,
.mud-select,
.mud-select *,
.mud-dialog,
.mud-dialog * {
    font-weight: 400 !important;
}

    /* Etiquetas HTML clásicas dentro de componentes */
    .mud-typography b,
    .mud-typography strong,
    .mud-dialog b,
    .mud-dialog strong,
    .mud-table-root b,
    .mud-table-root strong,
    .mud-data-grid b,
    .mud-data-grid strong {
        font-weight: 400 !important;
    }

/* Encabezados con jerarquía clara */
.mud-typography-h4 {
    font-weight: 400 !important;
}

/* ---------------------------
   Topbar - Menú de usuario (popover)
   --------------------------- */

.user-chip-btn {
    padding: 6px;
    border-radius: 999px;
}

.user-menu-popover {
    min-width: 280px;
    max-width: 360px;
    border-radius: 16px;
    background: var(--bg-dark-2);
    border: 1px solid rgba(15, 23, 42, 0.1);
    box-shadow: var(--shadow-md, 0 18px 36px rgba(15, 23, 42, 0.16));
}

.user-menu-title {
    line-height: 1.1;
}

.user-menu-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.user-menu-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

    .user-menu-row .label {
        color: var(--text-muted);
        font-size: 0.78rem;
    }

    .user-menu-row .value {
        color: var(--text-main);
        font-size: 0.9rem;
        text-align: right;
        word-break: break-word;
    }

/* Toolbar */
.agenda-toolbar {
    align-items: center;
}

.agenda-search input {
    border-radius: 12px;
}

.agenda-status-set {
    gap: 6px;
}

/* Event rendering (compact, professional, works in month/week/day) */
.agenda-event-btn {
    width: 100%;
    height: 100%;
    padding: 0 !important;
    min-height: 28px;
    justify-content: flex-start !important;
    text-transform: none !important;
    border-radius: 10px;
}

.agenda-event {
    width: 100%;
    height: 100%;
    border: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 90%, transparent);
    border-left: 4px solid var(--event-accent, var(--mud-palette-primary));
    background: color-mix(in srgb, var(--mud-palette-surface) 92%, #ffffff 8%);
    border-radius: 12px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
    transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.agenda-event-btn:hover .agenda-event {
    background: color-mix(in srgb, var(--mud-palette-surface) 90%, var(--mud-palette-background) 10%);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
}

.agenda-event-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    white-space: nowrap;
}

.agenda-time {
    font-size: 12px;
    opacity: 0.9;
}

.agenda-dur {
    font-size: 12px;
    opacity: 0.75;
    padding-left: 8px;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.agenda-service {
    font-size: 12px;
    opacity: 0.85;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agenda-title {
    font-size: 13px;
    line-height: 1.15;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.agenda-sub {
    font-size: 12px;
    opacity: 0.75;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status dot */
.agenda-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex: 0 0 auto;
    opacity: 0.9;
}

    .agenda-dot.s-new {
        background: var(--mud-palette-primary);
    }

    .agenda-dot.s-info {
        background: var(--mud-palette-info);
    }

    .agenda-dot.s-ok {
        background: var(--mud-palette-success);
    }

    .agenda-dot.s-warn {
        background: var(--mud-palette-warning);
    }

/* Detail panel */
.agenda-detail {
    border-radius: 14px;
}

.agenda-tabs .mud-tabs-toolbar {
    border-radius: 12px;
}

.dlg-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px;
    background: rgba(15, 23, 42, 0.03);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.title-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dlg-body {
    padding: 10px 2px;
}

.section-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.95));
    padding: 16px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.section-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

    .section-h .left {
        display: flex;
        align-items: center;
        gap: 10px;
    }

.lbl {
    letter-spacing: .06em;
    opacity: .82;
    margin-bottom: 6px;
}

.campo {
    width: 100%;
}

.unit {
    min-width: 110px;
}

.purpose-group .mud-button-root {
    min-width: 140px;
    height: 40px;
    letter-spacing: .03em;
}

/* Centrado vertical del bloque Propósito dentro de su columna */
.crono-grid .crono-proposito {
    display: flex;
    align-items: flex-end; /* Alineación ajustada */
}

.justify-center {
    justify-content: center;
}

.crono-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: 56px; /* Ajuste altura */
}

/* Tabla Parámetros técnicos: más “card”, sin borde exterior */
.tech-table {
    display: grid;
    grid-template-columns: 190px 120px 1fr 1fr; /* un poco más compacta */
    border: none;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); /* “lindo” sin borde */
}

/* Mantengo separadores internos sutiles (no el borde exterior) */
.tech-row {
    display: contents;
}

.tech-cell {
    border-right: 1px solid rgba(0,0,0,0.07);
    border-bottom: 1px solid rgba(0,0,0,0.07);
    padding: 10px;
    display: flex;
    align-items: center;
}

.tech-head .tech-cell {
    background: rgba(0,0,0,0.03);
    justify-content: center;
}

.tech-blank {
    background: rgba(0,0,0,0.03);
}

.tech-colhead {
    justify-content: center;
}

.tech-lefthead {
    font-style: italic;
    justify-content: center;
    text-align: center;
    background: rgba(0,0,0,0.02);
    line-height: 1.15;
}

.tech-rowhead {
    justify-content: flex-start;
    background: rgba(0,0,0,0.01);
}

/* quitar bordes “sobrantes” de grilla */
.tech-table > .tech-cell:nth-last-child(-n+4) {
    border-bottom: none;
}

.tech-table > .tech-cell:nth-child(4n) {
    border-right: none;
}

/* Panel de presión: acompaña a la tabla y no agranda el alto */
.pressure-card {
    height: 100%;
    border-radius: 16px;
    background: rgba(255,255,255,0.7);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.07);
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

/* Interno + equipo: input + botón */
.field-with-action {
    display: flex;
    gap: .5rem;
    align-items: center;
}

    .field-with-action .flex-1 {
        flex: 1 1 auto;
    }

/* Propósito como "segmented" prolijo */
.purpose-toggle.segmented {
    width: 100%;
    display: flex;
    gap: 0;
    border-radius: 10px;
    overflow: hidden;
}

    .purpose-toggle.segmented .mud-toggle-item {
        flex: 1 1 0;
        justify-content: center;
    }

.pill-sep {
    opacity: .7;
}

.pill-interno {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    max-width: 120px;
}

/* =========================================================
   CALENDARIO - EVENTOS ULTRA DENSOS (PILLS)
   ========================================================= */

/* El wrapper donde Heron mete el CellTemplate trae min-height/padding.
   Esto es lo que más "infla" cada evento. */
.custom-calendar-wrapper .mud-cal-cell-template {
    padding: 0 !important;
    /*min-height: 0 !important;*/ /* clave */
}

/* Si el calendar mete el template dentro de un "chip wrapper" */
.custom-calendar-wrapper .mud-cal-cell-template-chip {
    margin: 0 !important;
}

/* Tu pill: que mida lo mínimo posible */
.custom-calendar-wrapper .agenda-pill {
    padding: 2px 4px !important;
    margin: 0 0 2px 0 !important;
    border-radius: 8px !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
    border: 3px solid rgba(15, 23, 42, 0.30) !important; /* Borde más oscuro y definido */
    /* border-left-width: 3px !important; */
    /* Para que el alto sea “el del texto” */
    display: block;
}

    /* Bootstrap mb-1 te agrega altura. Lo anulamos SOLO dentro de la pill */
    .custom-calendar-wrapper .agenda-pill .mb-1 {
        margin-bottom: 0 !important;
    }

    /* Ajustes finos del header */
    .custom-calendar-wrapper .agenda-pill .pill-time,
    .custom-calendar-wrapper .agenda-pill .pill-interno {
        line-height: 1 !important;
    }

    /* Hora aún más compacta */
    .custom-calendar-wrapper .agenda-pill .pill-time {
        font-size: 0.66rem !important;
    }

    /* Interno un toque más chico, y sin inflar alto */
    .custom-calendar-wrapper .agenda-pill .pill-interno {
        font-size: 0.66rem !important;
        max-width: 120px; /* opcional: subilo si querés ver más texto */
    }

    /* Puntito de estado más chico */
    .custom-calendar-wrapper .agenda-pill .status-dot {
        width: 5px !important;
        height: 5px !important;
    }

/* =========================================================
   DIALOG ULTRA: compacto + acciones siempre visibles
   + Pickers más chicos
   + Parámetros y cierre en "tabla" 4x2 (pc-table4)
   ========================================================= */

/* =========================
   Root del dialog
   ========================= */
.mud-dialog.dlg--ultra {
    /* Reducimos de 1440px a 900px para que quede compacto a los costados */
    width: 900px !important;
    /* Cambiamos 98vw a 90vw para garantizar márgenes laterales en pantallas chicas */
    max-width: 100vw !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    /* Tokens / vars */
    --field-h: 34px;
    --c-bg: #fff;
    --c-bg-subtle: #f8fafc;
    --c-line: rgba(15, 23, 42, 0.12);
}

.mud-calendar .mud-cal-grid {
    height: auto !important;
}

.mud-cal-month-cell-title {
    /* font-weight eliminado para aplanar la tipografía */
}

/* Title */
.mud-dialog.dlg--ultra .mud-dialog-title {
    padding: 8px 14px !important;
}

/* Content scrollea, footer fijo */
.mud-dialog.dlg--ultra .mud-dialog-content {
    padding: 10px 14px !important;
    background: var(--c-bg-subtle) !important;
    overflow-y: auto !important;
    max-height: calc(96vh - 108px) !important;
}

/* Actions sticky: SIEMPRE visibles */
.mud-dialog.dlg--ultra .mud-dialog-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 8px 14px !important;
    background: var(--c-bg) !important;
    border-top: 1px solid var(--c-line) !important;
    box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.06);
}

/* Card */
.mud-dialog.dlg--ultra .card {
    padding: 12px 12px 10px !important;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

/* Secciones */
.mud-dialog.dlg--ultra .sec-head {
    margin: 10px 0 6px;
}

/* Grid spacing */
.mud-dialog.dlg--ultra .grid > .mud-grid-item {
    padding: 4px 6px !important;
}

/* Labels */
.mud-dialog.dlg--ultra .lbl {
    margin: 0 0 4px 2px !important;
}

/* =========================
   Inputs compactos (Mud)
   ========================= */
.mud-dialog.dlg--ultra .campo .mud-input-control {
    margin: 0 !important;
}

.mud-dialog.dlg--ultra .campo .mud-input-root {
    min-height: var(--field-h) !important;
    /*height: var(--field-h) !important;*/
    line-height: var(--field-h) !important;
}

.mud-dialog.dlg--ultra .campo .mud-input-slot {
    padding: 0 10px !important;
    height: 100% !important;
    /* display: flex !important;*/
    align-items: center !important;
}

/* Textarea observaciones */
.mud-dialog.dlg--ultra .obs .mud-input-root {
    height: auto !important;
    min-height: 68px !important;
}

.mud-dialog.dlg--ultra .obs textarea {
    padding: 10px 12px !important;
    line-height: 1.25 !important;
}

/* Sub-grid compacta (si la usás) */
.mud-dialog.dlg--ultra .grid--tight > .mud-grid-item {
    padding: 4px 6px !important;
}

/* =========================================================
   Parámetros y cierre -> TABLA 4x2 (8 inputs)
   Requiere: .pc-table4 + .pc-cell
   Observaciones (si va abajo): .pc-obs
   ========================================================= */
.mud-dialog.dlg--ultra .pc-grid {
    margin-top: 2px !important;
}

.mud-dialog.dlg--ultra .pc-obs {
    margin-top: 2px !important;
}

/* Tabla 4 columnas x 2 filas */
.mud-dialog.dlg--ultra .pc-table4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: 10px 12px;
    align-items: start;
}

.mud-dialog.dlg--ultra .pc-cell {
    min-width: 0;
}

    /* Labels dentro de la tabla: compactos y consistentes */
    .mud-dialog.dlg--ultra .pc-cell .lbl {
        margin: 0 0 4px 2px !important;
        line-height: 1.1;
        min-height: 16px; /* alinea todos los encabezados */
    }

/* Inputs full width dentro de la tabla */
.mud-dialog.dlg--ultra .pc-table4 .campo {
    width: 100%;
}

/* Opcional: look sutil “tabla” sin comer espacio */
.mud-dialog.dlg--ultra .pc-cell {
    padding: 2px;
    /* border-radius: 10px;
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 55%, transparent);*/
    /* background: color-mix(in oklab, var(--mud-palette-surface) 96%, var(--mud-palette-background) 4%);*/
}

/* Responsive: 3 columnas */
@media (max-width: 1280px) {
    .mud-dialog.dlg--ultra .pc-table4 {
        grid-template-columns: repeat(3, minmax(220px, 1fr));
    }
}

/* Responsive: 2 columnas */
@media (max-width: 980px) {
    .mud-dialog.dlg--ultra .pc-table4 {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
}

/* Mobile: 1 columna */
@media (max-width: 640px) {
    .mud-dialog.dlg--ultra .pc-table4 {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Legacy helpers (si todavía existen en tu markup)
   - No rompen nada si no se usan
   ========================================================= */

/* Si aún tenés tech-mini en otro bloque */
.mud-dialog.dlg--ultra .tech-mini__row {
    gap: 8px;
}

.mud-dialog.dlg--ultra .tech-mini__lbl {
    width: 60px;
    opacity: .85;
}

/* Si aún quedó la versión tech-grid */
.mud-dialog.dlg--ultra .tech-grid {
    display: grid;
    grid-template-columns: 70px 1fr 1fr;
    gap: 8px 10px;
    align-items: center;
}

.mud-dialog.dlg--ultra .tech-title {
    opacity: .85;
    font-size: .78rem;
    margin-top: -2px;
    white-space: nowrap;
}

.mud-dialog.dlg--ultra .tech-field {
    min-width: 0;
}

/* TareaHeader.razor.css — COMPACT PRO v3 (centrado + columna actividad más ancha) */

:root {
    --th-radius: 14px;
    --th-pad: 12px;
    --th-gap: 12px;
    --th-surface: var(--mud-palette-surface);
    --th-surface-2: var(--mud-palette-background);
    --th-line: color-mix(in oklab, var(--mud-palette-lines-default) 88%, transparent);
    --th-text: var(--mud-palette-text-primary);
    --th-muted: color-mix(in oklab, var(--mud-palette-text-secondary) 94%, transparent);
    --th-soft: color-mix(in oklab, var(--th-surface) 94%, var(--th-surface-2) 6%);
    --th-shadow-soft: 0 2px 12px rgba(0, 0, 0, .04);
    --th-shadow: 0 12px 28px rgba(0, 0, 0, .08);
    --th-kicker-size: 10px;
    --th-title-size: 15px;
}

/* Root container */
.tarea-header {
    border-radius: var(--th-radius);
    border: 1px solid var(--th-line);
    background: linear-gradient(180deg, var(--th-soft), var(--th-surface));
    overflow: hidden;
    box-shadow: var(--th-shadow-soft);
}

/* Main grid layout */
.th {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--th-gap);
    padding: var(--th-pad);
    align-items: start;
}

.th__left,
.th__right {
    display: contents;
}

/* Tablet layout: 2 columns */
@media (min-width: 700px) {
    .th {
        grid-template-columns: 1fr 1fr;
    }

    .th-card--equipo {
        grid-column: 1 / -1;
    }

    .th-state {
        grid-column: 1 / -1;
    }
}

/* Desktop layout: 3 columns x 2 rows */
@media (min-width: 960px) {
    .th {
        grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr) 460px;
        grid-template-rows: auto 1fr;
        align-items: stretch;
    }

    .th-card--fecha {
        grid-column: 1;
        grid-row: 1;
    }

    .th-card--inst {
        grid-column: 2;
        grid-row: 1;
    }

    .th-card--equipo {
        grid-column: 1 / span 2;
        grid-row: 2;
        height: 100%;
    }

    .th-state {
        grid-column: 3;
        grid-row: 1 / span 2;
        height: 100%;
    }
}

/* Card base styles */
.th-card {
    border-radius: 12px;
    border: 1px solid var(--th-line);
    background: linear-gradient( 180deg, color-mix(in oklab, var(--th-surface) 95%, var(--th-surface-2) 5%), var(--th-surface) );
    padding: 10px;
    min-width: 0;
    box-shadow: var(--th-shadow-soft);
    transition: all 0.2s ease;
}

    .th-card:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
    }

/* Kicker (small label) */
.th-kicker {
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .80;
    line-height: 1;
    margin: 0 0 6px 0;
    color: var(--th-muted);
    font-size: var(--th-kicker-size);
}

/* Title */
.th-title {
    line-height: 1.15;
    margin: 0;
    font-size: var(--th-title-size);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--th-text);
}

/* Inline row layout (Fecha/Instalación) */
.th-inline {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
    flex-wrap: wrap;
}

.th-inline__sep {
    opacity: .35;
}

.th-inline__meta {
    color: var(--th-muted);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
}

.th-inline__label {
    opacity: .94;
    margin-right: 6px;
}

/* Desktop: horizontal info bar styling */
@media (min-width: 960px) {
    .th-card--fecha,
    .th-card--inst {
        padding: 10px 12px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 14px;
    }

        .th-card--fecha .th-kicker,
        .th-card--inst .th-kicker {
            margin: 0;
            padding-right: 14px;
            border-right: 1px solid color-mix(in oklab, var(--th-line) 75%, transparent);
            white-space: nowrap;
            opacity: .76;
        }

        .th-card--fecha .th-inline,
        .th-card--inst .th-inline {
            flex-wrap: nowrap;
            width: 100%;
            min-width: 0;
            justify-content: flex-start;
            align-items: center;
        }
}

/* Equipo card: header with chips */
.th-equipo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.th-equipo-left {
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Chips container */
.th-equipo-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

/* Person chip */
.th-mini {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--th-line) 88%, transparent);
    background: color-mix(in oklab, var(--th-surface) 94%, var(--th-surface-2) 6%);
    min-width: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .03);
    transition: all 0.2s ease;
}

    .th-mini:hover {
        box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
        border-color: color-mix(in oklab, var(--th-line) 100%, transparent);
    }

.th-mini__name {
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
    line-height: 1.1;
    color: var(--th-text);
}

.th-mini__role {
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--th-muted);
    opacity: .94;
    white-space: nowrap;
    line-height: 1;
}

.th-mini--empty {
    opacity: .68;
    border-style: dashed;
}

/* Mobile: stack equipo layout */
@media (max-width: 700px) {
    .th-equipo-head {
        flex-direction: column;
        align-items: stretch;
    }

    .th-equipo-right {
        justify-content: flex-start;
    }

    .th-mini__name {
        max-width: 100%;
    }
}

/* State panel */
.th-state {
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--th-line);
    background: radial-gradient( 840px 270px at 65% -12%, color-mix(in oklab, var(--mud-palette-primary) 15%, transparent) 0%, transparent 62% ), linear-gradient( 180deg, color-mix(in oklab, var(--th-surface) 94%, var(--th-surface-2) 6%), var(--th-surface) );
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 14px;
    min-width: 0;
    box-shadow: var(--th-shadow);
}

.th-state__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed color-mix(in oklab, var(--th-line) 72%, transparent);
    margin-bottom: 2px;
}

.th-id {
    font-size: 12px;
    color: var(--th-muted);
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--th-line);
    background: color-mix(in oklab, var(--th-surface) 94%, var(--th-surface-2) 6%);
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .02);
}

.th-state__box {
    min-width: 0;
    display: grid;
    place-items: center;
}

/* Loading state */
.tarea-header--loading .th-card,
.tarea-header--loading .th-state {
    background: linear-gradient(180deg, var(--th-soft), var(--th-surface));
}

.th-skel__kicker {
    margin-bottom: 8px;
    opacity: .7;
}

.th-roles {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

/* MudBlazor typography reset */
.tarea-header :is(.mud-typography, .mud-typography-overline) {
    margin: 0;
}

/* Mobile optimizations */
@media (max-width: 420px) {
    .th {
        padding: 10px;
        gap: 10px;
    }

    .th-card,
    .th-state {
        padding: 10px;
    }

    .th-title {
        font-size: 14px;
    }

    .th-mini {
        padding: 6px 10px;
    }
}

/* Tarjeta KPI */
.kpi-card {
    border-radius: 14px;
    width: 100%;
    height: 72px; /* compacta y consistente */
    display: flex;
    align-items: center;
}

/* fila interna */
.kpi-row {
    width: 100%;
}

/* icono */
.kpi-icon {
    flex: 0 0 auto;
}

/* textos */
.kpi-text {
    flex: 1 1 auto;
    min-width: 0;
}

.kpi-title {
    line-height: 1.1;
    opacity: .85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-value {
    line-height: 1.05;
}

/* ====== KPI STRIP: primera al borde izq, última al borde der, mismas distancias ====== */
.kpi-strip {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between; /* clave */
    padding: 0 !important; /* sin "margen" lateral del contenedor */
    margin: 0;
}

/* Slots con ancho consistente => spacing parejo */
.kpi-slot {
    flex: 0 0 220px; /* ajustá: 200/220/240 según te guste */
    max-width: 220px;
}

/* Responsive: cuando no entra, wrap prolijo */
@media (max-width: 1100px) {
    .kpi-strip {
        flex-wrap: wrap;
        justify-content: center; /* cuando wrappea, mejor centrado */
        gap: 12px;
        padding: 0 !important;
    }

    .kpi-slot {
        flex: 1 1 260px;
        max-width: 360px;
    }
}

/* =========================================================
   CALENDARIO MES "NORMAL DEL MUNDO"
   - 7 columnas x 6 filas SIEMPRE
   - todas las celdas mismo tamaño
   - eventos NO deforman
   ========================================================= */

/* A) El área del calendario debe tener alto real */
.agenda-body,
.agenda-calendar,
.agenda-calendar-scroll {
    /* min-height: 0;*/
    /* height: 100%;*/
}

/* El scroll del mes (si el layout es chico) vive acá */
.agenda-calendar-scroll {
    overflow: auto;
}

/* Bloque de remaquetado de agenda-mud-calendar deshabilitado para volver al layout original de MudBlazor. */

.detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 8px 0 10px;
}

/* =========================
   APPBAR: como antes (izq) + un poco más alta
   ========================= */
.appbar.appbar-taller,
.appbar.appbar-taller .mud-toolbar {
    min-height: 56px;
    height: 56px;
    padding-top: 0;
    padding-bottom: 0;
}

/* Left: logo + texto, alineados finos */
.appbar-left {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0; /* clave para truncar bien */
}

/* Right: empuja login a la derecha */
.appbar-right {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
}

/* =========================
   LOGO: proporcional a una topbar de 56px
   ========================= */
.brand {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    min-width: 0;
}

.brand-logo {
    height: 60px; /* PRO: visible, pero no rompe la barra */
    width: auto;
    object-fit: contain;
    display: block;
}

/* =========================
   TEXTO: un poco más grande y más PRO
   ========================= */
.appbar-left .mud-typography {
    /* MudText sin Typo usa una clase typography igual,
       esto lo agarra sin tener que tocar el Razor */
    font-size: 1.02rem; /* "un poco" más grande */
    letter-spacing: 0.2px; /* toque pro */
    line-height: 1; /* centra visualmente */
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 52vw; /* evita que empuje el login */
}

    /* Si querés que "SP" destaque más, sin tocar HTML */
    .appbar-left .mud-typography::first-letter {
        /* opcional: muy sutil */
    }

.appbar-title {
    font-size: 1.05rem;
    letter-spacing: .2px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 52vw;
}

/* Responsive: en móvil achicá un toque el texto y el logo */
@media (max-width: 600px) {
    .brand-logo {
        height: 30px;
    }

    .appbar-left .mud-typography {
        font-size: 0.95rem;
        max-width: 46vw;
    }
}

/* =========================
   ALTURA UNIFICADA
   ========================= */
.dlg--ultra .campo {
    --field-h: 34px; /* ajustá si lo querés aún más bajo */
}

    .dlg--ultra .campo .mud-input-control {
        min-height: var(--field-h);
    }

    .dlg--ultra .campo .mud-input-slot,
    .dlg--ultra .campo .mud-input-root,
    .dlg--ultra .campo .mud-input-adornment,
    .dlg--ultra .campo .mud-select-input,
    .dlg--ultra .campo input,
    .dlg--ultra .campo textarea {
        min-height: var(--field-h);
    }

    .dlg--ultra .campo textarea {
        /* si querés que textarea respete alto visual sin “inflarse” */
        padding-top: 6px;
        padding-bottom: 6px;
    }

/* Labels compactos */
.dlg--ultra .lbl {
    margin-bottom: 4px;
    line-height: 1.1;
}

/* =========================
   CAMPOS MÁS ESTRECHOS
   ========================= */
.dlg--ultra .campo-narrow {
    max-width: 220px; /* estrecha horizontalmente */
}

.dlg--ultra .campo-mini {
    max-width: 170px; /* aún más estrecha */
}

/* Si querés que algunos campos “no se estiren” aunque la columna sea grande */
.dlg--ultra .no-stretch {
    width: fit-content;
}

/* =========================
   SELECTOR HH:MM
   ========================= */
.dlg--ultra .time2 {
    display: inline-flex;
    align-items: center;
    /* gap: -2px;*/
}

    .dlg--ultra .time2 .time-part {
        width: 96px; /* tamaño fijo de cada select */
    }

    .dlg--ultra .time2 .time-colon {
        opacity: .75;
        transform: translateY(-1px);
    }

.cell-link-pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    margin-right: 6px;
}

.cell-link-pin-mud {
    font-size: 18px;
    opacity: .9;
}

/* Compacto y prolijo, coherente con tabla-dilecto */
.tabla-puntos-tight .mud-table-cell {
    padding: 8px 10px !important;
}

.tabla-puntos-tight .mud-table-head .mud-table-cell {
    padding: 10px 10px !important;
    letter-spacing: .02em;
}

.tabla-puntos-tight .mud-table-container {
    border-radius: 14px;
    overflow: hidden;
}

.txt-ellipsis {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cell-compact {
    vertical-align: middle;
}

.cell-coords {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.coords-mini {
    opacity: .82;
    font-size: .84em;
}

.cell-link-pin-mud {
    font-size: 18px;
}

.tri-head {
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: .82rem;
    opacity: .85;
}

.tri-icons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

    .tri-icons .mud-icon-root {
        font-size: 18px !important;
    }

.punto-panel {
    border-radius: 14px;
}

.coord-link {
    all: unset;
    cursor: pointer;
    color: #0B5FFF;
    text-decoration: underline;
    text-underline-offset: 2px;
}

    .coord-link:hover {
        opacity: .85;
    }

.native-date-input {
    /* height: 40px;*/
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, .23);
    background: #fff;
    color: #0F172A;
    padding: 6px 8px;
    font-size: .95rem;
    width: 100%;
    font-family: inherit;
}

    .native-date-input:focus {
        outline: 2px solid #594ae2; /* El color Primary de MudBlazor */
        border-color: transparent;
    }

.native-date-field label {
    font-size: .75rem;
    color: rgba(0, 0, 0, .72);
    margin-bottom: 4px;
    display: block;
}

body.popup .boot-overlay {
    display: none;
}

/* =========================================================
             TAREA PAGE — STICKY HEADER LAYOUT
             ========================================================= */

.tarea-page {
    /* ESTRATEGIA: ALTO DE PANTALLA MENOS ENCABEZADO */
    /* 1. Definimos la altura exacta visible */
    /* Usamos 64px como estándar de MudBlazor (o var(--mud-appbar-height)) */
    height: calc(100vh - 64px);
    height: calc(100dvh - var(--mud-appbar-height)); /* Versión moderna precisa */
    /* 2. Ajustes de posición */
    width: 100%;
    display: flex;
    flex-direction: column;
    /* 3. Evitamos el scroll externo */
    overflow: hidden;
    /* 4. Espaciado interno */
    padding: 8px; /* Si lo ves muy pegado a los bordes */
    box-sizing: border-box;
}

/* EL CONTENEDOR PRINCIPAL CON SCROLL */
.tarea-shell {
    height: 100%;
    width: 100%;
    overflow-y: auto; /* Aquí ocurre el scroll de todo */
    position: relative;
    /* Estilo visual */
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.10);
    background: radial-gradient(1000px 300px at 20% 0%, rgba(27,110,194,0.05), transparent 55%), linear-gradient(180deg, #f8f9fa, #ffffff);
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    /* Smooth scroll nativo para CSS */
    scroll-behavior: smooth;
    margin-top: 30px;
}

/* 1. Header que se va con el scroll */
.tarea-shell__header-section {
    padding: 16px 16px 8px 16px;
}

/* 2. Barra Sticky (Píldoras) */
.tarea-shell__sticky-bar {
    position: sticky; /* LA CLAVE */
    top: 0; /* Se pega al techo del .tarea-shell */
    z-index: 100; /* Queda por encima del contenido */

    display: flex;
    justify-content: center;
    padding: 8px 0;
    /* Efecto vidrio para que no tape bruscamente lo de abajo */
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    margin-bottom: 16px;
}

.tarea-selector {
    display: inline-flex;
    gap: 6px;
    padding: 3px 6px;
    /* Quitamos el fondo y borde del selector interno,
                 ya que la barra sticky ya hace de fondo */
}

.tarea-selector__btn {
    border-radius: 999px;
    padding: 2px 12px;
    min-height: 28px;
    font-size: 0.8rem;
}

/* 3. Cuerpo del contenido */
.tarea-shell__content-body {
    padding: 0 16px 16px 16px;
}

.tarea-section {
    margin-bottom: 32px;
    /* Offset para que al scrollear no quede tapado por la barra sticky */
    scroll-margin-top: 60px;
}

.tarea-section__title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6c757d;
    margin-bottom: 16px;
    border-left: 4px solid var(--mud-palette-primary);
    padding-left: 10px;
}

@media (max-width: 560px) {
    .tarea-page {
        --tp-pad: 0px;
    }
    /* En mobile aprovechamos todo el ancho */
    .tarea-shell {
        border-radius: 0;
        border: none;
    }

    .tarea-shell__sticky-bar {
        top: 0;
    }
}

.checkcell {
    text-align: center;
    vertical-align: middle;
}

    /* Opcional: Centrar el input directamente en caso de que la celda use Flexbox */
    .checkcell input[type="checkbox"] {
        margin: 0 auto;
        display: block;
    }

:root {
    --cv-bg: transparent;
    --cv-label-bg: rgba(0,0,0,.06);
    --cv-text: #111827;
    --cv-muted: #6b7280;
}

/* Contenedor general */
.compact-vars {
    display: inline-flex;
    align-items: center;
    gap: 10px; /* ✅ espacio entre segmentos */
    padding: 0;
    background: var(--cv-bg);
    border: 0;
    border-radius: 0;
    white-space: nowrap;
    line-height: 1;
    font-size: 11px;
}

    /* Segmento: T..., P..., A... */
    .compact-vars .segment {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 0; /* ✅ sin padding lateral (ya hay gap global) */
        position: relative;
        line-height: 1;
    }

    /* Badge letra T/P/A */
    .compact-vars .label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 14px;
        min-width: 14px;
        padding: 0 4px;
        border-radius: 4px;
        font-size: 11px;
        color: var(--cv-text);
        background: var(--cv-label-bg);
    }

    /* Cuerpo del segmento: valores + unidad */
    .compact-vars .body {
        display: inline-flex;
        align-items: baseline;
        gap: 4px;
        line-height: 1;
    }

    /* Valores */
    .compact-vars .vals {
        display: inline-flex;
        align-items: baseline;
        gap: 4px;
        font-variant-numeric: tabular-nums;
        color: var(--cv-text);
        line-height: 1;
    }

    /* Separador de rango: "|" (solo entre min y max) */
    .compact-vars .pipe {
        opacity: .55;
        font-size: 10px;
        line-height: 1;
        transform: translateY(-0.5px);
    }

    /* Unidad */
    .compact-vars .u {
        font-size: 10px;
        color: var(--cv-muted);
        opacity: .9;
        line-height: 1;
        margin-left: 1px;
    }

.rec-mini {
    font-size: 12px;
    line-height: 1.2;
    padding: 6px 8px;
    min-width: 220px;
}

.rec-mini__t {
    font-size: 12.5px;
    margin-bottom: 2px;
}

.rec-mini__s {
    opacity: .72;
    margin-bottom: 6px;
}

.rec-mini__r {
    margin-top: 3px;
}

.rec-mini__desc {
    margin-top: 6px;
    opacity: .92;
}

.rec-mini__c {
    margin-top: 6px;
    opacity: .6;
    font-size: 11px;
}

.rec-mini__tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.rec-mini__tag {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,.18);
    background: rgba(255,255,255,.85);
}

.rec-mini--loading {
    opacity: .85;
}

.rec-mini--err {
    color: #b91c1c;
}

.leaflet-popup-content {
    margin: 8px 10px;
}