/* ======================================================================
   ultu.css -- ULTU Design System
   Estructura: 9 partes ordenadas por capas de responsabilidad

   PART 1 -- LEGACY              (codigo heredado, a migrar)
   PART 2 -- VARIABLES + RESET   (:root, *, body)
   PART 3 -- APP SHELL           (cabecera, botonera, menu lateral)
   PART 4 -- COMPONENTES GLOBALES(spinners, inputs, grilla)
   PART 5 -- LOGIN
   PART 6 -- MI PERFIL
   PART 7 -- ADMINISTRACION
   PART 8 -- CLIENTES
   PART 9 -- PRESUPUESTOS        (pendiente)
   ====================================================================== */


/* ======================================================================
   PART 1 -- LEGACY
   Codigo heredado de cuerpo.css / estilos.css.
   Revisar y eliminar progresivamente.
   ====================================================================== */


/* ──────────────────────────────────────────
    ELEMENTOS A ELIMINAR O REUBICAR (EXTRAIDOS DE CUERPO.CSS DEPRECADO)
────────────────────────────────────────── */

/* Primero solo ELEMENTOS HTML a eliminar o reubicar */

iframe {
    display: block;
    border-style: none;
}

/*Ahora solo elementos de tipo ID a eliminar o reubicar*/

#cabecera {
    padding: 0;
    align-items: normal;
    margin-bottom: 0px;
    width: 98%;
}

#panelMenu {
    display: block;
    position: relative;
}

#iframeBotonera {
    border: 0px;
    margin: 0;
}

#datosDestacados {
    padding-top: 0.5rem;
}

#cuerpoPagina,
#cuerpoSolapa {
    max-width: 100% !important;
}

#cabSistema,
#divBarraDirecciones,
#panelCuerpo,
#panelSolapa {
    padding-left: 0px;
}

#cabSistema,
#panelMenu,
#divBarraDirecciones,
#panelMenuSolapa,
#panelCuerpo,
#panelSolapa
{
    margin-left: 0px;
}

#botonera,
#botonerSolapa,
#botoneraSubSolapa,
#subBotonera,
#subBotoneraSubSolapa,
div.scrollableArea {
    position: relative;
    border: 0px;
    max-width: 100% !important;
}

/* Ahora elementos de "Clases" a eliminar o reubicar*/

.carousel-control-prev,
.carousel-control-next {
    height: max-content;
    top: -1.5em;
    width: max-content;
}

.carousel-control-prev {
    padding-right: 1%;
    margin-right: 0%;
    left: initial;
    right: 50%;
}

.carousel-control-next {
    padding-left: 1%;
    margin-left: 0%;
    right: initial;
    left: 50%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    padding: 0.8rem;
    background-color: #bbb;
    border: 1px solid #CCCCCC;
    box-shadow: 1px 1px 3px #CCC;
    border-radius: 6px;
    margin-top: 2.5rem;
}

.badge-ultu,
.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
    background-color: #60207E;
}

.badge-ultu {
    color: #fff;
}

.badge {
    font-size: 10px;
}

.badge-ultu:hover {
    color: #60207E;
    background-color: #fff;
    border: 1px solid #bbb;
}

.modal-body {
    position: relative;
    overflow-y: auto;
}

.modal-autoheight {
    position: relative;
    min-height: 100px !important;
    max-height: 2000px !important;
    max-width: 900px !important;
    height: auto !important;
}

.contenedor-dashboard {
	width: 95%;
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    border: 1px solid #bbb;
    padding: 10px;
    border-radius: 5px;
}

.texto-titulo-dashboard {
    text-align: center;
    font-size: small;
    padding-bottom: 30px;
}

.grilla-titulo-dashboard {
	font-size: 20px;
	font-weight: none;
	color: #60207E;
	display: revert;
}

.elemento-superior-dashboard {
    width: 20%;
    padding-top: 5px;
    padding-bottom: 25px; /* Simplificar las propiedades de relleno */
    background-color: #60207E;
    color: #fff;
    border: 1px solid #60207E;
    border-radius: 5px;
    font-size: 50px;
    font-weight: bold;
    display: flex; /* Establecer el contenedor como flexbox */
    flex-direction: column; /* Columna principal para centrar verticalmente */
    justify-content: center; /* Centrar verticalmente el contenido */
    align-items: center;
}

.elemento-inferior-dashboard-bar {
    width: 50%; 
    height: 400px; 
    border: 1px solid black;
    text-align: center; 
    align-items: center;
}

.elemento-inferior-dashboard-pie {
    width: 49%; 
    height: 650px; 
    border: 1px solid black;
    text-align: center; 
    align-items: center;
}

.contenedor-dashboard-siniestro {
	width: 98%;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    border: 1px solid #bbb;
    padding: 10px;
    border-radius: 5px;
}

.elemento-superior-dashboard-siniestro {
    width: 15%;
    padding-top: 5px;
    padding-bottom: 50px; /* Simplificar las propiedades de relleno */
    background-color: #60207E;
    color: #fff;
    border: 1px solid #60207E;
    border-radius: 5px;
    font-size: 50px;
    font-weight: bold;
    display: flex; /* Establecer el contenedor como flexbox */
    flex-direction: column; /* Columna principal para centrar verticalmente */
    justify-content: center; /* Centrar verticalmente el contenido */
    align-items: center;
}

.elemento-inferior-dashboard-siniestro-bar {
    width: 50%; 
    height: 600px; 
    border: 1px solid black;
    text-align: center; 
    align-items: center;
}

.elemento-inferior-dashboard-siniestro-pie {
    width: 50%; 
    height: 1000px; 
    border: 1px solid black;
    text-align: center; 
    align-items: center;
}


/* ======================================================================
   PART 2 -- VARIABLES GLOBALES + RESET BASE
   Design tokens (:root), reset universal (*), body base
   ====================================================================== */

/* ──────────────────────────────────────────
    VARIABLES GLOBALES :ROOT
────────────────────────────────────────── */
:root {
    /* Colores primarios */
    --ultu-color-primary:       #6C4FD1;
    --ultu-color-primary-light: #7B5FD9;
    --ultu-color-primary-dark:  #5A3DBF;
    --ultu-color-primary-rgb:   108, 79, 209;
    --ultu-color-white:         #FFFFFF;
    --ultu-color-link:          #4B5FD9;

    /* Textos */
    --ultu-text-base:        #1a1a1a;
    --ultu-text-strong:      #33303B;
    --ultu-text-muted:       #585858;
    --ultu-text-subtle:      #888888;
    --ultu-text-faint:       #adadad;
    --ultu-text-placeholder: #b8b8b8;
    --ultu-text-dim:         #c3c3c3;

    /* Superficies y bordes */
    --ultu-bg:               #ecedf8;
    --ultu-surface:          #f5f6fc;
    --ultu-surface-hover:    #f0f1f9;
    --ultu-border:           #eaecf5;
    --ultu-neutral-border:   #D7D5E3;
    --ultu-card-header-bg:   #f5f5f5;
    --ultu-global-surface:   #ebecf2;
    --ultu-border-global-grid: #d7d8de;
    --ultu-overlay-bg:       rgba(26, 20, 46, 0.6);

    /* Tintes del primario */
    --ultu-primary-tint:         #f7f4ff;
    --ultu-primary-border-hover: #c4b5f4;

    /* Gradientes primarios */
    --ultu-gradient-primary: linear-gradient(135deg, #7B5FD9 0%, #5A3DBF 100%);
    --ultu-gradient-global-grid: #ebecf2;
    --ultu-gradient-header-soft: linear-gradient(180deg, #d5cbf7, var(--ultu-primary-border-hover));

    /* Radios */
    --ultu-radius-sm:   8px;
    --ultu-radius-md:   12px;
    --ultu-radius-lg:   18px;
    --ultu-radius-card: 24px;

    /* Indicadores de carga */
    --ultu-loading-track: rgba(var(--ultu-color-primary-rgb), 0.15);

    /* ── Sombras ─────────────────────────────────────────────────
       --ultu-shadow-color : purple derivado del brand (más oscuro que el primario) — úsalo en contenedores/cards.
       var(--ultu-color-primary-rgb) sigue usándose en botones/foco para que la sombra respete el color exacto del elemento.
    ──────────────────────────────────────────────────────────── */
    --ultu-shadow-color: 80, 60, 150;

    /* Escala de elevación — contenedores, cards, popups */
    --ultu-shadow-sm: 0 4px 16px rgba(var(--ultu-shadow-color), 0.08);
    --ultu-shadow-md: 0 8px 32px rgba(var(--ultu-shadow-color), 0.09), 0 2px 8px  rgba(0, 0, 0, 0.04);
    --ultu-shadow-lg: 0 16px 48px rgba(var(--ultu-shadow-color), 0.16), 0 2px 8px  rgba(0, 0, 0, 0.06);
    --ultu-shadow-xl: 0 24px 64px rgba(var(--ultu-shadow-color), 0.10), 0 4px 16px rgba(0, 0, 0, 0.05);

    /* Foco / ring interactivo */
    --ultu-shadow-focus: 0 0 0 3px rgba(var(--ultu-color-primary-rgb), 0.12);

    /* Botones — usan el primario exacto, no --ultu-shadow-color */
    --ultu-shadow-btn:            0 4px 14px rgba(var(--ultu-color-primary-rgb), 0.30);
    --ultu-shadow-btn-hover:      0 6px 20px rgba(var(--ultu-color-primary-rgb), 0.44);
    --ultu-shadow-btn-hero:       0 6px 22px rgba(var(--ultu-color-primary-rgb), 0.38);
    --ultu-shadow-btn-hero-hover: 0 8px 28px rgba(var(--ultu-color-primary-rgb), 0.48);

    /* ── Iconos SVG centralizados ── */
    --ultu-icon-logo-menu:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
    --ultu-icon-mail-inbox:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpolyline points='2,4 12,13 22,4'/%3E%3C/svg%3E");
    --ultu-icon-mail-sent:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E");
    --ultu-icon-mail-draft:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
    --ultu-icon-mail-archive:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='21 8 21 21 3 21 3 8'/%3E%3Crect x='1' y='3' width='22' height='5'/%3E%3Cline x1='10' y1='12' x2='14' y2='12'/%3E%3C/svg%3E");
    --ultu-icon-paperclip:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");

    /* ── Editor de texto enriquecido de mail_editar.php (toolbar contenteditable) ── */
    --ultu-icon-rte-align-left:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='17' y1='10' x2='3' y2='10'/%3E%3Cline x1='21' y1='6' x2='3' y2='6'/%3E%3Cline x1='21' y1='14' x2='3' y2='14'/%3E%3Cline x1='17' y1='18' x2='3' y2='18'/%3E%3C/svg%3E");
    --ultu-icon-rte-align-center:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='10' x2='6' y2='10'/%3E%3Cline x1='21' y1='6' x2='3' y2='6'/%3E%3Cline x1='21' y1='14' x2='3' y2='14'/%3E%3Cline x1='18' y1='18' x2='6' y2='18'/%3E%3C/svg%3E");
    --ultu-icon-rte-align-right:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='21' y1='10' x2='7' y2='10'/%3E%3Cline x1='21' y1='6' x2='3' y2='6'/%3E%3Cline x1='21' y1='14' x2='3' y2='14'/%3E%3Cline x1='21' y1='18' x2='7' y2='18'/%3E%3C/svg%3E");
    --ultu-icon-rte-align-justify:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='21' y1='10' x2='3' y2='10'/%3E%3Cline x1='21' y1='6' x2='3' y2='6'/%3E%3Cline x1='21' y1='14' x2='3' y2='14'/%3E%3Cline x1='21' y1='18' x2='3' y2='18'/%3E%3C/svg%3E");
    --ultu-icon-rte-indent:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 8 7 12 3 16'/%3E%3Cline x1='21' y1='12' x2='11' y2='12'/%3E%3Cline x1='21' y1='6' x2='11' y2='6'/%3E%3Cline x1='21' y1='18' x2='11' y2='18'/%3E%3C/svg%3E");
    --ultu-icon-rte-outdent:        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 8 3 12 7 16'/%3E%3Cline x1='21' y1='12' x2='11' y2='12'/%3E%3Cline x1='21' y1='6' x2='11' y2='6'/%3E%3Cline x1='21' y1='18' x2='11' y2='18'/%3E%3C/svg%3E");
    --ultu-icon-rte-undo:           url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 14 4 9 9 4'/%3E%3Cpath d='M20 20v-7a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E");
    --ultu-icon-rte-redo:           url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 14 20 9 15 4'/%3E%3Cpath d='M4 20v-7a4 4 0 0 1 4-4h12'/%3E%3C/svg%3E");
    --ultu-icon-rte-list-ordered:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='10' y1='6' x2='21' y2='6'/%3E%3Cline x1='10' y1='12' x2='21' y2='12'/%3E%3Cline x1='10' y1='18' x2='21' y2='18'/%3E%3Cpath d='M4 6h1v4'/%3E%3Cpath d='M4 10h2'/%3E%3Cpath d='M6 18H4c0-1 2-2 2-3s-1-1.5-2-1'/%3E%3C/svg%3E");
    --ultu-icon-rte-list-unordered: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");
    --ultu-icon-rte-hr:             url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3C/svg%3E");
    --ultu-icon-rte-link:           url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
    --ultu-icon-rte-image:          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");

    /* ── Ventana flotante de mail (ventanaMail.php) ── */
    --ultu-icon-minimize: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
    --ultu-icon-maximize: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E");
    --ultu-icon-cotizador:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cline x1='8' y1='7' x2='16' y2='7'/%3E%3Cline x1='8' y1='11' x2='10' y2='11'/%3E%3Cline x1='14' y1='11' x2='16' y2='11'/%3E%3Cline x1='8' y1='15' x2='10' y2='15'/%3E%3Cline x1='14' y1='15' x2='16' y2='15'/%3E%3Cline x1='8' y1='19' x2='16' y2='19'/%3E%3C/svg%3E");
    --ultu-icon-tasks:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Crect x='9' y='3' width='6' height='4' rx='1'/%3E%3Cline x1='9' y1='12' x2='15' y2='12'/%3E%3Cline x1='9' y1='16' x2='12' y2='16'/%3E%3C/svg%3E");
    --ultu-icon-user-status:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    --ultu-icon-helpdesk:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3z'/%3E%3Cpath d='M3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E");
    --ultu-icon-bell:          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");
    --ultu-icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
    --ultu-icon-chevron-down:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    --ultu-icon-refresh:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpolyline points='1 20 1 14 7 14'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E");
    --ultu-icon-compose:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34'/%3E%3Cpolygon points='18 2 22 6 12 16 8 16 8 12 18 2'/%3E%3C/svg%3E");
    --ultu-icon-calendar:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    --ultu-icon-search:        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    --ultu-icon-export:        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M3 15h18'/%3E%3Cpath d='M9 3v18'/%3E%3Cpath d='M15 3v18'/%3E%3C/svg%3E");
    --ultu-icon-user:          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E");
    --ultu-icon-lock:          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
    --ultu-icon-eye:           url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    --ultu-icon-eye-off:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
    --ultu-icon-arrow-right:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
    --ultu-icon-settings-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
    --ultu-icon-users-group:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
    --ultu-icon-hierarchy:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='1' width='9' height='6' rx='1.5'/%3E%3Crect x='7' y='9' width='10' height='6' rx='1.5'/%3E%3Crect x='14' y='17' width='9' height='6' rx='1.5'/%3E%3Cpath d='M10 4h3a2 2 0 0 1 2 2v1'/%3E%3Cpolyline points='13 5.5 15 7.5 17 5.5'/%3E%3Cpath d='M14 12h3a2 2 0 0 1 2 2v1'/%3E%3Cpolyline points='17 13.5 19 15.5 21 13.5'/%3E%3C/svg%3E");
    --ultu-icon-dispatch:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2H5a2 2 0 0 0-2 2v13'/%3E%3Cpath d='M8 5h6l3 3v9a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z'/%3E%3Cpath d='M14 5v3h3'/%3E%3Cline x1='10' y1='11' x2='15' y2='11'/%3E%3Cline x1='10' y1='14' x2='15' y2='14'/%3E%3Cpath d='M19 13l4 1.5v2.5c0 2-4 4-4 4s-4-2-4-4V14.5z'/%3E%3Cpolyline points='17.5 17 19 18.5 21.5 15.5'/%3E%3C/svg%3E");
    --ultu-icon-login-key:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94'/%3E%3C/svg%3E");
    --ultu-icon-text-lines:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='6' x2='20' y2='6'/%3E%3Cline x1='4' y1='12' x2='14' y2='12'/%3E%3Cline x1='4' y1='18' x2='18' y2='18'/%3E%3C/svg%3E");
    --ultu-icon-briefcase:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2'/%3E%3Cline x1='12' y1='12' x2='12' y2='17'/%3E%3Cline x1='9' y1='14.5' x2='15' y2='14.5'/%3E%3C/svg%3E");
    --ultu-icon-info:          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
    --ultu-icon-check:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    --ultu-icon-close:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
    --ultu-icon-car-side:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.6 15.8V12.6C21.6 11.7 21 11 20.1 10.9L17.9 10.7L15.4 6.8C15.1 6.3 14.5 6 13.9 6H9.7C9 6 8.4 6.3 8 6.9L4.7 11.3C4.1 11.6 3.4 12.2 3.4 13.1V15.8'/%3E%3Cpath d='M5.5 10.7h12.4'/%3E%3Cpath d='M2.4 15.8h2.3'/%3E%3Cpath d='M4.7 15.8a2.5 2.5 0 0 1 5 0'/%3E%3Cpath d='M9.7 15.8h4.6'/%3E%3Cpath d='M14.3 15.8a2.5 2.5 0 0 1 5 0'/%3E%3Cpath d='M19.3 15.8h2.3'/%3E%3Ccircle cx='7.2' cy='15.9' r='1.8'/%3E%3Ccircle cx='16.8' cy='15.9' r='1.8'/%3E%3C/svg%3E");
    --ultu-icon-shield:        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-11V5l-8-3-8 3v6c0 7 8 11 8 11z'/%3E%3C/svg%3E");
    --ultu-icon-percent:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3Ccircle cx='6.5' cy='6.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E");
    --ultu-icon-message-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E");
    --ultu-icon-add:           url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
    --ultu-icon-copy:          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");

    /* ── Estados de usuario ── */
    --ultu-color-status-available: #22c55e;
    --ultu-color-status-busy:      #f59e0b;
    --ultu-color-status-absent:    #94a3b8;
    --ultu-color-status-vacation:  #3b82f6;

    /* ── Danger / requerido — formaliza los rojos sueltos que ya existían
       en .GrillaError y .gg-badge--no-activo, en vez de sumar un color nuevo ── */
    --ultu-color-danger:        #dc2626;
    --ultu-color-danger-bg:     #fef2f2;
    --ultu-color-danger-border: #fca5a5;

    /* ── Series de gráficos (dashboards) — reutilizable en cualquier torta/área ── */
    --ultu-chart-series-1:      var(--ultu-color-primary);
    --ultu-chart-series-2:      #9B7FE8;
    --ultu-chart-series-3:      #E85FA0;
    --ultu-chart-series-4:      #4FA8D1;
    --ultu-chart-series-muted:  #D8D2F0;
}

/* ── Reset base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    overflow-x: hidden;
}

/* Scrollbar moderna global (mismos tokens que ya usan .grilla-global-wrap,
   .p_menuLateral__panel, el dashboard, etc.) — acá aplicada a toda la
   página en vez de a un contenedor puntual, para que el scroll principal
   del sistema deje de verse con la barra gris por defecto del navegador. */
html { scrollbar-width: thin; scrollbar-color: rgba(var(--ultu-color-primary-rgb), 0.25) var(--ultu-surface); }
html::-webkit-scrollbar { width: 8px; }
html::-webkit-scrollbar-track { background: var(--ultu-surface); }
html::-webkit-scrollbar-thumb {
    background: rgba(var(--ultu-color-primary-rgb), 0.25);
    border-radius: 4px;
}
html::-webkit-scrollbar-thumb:hover { background: rgba(var(--ultu-color-primary-rgb), 0.4); }

/* ======================================================================
   PART 3 -- APP SHELL -- LAYOUT GLOBAL
   #divBarraDirecciones, Cabecera, Botonera,
   p_menuLateral, Container Queries, lockWindow
   ====================================================================== */

/* ══════════════════════════════════════════════════════════════
   BARRA DE DIRECCIONES, TRACKING DE NAVEGACIÓN — Área de navegación
   del sitio web SPA, sirve para volver atrás en el recorrido de las
   páginas que se fue visitando / linkeando está inmediatamente antes 
   del Layout Global.
══════════════════════════════════════════════════════════════ */

#divBarraDirecciones {
    margin-top: 0.5rem;
}

/* ══════════════════════════════════════════════════════════════
   LAYOUT GLOBAL — Área de contenido principal
   Wrapper que envuelve panelCuerpo + panelMenuSolapa + panelSolapa
   en cuerpo.php, inmediatamente después de #divBarraDirecciones.
══════════════════════════════════════════════════════════════ */

.ultu-content-area {
    padding: 10px 20px;
}


/* ══════════════════════════════════════════════════════════════
   CABECERA / TOP NAVIGATION BAR
══════════════════════════════════════════════════════════════ */

/* Cuando la cabecera de la aplicación está presente el body adopta
   layout de bloque en lugar del flex centrado que usa el login.
   Esto hace que .ultu-ia-header ocupe el 100 % de su contenedor. */
body:has(#ultu-ia-cabecera) {
    display: block;
}

/* ── Top bar ── */
.ultu-ia-header {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    min-height: 60px;
    flex-wrap: nowrap;
    container-type: inline-size;
    container-name: cabecera;
}

/* ── Brand / Logo ── */
.ultu-ia-header .ultu-ia-logo-sistema {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 45%;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-decoration: none;
    height: auto;
    margin-left: 15px;
}

.ultu-ia-logo-cia {
    max-height: 88px;
    width: auto;
    border-radius: 6px;
    flex-shrink: 0;
}

.ultu-ia-cabecera-titulo,
.ultu-ia-text-leyenda {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ultu-text-base);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* ── Right-side actions container ── */
.ultu-ia-datos-destacados {
    display: flex !important;
    align-items: center;
    gap: 10px;
    position: relative;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

/* ── Bell loading spinner container ──
   Tamaño fijo para que no cause layout shift al alternar con #notificationIcon.
   visibility:hidden/visible en lugar de display:none/block garantiza que el 
   espacio reservado nunca cambie y el popup de notificaciones no salte. ── */
.ultu-ia-bell-notices {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Notification icon (trigger) ──
   min-width fijo para que el reemplazo de contenido vía AJAX no reduzca el ancho del elemento y desplace el popup. ── */
.ultu-ia-notification-icon {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    min-width: 46px;
    flex-shrink: 0;
}

/* ── Bell button chip ── */
.ultu-ia-hdr-bell-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 7px 10px 5px;
    border-radius: var(--ultu-radius-md);
    background: var(--ultu-surface);
    border: 1.5px solid var(--ultu-border);
    transition: background .2s, border-color .2s, box-shadow .2s;
    min-width: 46px;
    user-select: none;
}

.ultu-ia-notification-icon:hover .ultu-ia-hdr-bell-btn {
    background: var(--ultu-primary-tint);
    border-color: var(--ultu-primary-border-hover);
    box-shadow: 0 2px 8px rgba(var(--ultu-color-primary-rgb), 0.14);
}

.ultu-ia-hdr-bell-icon {
    color: var(--ultu-color-primary);
    display: flex;
    align-items: center;
    line-height: 0;
    position: relative;
}

.ultu-ia-hdr-bell-icon--off {
    color: var(--ultu-text-placeholder);
}

/* Punto de aviso naranja superpuesto (reemplaza el <circle> que antes iba dentro del SVG) */
.ultu-ia-hdr-bell-dot {
    position: absolute;
    top: 3px;
    right: 2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f59e0b;
}

/* ══════════════════════════════════════════════════════════════
   NOTIFICACIONES — Campana, popup, grilla, acciones
══════════════════════════════════════════════════════════════ */

/* ── Notification count badge ── */
.ultu-ia-badge,
#cantNoticePend.ultu-ia-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 17px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 0.62rem;
    font-weight: 700;
    font-family: inherit;
    line-height: 1;
}

.ultu-ia-badge-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
}

.ultu-ia-badge-secondary {
    background: #e4e6f4;
    color: var(--ultu-text-subtle);
}

/* ── Notifications popup panel ── */
.ultu-ia-popup-notice {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    background: #ffffff !important;
    border: 1.5px solid var(--ultu-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--ultu-shadow-lg) !important;
    z-index: 300 !important;
    min-width: 300px;
    max-width: 360px;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.ultu-ia-popup-notice .ultu-ia-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px 11px !important;
    background: var(--ultu-card-header-bg) !important;
    border-bottom: 1px solid var(--ultu-border) !important;
    border-radius: 0 !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: var(--ultu-text-base) !important;
    letter-spacing: 0.7px !important;
    text-transform: uppercase !important;
}

/* ── Cotización & Perfil inline cards ── */
.ultu-ia-card {
    background: #ffffff;
    border: 1.5px solid var(--ultu-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--ultu-shadow-sm) !important;
    overflow: hidden;
    margin: 0 !important;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

.ultu-ia-card .ultu-ia-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px 7px !important;
    height: 34px;
    overflow: hidden;
    box-sizing: border-box;
    background: var(--ultu-card-header-bg) !important;
    border-bottom: 1px solid var(--ultu-border) !important;
    border-radius: 0 !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: var(--ultu-text-base) !important;
    letter-spacing: 0.7px !important;
    text-transform: uppercase !important;
}

.ultu-ia-card .ultu-ia-card-body {
    padding: 10px 12px !important;
    font-size: 0.78rem !important;
    color: var(--ultu-text-muted) !important;
    line-height: 1.00 !important;
    flex: 1 1 auto;
}

.ultu-ia-cotiz-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.ultu-ia-cotiz-row + .ultu-ia-cotiz-row {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--ultu-surface-hover);
}

.ultu-ia-cotiz-lbl {
    font-weight: 700;
    color: var(--ultu-text-base);
}

/* ── Header refresh / icon button ── */
.ultu-ia-hdr-refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ultu-text-faint);
    padding: 4px 5px;
    border-radius: 6px;
    transition: color .2s, background .2s;
    line-height: 0;
    text-decoration: none !important;
}

.ultu-ia-hdr-refresh-btn:hover {
    color: var(--ultu-color-primary);
    background: var(--ultu-primary-tint);
}

/* ── Contenedores de íconos de refresh: tamaño fijo para evitar layout shift
   al alternar entre el SVG (13px) y el spinner reutilizado .ultu-ia-spinner-sm (16px) ── */
#loadUpCotizacionMoneda,
#refreshNotices {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ── Profile card ── */
.ultu-ia-hdr-user-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 21px;
}

.ultu-ia-hdr-user-lbl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 400;
    color: var(--ultu-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 0;
    line-height: 0;
}

.ultu-ia-hdr-user-name {
    font-size: inherit;
    font-weight: 700;
    color: var(--ultu-text-base);
    text-transform: uppercase;
    letter-spacing: inherit;
    line-height: 1;
}

.ultu-ia-hdr-date {
    font-size: 0.78rem;
    color: var(--ultu-text-subtle);
    margin-bottom: 8px;
}

.ultu-ia-hdr-profile-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-top: 6px;
    border-top: 1px solid var(--ultu-surface-hover);
}

.ultu-ia-datos-perfil a {
    color: var(--ultu-color-primary);
    font-size: 0.78rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity .2s;
    cursor: pointer;
}

.ultu-ia-datos-perfil a:hover { opacity: 0.75; text-decoration: none; }

/* ── Mobile mini menu button ── */
.ultu-ia-btn-mini-mnu {
    display: none;
}

.ultu-ia-btn-mini-mnu a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: var(--ultu-surface);
    border: 1.5px solid var(--ultu-border);
    border-radius: 10px;
    color: var(--ultu-color-primary);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s;
}

.ultu-ia-btn-mini-mnu a:hover { background: var(--ultu-primary-tint); }

.ultu-ia-mini-user-name {
    display: inline-block;
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#frmMenu {
    display: none;
}

/* ── Notice items table ── */
.ultu-ia-grilla-notice {
    width: 100%;
    border-collapse: collapse;
    display: block;
    max-height: 260px;
    overflow-y: auto;
}

.ultu-ia-grilla-notice::-webkit-scrollbar { width: 4px; }
.ultu-ia-grilla-notice::-webkit-scrollbar-track { background: var(--ultu-surface); }
.ultu-ia-grilla-notice::-webkit-scrollbar-thumb { background: #d4d2ee; border-radius: 2px; }

.ultu-ia-grilla-texto-notice,
.ultu-ia-grilla-texto-notice-leida {
    display: block;
    width: 100%;
    cursor: pointer;
    border-bottom: 1px solid var(--ultu-surface-hover);
    transition: background .12s;
}

.ultu-ia-grilla-texto-notice { background: #f5f4ff; }
.ultu-ia-grilla-texto-notice-leida { background: #ffffff; }

.ultu-ia-grilla-texto-notice:hover,
.ultu-ia-grilla-texto-notice-leida:hover { background: var(--ultu-primary-tint); }

.ultu-ia-grilla-texto-notice td,
.ultu-ia-grilla-texto-notice-leida td {
    display: block;
    padding: 10px 14px;
    font-size: 0.82rem;
}

.ultu-ia-grilla-texto-notice td .float-left,
.ultu-ia-grilla-texto-notice-leida td .float-left {
    float: none !important;
    display: block;
}

.ultu-ia-grilla-texto-notice td .float-left:first-child {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ultu-text-base);
    line-height: 1.4;
    margin-bottom: 3px;
}

.ultu-ia-grilla-texto-notice-leida td .float-left:first-child {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--ultu-text-muted);
    line-height: 1.4;
    margin-bottom: 3px;
}

.ultu-ia-estilo-fecha-notice {
    font-size: 0.7rem !important;
    color: var(--ultu-text-faint) !important;
    float: none !important;
    display: block !important;
}

.ultu-ia-grilla-error {
    color: #dc2626;
    font-size: 0.82rem;
    padding: 10px 14px;
    display: block;
}

/* ── Notice actions bar ── */
.ultu-ia-notice-actions-wrap {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 10px 14px 12px;
    border-top: 1px solid var(--ultu-border);
    background: var(--ultu-card-header-bg);
}

/* ── btnVioleta ── */
.ultu-ia-btn-violeta {
    padding: 4px 14px;
    background: var(--ultu-gradient-primary);
    color: #fff;
    border: none;
    border-radius: var(--ultu-radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-shadow: var(--ultu-shadow-btn);
    transition: transform .15s, box-shadow .2s;
    white-space: nowrap;
}

.ultu-ia-btn-violeta:hover {
    transform: translateY(-1px);
    box-shadow: var(--ultu-shadow-btn-hover);
}

.ultu-ia-btn-violeta:active { transform: translateY(0); }

/* ── No notices empty state ── */
.ultu-ia-notice-empty {
    text-align: center;
    padding: 20px 16px;
    font-size: 0.82rem;
    color: var(--ultu-text-faint);
}

/* ══════════════════════════════════════════════════════════════
   BOTONERA PRINCIPAL — Menú horizontal de navegación
   BEM: ultu-ia-botonera / ultu-ia-menu-pr / ultu-ia-menu-pr-link
   Reemplaza gradualmente los estilos de estilos.css:
   .btnMenuPr / .btnMenuPrSeleccionado / .menuPrincipal
   Mantiene las clases viejas en los elementos para compatibilidad
   con el JavaScript existente (actualizarcolor, seleccionomenu).
══════════════════════════════════════════════════════════════ */

/* ── botonera__track: contenedor externo del rail de navegación ── */
.ultu-ia-botonera-track {
    position: relative;
    width: 100%;
    border-bottom: 2px solid var(--ultu-color-primary);
}

/* ── botonera__surface: superficie visible con scroll CSS nativo ── */
.ultu-ia-botonera-surface {
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,249,255,0.98) 100%);
    border-radius: var(--ultu-radius-lg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    padding: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Scrollbar oculto — la navegación se hace con las flechas laterales */
.ultu-ia-botonera-surface::-webkit-scrollbar { display: none; }

/* ── botonera__nav: fila flex de ítems ── */
.ultu-ia-botonera-nav {
    display: flex;
    align-items: stretch;
    gap: 2px;
    min-width: max-content;
}

/* ── menu-item: wrapper de cada ítem (neutros, sin visual propio) ──
   Sobreescribe float y altura de estilos.css para .menuPrincipal   */
.ultu-ia-menu-item.menuPrincipal {
    float: none;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: var(--ultu-radius-sm);
    flex: 0 0 auto;
}

/* ── menu-pr: el ítem en sí (wrapper del link + borde animado) ──
   Sobreescribe estilos visuales de .btnMenuPr y .btnMenuPrSeleccionado */
.ultu-ia-menu-pr.btnMenuPr,
.ultu-ia-menu-pr.btnMenuPrSeleccionado {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    float: none;
    min-width: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: var(--ultu-radius-sm);
    position: relative;
}

/* Neutraliza el hover de estilos.css en .btnMenuPr:hover */
.ultu-ia-menu-pr.btnMenuPr:hover,
.ultu-ia-menu-pr.btnMenuPrSeleccionado:hover {
    border: none;
    background: transparent;
    box-shadow: none;
    color: inherit;
}

/* ── menu-item--dropdown: ítem con submenú flotante ── */
.ultu-ia-menu-item-dropdown.menuPrincipal,
.ultu-ia-menu-item-dropdown.ultu-ia-menu-pr.btnMenuPr,
.ultu-ia-menu-item-dropdown.ultu-ia-menu-pr.btnMenuPrSeleccionado {
    min-width: 118px;
}

/* ── menu-pr__border: borde animado independiente del layout ── */
.ultu-ia-menu-pr-border {
    position: absolute;
    inset: 0;
    border-radius: var(--ultu-radius-sm);
    border: 1px solid transparent;
    pointer-events: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

/* ── menu-pr__link: área clickeable con visuales modernos ── */
.ultu-ia-menu-pr-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 5px 8px;
    border-radius: var(--ultu-radius-sm);
    background: linear-gradient(180deg, #ffffff 0%, #f1f1f1 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(0, 0, 0, 0.04);
    color: var(--ultu-text-base);
    cursor: pointer;
    transition:
        transform .15s ease,
        background .2s ease,
        box-shadow .2s ease,
        color .2s ease;
}

.ultu-ia-menu-pr-link:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #ffffff 0%, #f1eeff 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 8px 20px rgba(var(--ultu-color-primary-rgb), 0.12);
}

.ultu-ia-menu-pr:hover .ultu-ia-menu-pr-border {
    border-color: #d7cff7;
    box-shadow: 0 0 0 3px rgba(var(--ultu-color-primary-rgb), 0.06);
}

/* ── menu-pr__label: texto del botón ── */
.ultu-ia-menu-pr-label {
    display: block;
    min-width: 0;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    color: inherit;
    white-space: nowrap;
    text-align: center;
}

.ultu-ia-menu-item-dropdown .ultu-ia-menu-pr-label {
    padding-right: 16px;
}

/* ── menu-pr__caret: flecha indicadora de dropdown (CSS puro) ── */
.ultu-ia-menu-pr-caret {
    position: absolute;
    top: 50%;
    right: 11px;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
    opacity: 0.45;
    transition: opacity .2s ease, transform .2s ease;
}

.ultu-ia-menu-pr:hover .ultu-ia-menu-pr-caret        { opacity: 0.8; }

.ultu-ia-menu-item-dropdown[aria-expanded="true"] .ultu-ia-menu-pr-caret {
    transform: translateY(-50%) rotate(-135deg);
    opacity: 0.8;
}

/* ── menu-pr--selected: estado activo/seleccionado ── */
.ultu-ia-menu-pr-selected .ultu-ia-menu-pr-link {
    background: var(--ultu-gradient-primary);
    color: #ffffff;
    box-shadow:
        0 12px 24px rgba(var(--ultu-color-primary-rgb), 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.ultu-ia-menu-pr-selected .ultu-ia-menu-pr-border {
    border-color: rgba(90, 61, 191, 0.15);
}

.ultu-ia-menu-pr-selected .ultu-ia-menu-pr-caret {
    color: rgba(255, 255, 255, 0.82);
    opacity: 1;
}

.ultu-ia-menu-pr-selected:hover .ultu-ia-menu-pr-link {
    transform: translateY(-1px);
    box-shadow:
        0 16px 28px rgba(var(--ultu-color-primary-rgb), 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ── dropdown flotante (submenú de Cobranzas, etc.) ── */
.ultu-ia-preview-dropdown {
    position: absolute;
    top: calc(100% - 6px);
    left: 0;
    min-width: 220px;
    background: #ffffff;
    border: 1px solid #e7e9f5;
    border-radius: 14px;
    box-shadow: var(--ultu-shadow-lg);
    padding: 5px;
    z-index: 25000;
}

.ultu-ia-preview-dropdown-list {
    display: grid;
}

.ultu-ia-preview-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 12px;
    border-radius: 10px;
    color: var(--ultu-text-base);
    font-size: 13px;
    font-weight: 500;
    background: transparent;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .15s ease;
}

.ultu-ia-preview-dropdown-item:hover {
    background: #f5f3ff;
    color: var(--ultu-color-primary-dark);
    transform: translateX(1px);
}

/* Flecha decorativa en cada ítem del dropdown */
.ultu-ia-preview-dropdown-item::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    opacity: 0.38;
    flex: 0 0 auto;
}

/* ── modificador .menuEndoso--moderno: reskin del menú "Mas" legacy (paginas/*.php, .menuEndoso en css/estilos.css)
   con el mismo lenguaje visual que .ultu-ia-preview-dropdown. Aditivo: no reemplaza .menuEndoso, así que
   mostrarMenu()/cerrarMenuEndoso()/mostrarSubMenuPdf() (js/polizasEndosos.js) siguen funcionando sin cambios. ── */
.menuEndoso.menuEndoso--moderno {
    opacity: 1;
    min-width: 160px;
    background: #ffffff;
    border: 1px solid #e7e9f5;
    border-radius: 14px;
    box-shadow: var(--ultu-shadow-lg);
    padding: 5px;
}

.menuEndoso.menuEndoso--moderno div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 12px;
    border-radius: 10px;
    color: var(--ultu-text-base);
    font-size: 13px;
    font-weight: 500;
    background: transparent;
    transition: background .2s ease, color .2s ease, transform .15s ease;
}

.menuEndoso.menuEndoso--moderno div:hover {
    background: #f5f3ff;
    color: var(--ultu-color-primary-dark);
    transform: translateX(1px);
}

.menuEndoso.menuEndoso--moderno div::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    opacity: 0.38;
    flex: 0 0 auto;
}

/* ── botonera__arrow: zonas de scroll lateral con hover (reemplaza smoothDivScroll) ── */
.ultu-ia-botonera-arrow {
    position: absolute;
    top: 6px;
    bottom: 2px;
    width: 48px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.ultu-ia-botonera-arrow--left {
    left: 0;
    background: linear-gradient(to right, rgba(248,249,255,0.97) 55%, transparent 100%);
    border-radius: 18px 0 0 18px;
}

.ultu-ia-botonera-arrow--right {
    right: 0;
    background: linear-gradient(to left, rgba(248,249,255,0.97) 55%, transparent 100%);
    border-radius: 0 18px 18px 0;
}

/* Chevron CSS puro */
.ultu-ia-botonera-arrow::before {
    content: '';
    display: block;
    width: 9px;
    height: 9px;
    border-right: 2.5px solid var(--ultu-color-primary);
    border-top: 2.5px solid var(--ultu-color-primary);
    transition: border-color .15s ease;
}

.ultu-ia-botonera-arrow--left::before  { transform: rotate(-135deg); margin-left: 8px; }
.ultu-ia-botonera-arrow--right::before { transform: rotate(45deg);   margin-right: 8px; }
.ultu-ia-botonera-arrow:hover::before  { border-color: var(--ultu-color-primary-dark); }

/* JS toggle: visible solo cuando hay contenido para scrollear en esa dirección */
.ultu-ia-botonera-arrow--visible {
    opacity: 1;
    pointer-events: auto;
}

#iframeBotonera, #botonera, #botoneraSubSolapa, #subBotonera {
	height: 44px !important;
	overflow: hidden;
	padding: initial;
	width: 100%;
}

/* Linea divisoria del 1er menú de solapas */
#iframeBotonera, #botonera {
	border-bottom: 3px solid var(--ultu-color-primary) !important;
}

/* Linea divisoria del 2do menú de solapas */
#botoneraSolapa {
    height: 44px;
}

/* ── Responsive de la botonera (sin escalones, solo ajustes finos) ── */
@container cabecera (max-width: 768px) {
    .ultu-ia-botonera-track   { padding-top: 4px; }
    .ultu-ia-botonera-surface { border-radius: 16px; padding: 7px; }
    .ultu-ia-botonera-nav     { gap: 7px; }

    .ultu-ia-menu-item.menuPrincipal,
    .ultu-ia-menu-pr.btnMenuPr,
    .ultu-ia-menu-pr.btnMenuPrSeleccionado { min-width: 0; }

    .ultu-ia-menu-item-dropdown.menuPrincipal,
    .ultu-ia-menu-item-dropdown.ultu-ia-menu-pr.btnMenuPr,
    .ultu-ia-menu-item-dropdown.ultu-ia-menu-pr.btnMenuPrSeleccionado { min-width: 108px; }

    .ultu-ia-menu-pr-link { min-height: 43px; padding: 4px 7px; }
}


/* ══════════════════════════════════════════════════════════════
   MENÚ LATERAL — Panel de navegación vertical deslizable
   BEM: p_menuLateral__*
   Reemplaza: #menuLateral / #panelLateral de cuerpo.css (deprecado),
              .tituloLateral / .lineasTitulo / .divLateral /
              .EstiloMailLinkLateral / .EstiloMailActualizacion de estilos.css
══════════════════════════════════════════════════════════════ */

/* ── Tab / franja lateral (trigger de apertura) ── */
.p_menuLateral__tab {
    position: fixed !important;
    z-index: 2501;
    top: 0;
    left: 0;
    width: 20px;
    height: 115px;
    min-height: 60px;
    background: var(--ultu-gradient-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 var(--ultu-radius-sm) var(--ultu-radius-sm) 0;
    box-shadow: 3px 0 12px rgba(var(--ultu-color-primary-rgb), 0.30);
    transition: width .2s ease, box-shadow .2s ease;
    padding: 0;
}

.p_menuLateral__tab:hover {
    width: 26px;
    box-shadow: 5px 0 20px rgba(var(--ultu-color-primary-rgb), 0.45);
}

.p_menuLateral__tab-icon {
    color: rgba(255, 255, 255, 0.88);
    --ultu-icon-size: 13px;
}

/* Alert state: punto indicador + pulso de sombra */
.p_menuLateral__tab--alert {
    animation: p_menuLateral-pulse 1.8s ease-in-out infinite;
    position: relative;
}

.p_menuLateral__tab--alert::after {
    content: '';
    position: absolute;
    top: 10px;
    right: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ultu-color-status-busy);
    border: 2px solid #ffffff;
}

@keyframes p_menuLateral-pulse {
    0%, 100% { box-shadow: 3px 0 12px rgba(var(--ultu-color-primary-rgb), 0.30); }
    50%       { box-shadow: 3px 0 24px rgba(var(--ultu-color-primary-rgb), 0.68); }
}

/* ── Panel expandido ── */
.p_menuLateral__panel {
    display: none;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 200px;
    height: 100vh;
    background: #ffffff;
    z-index: 2500;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: var(--ultu-shadow-lg);
    border-right: 1px solid var(--ultu-border);
    border-radius: 0 var(--ultu-radius-md) var(--ultu-radius-md) 0;
}

.p_menuLateral__panel::-webkit-scrollbar { width: 4px; }
.p_menuLateral__panel::-webkit-scrollbar-track { background: var(--ultu-surface); }
.p_menuLateral__panel::-webkit-scrollbar-thumb {
    background: rgba(var(--ultu-color-primary-rgb), 0.25);
    border-radius: 2px;
}
.p_menuLateral__panel {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--ultu-color-primary-rgb), 0.25) var(--ultu-surface);
}

/* ── Logo del sistema ── */
.p_menuLateral__logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px 14px;
    border-bottom: 1px solid var(--ultu-border);
}

.p_menuLateral__logo {
    max-width: 150px;
    height: auto;
}

/* ── Sección genérica ── */
.p_menuLateral__section {
    padding: 10px 12px;
    border-bottom: 1px solid var(--ultu-border);
}

/* ── Encabezado de sección con línea extensible ── */
.p_menuLateral__section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.p_menuLateral__section-title {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--ultu-text-subtle);
    letter-spacing: 0.9px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Línea extensible — elemento explícito para permitir elementos a su derecha */
.p_menuLateral__section-line {
    flex: 1;
    height: 1px;
    background: var(--ultu-border);
    min-width: 10px;
}

/* ── Cuerpo de sección ── */
.p_menuLateral__section-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* ── Ítem clickeable ── */
.p_menuLateral__item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: var(--ultu-radius-sm);
    cursor: pointer;
    color: var(--ultu-text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.3;
    user-select: none;
    transition: background .15s ease, transform .12s ease, color .15s ease;
}

.p_menuLateral__item:hover {
    background: var(--ultu-primary-tint);
    color: var(--ultu-color-primary-dark);
    transform: translateX(2px);
}

.p_menuLateral__item--alert {
    color: var(--ultu-text-base);
    font-weight: 600;
}

/* ── Ícono del ítem ── */
.p_menuLateral__item-icon {
    flex-shrink: 0;
    color: var(--ultu-color-primary);
    opacity: 0.75;
    line-height: 0;
    transition: opacity .15s;
}

.p_menuLateral__item:hover .p_menuLateral__item-icon { opacity: 1; }

/* ── Label del ítem ── */
.p_menuLateral__item-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Badge de contador ── */
.p_menuLateral__item-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 17px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.p_menuLateral__item-badge--warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
}

.p_menuLateral__item-badge--secondary {
    background: #e4e6f4;
    color: var(--ultu-text-subtle);
}

/* ── Timestamp ── */
.p_menuLateral__timestamp {
    font-size: 0.68rem;
    color: var(--ultu-text-faint);
    padding: 5px 8px 2px;
    line-height: 1.4;
}

/* ── Fila de botones de acción ── */
.p_menuLateral__actions {
    display: flex;
    gap: 6px;
    padding: 8px 0 2px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ── Estado del usuario: fila activa ── */
.p_menuLateral__estado-current {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: var(--ultu-radius-sm);
    cursor: pointer;
    color: var(--ultu-text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    user-select: none;
    transition: background .15s ease;
}

.p_menuLateral__estado-current:hover { background: var(--ultu-primary-tint); }

/* ── Punto de color de estado ── */
.p_menuLateral__estado-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1.5px solid rgba(0, 0, 0, 0.08);
}

.p_menuLateral__estado-dot--disponible  { background: var(--ultu-color-status-available); }
.p_menuLateral__estado-dot--ocupado     { background: var(--ultu-color-status-busy);      }
.p_menuLateral__estado-dot--ausente     { background: var(--ultu-color-status-absent);    }
.p_menuLateral__estado-dot--vacaciones  { background: var(--ultu-color-status-vacation);  }

/* ── Chevron del estado ── */
.p_menuLateral__estado-chevron {
    display: inline-block;
    width: 14px;
    height: 14px;
    -webkit-mask: var(--ultu-icon-chevron-down) center / contain no-repeat;
    mask:         var(--ultu-icon-chevron-down) center / contain no-repeat;
    background-color: var(--ultu-text-faint);
    flex-shrink: 0;
    margin-left: auto;
    transition: transform .2s ease;
}

.p_menuLateral__estado-current[aria-expanded="true"] .p_menuLateral__estado-chevron {
    transform: rotate(180deg);
}

/* ── Dropdown de opciones de estado ── */
.p_menuLateral__estado-dropdown {
    background: var(--ultu-surface);
    border: 1px solid var(--ultu-border);
    border-radius: var(--ultu-radius-sm);
    padding: 4px;
    margin: 0 4px 4px;
}

.p_menuLateral__estado-option {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.80rem;
    font-weight: 500;
    color: var(--ultu-text-muted);
    transition: background .12s ease, color .12s ease;
}

.p_menuLateral__estado-option:hover {
    background: var(--ultu-primary-tint);
    color: var(--ultu-color-primary-dark);
}

/* ── Link Help Desk ── */
.p_menuLateral__helpdesk-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: var(--ultu-radius-sm);
    text-decoration: none;
    color: var(--ultu-text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    transition: background .15s ease, color .15s ease, transform .12s ease;
}

.p_menuLateral__helpdesk-link:hover {
    background: var(--ultu-primary-tint);
    color: var(--ultu-color-primary-dark);
    transform: translateX(2px);
    text-decoration: none;
}

/* ── Header de Notificaciones (título + badge inline) ── */
.p_menuLateral__notif-header {
    flex-wrap: wrap;
    row-gap: 4px;
}

/* ── Selector de Cotizadores ── */
.p_menuLateral__select {
    width: 100%;
    padding: 4px 8px;
    border: 1.5px solid var(--ultu-border);
    border-radius: var(--ultu-radius-sm);
    background: var(--ultu-surface);
    font-size: 12px;
    font-family: inherit;
    color: var(--ultu-text-base);
    outline: none;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}

.p_menuLateral__select:focus {
    border-color: var(--ultu-color-primary);
    box-shadow: var(--ultu-shadow-focus);
    background-color: #ffffff;
}

/* ── Pie del panel ── */
.p_menuLateral__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 16px 16px;
}

.p_menuLateral__footer-logo {
    max-width: 100px;
    height: auto;
    opacity: 0.65;
}

.p_menuLateral__footer-copy {
    font-size: 0.70rem;
    color: var(--ultu-text-dim);
}


/* ══════════════════════════════════════════════════════════════
    CONTAINER QUERIES — Cabecera adaptativa sin escalones fijos
    La campana de notificaciones SIEMPRE permanece visible.
══════════════════════════════════════════════════════════════ */

/* Paso 1: cuando la cabecera mide menos de 700px → ocultar Cotización */
@container cabecera (max-width: 700px) {
    .ultu-ia-destacado:not(.ultu-ia-datos-perfil) {
        display: none;
    }
}

/* Paso 2: cuando la cabecera mide menos de 500px → ocultar Perfil */
@container cabecera (max-width: 500px) {
    .ultu-ia-datos-perfil {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════
   OVERLAY DE CARGA (lockWindow)
   Solo posicionamiento — diseño y color vienen de .ultu-loader-shell
   y .ultu-ia-progress-bar respectivamente
══════════════════════════════════════════════════════════════ */
.lockWindow .ultu-loader-shell {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* ======================================================================
   PART 4 -- COMPONENTES GLOBALES REUTILIZABLES
   Spinners/loaders, inputs, buttons, panel consulta,
   iconos SVG, exportar, grilla-global
   ====================================================================== */

/* ──────────────────────────────────────────
   SPINNER DE CARGA GLOBAL
────────────────────────────────────────── */
#load {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ultu-ia-spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid var(--ultu-loading-track);
    border-top-color: var(--ultu-color-primary);
    animation: ultu-spin 0.75s linear infinite;
}

@keyframes ultu-spin {
    to { transform: rotate(360deg); }
}

/* ── Spinner variants (reemplazan loadLogin.gif) ── */
.ultu-ia-spinner-sm {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--ultu-loading-track);
    border-top-color: var(--ultu-color-primary);
    animation: ultu-spin 0.75s linear infinite;
    vertical-align: middle;
}

.ultu-ia-spinner-md {
    display: inline-block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2.5px solid var(--ultu-loading-track);
    border-top-color: var(--ultu-color-primary);
    animation: ultu-spin 0.75s linear infinite;
    vertical-align: middle;
}

/* ── Barra de progreso indeterminada (reemplaza cargando.gif) ── */
.ultu-ia-progress-bar {
    position: relative;
    width: 100%;
    height: 4px;
    background: var(--ultu-loading-track);
    border-radius: 2px;
    overflow: hidden;
}

.ultu-ia-progress-bar::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    background: var(--ultu-color-primary);
    border-radius: 2px;
    animation: ultu-progress-slide 1.6s ease-in-out infinite;
    will-change: transform;
}

@keyframes ultu-progress-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

.ultu-ia-progress-bar-sm {
    height: 2px;
}

/* ── Barra de progreso determinada (updateProgress) — avance animado y suave ── */
.progress .progress-bar {
    transition: width .35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Cápsula del overlay de carga ── */
.ultu-loader-shell {
    width: 100%;
    max-width: 320px;
    padding: 7px 9px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.10),
        0 1px 2px rgba(0, 0, 0, 0.05);
}


/* ──────────────────────────────────────────
   INPUT GLOBAL — input_global
   Campo de texto base del sistema. Altura fija 28px, borde suave #eaecf5,
   radio 8px. Hover y focus usan el color primario con sombra de anillo.
   Usar en cualquier <input type="text|number|email|..."> del sistema.
   No aplica a <select>; para combos usar el componente específico de cada página.
────────────────────────────────────────── */
.input_global {
    height: 25px;
    padding: 0 7px;
    font-size: 12px;
    color: var(--ultu-text-base);
    border: 1.5px solid var(--ultu-border);
    border-radius: var(--ultu-radius-sm);
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s, background .15s;
    appearance: none;
    -webkit-appearance: none;
}
.input_global::placeholder {
    color: var(--ultu-text-placeholder);
}
.input_global:hover:not(:focus) {
    border-color: var(--ultu-primary-border-hover);
}
.input_global:focus {
    border-color: var(--ultu-primary-border-hover);
    box-shadow: var(--ultu-shadow-focus);
    background: #fff;
}
.input_global:disabled,
.input_global[disabled] {
    background: var(--ultu-card-header-bg);
    color: var(--ultu-text-subtle);
    border-color: var(--ultu-border);
    cursor: not-allowed;
    opacity: 1;
}

/* ──────────────────────────────────────────
   SELECT GLOBAL — input_globalSelect / select.FormularioDatosCombo
   Desplegable base del sistema. Misma altura y tokens visuales que input_global.
   Incluye la flecha (chevron) mediante background-image para unificar la apariencia
   cross-browser (reemplaza la flecha nativa con -webkit-appearance: none).
   Único punto de verdad para TODOS los <select> del sistema: tanto los estáticos
   (input_globalSelect) como los cargados vía AJAX por los generadores de combos
   compartidos (agregarCombo.php, agregarComboRol.php, ComboEnEspera en utiles.php),
   que siempre emiten class="FormularioDatosCombo".
────────────────────────────────────────── */
.input_globalSelect,
select.FormularioDatosCombo {
    height: 25px;
    padding: 0 22px 0 7px;
    font-size: 12px;
    color: var(--ultu-text-base);
    border: 1.5px solid var(--ultu-border);
    border-radius: var(--ultu-radius-sm);
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s, background .15s;
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--ultu-icon-chevron-down);
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 13px;
    cursor: pointer;
}
/* width:100% solo para input_globalSelect: es la clase que vive dentro de
   grillas en columna (p_clientes__field) pensadas para ancho completo.
   FormularioDatosCombo a secas se usa también en layouts inline (ej. barra
   "Ordenar por" en barraGlobal__sort) donde el ancho debe seguir siendo el del
   contenido — forzar 100% ahí rompe el layout en una sola fila. */
.input_globalSelect {
    width: 100%;
}
.input_globalSelect:hover:not(:focus),
select.FormularioDatosCombo:hover:not(:focus) {
    border-color: var(--ultu-primary-border-hover);
}
.input_globalSelect:focus,
select.FormularioDatosCombo:focus {
    border-color: var(--ultu-primary-border-hover);
    box-shadow: var(--ultu-shadow-focus);
    background-color: #fff;
}
.input_globalSelect:disabled,
select.FormularioDatosCombo:disabled,
.input_globalSelect[disabled],
select.FormularioDatosCombo[disabled] {
    background-color: var(--ultu-card-header-bg);
    color: var(--ultu-text-subtle);
    border-color: var(--ultu-border);
    cursor: not-allowed;
    opacity: 1;
}

/* ──────────────────────────────────────────
   COMBO GLOBAL — input_globalCombo / input_globalInlineCombo
   Wrappers div para combos <select> inyectados vía AJAX.
   input_globalCombo: combo estándar de ancho completo.
   input_globalInlineCombo: combo de 44% dentro de una fila inline (ej. Tipo + Nº Documento).
   El aspecto visual (borde, radio, flecha, hover/focus/disabled) ya lo resuelve
   select.FormularioDatosCombo en el bloque SELECT GLOBAL — toda esta clase inyecta
   siempre esa clase en el <select>. Acá solo quedan los ajustes de layout propios
   del wrapper flex (estirar el <select> al ancho del contenedor por sobre el
   style="width:...px" inline que agregan los generadores de combos en PHP).
   Usar estos wrappers en cualquier campo de combo AJAX del sistema.
────────────────────────────────────────── */
.input_globalCombo {
    min-height: 28px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
}
.input_globalInlineCombo {
    flex: 0 0 44%;
    min-width: 0;
    overflow: hidden;
}
.input_globalCombo select,
.input_globalInlineCombo select {
    flex: 1;
    width: 100% !important;
}

/* ──────────────────────────────────────────
   BOTÓN GLOBAL — btn_globalWhite
   Cuerpo blanco degradado, texto primario en reposo → oscuro en hover.
   Basado en transición de .ultu-ia-menu-pr-link (sin translateY).
   Usar en cualquier botón de acción del sistema sobre fondos claros o violeta.
────────────────────────────────────────── */
.btn_globalWhite {
    height: 25px;
    padding: 0 8px;
    font-size: 11px;
    font-family: inherit;
    font-weight: 600;
    border: 1.5px solid #d4d6e8;
    border-radius: var(--ultu-radius-sm);
    background: linear-gradient(180deg, #ffffff 0%, #f5f4fb 100%);
    color: var(--ultu-color-primary);
    cursor: pointer;
    letter-spacing: .02em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 3px rgba(0, 0, 0, .06);
    transition: background .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
    outline: none;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.btn_globalWhite:hover {
    background: linear-gradient(180deg, #ffffff 0%, #eae6ff 100%);
    color: var(--ultu-text-base);
    border-color: #a893f0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 10px 24px rgba(108, 79, 209, .18);
}
/* Anillo de foco — mismo token que input_global/input_globalSelect/
   input_globalTextarea (--ultu-shadow-focus), para que tabular por un
   botón se vea tan claro como tabular por un campo. Antes el botón
   apagaba el outline nativo (outline:none) sin reemplazarlo por nada,
   dejando el tabulado "mudo". Se agrega como capa extra de box-shadow
   (no reemplaza el inset/drop-shadow de reposo) para conservar el
   relieve del botón. */
.btn_globalWhite:focus {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 3px rgba(0, 0, 0, .06), var(--ultu-shadow-focus);
}
.btn_globalWhite:disabled,
.btn_globalWhite[disabled] {
    pointer-events: none;
    cursor: default;
    color: var(--ultu-text-subtle);
    background: var(--ultu-card-header-bg);
    border-color: #d4d6e8;
    box-shadow: none;
}
/* .BarraDireccion también se usa para breadcrumbs (ver agregarItemBarraDirecciones en /js);
   al combinarla con btn_globalWhite hay que anular su text-decoration:hover para que no herede el subrayado. */
.BarraDireccion.btn_globalWhite,
.BarraDireccion.btn_globalWhite:hover {
    text-decoration: none;
}

/* ──────────────────────────────────────────
   BOTÓN GLOBAL ICONO — btn_globalIconRefresh
   Botón icon-only circular para acciones de refresco dentro de tablas
   (ej. refrescar cotización por compañía en la grilla de resultados).
   Reemplaza el viejo .btnDegrade + <img src="imagenes/refresh.png">:
   mismo ícono SVG que ya usa el header (ultu-icon--refresh), color por
   token en vez de #60207E hardcodeado. El color lo hereda .ultu-icon
   vía currentColor.
────────────────────────────────────────── */
.btn_globalIconRefresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: #fff;
    border: 1px solid #d4d6e8;
    border-radius: 50%;
    overflow: hidden;
    color: var(--ultu-text-faint);
    cursor: pointer;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.btn_globalIconRefresh:hover {
    color: var(--ultu-color-primary);
    background: var(--ultu-primary-tint);
    border-color: #a893f0;
}
.btn_globalIconRefresh:focus-visible {
    outline: 2px solid var(--ultu-color-primary);
    outline-offset: 2px;
}

/* ──────────────────────────────────────────
   BOTÓN CALENDARIO GLOBAL — btn_globalDate
   Botón cuadrado 28×28px con ícono de calendario via CSS mask.
   Se usa junto a un input de fecha dentro de un wrapper flex.
   Usar en cualquier campo de fecha del sistema.
────────────────────────────────────────── */
.btn_globalDate {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: 1.5px solid var(--ultu-border);
    border-radius: var(--ultu-radius-sm);
    background: var(--ultu-primary-tint);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s, background .15s;
    outline: none;
    font-family: inherit;
}
.btn_globalDate::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    -webkit-mask: var(--ultu-icon-calendar) center / contain no-repeat;
    mask:         var(--ultu-icon-calendar) center / contain no-repeat;
    background-color: var(--ultu-color-primary);
}
.btn_globalDate:hover {
    background: var(--ultu-primary-border-hover);
    border-color: var(--ultu-color-primary);
}
/* Mismo anillo de foco que btn_globalWhite/input_global (--ultu-shadow-focus) --
   sin esto, tabular hasta el ícono de calendario no mostraba ningún indicio. */
.btn_globalDate:focus {
    border-color: var(--ultu-color-primary);
    box-shadow: var(--ultu-shadow-focus);
}

/* Botón "borrar fecha" — mismo molde cuadrado que btn_globalDate, para usar
   siempre junto a él (par calendario + borrar). Reemplaza el viejo
   <a><img src="cancelarFecha.gif"></a> por un botón real con ícono SVG
   (--ultu-icon-close) ya existente en el sistema de tokens. */
.btn_globalDateClear {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: 1.5px solid var(--ultu-border);
    border-radius: var(--ultu-radius-sm);
    background: var(--ultu-color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s, background .15s;
    outline: none;
    font-family: inherit;
}
.btn_globalDateClear::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    -webkit-mask: var(--ultu-icon-close) center / contain no-repeat;
    mask:         var(--ultu-icon-close) center / contain no-repeat;
    background-color: var(--ultu-color-danger);
}
.btn_globalDateClear:focus {
    border-color: var(--ultu-color-danger);
    box-shadow: var(--ultu-shadow-focus);
}
.btn_globalDateClear:hover {
    background: var(--ultu-color-danger-bg);
    border-color: var(--ultu-color-danger);
}

/* ──────────────────────────────────────────
   CAMPO FECHA GLOBAL — input_globalDate
   Wrapper flex para el par input-fecha + btn_globalDate.
   Usar en cualquier campo de fecha del sistema.
────────────────────────────────────────── */
.input_globalDate {
    display: flex;
    gap: 4px;
    align-items: center;
}
.input_globalDate .input_global {
    flex: 1;
}

/* ──────────────────────────────────────────
   PANEL GLOBAL CONSULTA — Componente reutilizable
   para pantallas de búsqueda/filtro en todo el sistema.
   Uso: panel_globalConsulta / panel_globalConsulta-header /
        panel_globalConsulta-header-title / panel_globalConsulta-form-grid
────────────────────────────────────────── */

/* ── Tarjeta contenedora ── */
.panel_globalConsulta {
    background: var(--ultu-gradient-global-grid);
    border-radius: var(--ultu-radius-md);
    box-shadow: var(--ultu-shadow-sm);
    border: 1px solid var(--ultu-border-global-grid);
    overflow: hidden;
    max-width: 1080px;
}

/* ── Header con fondo primario ── */
.panel_globalConsulta-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--ultu-gradient-primary);
}

/* ── Título dentro del header ── */
.panel_globalConsulta-header-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    flex: 1;
}

/* ── Grid de campos: 3 cols → 2 → 1 ── */
.panel_globalConsulta-form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 12px;
    padding: 12px 14px 4px;
}
@media (max-width: 719px) {
    .panel_globalConsulta-form-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
    .panel_globalConsulta-form-grid { grid-template-columns: 1fr; }
}

/* ── Separador de sección ── */
.panel_globalConsulta-section-label {
    grid-column: 1 / -1;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ultu-color-primary);
    padding: 3px 0 2px;
    border-bottom: 1.5px solid var(--ultu-primary-tint);
    margin-top: 4px;
}
.panel_globalConsulta-section-label:first-child {
    margin-top: 0;
}

/* ── Campo individual ── */
.panel_globalConsulta-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

/* ── Label ── */
.panel_globalConsulta-field-label {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    color: var(--ultu-text-muted);
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
    line-height: 1.3;
    margin-bottom: 0;
}

/* ── Acciones (botones) ── */
.panel_globalConsulta-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 12px;
    border-top: 1px solid var(--ultu-border);
    margin-top: 6px;
}

/* ──────────────────────────────────────────
   BOTONES CONSULTA/CANCELAR GLOBAL — btn_globalConsultaCancel
   Par de botones reutilizable para formularios de búsqueda:
   --primary (Consultar) y --ghost (Cancelar).
   Usar dentro de panel_globalConsulta-actions.
────────────────────────────────────────── */

/* ── Base compartida ── */
.btn_globalConsultaCancel {
    height: 28px;
    padding: 0 14px;
    font-size: 12px;
    font-family: inherit;
    font-weight: 600;
    border-radius: var(--ultu-radius-sm);
    border: 1.5px solid var(--ultu-border);
    cursor: pointer;
    transition: all .14s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    outline: none;
    letter-spacing: .01em;
}

/* ── Primario (Consultar) ── */
.btn_globalConsultaCancel--primary {
    background: var(--ultu-color-primary);
    color: #fff;
    border-color: var(--ultu-color-primary);
}
.btn_globalConsultaCancel--primary::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    -webkit-mask: var(--ultu-icon-search) center / contain no-repeat;
    mask:         var(--ultu-icon-search) center / contain no-repeat;
    background-color: #fff;
}
.btn_globalConsultaCancel--primary:hover {
    background: var(--ultu-color-primary-dark);
    border-color: var(--ultu-color-primary-dark);
    box-shadow: var(--ultu-shadow-btn-hover);
    transform: translateY(-1px);
}

/* ── Fantasma (Cancelar) ── */
.btn_globalConsultaCancel--ghost {
    background: transparent;
    color: var(--ultu-text-muted);
}
.btn_globalConsultaCancel--ghost:hover {
    background: var(--ultu-primary-tint);
    border-color: var(--ultu-primary-border-hover);
    color: var(--ultu-color-primary);
}

/* ──────────────────────────────────────────
   BOTÓN GUARDAR GLOBAL — btn_globalSave
   Botón primario de confirmación. Gradiente primario, tamaño estándar de formulario.
   Usar en cualquier formulario de edición del sistema.
────────────────────────────────────────── */
.btn_globalSave {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 22px;
    background: var(--ultu-gradient-primary);
    color: #ffffff;
    border: none;
    border-radius: var(--ultu-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.15px;
    box-shadow: var(--ultu-shadow-btn);
    transition: transform .15s, box-shadow .2s;
    white-space: nowrap;
    line-height: 1;
}
.btn_globalSave:hover {
    transform: translateY(-1px);
    box-shadow: var(--ultu-shadow-btn-hover);
}
.btn_globalSave:active {
    transform: translateY(0);
}

/* ──────────────────────────────────────────
   BOTÓN CANCELAR GLOBAL — btn_globalCancel
   Botón secundario neutro. Fondo surface, borde suave.
   Usar junto a btn_globalSave en formularios de edición.
────────────────────────────────────────── */
.btn_globalCancel {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    background: var(--ultu-surface);
    color: var(--ultu-text-muted);
    border: 1.5px solid var(--ultu-border);
    border-radius: var(--ultu-radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
    white-space: nowrap;
    line-height: 1;
}
.btn_globalCancel:hover {
    background: var(--ultu-surface-hover);
    border-color: #d4d6e8;
    color: var(--ultu-text-base);
}

/* ──────────────────────────────────────────
   NOTA INFORMATIVA GLOBAL — note_global
   Caja de información con borde lateral primario.
   Usar para mensajes de ayuda o contexto en formularios.
────────────────────────────────────────── */
.note_global {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    background: var(--ultu-primary-tint);
    border-left: 3px solid var(--ultu-color-primary);
    border-radius: var(--ultu-radius-sm);
    padding: 11px 14px;
    font-size: 0.78rem;
    color: var(--ultu-text-muted);
    line-height: 1.55;
}
.note_global-icon {
    flex-shrink: 0;
    color: var(--ultu-color-primary);
    line-height: 0;
    margin-top: 1px;
}

/* ──────────────────────────────────────────
   ICONOS SVG — Sistema centralizado via CSS mask
   Uso: <span class="ultu-icon ultu-icon--mail-inbox"></span>
   El color hereda del padre via currentColor.
────────────────────────────────────────── */
.ultu-icon {
    display: inline-block;
    flex-shrink: 0;
    width: var(--ultu-icon-size, 18px);
    height: var(--ultu-icon-size, 18px);
    -webkit-mask: var(--ultu-icon-src) center / contain no-repeat;
    mask:         var(--ultu-icon-src) center / contain no-repeat;
    background-color: currentColor;
    vertical-align: middle;
}

.ultu-icon--sm  { --ultu-icon-size: 14px; }
.ultu-icon--md  { --ultu-icon-size: 18px; }
.ultu-icon--lg  { --ultu-icon-size: 22px; }

.ultu-icon--logo-menu    { --ultu-icon-src: var(--ultu-icon-logo-menu);     }
.ultu-icon--mail-inbox   { --ultu-icon-src: var(--ultu-icon-mail-inbox);    }
.ultu-icon--mail-sent    { --ultu-icon-src: var(--ultu-icon-mail-sent);     }
.ultu-icon--mail-draft   { --ultu-icon-src: var(--ultu-icon-mail-draft);    }
.ultu-icon--mail-archive { --ultu-icon-src: var(--ultu-icon-mail-archive);  }
.ultu-icon--paperclip    { --ultu-icon-src: var(--ultu-icon-paperclip);     }
.ultu-icon--link         { --ultu-icon-src: var(--ultu-icon-rte-link);      }
.ultu-icon--minimize     { --ultu-icon-src: var(--ultu-icon-minimize);      }
.ultu-icon--maximize     { --ultu-icon-src: var(--ultu-icon-maximize);      }
.ultu-icon--cotizador    { --ultu-icon-src: var(--ultu-icon-cotizador);     }
.ultu-icon--tasks        { --ultu-icon-src: var(--ultu-icon-tasks);         }
.ultu-icon--user-status  { --ultu-icon-src: var(--ultu-icon-user-status);   }
.ultu-icon--helpdesk     { --ultu-icon-src: var(--ultu-icon-helpdesk);      }
.ultu-icon--bell         { --ultu-icon-src: var(--ultu-icon-bell);          }
.ultu-icon--chevron-right { --ultu-icon-src: var(--ultu-icon-chevron-right); }
.ultu-icon--chevron-down { --ultu-icon-src: var(--ultu-icon-chevron-down);  }
.ultu-icon--refresh      { --ultu-icon-src: var(--ultu-icon-refresh);       }
.ultu-icon--compose      { --ultu-icon-src: var(--ultu-icon-compose);       }
.ultu-icon--calendar     { --ultu-icon-src: var(--ultu-icon-calendar);      }
.ultu-icon--search       { --ultu-icon-src: var(--ultu-icon-search);        }
.ultu-icon--export       { --ultu-icon-src: var(--ultu-icon-export);        }
.ultu-icon--user         { --ultu-icon-src: var(--ultu-icon-user);          }
.ultu-icon--lock         { --ultu-icon-src: var(--ultu-icon-lock);          }
.ultu-icon--eye          { --ultu-icon-src: var(--ultu-icon-eye);           }
.ultu-icon--eye-off      { --ultu-icon-src: var(--ultu-icon-eye-off);       }
.ultu-icon--arrow-right  { --ultu-icon-src: var(--ultu-icon-arrow-right);   }
.ultu-icon--settings-gear { --ultu-icon-src: var(--ultu-icon-settings-gear); }
.ultu-icon--users-group  { --ultu-icon-src: var(--ultu-icon-users-group);   }
.ultu-icon--hierarchy    { --ultu-icon-src: var(--ultu-icon-hierarchy);     }
.ultu-icon--dispatch     { --ultu-icon-src: var(--ultu-icon-dispatch);     }
.ultu-icon--login-key    { --ultu-icon-src: var(--ultu-icon-login-key);    }
.ultu-icon--text-lines   { --ultu-icon-src: var(--ultu-icon-text-lines);   }
.ultu-icon--briefcase    { --ultu-icon-src: var(--ultu-icon-briefcase);    }
.ultu-icon--info         { --ultu-icon-src: var(--ultu-icon-info);         }
.ultu-icon--check        { --ultu-icon-src: var(--ultu-icon-check);        }
.ultu-icon--close        { --ultu-icon-src: var(--ultu-icon-close);        }
.ultu-icon--car-side     { --ultu-icon-src: var(--ultu-icon-car-side);     }
.ultu-icon--shield       { --ultu-icon-src: var(--ultu-icon-shield);       }
.ultu-icon--percent      { --ultu-icon-src: var(--ultu-icon-percent);      }
.ultu-icon--message-circle { --ultu-icon-src: var(--ultu-icon-message-circle); }
.ultu-icon--add          { --ultu-icon-src: var(--ultu-icon-add);           }
.ultu-icon--copy         { --ultu-icon-src: var(--ultu-icon-copy);          }

/* ──────────────────────────────────────────
    COSAS A REVISAR Y ORDENAR:
────────────────────────────────────────── */


/* ── Botón Exportar (generado por paginarConJS, class="exportar") ── */
.grilla-global td.GrillaPie a.exportar {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 6px;
    border-radius: 6px;
    border: 1.5px solid #d4d6e8;
    background: linear-gradient(180deg, #fff 0%, #f5f4fb 100%);
    color: #6C4FD1 !important;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
    vertical-align: middle;
}
.grilla-global td.GrillaPie a.exportar::before {
    content: '';
    display: inline-block;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    -webkit-mask: var(--ultu-icon-export) center / contain no-repeat;
    mask:         var(--ultu-icon-export) center / contain no-repeat;
    background-color: currentColor;
}
.grilla-global td.GrillaPie a.exportar:hover {
    border-color: #22c55e;
    color: #16a34a !important;
    background: linear-gradient(180deg, #fff 0%, #f0fdf4 100%);
    text-decoration: none !important;
}

/* ── Celda con texto + botón de acción (reemplaza tabla anidada dentro de td) ── */
.ultu-cell-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}
.ultu-cell-action span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Truncado multilínea reutilizable (texto largo en celdas de grilla) ──
   Uso: agregar class="ultu-clamp" al elemento con el texto (a, span, div).
   Cantidad de renglones configurable por instancia (default 3):
   style="--ultu-clamp-lines: 2"                                       */
.ultu-clamp {
    --ultu-clamp-lines: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--ultu-clamp-lines);
    line-clamp: var(--ultu-clamp-lines);
    overflow: hidden;
    overflow-wrap: break-word;
}


/* ══════════════════════════════════════════════════════════════
   GRILLA GLOBAL — Módulo de resultados reutilizable
   Aurora design. 100% autocontenido, sin dependencia de estilos.css.
   Asignar class="grilla-global" en reemplazo de class="grilla".
══════════════════════════════════════════════════════════════ */

/* ── Wrapper: contiene la tabla para border-radius confiable ── */
.grilla-global-wrap {
    border-radius: var(--ultu-radius-md);
    border: 1px solid var(--ultu-border-global-grid);
    margin-bottom: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    box-shadow: 0 4px 20px rgba(108, 79, 209, .09);
}

.grilla-global-wrap::-webkit-scrollbar { height: 4px; }
.grilla-global-wrap::-webkit-scrollbar-track { background: var(--ultu-surface); }
.grilla-global-wrap::-webkit-scrollbar-thumb {
    background: rgba(var(--ultu-color-primary-rgb), 0.25);
    border-radius: 2px;
}
.grilla-global-wrap {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--ultu-color-primary-rgb), 0.25) var(--ultu-surface);
}

/* ── grillaValores: tabla legacy de las grillas comparativas de cotización
   (Auto, ART, presupuestos), migrada desde estilos.css. No usa el rediseño
   completo de .grilla-global, pero comparte el mismo .grilla-global-wrap
   como contenedor — necesita width:100% para no quedar pegada a la
   izquierda en pantallas anchas. ── */
.grillaValores {
    background-color: #FFFFFF;
    width: 100%;
}

/* ── Reparto de ancho de columnas dentro de .grillaValores (table-layout:
   auto, el default): primera columna (nombre de compañía) y última (botón
   de refresh) fijas al ancho de su contenido; el resto (celdas de precio,
   con width="95px"/"80" hardcodeado inline en el PHP) se liberan
   (width:auto) para que sean las que estiran y absorben el espacio
   sobrante del 100% de .grilla-global-wrap. Con table-layout:auto cada
   columna de precio sigue dimensionándose según su propio contenido
   (una celda con "216,918.00" será más ancha que una con "-"); no hay
   igualdad garantizada entre ellas, a cambio de que el ancho siga
   respondiendo al contenido real en vez de recortarlo (ver análisis de
   table-layout:fixed, descartado).
   .tituloCia y .btn_globalIconRefresh ya son clases estables presentes
   en los ~8 templates que generan esta tabla, por lo que no hace falta
   tocar el PHP. El único <td> sin clase (la esquina vacía rowspan="2"
   del header) no necesita regla propia: el ancho de columna lo terminan
   definiendo las celdas de datos, que son mayoría. ── */
.grillaValores td {
    width: auto;
}
.grillaValores td.tituloCia {
    width: 110px;
}

/* ── Espacio reservado para el logo chico de la compañía (24x24), a la
   izquierda del nombre. Ver clases/logosCias.php — mapeo manual por
   compañía. Si no hay logo mapeado, se devuelve un <span> vacío del
   mismo tamaño para que la fila mantenga la alineación igual que las
   demás. Por ahora solo conectado en el motor Auto. ── */
.tituloCia-logo {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 6px;
    vertical-align: middle;
    object-fit: contain;
    border-radius: 3px;
}
.grillaValores td:has(.btn_globalIconRefresh) {
    width: 25px;
}

/* ── Espaciado del ícono de "sin cotización" (ultu-icon--close, ex
   error.png) SOLO cuando es hijo directo de un <td> de esta tabla —
   no toca el ícono en sí (mismo .ultu-icon--close que usa el botón
   Cancelar en adm_miPerfil.php), ni los usos en el texto de
   Aclaraciones (esos van dentro de un <div>, no directo en un <td>).
   Ensancha la columna cuando no hay dato numérico, evitando que quede
   más angosta que sus vecinas. ── */
#grillaValores td > .ultu-icon--close {
    margin: 0 20px;
}

/* ── Estados de selección de la grilla de cotización, migrados desde
   estilos.css (colores hardcodeados → tokens de ultu.css). Jerarquía
   visual: .celdaSelect es la cotización efectivamente elegida — el
   único estado "fuerte" (gradiente primario sólido + texto blanco,
   mismo lenguaje que los botones primarios del sistema). El resto son
   estados más suaves (tinte primario claro), en orden de intensidad:
   .ciaSelect (compañía en edición) > .fondoSelect (fila aceptada) =
   .tituloCia:hover/.tituloCobertura (pill de grupo) = .btnCuota .left:hover
   (preview al pasar el mouse). ── */
.fondoSelect {
    background-color: var(--ultu-primary-tint);
}

.btnCuota .left:hover {
    color: #fff;
    cursor: pointer;
    border-radius: 5px;
    background: var(--ultu-primary-border-hover);
}

.celdaSelect {
    color: #fff;
    cursor: pointer;
    border-radius: 5px;
    background: var(--ultu-gradient-primary);
    box-shadow: var(--ultu-shadow-btn);
}

.ciaSelect {
    color: var(--ultu-color-primary);
    cursor: pointer;
    border-radius: 5px;
    background: var(--ultu-primary-tint);
    box-shadow: inset 0 0 0 1.5px var(--ultu-primary-border-hover);
}

.tituloCia:hover {
    cursor: pointer;
    border-radius: 5px;
    background: var(--ultu-primary-tint);
}

.tituloCobertura {
    cursor: pointer;
    border-radius: 5px 5px 0 0;
    background: var(--ultu-gradient-header-soft);
}

/* ── Tabla base: collapse elimina los gaps de cellspacing="1" del HTML ── */
.grilla-global {
    background: #ebecf2;
    width: 100%;
    border-collapse: collapse;
    border: none;
    table-layout: auto;
}

/* ── Header: gradiente en el TR evita el degradé por columna ── */
.grilla-global tr.GrillaCabecera {
    background: linear-gradient(180deg, #d5cbf7, #c4b5f4);
}
.grilla-global tr.GrillaCabecera td {
    background: transparent !important;
    padding: 5px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    border: none !important;
    text-align: center;
    height: auto;
}

.grilla-global tr.GrillaTexto {
    transition: background-color .12s ease-out;
}

.grilla-global tr.GrillaTexto td {
    padding: 2px 2px;
    font-size: 11px;
    color: #1a1a1a !important;
    border: none !important;
    border: 1px solid #d7d8de !important;
    vertical-align: middle;
    text-align: center;
    height: auto;
    transition: background-color .12s ease-out, color .12s ease-out;
}

/* Acento izquierdo sutil — degradé lateral Aurora */
.grilla-global tr.GrillaTexto td:first-child {
    border-left: 3px solid #ede9ff !important;
    transition: border-color .12s ease-out;
}

/* ── Hover: color sólido con fundido, TD transparente para que traspase ── */
.grilla-global tr.GrillaTexto:hover {
    background: #F4F0FE;
    cursor: pointer;
}
.grilla-global tr.GrillaTexto:hover td {
    background: transparent !important;
    color: #5A3DBF !important;
    cursor: pointer;
}
.grilla-global tr.GrillaTexto:hover td:first-child {
    border-left-color: #a893f0 !important;
}

/* ── Fila seleccionada ── */
.grilla-global tr.GrillaTextoSeleccionado {
    background: linear-gradient(90deg, #ede9ff 0%, #f0ecff 60%, #f7f4ff 100%);
}
.grilla-global tr.GrillaTextoSeleccionado td {
    padding: 2px 2px !important;
    background: transparent !important;
    color: #5A3DBF !important;
    font-size: 11px !important;
    font-weight: 600;
    vertical-align: middle;
    text-align: center;
}
.grilla-global tr.GrillaTextoSeleccionado td:first-child {
    border-left: 3px solid #7B5FD9 !important;
}

/* ── Footer: anula "width: max-content !important" de estilos.css ── */
.grilla-global td.GrillaPie {
    padding: 2px 6px;
    border-top: 1px solid #eaecf5;
    text-align: center;
    width: auto !important;
}

/* Footer de 3 zonas: spacer / paginado / exportar (reemplaza el viejo margin-top negativo) */
.grilla-global td.GrillaPie .grilla-global-paginado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    line-height: 1;
}
.grilla-global td.GrillaPie .grilla-global-paginado__spacer,
.grilla-global td.GrillaPie .grilla-global-paginado__exportar {
    flex: 1 1 0;
}
.grilla-global td.GrillaPie .grilla-global-paginado__exportar {
    text-align: right;
}
.grilla-global td.GrillaPie .grilla-global-paginado__paginas {
    flex: 0 0 auto;
}

/* Tabla interna de paginación */
.grilla-global td.GrillaPie .grilla-global-paginado__paginas > table {
    display: table;
    border-collapse: collapse;
    margin: 0 auto;
}
.grilla-global td.GrillaPie .grilla-global-paginado__paginas > table td {
    background: transparent !important;
    border: none !important;
    padding: 0 2px !important;
    vertical-align: middle;
}

/* Links de páginas (no activa) */
.grilla-global td.GrillaPie a.EstiloPaginacion,
.grilla-global td.GrillaPie a.EstiloPaginacion:visited,
.grilla-global td.GrillaPie a.EstiloPaginacion:link {
    display: inline-block;
    min-width: 22px;
    text-align: center;
    padding: 4px 6px;
    border-radius: 5px;
    border: 1.5px solid #d4d6e8;
    background: #fff;
    color: #6C4FD1 !important;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background .15s, border-color .15s;
}
.grilla-global td.GrillaPie a.EstiloPaginacion:hover {
    color: #5A3DBF !important;
    background: #f0ecff;
    border-color: #a893f0;
    text-decoration: none !important;
}

/* Wrapper neutro — todos los divs de página */
.grilla-global td.GrillaPie .EstiloPaginacionSeleccionado {
    display: inline-block;
    vertical-align: middle;
    color: #6C4FD1 !important;
    font-weight: 700 !important;
    font-size: 11px !important;
}

/* Página activa: div sin <a> adentro → filled pill (Chrome 105+) */
.grilla-global td.GrillaPie .EstiloPaginacionSeleccionado:not(:has(a)) {
    min-width: 22px;
    padding: 4px 6px;
    border-radius: 5px;
    background: #6C4FD1;
    color: #fff !important;
    border: 1.5px solid #6C4FD1;
}

/* ── Badges de Estado — Pill con borde ── */
.gg-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    border: 1.5px solid;
}
.gg-badge--activo    { color: #16a34a; background: #f0fdf4; border-color: #86efac; }
.gg-badge--prospecto { color: #b45309; background: #fffbeb; border-color: #fcd34d; }
.gg-badge--no-activo { color: #dc2626; background: #fef2f2; border-color: #fca5a5; }


/* ──────────────────────────────────────────
   ssDetalle 
   Fondo y contenedor global para utilizar en todas las SubSolapas que
   se llamen "Detalle", esto apunta a reemplazar las clases viejas "fondo margenes"
────────────────────────────────────────── */

.ssDetalle {
    background: var(--ultu-gradient-global-grid);
    border: 1px solid var(--ultu-border-global-grid);
    border-bottom-left-radius:  var(--ultu-radius-lg);
    border-bottom-right-radius: var(--ultu-radius-lg);
    box-shadow: var(--ultu-shadow-sm);
    padding: 10px;
    margin-bottom: 20px;
}

/* ──────────────────────────────────────────
   ssDetalle-grid / ssDetalle-acciones
   Grid de filtros y botonera para usar dentro de .ssDetalle, en subsolapas
   de consulta que no requieren su propia card con header (a diferencia de
   panel_globalConsulta). Los campos van con panel_globalConsulta-field /
   panel_globalConsulta-field-label (label arriba, campo abajo) directamente
   dentro de este grid. Grid de 4 columnas que se reduce a 3, luego 2 y
   luego a 1 en mobile.
────────────────────────────────────────── */
.ssDetalle-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px 20px;
}
@media (max-width: 1100px) { .ssDetalle-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .ssDetalle-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ssDetalle-grid { grid-template-columns: 1fr; } }

/* ── Título de sección (barraGlobal__titulo) cuando se usa suelto arriba
   de un .ssDetalle: mismo espaciado que ya separa la línea violeta de la
   subsolapa del título (padding-top de .ssDetalle), replicado debajo para
   separarlo de los campos. Scoped a .ssDetalle para no alterar el resto de
   usos de .barraGlobal__titulo (barras de resultados, headers, etc.). ── */
.ssDetalle > .barraGlobal__titulo {
    display: block;
    margin-bottom: 7px;
}

.ssDetalle-acciones {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding-top: 10px;
    margin-top: 8px;
}

/* ── comentDetalle: textarea de comentarios de class.detalle.php,
   migrado desde estilos.css (mismo dominio de pantallas "Detalle") ── */
.comentDetalle {
    min-height: 30px;
    width: 99%;
    padding: 2px 2px 2px 2px;
    background: var(--ultu-card-header-bg);
    border: 1px solid #999999;
    border-radius: 3px;
    font-size: 11px;
    color: #666666;
}

/* ── fondoT2: fondo idle de celdas en tablas comparativas de cotización
   (contrapartida de .fondoSelect, que queda en estilos.css), migrado
   desde estilos.css. Mismo token que los estados hover neutros del
   sistema (btn_globalCancel:hover, ultu-ia-btn-back). ── */
.fondoT2 {
    background-color: var(--ultu-surface-hover);
}


/* ======================================================================
   PART 5 -- LOGIN
   Pantalla de autenticacion. Prefijo: ultu-ia-
   ====================================================================== */

body.ultu-login {
    min-height: 100vh;
    background: var(--ultu-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* ──────────────────────────────────────────
   FONDO DECORATIVO DEL LOGIN
────────────────────────────────────────── */
.ultu-ia-bg-blob {
    position: fixed;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}
.ultu-ia-bg-blob--tl {
    width: 420px; height: 420px;
    background: #c4c6e8;
    top: -100px; left: -120px;
}
.ultu-ia-bg-blob--br {
    width: 350px; height: 350px;
    background: #cfd0ec;
    bottom: -80px; right: -90px;
}

.ultu-ia-dot-grid {
    position: fixed;
    pointer-events: none;
    z-index: 0;
    opacity: 0.35;
}
.ultu-ia-dot-grid--tl { top: 90px;  left: 70px; }
.ultu-ia-dot-grid--bl { bottom: 90px; left: 70px; }
.ultu-ia-dot-grid--tr { top: 90px;  right: 60px; }

/* ──────────────────────────────────────────
   CARD / CONTENEDOR CENTRAL DEL LOGIN
────────────────────────────────────────── */
#divCentral {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    padding: 24px 16px;
}

.ultu-ia-login-card {
    background: #ffffff;
    border-radius: var(--ultu-radius-card);
    padding: 48px 44px 36px;
    box-shadow: var(--ultu-shadow-xl);
}

/* ── Logo ── */
.ultu-ia-login-logo { text-align: center; margin-bottom: 32px; }
#logoSistema  { max-width: 200px; height: auto; }

/* ── Títulos ── */
.ultu-ia-login-title {
    text-align: center;
    font-size: 1.70rem;
    font-weight: 700;
    color: var(--ultu-text-base);
    margin-bottom: 8px;
    letter-spacing: -0.3px;
    line-height: 1.25;
}
.ultu-ia-login-title span { color: var(--ultu-color-primary); }

.ultu-ia-login-subtitle {
    text-align: center;
    color: var(--ultu-text-subtle);
    font-size: 0.92rem;
    line-height: 1.65;
    margin-bottom: 28px;
}

/* ──────────────────────────────────────────
   INPUTS DEL LOGIN
────────────────────────────────────────── */
.ultu-ia-input-wrap {
    position: relative;
    margin-bottom: 14px;
}

.ultu-ia-input-wrap .ico-left {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ultu-text-faint);
    pointer-events: none;
    display: flex;
}

.ultu-ia-input-wrap input[type="text"],
.ultu-ia-input-wrap input[type="password"] {
    width: 100%;
    padding: 13px 44px 13px 44px;
    border: 1.5px solid #e6e8f4;
    border-radius: var(--ultu-radius-md);
    background: var(--ultu-surface);
    font-size: 0.94rem;
    font-family: inherit;
    color: var(--ultu-text-base);
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.ultu-ia-input-wrap input::placeholder { color: var(--ultu-text-placeholder); }

.ultu-ia-input-wrap input:focus {
    border-color: var(--ultu-color-primary);
    background: #fff;
    box-shadow: var(--ultu-shadow-focus);
}

/* ── Toggle ojo contraseña ── */
.ultu-ia-btn-eye {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ultu-text-faint);
    padding: 4px;
    line-height: 0;
    transition: color .2s;
}
.ultu-ia-btn-eye:hover { color: var(--ultu-color-primary); }

/* ──────────────────────────────────────────
   BOTONES DEL LOGIN
────────────────────────────────────────── */

/* Primario — acción principal */
.ultu-ia-btn-login {
    width: 100%;
    padding: 14px 20px;
    background: var(--ultu-gradient-primary);
    color: #fff;
    border: none;
    border-radius: var(--ultu-radius-md);
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    letter-spacing: 0.2px;
    box-shadow: var(--ultu-shadow-btn-hero);
    transition: transform .15s, box-shadow .2s;
}
.ultu-ia-btn-login:hover {
    transform: translateY(-1px);
    box-shadow: var(--ultu-shadow-btn-hero-hover);
}
.ultu-ia-btn-login:active { transform: translateY(0); }

/* Secundario — acción de retroceso */
.ultu-ia-btn-back {
    padding: 12px 20px;
    background: var(--ultu-surface-hover);
    color: var(--ultu-text-muted);
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background .2s;
}
.ultu-ia-btn-back:hover { background: #e4e6f4; }

/* Recuperar contraseña */
.ultu-ia-btn-recover {
    flex: 1;
    padding: 12px;
    background: var(--ultu-gradient-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-shadow: var(--ultu-shadow-btn);
    transition: transform .15s;
}
.ultu-ia-btn-recover:hover { transform: translateY(-1px); }

/* Cerrar mensaje */
.ultu-ia-btn-msg-close {
    padding: 11px 24px;
    background: var(--ultu-gradient-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-shadow: var(--ultu-shadow-btn);
}

/* Confirmación Sí */
.ultu-ia-btn-conf-yes {
    padding: 11px 24px;
    background: var(--ultu-gradient-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-shadow: var(--ultu-shadow-btn);
}

/* Confirmación No */
.ultu-ia-btn-conf-no {
    padding: 11px 24px;
    background: var(--ultu-surface-hover);
    color: var(--ultu-text-muted);
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
}

/* ──────────────────────────────────────────
   FILA DE OPCIONES (olvidé contraseña / recordarme) LOGIN
────────────────────────────────────────── */
.ultu-ia-row-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 6px 0 22px;
}

.ultu-ia-link-forgot {
    color: var(--ultu-color-primary);
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .2s;
}
.ultu-ia-link-forgot:hover { opacity: 0.7; }

.ultu-ia-remember-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.84rem;
    color: var(--ultu-text-muted);
    cursor: pointer;
    user-select: none;
}
.ultu-ia-remember-label input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--ultu-color-primary);
    cursor: pointer;
}

/* ──────────────────────────────────────────
   FORMULARIO RECUPERAR CONTRASEÑA LOGIN
────────────────────────────────────────── */
.ultu-ia-recover-note {
    background: #f3f3fb;
    border-left: 3px solid var(--ultu-color-primary);
    border-radius: var(--ultu-radius-sm);
    padding: 12px 16px;
    font-size: 0.875rem;
    color: var(--ultu-text-muted);
    line-height: 1.55;
    margin-bottom: 18px;
}

.ultu-ia-recover-actions {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}

/* ──────────────────────────────────────────
   PANELES DE MENSAJE Y CONFIRMACIÓN LOGIN
────────────────────────────────────────── */
.ultu-ia-msg-box {
    background: var(--ultu-surface);
    border-radius: var(--ultu-radius-md);
    padding: 18px 20px;
    margin-bottom: 18px;
    font-size: 0.94rem;
    color: var(--ultu-text-base);
    line-height: 1.6;
}

.ultu-ia-msg-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}


/* ──────────────────────────────────────────
   DIVISOR Y FOOTER
────────────────────────────────────────── */
.ultu-ia-card-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 18px;
    color: #c8cad8;
    font-size: 0.7rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.ultu-ia-card-divider::before,
.ultu-ia-card-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ultu-border);
}

.ultu-ia-card-footer { text-align: center; }
#logoKimn    { max-width: 110px; height: auto; opacity: 0.72; }
.ultu-ia-copyright { margin-top: 10px; font-size: 0.77rem; color: var(--ultu-text-dim); }

/* ──────────────────────────────────────────
   RESPONSIVE
────────────────────────────────────────── */
@media (max-width: 520px) {
    .ultu-ia-login-card  { padding: 36px 24px 28px; border-radius: 20px; }
    .ultu-ia-login-title { font-size: 1.45rem; }
}

@media (max-width: 360px) {
    .ultu-ia-login-card    { padding: 28px 16px 22px; }
    .ultu-ia-row-options   { flex-direction: column; align-items: flex-start; gap: 10px; }
}


/* ======================================================================
   PART 6 -- MI PERFIL
   Datos del usuario autenticado. Prefijo BEM: p_miPerfil-
   ====================================================================== */

/* ══════════════════════════════════════════════════════════════
   MI PERFIL — Pantalla de datos del usuario autenticado
   Prefijo BEM: p_miPerfil-
   Autocontenido: sin dependencias de estilos.css ni de ningún
   otro archivo CSS. Todas las referencias usan variables :root.
   Linea de inicio: 1425
══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────
   WRAPPER PRINCIPAL DE PÁGINA
────────────────────────────────────────── */
.p_miPerfil_wrapper {
    padding: 0 0 24px;
    max-width: 1080px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* ──────────────────────────────────────────
   HERO BANNER — Avatar + nombre + rol
────────────────────────────────────────── */
.p_miPerfil-hero {
    background: var(--ultu-gradient-global-grid);
    border-radius: var(--ultu-radius-card);
    border: 1.5px solid var(--ultu-border-global-grid);
    box-shadow: var(--ultu-shadow-md);
    padding: 18px 28px;
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    overflow: hidden;
}

/* Banda de acento izquierda */
.p_miPerfil-hero::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--ultu-gradient-primary);
    border-radius: 4px 0 0 4px;
}

/* Blob decorativo de fondo */
.p_miPerfil-hero::after {
    content: '';
    position: absolute;
    right: -70px; top: -70px;
    width: 260px; height: 260px;
    background: radial-gradient(
        circle,
        rgba(var(--ultu-color-primary-rgb), 0.055) 0%,
        transparent 68%
    );
    pointer-events: none;
}

/* Círculo de avatar con gradiente primario */
.p_miPerfil-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--ultu-gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    box-shadow:
        0 8px 24px rgba(var(--ultu-color-primary-rgb), 0.34),
        0 2px 6px rgba(0, 0, 0, 0.10);
}

/* Info textual del hero */
.p_miPerfil-hero-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    flex: 1;
}

.p_miPerfil-hero-name {
    font-size: 1.28rem;
    font-weight: 700;
    color: var(--ultu-text-base);
    letter-spacing: -0.2px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.p_miPerfil-hero-role {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--ultu-text-muted);
    line-height: 1.3;
}

/* Chip con handle de login */
.p_miPerfil-hero-login {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--ultu-color-primary);
    background: var(--ultu-primary-tint);
    padding: 3px 11px 3px 9px;
    border-radius: 20px;
    width: fit-content;
    margin-top: 3px;
    letter-spacing: 0.1px;
    border: 1px solid rgba(var(--ultu-color-primary-rgb), 0.18);
}

/* ──────────────────────────────────────────
   GRID DE DOS COLUMNAS PARA LAS TARJETAS
   Columna izquierda más ancha (datos personales)
   Columna derecha más angosta (cambiar contraseña)
────────────────────────────────────────── */
.p_miPerfil-cards-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 20px;
    align-items: start;
}

/* ──────────────────────────────────────────
   TARJETA BASE
────────────────────────────────────────── */
.p_miPerfil-card {
    background: var(--ultu-gradient-global-grid);
    border-radius: var(--ultu-radius-lg);
    border: 1.5px solid var(--ultu-border-global-grid);
    box-shadow: var(--ultu-shadow-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Encabezado de tarjeta con gradiente primario */
.p_miPerfil-card-header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 22px;
    background: var(--ultu-gradient-primary);
    flex-shrink: 0;
}

.p_miPerfil-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.90);
    flex-shrink: 0;
    line-height: 0;
}

.p_miPerfil-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.25px;
}

/* Cuerpo de la tarjeta */
.p_miPerfil-card-body {
    padding: 24px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1;
}

/* ──────────────────────────────────────────
   ETIQUETA DE SUBSECCIÓN INTERNA
────────────────────────────────────────── */
.p_miPerfil-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.70rem;
    font-weight: 700;
    color: var(--ultu-text-subtle);
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.p_miPerfil-section-label-icon {
    display: inline-flex;
    align-items: center;
    color: var(--ultu-color-primary);
    opacity: 0.75;
    line-height: 0;
}

/* Línea extensible a la derecha de la etiqueta */
.p_miPerfil-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ultu-text-subtle);
}

/* ──────────────────────────────────────────
   GRID DE CAMPOS DEL FORMULARIO
────────────────────────────────────────── */
.p_miPerfil-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
}

/* Campo que ocupa el ancho completo del grid */
.p_miPerfil-field--full {
    grid-column: 1 / -1;
}

/* ── Campo individual: label flotante + input ── */
.p_miPerfil-field {
    display: flex;
    flex-direction: column;
}

/* Etiqueta del campo */
.p_miPerfil-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ultu-text-muted);
    letter-spacing: 0.35px;
    text-transform: uppercase;
}

.p_miPerfil-label-icon {
    display: inline-flex;
    align-items: center;
    color: var(--ultu-color-primary);
    opacity: 0.65;
    line-height: 0;
}

/* ──────────────────────────────────────────
   CHIP "Solo lectura"
────────────────────────────────────────── */
.p_miPerfil-badge-locked {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 700;
    color: var(--ultu-text-faint);
    background: var(--ultu-surface);
    border: 1px solid var(--ultu-border);
    padding: 0px 4px;
    border-radius: 20px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-left: auto;
}

/* ──────────────────────────────────────────
   FILA DE BOTONES DE ACCIÓN
────────────────────────────────────────── */
.p_miPerfil-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ultu-border-global-grid);
}


/* ──────────────────────────────────────────
   RESPONSIVE DE MI PERFIL
────────────────────────────────────────── */

/* Tablets — apilar las dos tarjetas verticalmente */
@media (max-width: 920px) {
    .p_miPerfil-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* Móvil — ajustes de espacio y grid de campos a 1 col */
@media (max-width: 600px) {
    .p_miPerfil-card-body {
        padding: 18px 16px 16px;
    }

    .p_miPerfil-form-grid {
        grid-template-columns: 1fr;
    }

    .p_miPerfil-field--full {
        grid-column: 1;
    }
}


/* ======================================================================
   PART 7 -- ADMINISTRACION
   Panel de administracion. Prefijo BEM: p_administracion_
   ====================================================================== */

/* ══════════════════════════════════════════════════════════════
    PANEL DE ADMINISTRACIÓN — p_administracion_*
══════════════════════════════════════════════════════════════ */

.p_administracion_wrapper {
    padding: 0 0 24px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.p_administracion_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));
    gap: 18px;
}

.p_administracion_card {
    background: var(--ultu-card-header-bg);
    border: 1px solid var(--ultu-border-global-grid);
    border-left: 3px solid var(--ultu-color-primary);
    border-radius: var(--ultu-radius-md);
    box-shadow: var(--ultu-shadow-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.p_administracion_card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--ultu-gradient-primary);
    border-bottom: none;
}

.p_administracion_card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
}

.p_administracion_card-title {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

.p_administracion_card-body {
    padding: 8px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.p_administracion_link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 12px;
    border-radius: 8px;
    color: var(--ultu-text-base);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    background: transparent;
    transition: background .2s ease, color .2s ease, transform .15s ease;
    cursor: pointer;
    line-height: 1.4;
}

.p_administracion_link::after {
    content: '';
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    opacity: 0.38;
    flex-shrink: 0;
}

.p_administracion_link:hover {
    background: #f8f0ff;
    color: var(--ultu-color-primary-dark);
    transform: translateX(3px);
    text-decoration: none;
}

.p_administracion_link:hover::after {
    opacity: 0.8;
}

/* ======================================================================
   PART 7b -- DASHBOARD ULTU
   paginas/adm_dashboardUltu.php. Prefijo BEM: p_dashboardUltu__
   Rediseño visual (KPIs + donuts + área) sin tocar la obtención de datos:
   los canvas de Chart.js y la leyenda se siguen alimentando con los mismos
   arrays PHP ($keys_.../$valores_...) que ya calculaba la página.
   ====================================================================== */

.p_dashboardUltu__wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* ── Barra de acciones: leyenda de última actualización + refresco manual ── */
.p_dashboardUltu__toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.p_dashboardUltu__toolbar-timestamp {
    font-size: 12px;
    font-weight: 500;
    color: var(--ultu-text-faint);
}

/* ── KPIs superiores ── */
.p_dashboardUltu__kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.p_dashboardUltu__kpi-card {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--ultu-border-global-grid);
    border-radius: var(--ultu-radius-card);
    box-shadow: var(--ultu-shadow-md);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.p_dashboardUltu__kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.p_dashboardUltu__kpi-label-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.p_dashboardUltu__kpi-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ultu-text-muted);
}

.p_dashboardUltu__kpi-hint {
    font-size: 10px;
    font-weight: 500;
    color: var(--ultu-text-faint);
    letter-spacing: normal;
    text-transform: none;
}

.p_dashboardUltu__kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--ultu-color-primary-rgb), .12);
    color: var(--ultu-color-primary);
}

.p_dashboardUltu__kpi-value {
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ultu-text-base);
    font-variant-numeric: tabular-nums;
}

/* ── Grillas de tarjetas ── */
.p_dashboardUltu__grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.p_dashboardUltu__grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.p_dashboardUltu__card {
    background: #ffffff;
    border: 1px solid var(--ultu-border-global-grid);
    border-radius: var(--ultu-radius-card);
    box-shadow: var(--ultu-shadow-md);
    padding: 22px;
}

.p_dashboardUltu__card-title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--ultu-text-base);
    margin-bottom: 16px;
}

.p_dashboardUltu__card-title small {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--ultu-text-subtle);
    margin-top: 2px;
}

/* Variante inline: aclaración a la derecha del título, misma línea (rankings).
   Selector compuesto (small + clase) a propósito: necesita más especificidad
   que ".p_dashboardUltu__card-title small" de arriba para poder pisar su
   "display: block" — con una sola clase, esa regla ganaba y el hint caía debajo. */
.p_dashboardUltu__card-title small.p_dashboardUltu__rank-title-hint {
    display: inline;
    font-size: 12px;
    font-weight: 500;
    color: var(--ultu-text-subtle);
    margin-top: 0;
    margin-left: 6px;
}

/* ── Donut + leyenda ── */
.p_dashboardUltu__donut-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.p_dashboardUltu__donut-canvas-box {
    position: relative;
    width: 168px;
    height: 168px;
    flex-shrink: 0;
}

.p_dashboardUltu__donut-canvas-box canvas {
    width: 100% !important;
    height: 100% !important;
}

.p_dashboardUltu__donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}

.p_dashboardUltu__donut-center-n {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ultu-text-base);
    font-variant-numeric: tabular-nums;
}

.p_dashboardUltu__donut-center-l {
    font-size: .62rem;
    color: var(--ultu-text-subtle);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.p_dashboardUltu__legend {
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
    min-width: 160px;
}

.p_dashboardUltu__legend-row {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
}

.p_dashboardUltu__legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    flex-shrink: 0;
}

.p_dashboardUltu__legend-label {
    flex: 1;
    color: var(--ultu-text-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.p_dashboardUltu__legend-value {
    font-weight: 700;
    color: var(--ultu-text-base);
    font-variant-numeric: tabular-nums;
}

.p_dashboardUltu__legend-pct {
    width: 36px;
    text-align: right;
    font-size: 11px;
    color: var(--ultu-text-subtle);
    font-variant-numeric: tabular-nums;
}

/* ── Gráfico de área (pólizas por mes) ── */
.p_dashboardUltu__timechart-box {
    width: 100%;
    height: 240px;
}

/* ── Barras verticales con scroll horizontal (Prima por compañía) ── */
.p_dashboardUltu__barchart-scroll-x {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--ultu-color-primary-rgb), 0.25) var(--ultu-surface);
}

.p_dashboardUltu__barchart-scroll-x::-webkit-scrollbar { height: 6px; }
.p_dashboardUltu__barchart-scroll-x::-webkit-scrollbar-track { background: var(--ultu-surface); }
.p_dashboardUltu__barchart-scroll-x::-webkit-scrollbar-thumb {
    background: rgba(var(--ultu-color-primary-rgb), 0.25);
    border-radius: 3px;
}

.p_dashboardUltu__barchart-inner {
    width: 100%;
    height: 320px;
}


/* ── Rankings ── */
.p_dashboardUltu__rank-list {
    display: flex;
    flex-direction: column;
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--ultu-color-primary-rgb), 0.25) var(--ultu-surface);
}

.p_dashboardUltu__rank-list::-webkit-scrollbar { width: 4px; }
.p_dashboardUltu__rank-list::-webkit-scrollbar-track { background: var(--ultu-surface); }
.p_dashboardUltu__rank-list::-webkit-scrollbar-thumb {
    background: rgba(var(--ultu-color-primary-rgb), 0.25);
    border-radius: 2px;
}

.p_dashboardUltu__rank-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--ultu-border);
}

.p_dashboardUltu__rank-row:last-child {
    border-bottom: none;
}

.p_dashboardUltu__rank-badge {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    background: rgba(var(--ultu-color-primary-rgb), .12);
    color: var(--ultu-color-primary);
}

.p_dashboardUltu__rank-row:first-child .p_dashboardUltu__rank-badge {
    background: var(--ultu-color-primary);
    color: #ffffff;
}

.p_dashboardUltu__rank-name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--ultu-text-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.p_dashboardUltu__rank-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 11px;
    color: var(--ultu-text-subtle);
}

.p_dashboardUltu__rank-meta b {
    font-size: 13px;
    font-weight: 700;
    color: var(--ultu-text-base);
    font-variant-numeric: tabular-nums;
}

/* ── Estado vacío (sin datos) ── */
.p_dashboardUltu__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 0;
    color: var(--ultu-text-subtle);
    font-size: 13px;
}

.p_dashboardUltu__empty img {
    width: 120px;
    opacity: .6;
}

@media (max-width: 900px) {
    .p_dashboardUltu__kpi-row,
    .p_dashboardUltu__grid-2,
    .p_dashboardUltu__grid-3 {
        grid-template-columns: 1fr;
    }
}


/* ======================================================================
   PART 8 -- CLIENTES
   Consulta de clientes. Prefijo BEM: p_clientes__
   ====================================================================== */

/* ============================================================
   p_clientes — PANTALLA DE CONSULTA
   Rediseño CSS Grid BEM. Variables reutilizadas de --ultu-*.
   Sin font-family propio (hereda de body).
   ============================================================ */

/* ── Neutralizar .divConsulta de estilos.css (deprecated) ── */
.divConsulta {
    position: relative !important;
    background-color: transparent !important;
    width: 100% !important;
    padding-bottom: 1em !important;
}

/* ── Contenedor del panel: ancho estable, breathing room lateral ── */
#pantallaConsulta {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* ── Panel card: centrado a nivel del propio elemento ── */
.p_clientes__panel {
    background: var(--ultu-gradient-global-grid);
    border-radius: var(--ultu-radius-md);
    box-shadow: var(--ultu-shadow-sm);
    border: 1px solid var(--ultu-border-global-grid);
    overflow: hidden;
    max-width: 1080px;
}

/* ── Header del panel ── */
.p_clientes__panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--ultu-gradient-primary);
}
.p_clientes__panel-header-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    flex: 1;
}
.p_clientes__panel-header-hint {
    font-size: 11px;
    color: rgba(255, 255, 255, .60);
}

/* ── Campo individual ── */
.p_clientes__field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

/* ── Label ── */
.p_clientes__field-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--ultu-text-muted);
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
    line-height: 1.3;
}


/* ── Inline: Tipo + Nº Documento ── */
.p_clientes__field-inline {
    display: flex;
    gap: 5px;
    align-items: center;
}
.p_clientes__field-inline .input_global {
    flex: 1;
    min-width: 0;
}

/* ── Fecha + botón calendario ── */
.p_clientes__field-date {
    display: flex;
    gap: 4px;
    align-items: center;
}
.p_clientes__field-date .input_global {
    flex: 1;
}

/* ── Acciones (botones) ── */
.p_clientes__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 12px;
    border-top: 1px solid var(--ultu-border);
    margin-top: 6px;
}
.p_clientes__btn {
    height: 28px;
    padding: 0 14px;
    font-size: 12px;
    font-family: inherit;
    font-weight: 600;
    border-radius: var(--ultu-radius-sm);
    border: 1.5px solid var(--ultu-border);
    cursor: pointer;
    transition: all .14s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    outline: none;
    letter-spacing: .01em;
}
.p_clientes__btn--primary {
    background: var(--ultu-color-primary);
    color: #fff;
    border-color: var(--ultu-color-primary);
}
.p_clientes__btn--primary::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    -webkit-mask: var(--ultu-icon-search) center / contain no-repeat;
    mask:         var(--ultu-icon-search) center / contain no-repeat;
    background-color: #fff;
}
.p_clientes__btn--primary:hover {
    background: var(--ultu-color-primary-dark);
    border-color: var(--ultu-color-primary-dark);
    box-shadow: var(--ultu-shadow-btn-hover);
    transform: translateY(-1px);
}
.p_clientes__btn--ghost {
    background: transparent;
    color: var(--ultu-text-muted);
}
.p_clientes__btn--ghost:hover {
    background: var(--ultu-primary-tint);
    border-color: var(--ultu-primary-border-hover);
    color: var(--ultu-color-primary);
}

/* ── Override histórico de la vieja button.btnVioleta (ya eliminada de estilos.css) ── */
#pantallaConsulta button.p_clientes__btn--primary {
    background: var(--ultu-color-primary) !important;
    color: #fff !important;
    box-shadow: none !important;
}
#pantallaConsulta button.p_clientes__btn--primary:hover {
    background: var(--ultu-color-primary-dark) !important;
    box-shadow: var(--ultu-shadow-btn-hover) !important;
}

/* ── Neutralizar legacy de estilos.css dentro del scope ── */
#pantallaConsulta label { margin-bottom: 0; }

/* ── Barra de resultados: "Clientes y Prospectos" ── */
.barraGlobal {
    padding: 6px 0 8px;
}
.barraGlobal__main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.barraGlobal__left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.barraGlobal__titulo {
    font-size: 20px;
    font-weight: 500;
    color: var(--ultu-color-primary);
    white-space: nowrap;
}
.barraGlobal__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.barraGlobal__sort {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.barraGlobal__sort-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ultu-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
}
.barraGlobal__filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.barraGlobal select {
    height: 23px;
    padding: 0 22px 0 7px;
    font-size: 12px;
    font-family: inherit;
    color: var(--ultu-text-base);
    background: var(--ultu-surface);
    border: 1.5px solid var(--ultu-border);
    border-radius: var(--ultu-radius-sm);
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--ultu-icon-chevron-down);
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 13px;
    transition: border-color .15s;
    box-sizing: border-box;
}
.barraGlobal select:focus {
    border-color: var(--ultu-primary-border-hover);
}

/* ── Ocultar barra en pantalla de búsqueda ── */
#ocultarSolapas ~ .barraGlobal { display: none; }
#pantallaConsulta .fondo {
    background: transparent;
    border: 0;
    padding: 0;
    width: auto;
}
#pantallaConsulta .FilaFormularioEtiquetaDato {
    all: unset;
}


/* ======================================================================
   PART 9 -- PRESUPUESTOS
   ====================================================================== */

/* ──────────────────────────────────────────
   POPOVER DE DETALLE DE COBERTURA — cobDetalle
   Tarjeta flotante que se abre al hacer click en el "+" (.masDetalle)
   junto a un valor cotizado, en las grillas de resultados de cotización
   (Auto, AP, General, ART, Sabana). Migrado desde estilos.css, donde
   compartía reglas con .destacado/.divGraficos/.menuEndoso/.cabGraficos
   — esas clases quedaron intactas allá con su estilo original, solo se
   les quitó ".cobDetalle"/".cobDetalle .tit"/".cobDetalle .cerrar" del
   selector compartido.
   Mismo lenguaje visual que panel_globalConsulta: header con degradado
   primario + card con sombra de elevación, en vez de la vieja tarjeta
   plana (borde #CCC + sombra gris + header gris con inset glow).
   El posicionamiento (top/left calculados en JS según el lado con más
   espacio libre en pantalla) NO se tocó — sigue igual en los 4 motores;
   acá solo se rediseña la piel visual. ── */
.cobDetalle {
    display: none;
    position: absolute;
    z-index: 2600;
    background: #fff;
    border-radius: var(--ultu-radius-md);
    box-shadow: var(--ultu-shadow-lg);
}

/* ── Header: mismo degradado primario que panel_globalConsulta-header ── */
.cobDetalle .tit {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 20px;
    max-height: 20px;
    padding: 0 8px 0 12px;
    background: var(--ultu-gradient-primary);
    border-radius: var(--ultu-radius-md) var(--ultu-radius-md) 0 0;
}

/* Sin min-width:0 a propósito: así el flex item nunca se achica por
   debajo de su contenido (lo que forzaría el wrap a 2 líneas) — en
   cambio, .cobDetalle (auto-width por ser position:absolute) crece
   para contener siempre el título completo en una sola línea. */
.cobDetalle .titulo {
    float: none;
    flex: 1;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: #fff;
}

/* ── Botón cerrar: círculo translúcido sobre el degradado, mismo patrón
   que btn_globalIconRefresh pero pensado para fondo oscuro ── */
.cobDetalle .cerrar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-left: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}
.cobDetalle .cerrar:hover {
    background: rgba(255, 255, 255, 0.32);
    color: #fff;
}

.cobDetalle .img {
    margin: 10px 0 0 14px;
}

/* ── Cuerpo con el detalle (comisión, prima, premio, cuotas, paquetes) ── */
.cobDetalle .detalle {
    height: auto;
    overflow-y: auto;
    border-radius: 0 0 var(--ultu-radius-md) var(--ultu-radius-md);
    min-height: 180px;
    min-width: 200px;
    max-height: 350px;
    max-width: 500px;
    margin-bottom: 0;
    padding: 10px 14px 14px;
    font-size: 11px;
    color: var(--ultu-text-muted);
}
.cobDetalle .detalle::-webkit-scrollbar { width: 4px; }
.cobDetalle .detalle::-webkit-scrollbar-track { background: var(--ultu-surface); }
.cobDetalle .detalle::-webkit-scrollbar-thumb {
    background: rgba(var(--ultu-color-primary-rgb), 0.25);
    border-radius: 2px;
}

/* ── Flechita indicadora hacia el botón que abrió el popover: rombo
   rotado 45°, mismo color que el header. Antes era un cuadrado sin
   "position" (nunca se veía — bug arrastrado desde el original). Se
   posiciona en "left"/"margin-left" dinámicamente desde JS
   (mostrarDetalleCia... según el lado hacia el que abre); acá solo se
   define su aspecto y el "top" fijo. ── */
.cobDetalle .marca {
    position: absolute;
    z-index: 0;
    top: -5px;
    left: 14px;
    width: 12px;
    height: 12px;
    background: var(--ultu-gradient-primary);
    transform: rotate(45deg);
    border-radius: 2px 0 0 0;
}

/* ======================================================================
   PART 10 -- PÓLIZAS — pol_polizasConsulta
   ====================================================================== */

/* ──────────────────────────────────────────
   MULTISELECT GLOBAL — input_globalMultiSelect
   Listbox de selección múltiple para filtros de Estado.
   Usar con .panel_globalConsulta-field--full para ocupar todo el ancho.
   Ctrl+clic selecciona múltiples ítems.
────────────────────────────────────────── */
.input_globalMultiSelect {
    width: 100%;
    min-height: 120px;
    padding: 4px;
    font-size: 12px;
    color: var(--ultu-text-base);
    background: #fff;
    border: 1.5px solid var(--ultu-border);
    border-radius: var(--ultu-radius-sm);
    outline: none;
    box-sizing: border-box;
    overflow-y: auto;
    transition: border-color .15s, box-shadow .15s;
}
.input_globalMultiSelect:hover:not(:focus) {
    border-color: var(--ultu-primary-border-hover);
}
.input_globalMultiSelect:focus {
    border-color: var(--ultu-primary-border-hover);
    box-shadow: var(--ultu-shadow-focus);
}
.input_globalMultiSelect option {
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: background .1s;
}
.input_globalMultiSelect option:hover {
    background: var(--ultu-primary-tint);
}
.input_globalMultiSelect option:checked {
    background: var(--ultu-color-primary);
    color: #fff;
}
.input_globalMultiSelect {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--ultu-color-primary-rgb), 0.25) var(--ultu-surface);
}
.input_globalMultiSelect::-webkit-scrollbar { width: 4px; }
.input_globalMultiSelect::-webkit-scrollbar-track { background: var(--ultu-surface); }
.input_globalMultiSelect::-webkit-scrollbar-thumb {
    background: rgba(var(--ultu-color-primary-rgb), 0.25);
    border-radius: 2px;
}

/* ──────────────────────────────────────────
   MODIFICADORES DE CAMPO — panel_globalConsulta
────────────────────────────────────────── */

/* Campo que ocupa todo el ancho del grid */
.panel_globalConsulta-field--full {
    grid-column: 1 / -1;
}

/* Fila control (.divCliente + botones), mismo patrón ya usado en
   .p_polizas-grid__control/.p_ordenes-grid__control/.p_PolizaEndoso-grid__control
   -- acá con el namespace panel_globalConsulta (cli_clientesDetalleEditar.php,
   campo Responsable). Sin este wrapper, .divCliente y cada <button> quedan
   como hijos sueltos del .panel_globalConsulta-field (flex-direction:column),
   apilados uno debajo del otro en vez de en una fila. */
.panel_globalConsulta-field__control { display: flex; align-items: center; gap: 8px; }
.panel_globalConsulta-field__control .botones { display: flex; gap: 6px; flex-shrink: 0; }
.panel_globalConsulta-field__control .divCliente {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

/* Garantizar que oculto prevalece sobre display:flex — especificidad doble clase (0-2-0) gana */
.panel_globalConsulta-field.oculto,
.panel_globalConsulta-section-label.oculto {
    display: none;
}

/* Campo con checkbox inline (label + input en fila) */
.panel_globalConsulta-field--checkbox {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding-top: 16px;
}
.panel_globalConsulta-field--checkbox .panel_globalConsulta-field-label {
    text-transform: none;
    font-size: 12px;
    font-weight: 400;
    color: var(--ultu-text-base);
    letter-spacing: 0;
    white-space: normal;
    cursor: pointer;
    order: 2;
}
.panel_globalConsulta-field--checkbox input[type="checkbox"] {
    order: 1;
    width: 15px;
    height: 15px;
    accent-color: var(--ultu-color-primary);
    cursor: pointer;
    flex-shrink: 0;
}
/* Checkbox deshabilitado: mismo criterio que inputs/selects — no debe
   verse como algo clickeable si todavia no esta disponible. El :has()
   en el wrapper permite tambien apagar el cursor "manito" del label,
   que por defecto queda en pointer sin importar el estado del checkbox. */
.panel_globalConsulta-field--checkbox input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: .5;
}
.panel_globalConsulta-field--checkbox:has(input[type="checkbox"]:disabled) {
    cursor: not-allowed;
}
.panel_globalConsulta-field--checkbox:has(input[type="checkbox"]:disabled) .panel_globalConsulta-field-label {
    cursor: not-allowed;
    color: var(--ultu-text-subtle);
}

/* Radio button global — mismo criterio que panel_globalConsulta-field--checkbox
   (accent-color nativo, sin pseudo-elementos custom). Acá el <label> ENVUELVE
   directamente el input + su texto (en vez de usar for/id) porque varios
   formularios legacy repiten el mismo id en cada radio de un grupo (bug
   preexistente en el HTML, nunca referenciado por JS vía #id — siempre por
   name — así que no es riesgoso ignorarlo) y un for/id apuntaría siempre al
   primer radio del grupo. */
.panel_globalConsulta-field--radio {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--ultu-text-base);
    cursor: pointer;
}
.panel_globalConsulta-field--radio input[type="radio"] {
    width: 15px;
    height: 15px;
    accent-color: var(--ultu-color-primary);
    cursor: pointer;
    flex-shrink: 0;
}
.panel_globalConsulta-field--radio:has(input[type="radio"]:disabled) {
    cursor: not-allowed;
    color: var(--ultu-text-subtle);
}
.panel_globalConsulta-field--radio input[type="radio"]:disabled {
    cursor: not-allowed;
}

/* ======================================================================
   PART 11 -- PÓLIZAS CONSULTA — panel_polizasConsulta
   Componente EXCLUSIVO de pol_polizasConsulta.php.
   No tiene max-width. Grid de 4 columnas con Estado siempre top-right.
   No interfiere en absoluto con panel_globalConsulta de presupuestos.
   ====================================================================== */

/* ── Tarjeta contenedora ── */
.panel_polizasConsulta {
    max-width: 1440px;
    background: var(--ultu-gradient-global-grid);
    border-radius: var(--ultu-radius-md);
    box-shadow: var(--ultu-shadow-sm);
    border: 1px solid var(--ultu-border-global-grid);
    overflow: hidden;
}

/* ── Header (mismo estilo visual que panel_globalConsulta) ── */
.panel_polizasConsulta-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--ultu-gradient-primary);
}
.panel_polizasConsulta-header-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    flex: 1;
}

/* ── Grid: 4 columnas por defecto, sin restricción de ancho ── */
.panel_polizasConsulta-form-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 12px;
    padding: 12px 14px 4px;
    align-items: start;  /* cada campo se alinea al tope de su fila */
}

/* ── Separador de sección — por defecto abarca todo el ancho ── */
.panel_polizasConsulta-section-label {
    grid-column: 1 / -1;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ultu-color-primary);
    padding: 3px 0 2px;
    border-bottom: 1.5px solid var(--ultu-primary-tint);
    margin-top: 4px;
}
.panel_polizasConsulta-section-label:first-child {
    margin-top: 0;
}

/*
  PÓLIZA label: NO ocupa la última columna (reservada para Estado).
  grid-column: 1 / 4 → cols 1, 2, 3  (la col 4 queda libre para Estado)
  Se redefine en cada breakpoint para respetar la columna variable de Estado.
*/
.panel_polizasConsulta-section-label--poliza {
    grid-column: 1 / 4;
}

/*
  ESTADO label: posicionamiento explícito → siempre en la última columna, fila 1.
  El algoritmo de auto-placement del grid lo excluye de la zona de auto-place,
  por eso los campos de Póliza (que sí auto-place) evitan esa celda naturalmente.
*/
.panel_polizasConsulta-section-label--estado {
    grid-column: 4;
    grid-row: 1;
    margin-top: 0;
}

/*
  ESTADO field: posicionamiento explícito → última columna, filas 2-5.
  Cálculo: 10 campos de Póliza / 3 cols = ⌈10/3⌉ = 4 filas (filas 2, 3, 4, 5).
  align-self: stretch → ocupa toda la altura del rango de filas que abarca.
*/
.panel_polizasConsulta-field--estado {
    grid-column: 4;
    grid-row: 2 / 6;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* El multiselect crece para llenar toda la altura disponible del campo */
.panel_polizasConsulta-field--estado .input_globalMultiSelect {
    flex: 1;
    min-height: 100px;
    max-height: 210px;
    height: 100%;
}
/* Texto de ayuda: pequeño, itálico, no uppercase */
.panel_polizasConsulta-estado-hint {
    font-size: 10px;
    color: var(--ultu-text-subtle);
    font-style: italic;
    user-select: none;
    line-height: 1.3;
}


/* ── Acciones (botones) ── */
.panel_polizasConsulta-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 12px;
    border-top: 1px solid var(--ultu-border);
    margin-top: 6px;
}


/* Oculto en section-labels: especificidad 0-2-0 garantiza que display:none prevalece. */
.panel_polizasConsulta-section-label.oculto {
    display: none;
}

/* ======================================================
   RESPONSIVE — panel_polizasConsulta
   Breakpoints calculados por cantidad de columnas totales:
   4 cols (default) → 3 cols (≤960px) → 2 cols (≤720px) → 1 col (≤480px)
   En cada salto se recalcula:
   · grid-template-columns
   · grid-column del label --poliza  (deja libre la última col para Estado)
   · grid-column y grid-row del label --estado y del field --estado
   ====================================================== */

/* ── 3 columnas totales: Estado en col 3, campos de Póliza en cols 1-2 ──
   Póliza: 10 campos / 2 cols por fila = ⌈10/2⌉ = 5 filas → Estado filas 2-6
*/
@media (max-width: 960px) {
    .panel_polizasConsulta-form-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .panel_polizasConsulta-section-label--poliza {
        grid-column: 1 / 3;
    }
    .panel_polizasConsulta-section-label--estado {
        grid-column: 3;
        grid-row: 1;
    }
    .panel_polizasConsulta-field--estado {
        grid-column: 3;
        grid-row: 2 / 7;
    }
}

/* ── 2 columnas totales: Estado en col 2, campos de Póliza solo en col 1 ──
   Póliza: 10 campos en 1 col = 10 filas → Estado filas 2-11
*/
@media (max-width: 720px) {
    .panel_polizasConsulta-form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .panel_polizasConsulta-section-label--poliza {
        grid-column: 1 / 2;
    }
    .panel_polizasConsulta-section-label--estado {
        grid-column: 2;
        grid-row: 1;
    }
    .panel_polizasConsulta-field--estado {
        grid-column: 2;
        grid-row: 2 / 12;
    }
}

/* ── 1 columna: flujo DOM natural ──
   Estado aparece 2º en orden vertical, justo después del label "PÓLIZA"
   (es el 2º elemento en el DOM dentro del grid).
   Se cancelan el posicionamiento explícito y el stretch de fila.
*/
@media (max-width: 480px) {
    .panel_polizasConsulta-form-grid {
        grid-template-columns: 1fr;
    }
    .panel_polizasConsulta-section-label--poliza {
        grid-column: 1 / -1;
    }
    .panel_polizasConsulta-section-label--estado {
        grid-column: 1 / -1;
        grid-row: auto;
    }
    .panel_polizasConsulta-field--estado {
        grid-column: 1 / -1;
        grid-row: auto;
        align-self: auto;
    }
    .panel_polizasConsulta-field--estado .input_globalMultiSelect {
        flex: none;
        height: auto;
        min-height: 120px;
    }
}

/* ======================================================================
   PART 8b -- CLIENTES: FORMULARIO DE ALTA/EDICIÓN — form_globalFieldset
   Componente reutilizable para pantallas de ALTA/EDICION de un registro
   completo (Nuevo/Editar Cliente, etc.). A diferencia de panel_globalConsulta
   (paneles de búsqueda/filtro con header en violeta), este conserva la
   esencia de <fieldset><legend> pero modernizado: marco con título apoyado
   sobre el borde, sin header tipo card. Los campos dentro del grid
   reutilizan panel_globalConsulta-field / -field-label / -field--full /
   --checkbox (ya existentes más arriba en este archivo).
   Origen: rediseño de paginas/cli_clientesDetalleEditar.php.
   ====================================================================== */

/* Envoltorio exterior: fondo --ultu-global-surface + bordes redondeados.
   Recibe del fondo blanco de la página y separa visualmente cada bloque
   del formulario (Datos Principales, Direcciones, Teléfonos, etc). */
.form_globalFieldsetContainer {
    background: var(--ultu-global-surface);
    border-radius: calc(var(--ultu-radius-md) + 6px);
    box-shadow: var(--ultu-shadow-sm);
    padding: 1px;
    margin: 0 0 20px;
    max-width: 1080px;
}

/* Fieldset real dentro del contenedor: bordes redondeados propios,
   fondo transparente (hereda el --ultu-global-surface del contenedor).
   Se mantiene <fieldset>/<legend> real por accesibilidad; solo se
   modernizan el borde, el radio y la tipografía de la leyenda. */
fieldset.form_globalFieldset {
    margin: 0;
    padding: 6px 16px 16px;
    background: transparent;
    border: 1.5px solid var(--ultu-text-placeholder);
    border-radius: var(--ultu-radius-md);
}

.form_globalFieldset-legend {
    padding: 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ultu-color-primary);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Grid de 3 columnas → colapsa a 2 y luego 1 en pantallas chicas. */
.form_globalFieldset-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 20px;
    padding-top: 8px;
}
@media (max-width: 900px) {
    .form_globalFieldset-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .form_globalFieldset-grid { grid-template-columns: 1fr; }
}

/* Fila para agrupar checkboxes en una sola línea, centrados. */
.form_globalFieldset-checkbox-row {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 28px;
    padding-top: 4px;
}

/* Barra de acciones (Nuevo/Editar/Borrar, Agregar/Cancelar) dentro de
   un fieldset. Reemplaza el viejo .divBotones agregando gap consistente
   entre botones btn_globalWhite. */
.form_globalFieldset-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 10px;
}

/* Layout de 2 columnas para colocar 2 contenedores lado a lado (ej.
   Teléfonos + Mails), apilados en 1 columna en pantallas chicas. */
.form_globalFieldset-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 1080px;
    margin: 0 0 20px;
}
@media (max-width: 720px) {
    .form_globalFieldset-pair { grid-template-columns: 1fr; }
}
.form_globalFieldset-pair .form_globalFieldsetContainer {
    max-width: none;
    margin-bottom: 0;
}

/* Acciones finales del formulario (Guardar/Cancelar), fuera de cualquier
   fieldset. Se centran DENTRO del ancho del formulario (1080px), no de
   toda la pantalla — reemplaza el viejo <div align="center"> sin tope
   de ancho, que quedaba desfasado respecto al resto del contenido
   (que arranca a la izquierda, sin margin:auto, como .p_miPerfil_wrapper). */
.form_globalFieldset-finalActions {
    display: flex;
    justify-content: center;
    gap: 8px;
    max-width: 1080px;
}

/* Separador sutil entre grupos de campos dentro del mismo fieldset
   (ej. después de Alias, después de Profesión). Ocupa todo el ancho
   del grid; se atenúa en los extremos para que no toque los bordes. */
.form_globalDivider {
    grid-column: 1 / -1;
    height: 1px;
    border: none;
    margin: 10px 0;
    background: linear-gradient(90deg, transparent, var(--ultu-border-global-grid) 12%, var(--ultu-border-global-grid) 88%, transparent);
}

/* ──────────────────────────────────────────
   TEXTAREA GLOBAL — input_globalTextarea
   Mismo lenguaje visual que input_global (borde, radio, foco), pero
   con altura propia y resize vertical. Usar en cualquier <textarea>
   del sistema (ej. Comentario, Aclaración).
────────────────────────────────────────── */
.input_globalTextarea {
    width: 100%;
    min-height: 70px;
    padding: 8px 10px;
    font-size: 12px;
    font-family: inherit;
    color: var(--ultu-text-base);
    background: #fff;
    border: 1.5px solid var(--ultu-border);
    border-radius: var(--ultu-radius-sm);
    outline: none;
    box-sizing: border-box;
    resize: vertical;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.input_globalTextarea::placeholder {
    color: var(--ultu-text-placeholder);
}
.input_globalTextarea:hover:not(:focus) {
    border-color: var(--ultu-primary-border-hover);
}
.input_globalTextarea:focus {
    border-color: var(--ultu-primary-border-hover);
    box-shadow: var(--ultu-shadow-focus);
    background: #fff;
}
.input_globalTextarea:disabled,
.input_globalTextarea[disabled] {
    background: var(--ultu-card-header-bg);
    color: var(--ultu-text-subtle);
    border-color: var(--ultu-border);
    cursor: not-allowed;
    opacity: 1;
    resize: none;
}

/* ── divCliente: celda de solo lectura (Tomador/Asegurado/Beneficiario, etc.)
   Comparte --ultu-card-header-bg con input_globalTextarea:disabled (mismo
   lenguaje visual que un campo deshabilitado) — modernizada a la línea del
   resto de los componentes (input_global/input_globalSelect): borde y radio
   por token, misma altura, con transición. La usan ~24 pantallas, algunas
   TODAVÍA sin migrar donde la clase cae directo sobre un <td> — por eso NO
   lleva display:flex (pisaría el display:table-cell y rompería esas tablas
   viejas); el centrado vertical es por line-height, que funciona igual en
   un <div> que en un <td>. Cambio puramente visual, no toca estructura ni
   JS de ninguna pantalla. ── */
.divCliente {
    background: var(--ultu-card-header-bg);
    color: var(--ultu-text-subtle);
    border: 1.5px solid var(--ultu-border);
    border-radius: var(--ultu-radius-sm);
    padding: 0 7px;
    height: 25px;
    line-height: 22px;
    box-sizing: border-box;
    cursor: not-allowed;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.divCliente:hover {
    border-color: var(--ultu-primary-border-hover);
}

/* Borde rojo de "obligatorio sin completar" para .divCliente (Tomador,
   Asegurado en Pólizas). No es un <input>/<select> real, así que el
   truco nativo :required:invalid no aplica -- esta clase la togglea a
   mano actualizarRequeridosClientePolizaEditarGeneral() en polizasEditar.js
   según si el input hidden asociado ya tiene un id > 0. Mismos tokens que
   el resto de los campos obligatorios (input_global:required:invalid). */
.divCliente--invalid {
    border-color: var(--ultu-color-danger-border);
}
.divCliente--invalid:hover {
    border-color: var(--ultu-color-danger);
}

/* ──────────────────────────────────────────
   CAMPOS OBLIGATORIOS — is-required / :required
   Modernización del asterisco (antes color:red literal en estilos.css,
   ahora token --ultu-color-danger). Override intencional: misma
   especificidad que la regla vieja, gana por orden de carga (ultu.css
   despues de estilos.css).
   El borde tenue usa el atributo HTML nativo `required` + :invalid del
   navegador — cero JS. Es la capa "informativa" (todavia falta completar);
   el estado de error real post-intento-de-guardado queda para una
   iteracion futura que toque el feedback de validacion (hoy son
   popups via mensaje()).
────────────────────────────────────────── */
.is-required::after {
    content: "* ";
    margin-left: 3px;
    color: var(--ultu-color-danger);
    font-weight: bold;
}

.input_global:required:invalid,
.input_globalSelect:required:invalid,
select.FormularioDatosCombo:required:invalid,
.FormularioDatos:required:invalid {
    border-color: var(--ultu-color-danger-border);
}
.input_global:required:invalid:hover:not(:focus),
.input_globalSelect:required:invalid:hover:not(:focus),
select.FormularioDatosCombo:required:invalid:hover:not(:focus),
.FormularioDatos:required:invalid:hover:not(:focus) {
    border-color: var(--ultu-color-danger);
}

/* Asterisco que aparece/desaparece segun el estado del campo (:has(), sin JS).
   Ya hay precedente de :has() en produccion en este mismo archivo
   (body:has(#ultu-ia-cabecera), .grilla-global td.GrillaPie ... :not(:has(a))).
   Degradacion prolija en navegadores viejos: el asterisco simplemente
   queda visible siempre, como estaba antes de esto — no rompe nada.
   :required:disabled tambien cuenta como "ocultar asterisco": un campo
   disabled queda fuera de la validacion de constraints del navegador (nunca
   matchea :valid NI :invalid), asi que en modo consulta (todo disabled)
   sin este agregado el asterisco quedaba pegado aunque el dato ya estuviera
   cargado — no tiene sentido pedir un dato que no se puede editar ahora. */
.panel_globalConsulta-field:has(:required:valid, :required:disabled) .is-required::after,
.panel_globalConsulta-field--full:has(:required:valid, :required:disabled) .is-required::after {
    display: none;
}

/* p_presupuestos-grid (Cotizador de Automotores) no envuelve cada par
   etiqueta:campo en su propio contenedor como panel_globalConsulta-field
   — son todos hermanos directos del grid. Por eso acá el :has() se ancla
   en la propia etiqueta y mira su hermano inmediato: la mayoría de los
   campos tiene el control envuelto en un div (":has(+ * ...)"), pero
   algunos (ej. Rastreo vehicular) tienen el <select required> como
   hermano directo, sin div envolvente (":has(+ :required:valid)"). Si
   algún campo nuevo no respeta ninguna de las dos formas, el asterisco
   simplemente queda visible siempre (misma degradación prolija que en
   panel_globalConsulta-field). También se oculta con :required:disabled
   (modo consulta, ver comentario arriba en panel_globalConsulta-field). */
.p_presupuestos-grid__label.is-required:has(+ :required:valid, + * :required:valid, + :required:disabled, + * :required:disabled)::after {
    display: none;
}

/* Auto Scoring (#autoScoring) reusa el mismo mecanismo pero con dos
   variantes de etiqueta propias: la mayoría son ".FilaFormularioEtiquetaDato
   is-required" (mismo patrón hermano-adyacente que p_presupuestos-grid__label
   de arriba); "Franquicias Disponibles" es la excepción — ahí el is-required
   vive en un <label> anidado DENTRO de un .FilaFormularioEtiquetaDato, no en
   la propia etiqueta. Scopeado a #autoScoring para no interferir si alguna
   otra pantalla llega a usar is-required sobre .FilaFormularioEtiquetaDato. */
#autoScoring .FilaFormularioEtiquetaDato.is-required:has(+ :required:valid, + * :required:valid, + :required:disabled, + * :required:disabled)::after,
#autoScoring label.is-required:has(+ :required:valid, + * :required:valid, + :required:disabled, + * :required:disabled)::after {
    display: none;
}

/* ======================================================================
   MODAL DE SISTEMA — msgSistema
   Cartel de alerta/confirmacion GLOBAL (funcion mensaje() en js/utiles.js).
   No es exclusivo de ninguna pantalla: se usa en TODO el sistema. Cualquier
   ajuste aca impacta a todas las pantallas que llaman mensaje().
   Reemplaza los estilos legacy que vivian en estilos.css: #contMsgSistema,
   #msgSistema, #mostrarMensaje, y el borde violeta/fondo gris que
   #msgSistema compartia con .divFlotante/.popup (esas dos clases quedaron
   intactas en estilos.css, se les quito unicamente #msgSistema del selector).

   BUG DE POSICIONAMIENTO RESUELTO — antes mensaje() calculaba a mano
   "top = altura ventana/2 - altura cartel/2" y forzaba position:absolute
   por JS (pisando el position:fixed del CSS viejo). Absolute se mide desde
   el techo del DOCUMENTO, no de la pantalla — por eso el cartel aparecia
   arriba de todo si el usuario habia scrolleado. Con position:fixed +
   top/left 50% + transform(-50%,-50%) el centrado queda resuelto 100% en
   CSS, sin medir nada por JS, sin importar scroll ni largo de pagina.

   ENTRADA/SALIDA — antes mensaje() togglaba con fadeIn()/fadeOut() de
   jQuery (400ms, solo opacidad, animado por JS). Se reemplazo por
   mostrarMsgSistema()/ocultarMsgSistema() (utiles.js), que togglean
   display por JS pero delegan la animacion 100% a estas transiciones CSS
   via la clase "is-visible": el overlay hace un fade corto y la tarjeta
   suma un scale+translateY sutil con easing ease-out marcado, para que la
   entrada se sienta agil en vez de un fade plano.
   ====================================================================== */

/* ── Overlay: cubre el viewport completo. display:none/inline por defecto
   en un <div> es "block" — alcanza y sobra aca, el centrado real lo hace
   #msgSistema con position:fixed propio, no depende de que el overlay
   sea flex. Con inset:0 cubre siempre el viewport exacto, sin necesidad
   de que JS mida document.height()/window.height() como hacia antes. ── */
#contMsgSistema {
    position: fixed;
    inset: 0;
    z-index: 51000;
    display: none;
    /* Mismo fondo que .lockWindow (estilos.css), a pedido explicito */
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 160ms ease-out;
}
#contMsgSistema.is-visible {
    opacity: 1;
}

/* ── Tarjeta ── */
#msgSistema {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 8px)) scale(0.96);
    opacity: 0;
    transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
    width: 360px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    overflow: auto;
    background: var(--ultu-surface);
    border: 2px solid var(--ultu-color-primary);
    border-radius: var(--ultu-radius-lg);
    box-shadow: var(--ultu-shadow-lg);
    padding: 20px 22px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ultu-text-base);
}
#contMsgSistema.is-visible #msgSistema {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* ── Zona del mensaje ── */
#mostrarMensaje {
    max-height: 55vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── Fila de botones (Aceptar / Si / No), armada por JS en mensaje() ── */
#botonesMensaje {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--ultu-border);
}
/* El boton principal (Aceptar / Si) usa directamente p_clientes__btn +
   p_clientes__btn--primary (mismo boton violeta que "Consultar" en
   Clientes) — coherencia pedida explicitamente por el usuario, en vez de
   reinventar un violeta propio para msgSistema. El unico ajuste puntual
   es sacarle el icono de lupa (::before), que en p_clientes__btn--primary
   esta pensado para una accion de busqueda y no aplica semanticamente a
   un "Aceptar"/"Si" de confirmacion. */
#botonesMensaje .p_clientes__btn--primary::before {
    display: none;
}

/* ======================================================================
   VENTANA MODAL GLOBAL — #boxes / #dialog / #mask / #contenidoVentanaModal
   Cascarón de las "ventanas modales" genéricas (abrirVentanaModal() en
   js/utiles.js, pedirDatos() con divID='contenidoVentanaModal'). Usado por
   ~20 pantallas del sistema (Pólizas, Órdenes, Cobranzas, Productores,
   etc.) para abrir un formulario chico superpuesto. El HTML es ÚNICO y
   fijo en cuerpo.php — no se duplica en otros archivos, a diferencia de
   msgSistema.
   Reemplaza los estilos legacy que vivían en estilos.css: #mask,
   #boxes .window, #boxes #dialog. La "tarjeta" blanca en sí la daba
   Bootstrap vía .modal-content (bootstrap.css), sin override propio salvo
   .modal-body/.modal-autoheight (ya existentes más arriba).

   BUG DE POSICIONAMIENTO RESUELTO — mismo bug de raíz que msgSistema (ver
   sección de arriba): el centrado se calculaba a mano en JS
   (redimensionarVentanaModal() en utiles.js) leyendo alto/ancho de ventana
   y de #dialog en cada apertura, en el beforeSend del $.ajax — ANTES de
   que el contenido nuevo llegara. Por eso el cálculo usaba el tamaño del
   diálogo de la apertura ANTERIOR y no se recalculaba al crecer el
   contenido. Con position:fixed + top/left 50% + transform(-50%,-50%) el
   centrado es 100% CSS: se ajusta solo en cada reflow, sin medir nada por
   JS.

   ENTRADA/SALIDA — mismo patrón que msgSistema (ver [[feedback_animacion_
   modales_transicion_css]] en memoria): antes esta ventana se togglaba con
   una mezcla inconsistente de fadeIn()/fadeOut()/show()/hide() de jQuery
   segun la funcion (redimensionarVentanaModal(), cerrarVentanaModal(),
   abreModalCargando(), mostrarModalCarga()...), cada una con su propio
   timing (o directamente sin animar). Se unificaron todas detrás de
   mostrarVentanaModal()/ocultarVentanaModal() (utiles.js), que togglean
   display por JS pero delegan la animacion 100% a estas transiciones CSS
   via la clase "is-visible" en #mask y #dialog.
   ====================================================================== */

/* ── Fondo oscuro. inset:0 cubre siempre el viewport exacto sin que JS
   tenga que medir document.height()/window.height() como hacía antes ── */
#mask {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: none;
    background-color: var(--ultu-overlay-bg);
    opacity: 0;
    transition: opacity 160ms ease-out;
}
#mask.is-visible {
    opacity: 1;
}

/* ── Cascarón posicionador. .window es una clase de un único uso en todo
   el sistema (el propio #dialog) — el bug de "double-frame" (marco violeta
   de .fondoNuevoModal adentro de la tarjeta blanca de Bootstrap) se resuelve
   dejando UNA sola tarjeta acá, en #contenidoVentanaModal. ── */
#boxes .window {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 8px)) scale(0.96);
    opacity: 0;
    transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
    display: none;
    z-index: 9999;
    margin: 0;
    padding: 0;
    background-color: transparent;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
}
#boxes .window.is-visible {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

#boxes #dialog {
    width: max-content;
    max-width: 100%;
}

/* ── Tarjeta. Reemplaza el default de Bootstrap (fondo blanco plano,
   border-radius:0.3rem, sin sombra) por el mismo lenguaje visual que el
   resto del sistema (msgSistema, form_globalFieldsetContainer): borde
   sutil neutro + acento superior violeta + radio/sombra grandes.
   Especificidad por id (#contenidoVentanaModal) para ganarle sin esfuerzo
   a .modal-content/.modal-dialog-scrollable de Bootstrap. ── */
/* min-width: piso para pantallas chicas dentro del modal (ej. Nueva
   Póliza, antes fijado a 420px por el atributo width de la tabla
   .fondoNuevoModal que se quitó). min() evita overflow horizontal en
   viewports angostos — #dialog es width:max-content, así que sin esto el
   ancho quedaría atado al min-content de los selects/inputs internos
   (~160px), demasiado angosto. Pantallas con contenido más ancho lo
   siguen creciendo normal. */
#contenidoVentanaModal.modal-content {
    background: var(--ultu-surface);
    border: 1.5px solid var(--ultu-border);
    border-top: 4px solid var(--ultu-color-primary);
    border-radius: var(--ultu-radius-lg);
    box-shadow: var(--ultu-shadow-lg);
    max-height: calc(100vh - 32px);
    overflow: auto;
    min-width: min(420px, calc(100vw - 64px));
    padding: 5px;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--ultu-color-primary-rgb), 0.25) var(--ultu-surface);
}
/* overflow:auto propio -- ::-webkit-scrollbar de `html` (más arriba) no se
   hereda a este contenedor, así que sin esto el modal cae en la barra
   gruesa nativa del navegador mientras el resto de la app usa la fina.
   Mismos tokens exactos que la regla de `html`. */
#contenidoVentanaModal.modal-content::-webkit-scrollbar { width: 8px; }
#contenidoVentanaModal.modal-content::-webkit-scrollbar-track { background: var(--ultu-surface); }
#contenidoVentanaModal.modal-content::-webkit-scrollbar-thumb {
    background: rgba(var(--ultu-color-primary-rgb), 0.25);
    border-radius: 4px;
}
#contenidoVentanaModal.modal-content::-webkit-scrollbar-thumb:hover { background: rgba(var(--ultu-color-primary-rgb), 0.4); }

/* ======================================================================
   OVERLAY DE CARGA — .lockWindow
   Fondo oscuro que bloquea la pantalla durante llamadas AJAX genéricas
   (LockWindow() en js/funcionesAjax.js) — GLOBAL, no exclusivo de ningún
   formulario. Reemplaza el estilo legacy que vivía en estilos.css: mismo
   fondo rgba(0,0,0,0.4) que #mask/#contMsgSistema (coherencia con el resto
   de los overlays del sistema), ahora con la misma transición de entrada
   (fade 160ms) en vez de show()/hide() instantáneo de jQuery. Sin tarjeta
   propia — el contenido (.ultu-loader-shell/.ultu-ia-progress-bar) no es
   parte de este alcance, se deja intacto.
   ====================================================================== */
.lockWindow {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    opacity: 0;
    transition: opacity 160ms ease-out;
}
.lockWindow.is-visible {
    opacity: 1;
}

/* ======================================================================
   NOTIFICACIONES — #notificacionesModal (unico modal NATIVO de Bootstrap
   del sistema; el resto de las "ventanas modales" usan el mecanismo
   generico #boxes/#mask de arriba). Sin este override, Bootstrap arma su
   propio backdrop y anima con SU timing default: rgba(0,0,0,.5) a 150ms
   linear, mas un slide propio del dialogo (translateY(-50px) a 300ms
   ease-out) — distinto del resto de los overlays del sistema
   (rgba(0,0,0,.4), fade 160ms + tarjeta scale+translateY 200ms
   cubic-bezier). Se homologa aca sin tocar las reglas globales
   .modal-backdrop/.fade de bootstrap.css por si en el futuro se agrega
   otro modal Bootstrap con timing propio.
   ====================================================================== */
.modal-backdrop.show {
    opacity: 0.4;
}
#notificacionesModal.fade {
    transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
#notificacionesModal.fade .modal-dialog {
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
    transform: translate(0, -50px) scale(0.96);
}
#notificacionesModal.show .modal-dialog {
    transform: none;
}

/* ── Título de las pantallas de alta/edición que se abren DENTRO de esta
   ventana modal (ej. "Nueva Póliza"). Reemplaza GrillaTitulo en este
   contexto puntual — mismo criterio que barraGlobal__titulo, pero
   centrado y con separador, pensado para el ancho acotado de un modal en
   vez de una pantalla completa. ── */
.modal_globalTitulo {
    font-size: 16px;
    font-weight: 600;
    color: var(--ultu-color-primary);
    text-align: center;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--ultu-border-global-grid);
}

/* ── Fila de acciones finales (Aceptar/Cancelar) de un formulario dentro
   de la ventana modal. Mismo criterio que form_globalFieldset-finalActions
   pero sin max-width (el ancho ya lo acota la tarjeta del modal). ── */
.modal_globalFooter {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding-top: 14px;
    margin-top: 4px;
    border-top: 1px solid var(--ultu-border-global-grid);
}

/* ══════════════════════════════════════════════════════════════
   NUEVA PÓLIZA / NUEVA ORDEN — p_polizasNuevaPoliza
   Componente EXCLUSIVO de paginas/pol_polizasNuevaPoliza.php. Reemplaza la
   tabla vieja (fondoNuevoModal + FilaFormularioEtiqueta) que vivía en
   estilos.css. Grid de 1 columna (no el de 3 columnas de
   form_globalFieldset-grid, pensado para fieldsets de página completa de
   1080px) porque la tarjeta del modal es angosta (~420px).
   ══════════════════════════════════════════════════════════════ */
.p_polizasNuevaPoliza__opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding-bottom: 14px;
}
.p_polizasNuevaPoliza__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding-top: 4px;
}

/* ══════════════════════════════════════════════════════════════
   COTIZACIÓN AUTO POR COMPAÑÍA — CotizadorGlobalCia
   Reemplaza la tabla vieja (FilaFormularioEtiquetaDato) generada por
   armaCiaCotizacion() en pre_autoFuncionesCotizacion.php. Un único
   layout para las ~20 compañías: cada fieldset ("Parámetros de
   cotización" / "Cobertura Adicional" / "Beneficios") se muestra u
   oculta entero segun corresponda, nunca se dejan huecos con colspan.
   Reutiliza panel_globalConsulta-field / -field-label / input_globalSelect
   / input_globalTextarea / btn_globalWhite ya existentes — solo se
   agrega lo que genuinamente no existía (layout de 2 columnas + sidebar,
   toggle, tarjeta con icono de sección, mensaje "no disponible",
   lista de observaciones con badge circular).
══════════════════════════════════════════════════════════════ */

/* Precio de cada cuota en la grilla comparativa (#grillaValores, filas
   FEDERACION/RIO URUGUAY/etc. generadas por filaCuotaXCotizacionAuto()).
   NO se tocó .GrillaTexto (compartida por cientos de pantallas del
   sistema) ni el id #grillaValores (se reutiliza en otros archivos con
   sus propias grillas) — en vez de eso se agregó esta clase nueva,
   exclusiva, directo en el <td> del precio dentro de esa función, así
   que ninguna otra pantalla puede verse afectada por este cambio. */
.CotizadorGlobalCia-precio {
    font-size: 11px;
    font-weight: 500;
}

/* Ancho fijo (600px + 380px), nunca colapsa a 1 columna: el contenedor
   ancestro #grillaCotizaciones ya es .grilla-global-wrap (overflow-x:auto),
   así que en pantallas angostas se scrollea horizontalmente en vez de
   apilar las columnas. width:fit-content + margin:auto centra el bloque
   completo tanto en pantallas anchas como dentro de ese wrapper. */
.CotizadorGlobalCia {
    display: grid;
    grid-template-columns: 650px 350px;
    gap: 5px;
    align-items: start;
    width: fit-content;
    margin: 0 auto;
    padding: 5px;
    /* El <td align="center"> legacy que envuelve esto en
       pre_presupuestosCotizacionAutoPantalla2.php hereda text-align:center
       a todos los descendientes (labels, textarea, etc.) que no lo
       sobrescriban. Se corta la herencia aquí en la raíz en vez de tocar
       esa tabla compartida por ~20 pantallas más. */
    text-align: left;
}

.CotizadorGlobalCia-col-izq,
.CotizadorGlobalCia-col-der {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.CotizadorGlobalCia-card {
    background: var(--ultu-surface);
    border-radius: var(--ultu-radius-md);
    box-shadow: var(--ultu-shadow-sm);
    padding: 5px;
}

.CotizadorGlobalCia-card-header {
    display: flex;
    align-items: center;
}
.CotizadorGlobalCia-icon-badge {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--ultu-primary-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--ultu-color-primary);
}
.CotizadorGlobalCia-card-header h3 {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1;
    color: var(--ultu-text-base);
    margin: 0;
}

.CotizadorGlobalCia-logo-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ultu-border);
}
.CotizadorGlobalCia-logo-row img { height: 44px; width: auto; border-radius: 4px; }
.CotizadorGlobalCia-logo-row label { font-size: 13px; font-weight: 700; color: var(--ultu-text-base); margin-bottom: 0; }

/* Grid de 2 columnas para los campos de cada tarjeta (mas ancho que
   form_globalFieldset-grid porque conviven con la columna lateral) */
.CotizadorGlobalCia-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    padding: 5px;
}


/* Campo "Comisión: única" — reemplaza el <label>única</label> suelto */
.CotizadorGlobalCia-valor-fijo {
    height: 25px;
    display: flex;
    align-items: center;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ultu-text-base);
    margin-bottom: 0;
}

/* Campo checkbox->toggle en línea (Granizo, Pago Contado) */
.CotizadorGlobalCia-field--toggle-row {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding-top: 4px;
}
.CotizadorGlobalCia-field--toggle-row .panel_globalConsulta-field-label {
    text-transform: none;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ultu-text-base);
    order: 2;
}

.CotizadorGlobalCia-toggle {
    position: relative;
    width: 38px;
    height: 21px;
    flex-shrink: 0;
    order: 1;
}
.CotizadorGlobalCia-toggle input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.CotizadorGlobalCia-toggle .track {
    position: absolute;
    inset: 0;
    background: var(--ultu-border-global-grid);
    border-radius: 20px;
    transition: background .18s;
    pointer-events: none;
}
.CotizadorGlobalCia-toggle .track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 17px;
    height: 17px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform .18s;
}
.CotizadorGlobalCia-toggle input:checked + .track { background: var(--ultu-color-primary); }
.CotizadorGlobalCia-toggle input:checked + .track::after { transform: translateX(17px); }
.CotizadorGlobalCia-toggle input:disabled { cursor: not-allowed; }
.CotizadorGlobalCia-toggle input:disabled + .track { background: #e5e6ec; cursor: not-allowed; }
.CotizadorGlobalCia-toggle input:disabled + .track::after { background: #f2f2f5; }

/* Mensaje cuando la cobertura/beneficio directamente no aplica a la cía
   (ej. "LA MERIDIONAL no incluye Granizo") — visible en vez de un hueco */
.CotizadorGlobalCia-no-disponible {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ultu-card-header-bg);
    border: 1.5px dashed var(--ultu-border);
    border-radius: var(--ultu-radius-sm);
    padding: 10px 12px;
    font-size: 12px;
    color: var(--ultu-text-subtle);
}
.CotizadorGlobalCia-no-disponible .ultu-icon { color: var(--ultu-text-placeholder); }

/* Observaciones: lista con badge circular en vez de tilde.gif/warning.gif */
.CotizadorGlobalCia-obs-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 242px;
    overflow-y: auto;
    padding: 5px;
    background: #fff;
    border: 1.5px solid var(--ultu-border);
    border-radius: var(--ultu-radius-sm);
    box-sizing: border-box;
}
/* Aclaraciones: es de solo lectura (el sistema nunca permite editarla,
   el JS solo lee su .val() al recotizar) — se mantiene <textarea readonly>
   por compatibilidad con modificarCotizacionAuto() en presupuestosAutosPantalla2.js,
   pero visualmente NO debe parecer un campo editable: mismo borde/radio/fondo
   que .CotizadorGlobalCia-obs-list, sin resize ni estados de foco/hover. */
.CotizadorGlobalCia-static-box {
    display: block;
    width: 100%;
    min-height: 100px;
    padding: 5px;
    font-size: 12px;
    font-family: inherit;
    color: var(--ultu-text-base);
    background: #fff;
    border: 1.5px solid var(--ultu-border);
    border-radius: var(--ultu-radius-sm);
    outline: none;
    box-sizing: border-box;
    resize: none;
    cursor: default;
}
.CotizadorGlobalCia-obs-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--ultu-text-base);
}
.CotizadorGlobalCia-obs-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.CotizadorGlobalCia-obs-icon .ultu-icon { --ultu-icon-size: 9px; }
.CotizadorGlobalCia-obs-icon--ok   { background: rgba(34, 197, 94, .12);  color: var(--ultu-color-status-available); }
.CotizadorGlobalCia-obs-icon--err  { background: var(--ultu-color-danger-bg); color: var(--ultu-color-danger); }
.CotizadorGlobalCia-obs-icon--warn { background: rgba(245, 158, 11, .14); color: var(--ultu-color-status-busy); }

.CotizadorGlobalCia-publicidad {
    margin-top: 12px;
    border: 0;
    border-radius: var(--ultu-radius-sm);
    overflow: hidden;
    width: 100%;
    height: 200px;
}

.CotizadorGlobalCia-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
}

/* ======================================================================
   PRESUPUESTOS — Cotizador de Automotores — p_presupuestos-*
   Rediseño de pre_presupuestosCotizacionAuto.php y sus sub-includes
   (DatosCabecera, Vehiculos, pantallasDetalleAutoGeneral, Propietario,
   AccesoriosCoberturas, CiasAseguradoras). Metodología BEM.
   NO reemplaza form_globalFieldset / panel_globalConsulta-field — esos
   siguen siendo la base para pantallas de alta/edición estándar. Esto es
   una variante para pantallas densas (muchos campos cortos) donde el
   patrón "etiqueta arriba" infla demasiado el alto vertical: acá la
   etiqueta va a la izquierda del campo, como en el diseño legado, pero
   modernizado.
   ====================================================================== */

/* .botonesAsegurados: exclusivo de esta pantalla (pantallasDetalleAutoGeneral.php),
   se puede tipar directo. El toggle real lo hace presupuestosAutosNuevo.js
   agregando/quitando la clase "ocultar" (display:none) — por eso NO se usa
   `style="display:flex"` en el HTML: eso pisaría el ocultamiento por JS. */
.botonesAsegurados { display: flex; gap: 6px; }
.botonesAsegurados.ocultar { display: none; }

/* .botones (plain) la comparten ~35 pantallas más con layouts propios —
   NUNCA tipar `.botones` a secas. Acá se escopea solo dentro del control
   nuevo de Propietario/Tomador. */
.p_presupuestos-grid__control .botones { display: flex; gap: 6px; flex-shrink: 0; }

/* .botonesFechaFacturacion / .botonesFechaNacimiento (el par de botones
   calendario + borrar de un campo fecha) las comparte ~10 pantallas más
   (Siniestros, Pólizas, Hogar, etc.) sin ningún CSS propio hasta ahora —
   por eso NUNCA se tipan a secas acá: se escopean solo dentro de esta
   grilla nueva, para no afectar el layout de esas otras pantallas. */
.p_presupuestos-grid__control .botonesFechaFacturacion,
.p_presupuestos-grid__control .botonesFechaNacimiento {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* .divCliente (Cliente la usa fija/chica para "Responsable") — dentro del
   control de Asegurado/Tomador necesita ocupar el espacio horizontal
   disponible, no achicarse al tamaño del texto. Escopeado, no toca el uso
   en Cliente. */
.p_presupuestos-grid__control .divCliente {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

/* #botonesAceptarVehiculo / #botonesAceptarScoring son ids únicos de esta
   pantalla: los botones Guardar/Cancelar de los sub-formularios de Vehículo
   y de Auto Scoring, centrados dentro de su propia tarjeta (no a la
   derecha, como el resto de las toolbars ABM que sí usan
   .form_globalFieldset-toolbar). */
#botonesAceptarVehiculo,
#botonesAceptarScoring {
    justify-content: center;
}

/* .ocultar (estilos.css, display:none, especificidad 0-1-0) y
   .form_globalFieldset-toolbar / .p_presupuestos-grid__control (ultu.css,
   display:flex, misma especificidad 0-1-0) empatan en especificidad — y al
   cargar ultu.css DESPUÉS de estilos.css, en un empate gana ultu.css, o sea
   que .ocultar solo NO alcanza para ocultar estos elementos. Se ancla por
   id (0-1-0 + id = 1-1-0) para que gane siempre, sin tocar la regla global
   .ocultar (la usan decenas de pantallas más). */
#botonesAceptarVehiculo.ocultar,
#esOKWrap.ocultar {
    display: none;
}

/* --- Contenedor de sección --- */
.p_presupuestos-card {
    background: var(--ultu-global-surface);
    border-radius: calc(var(--ultu-radius-md) + 6px);
    box-shadow: var(--ultu-shadow-sm);
    margin: 0 0 20px;
    max-width: 1200px;
    overflow: hidden;
}

/* Aviso de edición sin guardar en Vehículo: mientras "Nuevo"/"Editar" está
   activo (campos habilitados, toolbar Guardar/Cancelar visible), la tarjeta
   se remarca con el mismo rojo que ya usa el resto del sistema para
   obligatorio/error — mismo criterio del usuario: "no te conviene seguir
   de largo sin guardar o cancelar". Usa outline (no border) a propósito:
   .p_riesgo_ItemAuto-card (Pólizas) ya trae su propio border de 1px, y un
   border por id pisaría width/style/color de ese border por especificidad;
   outline es una caja aparte que no interfiere y tampoco afecta el layout.
   Toggle en js/presupuestosAutosNuevo.js → habilitarCamposVehiculoPresupuestoAuto(). */
#tablaVehiculo {
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color .15s;
}
#tablaVehiculo.is-editing {
    outline-color: var(--ultu-color-danger);
}
.p_presupuestos-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ultu-border-global-grid);
}
.p_presupuestos-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ultu-color-primary);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
}
.p_presupuestos-card__subtitle {
    font-size: 11.5px;
    color: var(--ultu-text-subtle);
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    margin-top: 3px;
    display: block;
}
.p_presupuestos-card__toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.p_presupuestos-card__body { padding: 18px 20px 20px; }

/* --- Grilla densa etiqueta:campo (3 pares por fila) --- */
.p_presupuestos-grid {
    display: grid;
    grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr);
    column-gap: 16px;
    row-gap: 12px;
    align-items: center;
}
.p_presupuestos-grid__label {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--ultu-text-muted);
    white-space: nowrap;
}
.p_presupuestos-grid__label.is-required::after { content: "*"; margin-left: 3px; color: var(--ultu-color-danger); font-weight: bold; }
.p_presupuestos-grid__field--span2 { grid-column: span 3; }
.p_presupuestos-grid__field--span3 { grid-column: span 5; }
.p_presupuestos-grid__field--full  { grid-column: 1 / -1; }
.p_presupuestos-grid__control { display: flex; align-items: center; gap: 6px; }
.p_presupuestos-grid__control > input,
.p_presupuestos-grid__control > select { flex: 1; min-width: 0; }
.p_presupuestos-grid__hint {
    font-size: 11px;
    color: var(--ultu-text-subtle);
    text-align: right;
    margin-top: 6px;
}
@media (max-width: 900px) {
    .p_presupuestos-grid { grid-template-columns: minmax(100px,auto) 1fr; }
    .p_presupuestos-grid__field--span2,
    .p_presupuestos-grid__field--span3 { grid-column: 1 / -1; }
}

/* --- Dos columnas lado a lado (Accesorios / Coberturas Adicionales) --- */
.p_presupuestos-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.p_presupuestos-cols__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--ultu-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.p_presupuestos-cols__title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ultu-border-global-grid);
}
@media (max-width: 820px) { .p_presupuestos-cols { grid-template-columns: 1fr; } }

/* --- Selector de Compañías a cotizar: picker de chips.
       Reemplaza visualmente el doble-listbox, pero NO reemplaza su mecanismo:
       los <select multiple> reales (ciasAseguradorasPresupuesto /
       ciasAseguradorasPresupuestoSeleccionadas) siguen en el DOM, ocultos
       (.p_presupuestos-cia-real) — son la fuente de verdad que ya usan Auto
       Scoring, Beneficios y el guardado en presupuestosEditar.js, compartido
       por todos los ramos de Presupuestos. Cada chip mueve la <option>
       correspondiente entre esos dos selects (ver toggleCiaAseguradora() en
       pre_presupuestosCotizacionCiasAseguradoras.php). Sin buscador: la
       cantidad de compañías nunca justifica filtrar. --- */
.p_presupuestos-cia-picker { display: grid; gap: 12px; }
.p_presupuestos-cia-picker__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
    padding: 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--ultu-color-primary-rgb), 0.25) var(--ultu-surface);
}
.p_presupuestos-cia-picker__list::-webkit-scrollbar { width: 4px; }
.p_presupuestos-cia-picker__list::-webkit-scrollbar-track { background: var(--ultu-surface); }
.p_presupuestos-cia-picker__list::-webkit-scrollbar-thumb {
    background: rgba(var(--ultu-color-primary-rgb), 0.25);
    border-radius: 2px;
}
.p_presupuestos-cia-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    border: 1.5px solid var(--ultu-neutral-border);
    border-radius: 999px;
    padding: 6px 14px 6px 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--ultu-text-muted);
    background: var(--ultu-color-white);
    transition: border-color .15s, background .15s, color .15s;
    user-select: none;
}
.p_presupuestos-cia-chip:hover { border-color: var(--ultu-primary-border-hover); }
.p_presupuestos-cia-chip input { margin: 0; cursor: pointer; }
.p_presupuestos-cia-chip.is-checked {
    background: var(--ultu-primary-tint);
    border-color: var(--ultu-color-primary);
    color: var(--ultu-color-primary-dark);
}
.p_presupuestos-cia-chip__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ultu-color-status-busy);
    flex-shrink: 0;
}
.p_presupuestos-cia-picker__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--ultu-text-subtle);
}
.p_presupuestos-cia-picker__summary strong { color: var(--ultu-text-base); }
.p_presupuestos-cia-picker__dot-hint { display: inline-flex; align-items: center; gap: 5px; }

/* --- Auto Scoring: acordeón por compañía (antes fieldsets apilados que
       ocupaban mucho espacio). SIN tocar las clases classautoScoringX que
       usa el JS (verItemScoring/scoringDetectarColision) para mostrar/ocultar
       cada bloque — los <fieldset> pasaron a <details>, mismas clases,
       mismo mecanismo de display:none/block. GENERALES es la excepción real
       (comparte hasta 7 compañías): conserva sus classautoScoringX tal cual
       estaban, así que su visibilidad general sigue el mismo criterio de
       siempre — solo cambió la etiqueta, no la lógica. --- */
#autoScoring .p_presupuestos-scoring-item {
    border: 1.5px solid var(--ultu-text-placeholder);
    border-radius: var(--ultu-radius-md);
    margin: 0 0 14px;
    overflow: hidden;
}
#autoScoring .p_presupuestos-scoring-item[open] {
    border-color: var(--ultu-primary-border-hover);
}
#autoScoring .p_presupuestos-scoring-item__summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: var(--ultu-color-primary);
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--ultu-card-header-bg);
}
#autoScoring .p_presupuestos-scoring-item__summary::-webkit-details-marker { display: none; }
#autoScoring .p_presupuestos-scoring-item__summary::marker { content: ""; }
#autoScoring .p_presupuestos-scoring-item__chev {
    margin-left: auto;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform .18s;
    -webkit-mask: var(--ultu-icon-chevron-down) center / contain no-repeat;
    mask: var(--ultu-icon-chevron-down) center / contain no-repeat;
    background-color: var(--ultu-text-subtle);
}
#autoScoring .p_presupuestos-scoring-item[open] .p_presupuestos-scoring-item__chev {
    transform: rotate(180deg);
}
#autoScoring .p_presupuestos-scoring-item__body {
    padding: 14px 16px 16px;
}
/* Chip "Completo"/"Faltan datos" — mismos dos tokens semánticos ya usados
   en CotizadorGlobalCia-obs-icon (verde/ámbar), sin paleta nueva. */
#autoScoring .p_presupuestos-scoring-item__badge {
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    text-transform: none;
    letter-spacing: normal;
}
#autoScoring .p_presupuestos-scoring-item__badge:empty { display: none; }
#autoScoring .p_presupuestos-scoring-item__badge.is-ok {
    background: rgba(34, 197, 94, .12);
    color: var(--ultu-color-status-available);
}
#autoScoring .p_presupuestos-scoring-item__badge.is-pending {
    background: rgba(245, 158, 11, .14);
    color: var(--ultu-color-status-busy);
}
#autoScoring .form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}
#autoScoring .col.FilaFormularioEtiquetaDato {
    font-size: 12px;
    color: var(--ultu-text-muted);
}
/* Franquicias de Federación Patronal (#combofranquicias220): es un
   <select multiple>, no un combo de una línea — la regla global
   .input_globalSelect/select.FormularioDatosCombo le imponía height:25px
   y padding pensados para un dropdown común, comprimiéndolo. Se ancla por
   id porque es un combo único en todo el sistema (agregarComboFranquicias.php
   solo lo genera para esta compañía), cero riesgo de afectar otro <select
   multiple> del sistema. overflow-y:auto + height:auto hace que el propio
   contenido decida el alto real entre los límites, sin scroll de sobra
   cuando entran pocas opciones. */
#combofranquicias220 {
    height: auto;
    min-height: 55px;
    max-height: 140px;
    padding: 0;
    overflow-y: auto;
    background-image: none;
}

/* ══════════════════════════════════════════════════════════════
   PÓLIZAS — DATOS GENERALES DE PÓLIZA — p_polizas-*
   Rediseño de paginas/pol_polizasEditarGeneral.php, misma línea visual
   MEP ("Moderno, Elegante, Profesional") que el Cotizador de Automotores
   (p_presupuestos-*): tarjetas sobre fondo --ultu-global-surface, grilla
   densa etiqueta:campo (label a la izquierda, no arriba). Es migración de
   MARKUP, no de lógica — se preservan exactos los id/name/value/onclick y
   las clases-gancho de JS compartido (FormularioDatos, FormularioDatosCombo,
   .coaseguro, .date, .divCliente, .botones, .ocultar/.oculto).
   ══════════════════════════════════════════════════════════════ */

/* Título de la pantalla ("Nueva Póliza" / "Editar Póliza"). Convive con
   GrillaTitulo (no se le saca la clase): identificacion() en utiles.js
   busca `.cuerpoPaginaEditar .GrillaTitulo` para agregarle " - Nro. : X" —
   esa misma clase la comparten ~20 pantallas hermanas (pol_polizasEditarItem*.php,
   ord_ordenesEditarItem*.php), así que renombrarla acá le rompería el
   sufijo a esas otras pantallas. Se deja GrillaTitulo como gancho inerte
   (igual criterio que FormularioDatos/.coaseguro) y el look real lo da
   esta clase, que gana por orden de carga (ultu.css después de estilos.css,
   misma especificidad 0-1-0). */
.p_polizas-titulo {
    font-size: 20px;
    font-weight: 600;
    color: var(--ultu-color-primary);
    margin: 0 0 16px;
}

/* --- Contenedor de sección (idéntico a p_presupuestos-card, mismo
   max-width -- consistencia visual pedida por el usuario entre Pólizas y
   Presupuestos) --- */
.p_polizas-card {
    background: var(--ultu-global-surface);
    border-radius: calc(var(--ultu-radius-md) + 6px);
    box-shadow: var(--ultu-shadow-sm);
    margin: 0 0 20px;
    max-width: 1200px;
    overflow: hidden;
}
.p_polizas-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ultu-border-global-grid);
}
.p_polizas-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ultu-color-primary);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
}
.p_polizas-card__subtitle {
    font-size: 11.5px;
    color: var(--ultu-text-subtle);
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    margin-top: 3px;
    display: block;
}
.p_polizas-card__body { padding: 18px 20px 20px; }

/* --- Grilla densa etiqueta:campo. 3 pares por fila, igual mecanismo que
   p_presupuestos-grid (consistencia visual pedida por el usuario). Como
   los campos de esta pantalla estaban agrupados de a 2 en la tabla vieja
   (Cía Aseguradora+Nº Orden, Riesgo+Moneda, etc.) y esos agrupamientos no
   se tocan, el HTML rellena el 3er par con <div></div><div></div> vacíos
   en las filas que no tienen un tercer campo real — ver pol_polizasEditarGeneral.php. */
.p_polizas-grid {
    display: grid;
    grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr);
    column-gap: 16px;
    row-gap: 12px;
    align-items: center;
}
.p_polizas-grid__label {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--ultu-text-muted);
    white-space: nowrap;
}
.p_polizas-grid__label.is-required::after {
    content: "*";
    margin-left: 3px;
    color: var(--ultu-color-danger);
    font-weight: bold;
}
/* Asterisco de obligatorio: label y campo son hermanos directos del grid
   (sin wrapper propio, igual que p_presupuestos-grid) — se ancla en la
   propia etiqueta y mira su hermano inmediato. */
.p_polizas-grid__label.is-required:has(+ :required:valid, + * :required:valid, + :required:disabled, + * :required:disabled)::after {
    display: none;
}
/* Campo que ocupa el resto de la fila después de su etiqueta (ej. Tomador,
   Asegurado, Beneficiario) — el mismo "2/-1" funciona sin importar cuántas
   columnas tenga la grilla (se ajustó solo al pasar de 4 a 6 columnas). */
.p_polizas-grid__field--wide { grid-column: 2 / -1; }
/* Campo de fila 100% completa, etiqueta incluida (ej. textareas de
   Observaciones, el bloque de Renovación). */
.p_polizas-grid__field--full { grid-column: 1 / -1; }
/* Responsive: 3 pares en desktop -> 2 pares <=1000px -> 1 par <=600px.
   --wide (2/-1) y --full (1/-1) no necesitan ajuste en ningún breakpoint:
   sus fórmulas ya son relativas al total de columnas, se autoajustan solas. */
@media (max-width: 1000px) {
    .p_polizas-grid {
        grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr);
    }
}
@media (max-width: 600px) {
    .p_polizas-grid {
        grid-template-columns: minmax(100px,auto) 1fr;
    }
}

/* --- Grilla de Intermediarios: llenado por COLUMNA (de arriba hacia abajo
   y recién después a la derecha), a pedido explícito del usuario — el
   resto de las grillas de esta pantalla llenan por FILA. Acá cada campo es
   UN SOLO item de grid (etiqueta+control juntos en un mini-flex propio,
   .p_polizas-grid__item), no dos items separados como en .p_polizas-grid —
   así grid-auto-flow:column no separa la etiqueta de su control (los
   pondría uno abajo del otro en la misma columna, no lado a lado).
   Con grid-template-rows fijo en 3, la columna que queda incompleta
   (Ejecutivo, que no tiene con qué completar su columna) NO necesita
   ningún <div> de relleno: apenas se llenan las 3 filas de una columna,
   el siguiente item arranca solo en la columna de al lado — nada se cuela
   en el hueco. */
.p_polizas-grid--vertical {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
    grid-template-columns: repeat(3, 1fr);
    column-gap: 24px;
    row-gap: 12px;
}
.p_polizas-grid__item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.p_polizas-grid__item > .p_polizas-grid__label {
    width: 112px;
    flex-shrink: 0;
    white-space: normal;
}
.p_polizas-grid__item > *:not(.p_polizas-grid__label) {
    flex: 1;
    min-width: 0;
}
/* Responsive: por debajo de 1000px ya no entran 3 columnas cómodas, así
   que se abandona el llenado por columna (que necesita ancho de sobra
   para verse bien) y se pasa a llenado por fila normal, primero a 2
   columnas y después a 1 -- mismo criterio de breakpoints que
   .p_polizas-grid de arriba, para que las tarjetas de la pantalla
   colapsen todas juntas y no se vea una angosta y otra ancha. */
@media (max-width: 1000px) {
    .p_polizas-grid--vertical {
        grid-auto-flow: row;
        grid-template-rows: none;
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .p_polizas-grid--vertical {
        grid-template-columns: 1fr;
    }
}

/* .botones la comparten ~35 pantallas más con layouts propios — nunca se
   tipa a secas, se escopea solo dentro del control de Tomador/Asegurado/
   Beneficiario de esta pantalla (mismo criterio que p_presupuestos-grid). */
.p_polizas-grid__control { display: flex; align-items: center; gap: 8px; }
.p_polizas-grid__control .botones { display: flex; gap: 6px; flex-shrink: 0; }
.p_polizas-grid__control .divCliente {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

/* --- Bloque "No Renueva / Renovación Automática-Manual / Refacturación
   Automática / Es Flotante / Motivo" de Datos Principales: es un
   mini-formulario propio de fila completa, con 2 filas de controles +
   el textarea de Motivo debajo. --- */
.p_polizas-renovacion {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.p_polizas-renovacion__fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 28px;
}
/* panel_globalConsulta-field--checkbox trae padding-top:16px pensado para
   convivir con campos label-arriba dentro de un form_globalFieldset-grid
   (alinea el checkbox con la altura del input de sus vecinos) — acá adentro
   de una fila flex de puros radios/checkboxes ese padding no aplica y solo
   empuja el checkbox hacia abajo, deformando la fila. Se anula solo en
   este contexto, sin tocar el resto de los usos de esa clase. */
.p_polizas-renovacion__fila .panel_globalConsulta-field--checkbox {
    display: flex;
    padding-top: 0;
}

/* --- Fila de fila completa con acción a la derecha (Información de
   Despacho: checkbox "No actualizar automáticamente" + link "Actualizar
   con datos del cliente"). --- */
.p_polizas-grid__accion-fila {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

/* --- Acciones finales (Siguiente/Guardar + Cancelar) --- */
.p_polizas-acciones {
    display: flex;
    justify-content: center;
    gap: 8px;
    max-width: 1200px;
}

/* --- Wrapper legacy .cuerpoPaginaEditar: se MANTIENE como gancho de JS —
   $('.cuerpoPaginaEditar').show()/.hide() en pol_polizasEditar.php:284 y
   ~30 pantallas más de Pólizas/Órdenes comparten esa clase (ver
   [[project_form_globalFieldset]]), así que su regla base en estilos.css
   (width:900px;overflow:hidden) NO se toca para no afectarlas. Acá se
   neutraliza ese ancho fijo SOLO para esta pantalla agregando una segunda
   clase: 2 clases (0-2-0) le gana sin esfuerzo a 1 clase (0-1-0), sin
   !important y sin tocar la regla compartida. */
.cuerpoPaginaEditar.p_polizas-wrapper {
    width: auto;
    max-width: none;
    overflow: visible;
}

/* Wrapper legacy .cuerpoPaginaEditar: mismo caso que .p_polizas-wrapper de
   arriba — esta pantalla también comparte esa clase con ~30 pantallas más
   de Pólizas/Órdenes (regla base width:900px;overflow:hidden en estilos.css
   que NO se toca), así que se neutraliza el ancho fijo SOLO acá agregando
   una segunda clase. Sin esto, todo el contenido de la pantalla (tarjetas,
   grillas de 3 pares, columnas Accesorios/Coberturas) queda comprimido a
   900px en vez de los 1200px que ya usan Pólizas General y Presupuestos. */
.cuerpoPaginaEditar.p_riesgo_ItemAuto-wrapper {
    width: auto;
    max-width: none;
    overflow: visible;
}

/* Wrapper legacy .cuerpoPaginaEditar: mismo caso que los de arriba —
   pol_polizasEditarCondicionesComerciales.php (Editar Póliza -> Condiciones
   Comerciales, acceso directo sin venir de un endoso) también comparte esa
   clase con ~30 pantallas más (regla base width:900px;overflow:hidden en
   estilos.css que NO se toca). Sin esto, las tarjetas .p_PolizaEndoso-card
   (max-width:1200px) quedaban comprimidas a los 900px fijos del legacy en
   vez de expandirse hasta su propio tope. */
.cuerpoPaginaEditar.p_PolizaEndoso-wrapper {
    width: auto;
    max-width: none;
    overflow: visible;
}

/* ══════════════════════════════════════════════════════════════════════
   PARTE 9 — REDISEÑO "EDITAR ÍTEM DE PÓLIZA" (Fase 1: pol_polizasEditarItemAuto.php)
   Mismo lenguaje visual que p_polizas-*p_presupuestos- (tarjeta + grilla
   densa etiqueta:campo), pero con namespace propio p_riesgo_ItemAuto-* por
   convención explícita del usuario: cada .php de este tramo tiene su propia
   familia de clases nuevas, aunque el mecanismo CSS sea idéntico al de
   pantallas hermanas ya migradas. Las grillas ABM (Vehículos, Accesorios,
   Coberturas) siguen siendo <table class="grilla-global"> intactas — solo
   se restyling el "chrome" alrededor (header, toolbar, filtro de consulta,
   formulario de detalle del vehículo).
   ══════════════════════════════════════════════════════════════════════ */

.p_riesgo_ItemAuto-card {
    background: var(--ultu-global-surface);
    border: 1px solid var(--ultu-border-global-grid);
    border-radius: calc(var(--ultu-radius-md) + 6px);
    box-shadow: var(--ultu-shadow-sm);
    margin: 0 0 20px;
    max-width: 1200px;
    overflow: hidden;
}
.p_riesgo_ItemAuto-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ultu-border-global-grid);
}
.p_riesgo_ItemAuto-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ultu-color-primary);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
}
.p_riesgo_ItemAuto-card__toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.p_riesgo_ItemAuto-card__body { padding: 18px 20px 20px; }

/* Fila de filtro de consulta (Patente/Chasis/Motor/Descripción + botón
   Consulta) que reemplaza la vieja tabla FilaFormularioEtiquetaDato de
   tablaConsulta() en pol_polizasEditarItemAutoVehiculos.php. */
.p_riesgo_ItemAuto-consulta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}
/* Cada par label+campo es UN SOLO ítem flex (label a la izquierda, campo a
   la derecha, dentro del mismo bloque) -- así, al hacer wrap por falta de
   ancho, el par entero salta de línea junto, nunca se separan. */
.p_riesgo_ItemAuto-consulta__field {
    display: flex;
    align-items: center;
    flex: 1 1 200px;
    gap: 8px;
}
.p_riesgo_ItemAuto-consulta__field > input {
    flex: 1;
    min-width: 0;
    width: auto;
}
.p_riesgo_ItemAuto-consulta__field label {
    margin: 0;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 500;
    color: var(--ultu-text-muted);
}

/* Grilla densa etiqueta:campo (3 pares por fila) — usada en el formulario
   de detalle del Vehículo (pantallasDetalleAutoGeneral.php, rama Pólizas)
   y en los mini-formularios de Accesorios/Coberturas. */
.p_riesgo_ItemAuto-grid {
    display: grid;
    grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr);
    column-gap: 10px;
    row-gap: 5px;
    align-items: center;
}
.p_riesgo_ItemAuto-grid__label {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--ultu-text-muted);
    white-space: nowrap;
}
.p_riesgo_ItemAuto-grid__label.is-required::after {
    content: "*";
    margin-left: 3px;
    color: var(--ultu-color-danger);
    font-weight: bold;
}
/* Asterisco que aparece/desaparece según validez del campo, sin JS -- mismo
   patrón que .p_polizas-grid__label/.p_presupuestos-grid__label. Cubre tanto
   el caso "control hermano directo" (ej. rastreoVehicular) como "control
   envuelto en un div" (la mayoría, ej. marca/modelo/localidad); también se
   apaga con :required:disabled (pantalla en modo consulta, todo deshabilitado). */
.p_riesgo_ItemAuto-grid__label.is-required:has(+ :required:valid, + * :required:valid, + :required:disabled, + * :required:disabled)::after {
    display: none;
}
.p_riesgo_ItemAuto-grid__field--span2 { grid-column: span 3; }
.p_riesgo_ItemAuto-grid__field--span3 { grid-column: span 5; }
.p_riesgo_ItemAuto-grid__field--full  { grid-column: 1 / -1; }
.p_riesgo_ItemAuto-grid__control { display: flex; align-items: center; gap: 6px; }
.p_riesgo_ItemAuto-grid__control > input,
.p_riesgo_ItemAuto-grid__control > select { flex: 1; min-width: 0; }

/* Variante compacta: para grillas que viven DENTRO de una columna angosta
   (ej. los mini-formularios de Accesorios/Coberturas Adicionales, cada uno
   la mitad de .p_riesgo_ItemAuto-cols) -- 2 pares por fila en vez de 3.
   Usar la grilla default (6 columnas, pensada para el ancho completo de
   la tarjeta) ahí desbordaba: no entraban 3 pares en la mitad del ancho. */
.p_riesgo_ItemAuto-grid--compact {
    grid-template-columns: minmax(60px,auto) minmax(120px,1fr) minmax(60px,auto) minmax(120px,1fr);
}

/* Responsive: mismos cortes que .p_polizas-grid (1000px/600px), para
   mantener coherencia entre las pantallas de Pólizas -- 3 pares en
   desktop -> 2 pares <=1000px -> 1 par <=600px. Estas reglas van DESPUÉS
   de --compact a propósito: a esos anchos, tanto la grilla default como
   la compacta convergen al mismo layout angosto (no tiene sentido mantener
   2 pares "compactos" en una pantalla que ya de por sí muestra 1 par). */
@media (max-width: 1000px) {
    .p_riesgo_ItemAuto-grid { grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr); }
    .p_riesgo_ItemAuto-grid__field--span3 { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .p_riesgo_ItemAuto-grid { grid-template-columns: minmax(100px,auto) 1fr; }
    .p_riesgo_ItemAuto-grid__field--span2,
    .p_riesgo_ItemAuto-grid__field--span3 { grid-column: 1 / -1; }
}

/* Dos columnas lado a lado (Accesorios / Coberturas Adicionales) */
.p_riesgo_ItemAuto-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.p_riesgo_ItemAuto-cols__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--ultu-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.p_riesgo_ItemAuto-cols__title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ultu-border-global-grid);
}
@media (max-width: 820px) { .p_riesgo_ItemAuto-cols { grid-template-columns: 1fr; } }

/* Acciones finales (Siguiente/Volver) */
.p_riesgo_ItemAuto-acciones {
    display: flex;
    justify-content: center;
    gap: 8px;
    max-width: 1200px;
}

/* ── Componente compartido: pol_polizasEditarItemAsegurados.php (incluido
   por 12 de las 14 pantallas de riesgo — Auto, AP, ART, Aero, BPGE, Caución,
   Hogar, Incendio, IntCom, IntCon, RespCivil, Resto). Se resuelve acá, en
   Fase 1, porque Auto es la primera pantalla que lo usa; de acá en más el
   resto de las fases solo lo consume, sin tocar estas clases. Reusa el
   mismo patrón .divCliente + .botones ya validado en "Propietario de la
   Póliza" (pol_polizasEditarGeneral.php). ── */
.p_riesgo_ItemAsegurados-card {
    background: var(--ultu-global-surface);
    border: 1px solid var(--ultu-border-global-grid);
    border-radius: calc(var(--ultu-radius-md) + 6px);
    box-shadow: var(--ultu-shadow-sm);
    margin: 0 0 20px;
    max-width: 1200px;
    overflow: hidden;
}
.p_riesgo_ItemAsegurados-card__header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--ultu-border-global-grid);
}
.p_riesgo_ItemAsegurados-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ultu-color-primary);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
}
.p_riesgo_ItemAsegurados-card__body { padding: 18px 20px 20px; }
.p_riesgo_ItemAsegurados-grid {
    display: grid;
    grid-template-columns: minmax(90px,auto) 1fr;
    column-gap: 16px;
    row-gap: 14px;
    align-items: center;
}
.p_riesgo_ItemAsegurados-grid__label {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--ultu-text-muted);
}
.p_riesgo_ItemAsegurados-grid__control { display: flex; align-items: center; gap: 8px; }
.p_riesgo_ItemAsegurados-grid__control .botonesAsegurado { display: flex; gap: 6px; flex-shrink: 0; }
.p_riesgo_ItemAsegurados-grid__control .divCliente {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}
/* Bug detectado en Fase 4: .btnAsegurados.ocultar (estilos.css, display:none)
   y esta clase tenían la MISMA especificidad (1 clase c/u) -- como ultu.css
   carga después de estilos.css (ver cuerpo.php), esta ganaba el empate y el
   toolbar de Guardar/Cancelar de Asegurados quedaba SIEMPRE visible desde
   el primer render, sin esperar a botonesAsegurados(true) en polizasEditar.js.
   Se separa en wrapper (lleva .btnAsegurados.ocultar + grid-column, sin
   pelear por display) + este div interno (solo el flex, nunca togglead
   directamente) -- mismo patrón que .botonesGuardarItem. */
.p_riesgo_ItemAsegurados-toolbar-wrap { grid-column: 1 / -1; }
.p_riesgo_ItemAsegurados-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
@media (max-width: 600px) {
    .p_riesgo_ItemAsegurados-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════
   PARTE 10 — Componente compartido: pol_polizasEditarItemGrillasCobAdicClau.php
   (incluido por 11 de las 14 pantallas de riesgo — Auto NO lo usa, tiene su
   propia variante). Se resuelve acá, en Fase 2 (AP), primera pantalla que lo
   usa; de acá en más el resto de las fases solo lo consume.

   Los 3 <fieldset> (Coberturas/Adicionales/Cláusulas) pasan a <details> —
   acordeón nativo, mismo mecanismo que ya se usa en Auto Scoring de
   Presupuestos (#autoScoring .p_presupuestos-scoring-item, ver arriba).
   SIN tocar las clases datoExtraCob/datoExtraAd/datoExtraCl que ya usa el
   JS (habilitarDatosExtras en utiles.js) para habilitar los inputs al abrir
   -- siguen funcionando igual, ahora redundantes para el show/hide visual
   (el <details> ya lo resuelve) pero necesarias para ese habilitado.
   Las funciones abrirCobertura/cerrarCoberturaOK (y sus pares de Adicional/
   Cláusula, en polizasEditar.js) ganaron una línea que togglea el atributo
   `open` del <details> correspondiente, gateada con != null.

   Campos obligatorios: NO se marcan (aunque datosValidosCobertura/Adicional/
   Clausula sí los exigen) -- son una sub-acción local ("Agregar" a una
   grilla secundaria), igual criterio que Accesorios/Coberturas de Auto
   (Fase 1): no bloquean el "Siguiente" general de la pantalla. */
.p_riesgo_ItemGrillasCobAdicClau-item {
    border: 1.5px solid var(--ultu-text-placeholder);
    border-radius: var(--ultu-radius-md);
    margin: 0 0 14px;
    overflow: hidden;
}
.p_riesgo_ItemGrillasCobAdicClau-item[open] {
    border-color: var(--ultu-primary-border-hover);
}
.p_riesgo_ItemGrillasCobAdicClau-item__summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: var(--ultu-color-primary);
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--ultu-card-header-bg);
}
.p_riesgo_ItemGrillasCobAdicClau-item__summary::-webkit-details-marker { display: none; }
.p_riesgo_ItemGrillasCobAdicClau-item__summary::marker { content: ""; }
.p_riesgo_ItemGrillasCobAdicClau-item__chev {
    margin-left: auto;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform .18s;
    -webkit-mask: var(--ultu-icon-chevron-down) center / contain no-repeat;
    mask: var(--ultu-icon-chevron-down) center / contain no-repeat;
    background-color: var(--ultu-text-subtle);
}
.p_riesgo_ItemGrillasCobAdicClau-item[open] .p_riesgo_ItemGrillasCobAdicClau-item__chev {
    transform: rotate(180deg);
}
.p_riesgo_ItemGrillasCobAdicClau-item__body { padding: 14px 16px 16px; }

/* Grilla densa etiqueta:campo para el mini-formulario de cada sección
   (Coberturas: hasta 3 pares; Adicionales/Cláusulas: 1-2 campos, usan
   --compact). Mismo mecanismo/breakpoints que el resto del proyecto. */
.p_riesgo_ItemGrillasCobAdicClau-grid {
    display: grid;
    grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr);
    column-gap: 10px;
    row-gap: 5px;
    align-items: center;
    margin-bottom: 14px;
}
.p_riesgo_ItemGrillasCobAdicClau-grid__label {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--ultu-text-muted);
    white-space: nowrap;
}
.p_riesgo_ItemGrillasCobAdicClau-grid__field--full { grid-column: 1 / -1; }
.p_riesgo_ItemGrillasCobAdicClau-grid--compact {
    grid-template-columns: minmax(60px,auto) minmax(120px,1fr) minmax(60px,auto) minmax(120px,1fr);
}
@media (max-width: 1000px) {
    .p_riesgo_ItemGrillasCobAdicClau-grid { grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr); }
}
@media (max-width: 600px) {
    .p_riesgo_ItemGrillasCobAdicClau-grid { grid-template-columns: minmax(100px,auto) 1fr; }
}

.p_riesgo_ItemGrillasCobAdicClau-toolbar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-bottom: 14px; }

/* ══════════════════════════════════════════════════════════════════════
   PARTE 11 — REDISEÑO "EDITAR ÍTEM DE PÓLIZA" (Fase 2: pol_polizasEditarItemAP.php)
   Mismo mecanismo que p_riesgo_ItemAuto-* (Fase 1): tarjeta + grilla densa
   etiqueta:campo, mismos breakpoints (1000px/600px), acciones finales
   centradas. Namespace propio por convención del usuario. */
.cuerpoPaginaEditar.p_riesgo_ItemAP-wrapper {
    width: auto;
    max-width: none;
    overflow: visible;
}
.p_riesgo_ItemAP-card {
    background: var(--ultu-global-surface);
    border-radius: calc(var(--ultu-radius-md) + 6px);
    box-shadow: var(--ultu-shadow-sm);
    margin: 0 0 20px;
    max-width: 1200px;
    overflow: hidden;
}
/* Aviso de edición sin guardar en Vidas Aseguradas (Actividades): mismo
   mecanismo/color que #tablaVehiculo en Auto (Fase 1) y en Presupuestos de
   Autos -- mientras "Nuevo"/"Editar" está activo la tarjeta se remarca en
   rojo. Usa outline (no border), ver comentario de #tablaVehiculo.
   Toggle en js/polizasEditarItemAP.js → habilitarCamposActividadPolizaEditarItemAP(). */
#tablaActividades {
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color .15s;
}
#tablaActividades.is-editing {
    outline-color: var(--ultu-color-danger);
}
.p_riesgo_ItemAP-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ultu-border-global-grid);
}
.p_riesgo_ItemAP-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ultu-color-primary);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
}
.p_riesgo_ItemAP-card__toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.p_riesgo_ItemAP-card__body { padding: 18px 20px 20px; }

.p_riesgo_ItemAP-grid {
    display: grid;
    grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr);
    column-gap: 10px;
    row-gap: 5px;
    align-items: center;
    margin-bottom: 14px;
}
.p_riesgo_ItemAP-grid__label {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--ultu-text-muted);
    white-space: nowrap;
}
.p_riesgo_ItemAP-grid__field--full { grid-column: 1 / -1; }
@media (max-width: 1000px) {
    .p_riesgo_ItemAP-grid { grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr); }
}
@media (max-width: 600px) {
    .p_riesgo_ItemAP-grid { grid-template-columns: minmax(100px,auto) 1fr; }
}

.p_riesgo_ItemAP-acciones {
    display: flex;
    justify-content: center;
    gap: 8px;
    max-width: 1200px;
}

/* Bug detectado al construir PARTE 12: estilos.css trae .selSeccionCobClau/
   .selSeccionNomAseg con border-color rojo !important (viejo look de
   fieldset "seleccionado") -- seccionSeleccionadaClauCob/NomAseg en JS
   siguen agregando esa clase a los <details>, y como también tienen
   !important pisaría el border-color azul de [open] de acá arriba. Se
   neutraliza con una regla más específica (dos clases) en vez de tocar
   estilos.css. */
.p_riesgo_ItemGrillasCobAdicClau-item.selSeccionCobClau,
.p_riesgo_ItemNominasDeAsegurados-item.selSeccionNomAseg,
.p_riesgo_ItemMateriaAsegurada-item.selSeccionCobClau,
.p_riesgo_ItemSublimites-item.selSeccionCobClau {
    border-color: var(--ultu-primary-border-hover) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   PARTE 12 — Componente compartido: pol_polizasEditarNominasDeAsegurados.php
   (incluido por AP y ART). Mismo patrón de acordeón que GrillasCobAdicClau
   (PARTE 10): <details>/<summary> nativo, clase datoExtraNominasAseg
   intacta para el habilitado de inputs (habilitarDatosExtras en utiles.js).

   El legado tenía UNA sola clase datoExtraNominasAseg compartida entre
   "Carga Manual" y "Carga Automática" (2 <form> distintos) solo para
   mostrar/ocultar -- acá se separan en 2 acordeones independientes:
   "Carga Manual" sigue el flujo de siempre, abrirNominaAsegurado()/
   cerrarNominaAsegurado() (con confirmación si hay datos sin guardar, ver
   hayDatosNominaAsegurado() en polizasNominasDeAsegurados.js), ahora con
   una línea extra que togglea el <details id="seccionNominasAsegurados">;
   "Carga Automática" no tiene ese guardián de datos así que usa el toggle
   nativo del <details> sin interceptar el click.

   Campos obligatorios: NO se marcan -- datosValidosGuardarNominas() exige
   Nro.Item/Tipo Documento/Nro.Documento/Apellido/Nombre pero solo para la
   sub-acción local "Dar Alta" (agregarNominas); enviarValoresPolizaEditarItem
   (js/polizasEditar.js) no la exige para el "Siguiente" general de la
   pantalla -- mismo criterio que Actividades/Coberturas (PARTE 10/11). */
.p_riesgo_ItemNominasDeAsegurados-card {
    background: var(--ultu-global-surface);
    border-radius: calc(var(--ultu-radius-md) + 6px);
    box-shadow: var(--ultu-shadow-sm);
    margin: 0 0 20px;
    max-width: 1200px;
    overflow: hidden;
}
.p_riesgo_ItemNominasDeAsegurados-card__header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--ultu-border-global-grid);
}
.p_riesgo_ItemNominasDeAsegurados-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ultu-color-primary);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
}
.p_riesgo_ItemNominasDeAsegurados-card__body { padding: 18px 20px 20px; }

.p_riesgo_ItemNominasDeAsegurados-item {
    border: 1.5px solid var(--ultu-text-placeholder);
    border-radius: var(--ultu-radius-md);
    margin: 0 0 14px;
    overflow: hidden;
}
.p_riesgo_ItemNominasDeAsegurados-item[open] {
    border-color: var(--ultu-primary-border-hover);
}
.p_riesgo_ItemNominasDeAsegurados-item__summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: var(--ultu-color-primary);
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--ultu-card-header-bg);
}
.p_riesgo_ItemNominasDeAsegurados-item__summary::-webkit-details-marker { display: none; }
.p_riesgo_ItemNominasDeAsegurados-item__summary::marker { content: ""; }
.p_riesgo_ItemNominasDeAsegurados-item__chev {
    margin-left: auto;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform .18s;
    -webkit-mask: var(--ultu-icon-chevron-down) center / contain no-repeat;
    mask: var(--ultu-icon-chevron-down) center / contain no-repeat;
    background-color: var(--ultu-text-subtle);
}
.p_riesgo_ItemNominasDeAsegurados-item[open] .p_riesgo_ItemNominasDeAsegurados-item__chev {
    transform: rotate(180deg);
}
.p_riesgo_ItemNominasDeAsegurados-item__body { padding: 14px 16px 16px; }

.p_riesgo_ItemNominasDeAsegurados-grid {
    display: grid;
    grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr);
    column-gap: 10px;
    row-gap: 5px;
    align-items: center;
    margin-bottom: 14px;
}
.p_riesgo_ItemNominasDeAsegurados-grid__label {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--ultu-text-muted);
    white-space: nowrap;
}
.p_riesgo_ItemNominasDeAsegurados-grid__field--full { grid-column: 1 / -1; }
@media (max-width: 1000px) {
    .p_riesgo_ItemNominasDeAsegurados-grid { grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr); }
}
@media (max-width: 600px) {
    .p_riesgo_ItemNominasDeAsegurados-grid { grid-template-columns: minmax(100px,auto) 1fr; }
}

.p_riesgo_ItemNominasDeAsegurados-toolbar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-bottom: 10px; }
.p_riesgo_ItemNominasDeAsegurados-toolbar:last-child { margin-bottom: 0; }

/* Fila "Buscar" (siempre visible, no es parte de ningún acordeón) y fila de
   Nro.Item + botón Importar de "Carga Automática" -- mismo patrón que
   .p_riesgo_ItemAuto-consulta (PARTE 9): cada par label+campo es un solo
   ítem flex para que no se separen al hacer wrap. */
.p_riesgo_ItemNominasDeAsegurados-consulta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}
.p_riesgo_ItemNominasDeAsegurados-consulta__field {
    display: flex;
    align-items: center;
    flex: 1 1 200px;
    gap: 8px;
}
.p_riesgo_ItemNominasDeAsegurados-consulta__field > input,
.p_riesgo_ItemNominasDeAsegurados-consulta__field > select {
    flex: 1;
    min-width: 0;
    width: auto;
}
.p_riesgo_ItemNominasDeAsegurados-consulta__field label {
    margin: 0;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 500;
    color: var(--ultu-text-muted);
}

/* ══════════════════════════════════════════════════════════════════════
   PARTE 13 — Fase 3: pol_polizasEditarItemHogar.php + ...HogarViviendas.php
   Mismo mecanismo que Auto/AP (tarjeta + grilla densa, breakpoints
   1000px/600px, acciones centradas, is-editing + botonesGuardarItem).

   Obligatorios: solo "Suma Asegurada" (única exigencia real de
   datosValidosViviendaPolizaEditarItemHogar() -- Vivienda es la entidad
   principal de esta pantalla, mismo criterio que Vehículo en Auto, no
   "sub-sección local" como Asegurados/Coberturas). Metros Cubiertos solo
   valida FORMATO si no está vacío, no presencia -- no se marca. */
.cuerpoPaginaEditar.p_riesgo_ItemHogar-wrapper {
    width: auto;
    max-width: none;
    overflow: visible;
}
.p_riesgo_ItemHogar-card {
    background: var(--ultu-global-surface);
    border-radius: calc(var(--ultu-radius-md) + 6px);
    box-shadow: var(--ultu-shadow-sm);
    margin: 0 0 20px;
    max-width: 1200px;
    overflow: hidden;
}
/* Aviso de edición sin guardar en Vivienda: mismo mecanismo/color que
   #tablaVehiculo (Auto) y #tablaActividades (AP). Usa outline (no border),
   ver comentario de #tablaVehiculo. Toggle en
   js/polizasEditarItemHogar.js → habilitarCamposViviendaPolizaEditarItemHogar(). */
#tablaViviendas {
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color .15s;
}
#tablaViviendas.is-editing {
    outline-color: var(--ultu-color-danger);
}
.p_riesgo_ItemHogar-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ultu-border-global-grid);
}
.p_riesgo_ItemHogar-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ultu-color-primary);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
}
.p_riesgo_ItemHogar-card__toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.p_riesgo_ItemHogar-card__body { padding: 18px 20px 20px; }

.p_riesgo_ItemHogar-grid {
    display: grid;
    grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr);
    column-gap: 10px;
    row-gap: 5px;
    align-items: center;
    margin-bottom: 14px;
}
.p_riesgo_ItemHogar-grid__label {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--ultu-text-muted);
    white-space: nowrap;
}
.p_riesgo_ItemHogar-grid__label.is-required::after {
    content: "*";
    margin-left: 3px;
    color: var(--ultu-color-danger);
    font-weight: bold;
}
.p_riesgo_ItemHogar-grid__label.is-required:has(+ :required:valid, + * :required:valid, + :required:disabled, + * :required:disabled)::after {
    display: none;
}
.p_riesgo_ItemHogar-grid__field--full { grid-column: 1 / -1; }
@media (max-width: 1000px) {
    .p_riesgo_ItemHogar-grid { grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr); }
}
@media (max-width: 600px) {
    .p_riesgo_ItemHogar-grid { grid-template-columns: minmax(100px,auto) 1fr; }
}

/* Título de sección dentro de la misma tarjeta (Características/Medidas de
   Seguridad/Adicionales) -- reusa el estilo de separador ya definido para
   .p_riesgo_ItemXxx-cols__title, sin el grid de 2 columnas. */
.p_riesgo_ItemHogar-cols__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--ultu-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.p_riesgo_ItemHogar-cols__title::after { content: ""; flex: 1; height: 1px; background: var(--ultu-border-global-grid); }

/* Fila de checkboxes (Medidas de Seguridad/Adicionales) */
.p_riesgo_ItemHogar-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-bottom: 14px; }
.p_riesgo_ItemHogar-checks label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 400; color: var(--ultu-text-base); white-space: nowrap; }
.p_riesgo_ItemHogar-grid__field--full label { font-size: 13px; font-weight: 400; margin: 0; }

.p_riesgo_ItemHogar-acciones {
    display: flex;
    justify-content: center;
    gap: 8px;
    max-width: 1200px;
}

/* ══════════════════════════════════════════════════════════════════════
   PARTE 14 — Componentes compartidos: pol_polizasEditarMateriaAsegurada.php
   y pol_polizasEditarSublimites.php (incluidos por Hogar, y más adelante
   RespCivil/Resto). Mismo patrón de acordeón que GrillasCobAdicClau
   (PARTE 10) y Nóminas (PARTE 12): <details>/<summary>, clases
   datoExtraMateria/datoExtraSublimite intactas para habilitarDatosExtras().

   Obligatorios: NO se marcan -- agregarMateriaAsegurada() sí exige
   Descripción y Monto, pero es una sub-acción local de una sección
   siempre-activa (mismo criterio que Coberturas/Adicionales/Cláusulas,
   PARTE 10). Se sacaron los is-required que tenía el legacy en
   Descripción/Monto de Materia Asegurada (no correspondían con este
   criterio). Sublimites no tenía ningún is-required en el legacy. */
.p_riesgo_ItemMateriaAsegurada-item,
.p_riesgo_ItemSublimites-item {
    border: 1.5px solid var(--ultu-text-placeholder);
    border-radius: var(--ultu-radius-md);
    margin: 0 0 14px;
    overflow: hidden;
}
.p_riesgo_ItemMateriaAsegurada-item[open],
.p_riesgo_ItemSublimites-item[open] {
    border-color: var(--ultu-primary-border-hover);
}
.p_riesgo_ItemMateriaAsegurada-item__summary,
.p_riesgo_ItemSublimites-item__summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: var(--ultu-color-primary);
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--ultu-card-header-bg);
}
.p_riesgo_ItemMateriaAsegurada-item__summary::-webkit-details-marker,
.p_riesgo_ItemSublimites-item__summary::-webkit-details-marker { display: none; }
.p_riesgo_ItemMateriaAsegurada-item__summary::marker,
.p_riesgo_ItemSublimites-item__summary::marker { content: ""; }
.p_riesgo_ItemMateriaAsegurada-item__chev,
.p_riesgo_ItemSublimites-item__chev {
    margin-left: auto;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform .18s;
    -webkit-mask: var(--ultu-icon-chevron-down) center / contain no-repeat;
    mask: var(--ultu-icon-chevron-down) center / contain no-repeat;
    background-color: var(--ultu-text-subtle);
}
.p_riesgo_ItemMateriaAsegurada-item[open] .p_riesgo_ItemMateriaAsegurada-item__chev,
.p_riesgo_ItemSublimites-item[open] .p_riesgo_ItemSublimites-item__chev {
    transform: rotate(180deg);
}
.p_riesgo_ItemMateriaAsegurada-item__body,
.p_riesgo_ItemSublimites-item__body { padding: 14px 16px 16px; }

.p_riesgo_ItemMateriaAsegurada-grid,
.p_riesgo_ItemSublimites-grid {
    display: grid;
    grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr);
    column-gap: 10px;
    row-gap: 5px;
    align-items: center;
    margin-bottom: 14px;
}
.p_riesgo_ItemMateriaAsegurada-grid__label,
.p_riesgo_ItemSublimites-grid__label {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--ultu-text-muted);
    white-space: nowrap;
}
.p_riesgo_ItemMateriaAsegurada-grid__field--full,
.p_riesgo_ItemSublimites-grid__field--full { grid-column: 1 / -1; }
@media (max-width: 1000px) {
    .p_riesgo_ItemMateriaAsegurada-grid,
    .p_riesgo_ItemSublimites-grid { grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr); }
}
@media (max-width: 600px) {
    .p_riesgo_ItemMateriaAsegurada-grid,
    .p_riesgo_ItemSublimites-grid { grid-template-columns: minmax(100px,auto) 1fr; }
}

.p_riesgo_ItemMateriaAsegurada-toolbar,
.p_riesgo_ItemSublimites-toolbar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-bottom: 14px; }

.p_riesgo_ItemMateriaAsegurada-consulta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ultu-text-muted);
}

/* ══════════════════════════════════════════════════════════════════════
   PARTE 15 — Fase 4: pol_polizasEditarItemIntCom.php + ...IntComPropiedades.php
   Mismo mecanismo que Hogar (PARTE 13): tarjeta + grilla densa + checks +
   cols__title, is-editing + botonesGuardarItem, modo endosoExclusion con
   el mismo lenguaje (título+grilla-global) resuelto en Fase 3.

   Obligatorios: NINGUNO -- datosValidosPropiedadPolizaEditarItemIntCom()
   no exige presencia de ningún campo (solo formato de Metros Cubiertos si
   no está vacío), a diferencia de Hogar (Suma Asegurada). Verificado contra
   el validador real de ESTA pantalla, no asumido de la hermana Hogar. */
.cuerpoPaginaEditar.p_riesgo_ItemIntCom-wrapper {
    width: auto;
    max-width: none;
    overflow: visible;
}
.p_riesgo_ItemIntCom-card {
    background: var(--ultu-global-surface);
    border-radius: calc(var(--ultu-radius-md) + 6px);
    box-shadow: var(--ultu-shadow-sm);
    margin: 0 0 20px;
    max-width: 1200px;
    overflow: hidden;
}
/* Aviso de edición sin guardar en Propiedad: mismo mecanismo/color que
   #tablaVehiculo (Auto), #tablaActividades (AP) y #tablaViviendas (Hogar).
   Usa outline (no border), ver comentario de #tablaVehiculo.
   Toggle en js/polizasEditarItemIntCom.js → habilitarCamposPropiedadPolizaEditarItemIntCom(). */
#tablaPropiedades {
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color .15s;
}
#tablaPropiedades.is-editing {
    outline-color: var(--ultu-color-danger);
}
.p_riesgo_ItemIntCom-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ultu-border-global-grid);
}
.p_riesgo_ItemIntCom-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ultu-color-primary);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
}
.p_riesgo_ItemIntCom-card__toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.p_riesgo_ItemIntCom-card__body { padding: 18px 20px 20px; }

.p_riesgo_ItemIntCom-grid {
    display: grid;
    grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr);
    column-gap: 10px;
    row-gap: 5px;
    align-items: center;
    margin-bottom: 14px;
}
.p_riesgo_ItemIntCom-grid__label {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--ultu-text-muted);
    white-space: nowrap;
}
.p_riesgo_ItemIntCom-grid__field--full { grid-column: 1 / -1; }
.p_riesgo_ItemIntCom-grid__control { display: flex; align-items: center; gap: 6px; }
.p_riesgo_ItemIntCom-grid__control > input { flex: 1; min-width: 0; }
@media (max-width: 1000px) {
    .p_riesgo_ItemIntCom-grid { grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr); }
}
@media (max-width: 600px) {
    .p_riesgo_ItemIntCom-grid { grid-template-columns: minmax(100px,auto) 1fr; }
}

.p_riesgo_ItemIntCom-cols__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--ultu-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.p_riesgo_ItemIntCom-cols__title::after { content: ""; flex: 1; height: 1px; background: var(--ultu-border-global-grid); }

.p_riesgo_ItemIntCom-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-bottom: 14px; }
.p_riesgo_ItemIntCom-checks label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 400; color: var(--ultu-text-base); white-space: nowrap; }
.p_riesgo_ItemIntCom-grid__field--full label { font-size: 13px; font-weight: 400; margin: 0; }

.p_riesgo_ItemIntCom-acciones {
    display: flex;
    justify-content: center;
    gap: 8px;
    max-width: 1200px;
}

/* ══════════════════════════════════════════════════════════════════════
   PARTE 16 — Fase 5: pol_polizasEditarItemIntCon.php + ...IntConPropiedades.php
   Gemela de IntCom (PARTE 15): mismo mecanismo tarjeta+grilla+checks+
   cols__title, is-editing+botonesGuardarItem, modo endosoExclusion,
   #botonesABMPropiedad envuelto aparte (jQuery .show()/.hide() acá también,
   igual que IntCom) desde el vamos.

   Obligatorios: NINGUNO -- datosValidosPropiedadPolizaEditarItemIntCon()
   no exige presencia de ningún campo (solo formato de Metros Cubiertos si
   no está vacío), verificado igual que en IntCom -- no asumido de la
   hermana. */
.cuerpoPaginaEditar.p_riesgo_ItemIntCon-wrapper {
    width: auto;
    max-width: none;
    overflow: visible;
}
.p_riesgo_ItemIntCon-card {
    background: var(--ultu-global-surface);
    border-radius: calc(var(--ultu-radius-md) + 6px);
    box-shadow: var(--ultu-shadow-sm);
    margin: 0 0 20px;
    max-width: 1200px;
    overflow: hidden;
}
#tablaPropiedades {
    border: 2px solid transparent;
    transition: border-color .15s;
}
#tablaPropiedades.is-editing {
    border-color: var(--ultu-color-danger);
}
.p_riesgo_ItemIntCon-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ultu-border-global-grid);
}
.p_riesgo_ItemIntCon-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ultu-color-primary);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
}
.p_riesgo_ItemIntCon-card__toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.p_riesgo_ItemIntCon-card__body { padding: 18px 20px 20px; }

.p_riesgo_ItemIntCon-grid {
    display: grid;
    grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr);
    column-gap: 10px;
    row-gap: 5px;
    align-items: center;
    margin-bottom: 14px;
}
.p_riesgo_ItemIntCon-grid__label {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--ultu-text-muted);
    white-space: nowrap;
}
.p_riesgo_ItemIntCon-grid__field--full { grid-column: 1 / -1; }
.p_riesgo_ItemIntCon-grid__field--full label { font-size: 13px; font-weight: 400; margin: 0; }
@media (max-width: 1000px) {
    .p_riesgo_ItemIntCon-grid { grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr); }
}
@media (max-width: 600px) {
    .p_riesgo_ItemIntCon-grid { grid-template-columns: minmax(100px,auto) 1fr; }
}

.p_riesgo_ItemIntCon-cols__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--ultu-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.p_riesgo_ItemIntCon-cols__title::after { content: ""; flex: 1; height: 1px; background: var(--ultu-border-global-grid); }

.p_riesgo_ItemIntCon-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-bottom: 14px; }
.p_riesgo_ItemIntCon-checks label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 400; color: var(--ultu-text-base); white-space: nowrap; }

.p_riesgo_ItemIntCon-acciones {
    display: flex;
    justify-content: center;
    gap: 8px;
    max-width: 1200px;
}

/* ══════════════════════════════════════════════════════════════════════
   PARTE 17 — Fase 6: pol_polizasEditarItemAgro.php + pantallasAgroGenerales.php
   Pantalla atípica: wizard de 3 sub-pantallas (Cobertura Básica → Cobertura
   Adicional / Detalle de Ítems) swapeadas por AJAX, sin include() PHP fijo.
   El markup real vive en pantallasAgroGenerales.php -- COMPARTIDO tal cual
   (sin rama propia) por Pólizas/Presupuestos/Órdenes, así que este rediseño
   moderniza las 3 a la vez (confirmado con el usuario, no había diseño de
   Presupuestos/Órdenes previo que pisar).

   Checkpoint 1: contenedor principal + Cobertura Básicas
   (pantallaCoberturasBasicas()). Sin card__toolbar -- esta pantalla no
   tiene grilla+form como el resto, es un único formulario largo. */
.cuerpoPaginaEditar.p_riesgo_ItemAgro-wrapper {
    width: auto;
    max-width: none;
    overflow: visible;
}
.p_riesgo_ItemAgro-card {
    background: var(--ultu-global-surface);
    border-radius: calc(var(--ultu-radius-md) + 6px);
    box-shadow: var(--ultu-shadow-sm);
    margin: 0 0 20px;
    max-width: 1200px;
    overflow: hidden;
}
.p_riesgo_ItemAgro-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ultu-border-global-grid);
}
.p_riesgo_ItemAgro-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ultu-color-primary);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
}
.p_riesgo_ItemAgro-card__toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.p_riesgo_ItemAgro-card__body { padding: 18px 20px 20px; }

.p_riesgo_ItemAgro-cols__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--ultu-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.p_riesgo_ItemAgro-cols__title::after { content: ""; flex: 1; height: 1px; background: var(--ultu-border-global-grid); }

/* Fila "Valor combo / Observaciones textarea" repetida (Incendio/Riesgos
   Tempranos/Incendio del rastrojo/Franquicia deducible/Ajuste por
   Siniestralidad/Cláusula de Ajuste) -- 4 columnas, la de observaciones
   más ancha para el textarea. align-items:start para que el label no
   quede centrado contra las 4 filas del textarea. */
.p_riesgo_ItemAgro-obs {
    display: grid;
    grid-template-columns: minmax(90px,auto) minmax(160px,1fr) minmax(100px,auto) minmax(220px,2fr);
    column-gap: 10px;
    row-gap: 5px;
    align-items: start;
    margin-bottom: 14px;
}
.p_riesgo_ItemAgro-obs__label {
    margin: 0;
    padding-top: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ultu-text-muted);
    white-space: nowrap;
}
.p_riesgo_ItemAgro-grid__control { display: flex; align-items: center; gap: 6px; }
.p_riesgo_ItemAgro-quintal { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
@media (max-width: 1000px) {
    .p_riesgo_ItemAgro-obs { grid-template-columns: minmax(90px,auto) minmax(160px,1fr) minmax(100px,auto) minmax(200px,1fr); }
}
@media (max-width: 600px) {
    .p_riesgo_ItemAgro-obs { grid-template-columns: minmax(90px,auto) 1fr; }
}

.p_riesgo_ItemAgro-checks { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 28px; margin-bottom: 14px; }
.p_riesgo_ItemAgro-checks label { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 13px; font-weight: 400; color: var(--ultu-text-base); }

.p_riesgo_ItemAgro-acciones {
    display: flex;
    justify-content: center;
    gap: 8px;
    max-width: 1200px;
}

/* Checkpoint 2: Cobertura Adicionales (pantallaCoberturasAdicionales()) --
   grilla densa etiqueta:campo estándar + toolbar de Guardar/Cancelar
   (los botones llevan su propia clase legacy .ocultar, no el contenedor,
   así que no hace falta el wrapper anti-especificidad acá). */
.p_riesgo_ItemAgro-grid {
    display: grid;
    grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr);
    column-gap: 10px;
    row-gap: 5px;
    align-items: center;
    margin-bottom: 14px;
}
.p_riesgo_ItemAgro-grid__label {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--ultu-text-muted);
    white-space: nowrap;
}
.p_riesgo_ItemAgro-grid__field--full { grid-column: 1 / -1; }
@media (max-width: 1000px) {
    .p_riesgo_ItemAgro-grid { grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr); }
}
@media (max-width: 600px) {
    .p_riesgo_ItemAgro-grid { grid-template-columns: minmax(100px,auto) 1fr; }
}

.p_riesgo_ItemAgro-toolbar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-bottom: 14px; }

/* Checkpoint 3: Detalle de Ítems (pantallaItemDetalle()/detalleItems()).
   La grilla ABM (id="tablaItemDetalle") NO se tocó -- ya usaba grilla-global,
   y editarAgroItemDetalle()/cancelarAgroItemDetalle() intercambian el
   .html() de la fila clickeada con la fila-molde #filaInputs (mismo número
   y orden de <td> obligatorio) -- solo se modernizó el header y el
   formulario de detalle (detalleItems()), que son tablas separadas. */
.p_riesgo_ItemAgro-card__headergroup { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.p_riesgo_ItemAgro-card__moneda { font-size: 12px; font-weight: 500; color: var(--ultu-text-muted); }
.p_riesgo_ItemAgro-card__hint { font-size: 12px; font-weight: 500; color: var(--ultu-text-muted); }

/* ══════════════════════════════════════════════════════════════════════
   PARTE 18 — Fase 7: pol_polizasEditarItemCaucion.php + ...CaucionGarantias.php
   Mismo mecanismo que Hogar/IntCom/IntCon (tarjeta+grilla+cols__title,
   is-editing+botonesGuardarItem, modo endosoExclusion). #botonesABMGarantia
   y #botonesAceptarGarantia usan solo style.visibility (no jQuery
   show/hide con clase conflictiva) -- sin riesgo de especificidad, no
   hizo falta wrapper anti-especificidad.

   Nota: el bloque Tomador/Aceptante (sólo Presupuestos, `if(isset($idPresupuesto)...)`)
   quedó intacto -- se le agregó una <table> propia (antes vivía dentro de
   la <table> general que se reemplazó por la grilla nueva de Pólizas) para
   no dejarlo con <tr>/<td> huérfanos sin tabla contenedora.

   Obligatorios: NINGUNO -- datosValidosGarantiaPolizaEditarItemCaucion()
   tiene TODO el cuerpo comentado (mismo patrón que Agro/IntCom/IntCon). */
.cuerpoPaginaEditar.p_riesgo_ItemCaucion-wrapper {
    width: auto;
    max-width: none;
    overflow: visible;
}
.p_riesgo_ItemCaucion-card {
    background: var(--ultu-global-surface);
    border-radius: calc(var(--ultu-radius-md) + 6px);
    box-shadow: var(--ultu-shadow-sm);
    margin: 0 0 20px;
    max-width: 1200px;
    overflow: hidden;
}
#tablaGarantias {
    border: 2px solid transparent;
    transition: border-color .15s;
}
#tablaGarantias.is-editing {
    border-color: var(--ultu-color-danger);
}
.p_riesgo_ItemCaucion-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ultu-border-global-grid);
}
.p_riesgo_ItemCaucion-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ultu-color-primary);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
}
.p_riesgo_ItemCaucion-card__toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.p_riesgo_ItemCaucion-card__body { padding: 18px 20px 20px; }

.p_riesgo_ItemCaucion-grid {
    display: grid;
    grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr);
    column-gap: 10px;
    row-gap: 5px;
    align-items: center;
    margin-bottom: 14px;
}
.p_riesgo_ItemCaucion-grid__label {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--ultu-text-muted);
    white-space: nowrap;
}
.p_riesgo_ItemCaucion-grid__field--full { grid-column: 1 / -1; }
@media (max-width: 1000px) {
    .p_riesgo_ItemCaucion-grid { grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr); }
}
@media (max-width: 600px) {
    .p_riesgo_ItemCaucion-grid { grid-template-columns: minmax(100px,auto) 1fr; }
}

.p_riesgo_ItemCaucion-cols__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--ultu-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.p_riesgo_ItemCaucion-cols__title::after { content: ""; flex: 1; height: 1px; background: var(--ultu-border-global-grid); }

.p_riesgo_ItemCaucion-acciones {
    display: flex;
    justify-content: center;
    gap: 8px;
    max-width: 1200px;
}

/* ──────────────────────────────────────────
   PARTE 19 — Fase 8: pol_polizasEditarItemART.php + ...ARTPersonas.php
   + paginas/pantallasARTGenerales.php

   ART es arquitectónicamente distinto a las fases 3-7: NO hay grilla/ABM
   de ningún tipo, es una pantalla de UN SOLO registro ("Detalle del
   Contrato" + "Tarifa actual") con un único toggle Editar → Guardar/Cancelar
   (habilitarDatos()-style, ver .botonesEditar/.botonesAceptar). El contenido
   real vive en pantallasARTGenerales.php, un archivo GENUINAMENTE compartido
   por Pólizas/Presupuestos/Órdenes ($vieneDe: 'polizasEndosos'/'presupuesto'/
   'ordenes') -- mismo caso que pantallasAgroGenerales.php (PARTE 17): se
   rediseña una sola vez y beneficia a los 3 consumidores, no había diseño
   propio de Presupuestos/Órdenes con el que chocar.

   Asegurados (Tomador/Asegurado/Acreedor) NO se usa en esta pantalla: el
   include de pol_polizasEditarItemAsegurados.php está comentado en
   pol_polizasEditarItemARTPersonas.php (el backend ...ARTAseguradosGuardar.php
   existe y funciona, pero no hay UI que lo dispare) -- no se agregó ningún
   componente Asegurados acá.

   Obligatorios: la pantalla real usa datosValidosDatosPresupuestoEditarItemART(viene),
   compartida por los 3 contextos. CUIT y CIIU se validan siempre; Masa
   Salarial y Cápitas se saltean cuando viene='endoso' (o sea, en el flujo
   de Pólizas/Endosos que es el que se está rediseñando acá) y sólo son
   obligatorios en Presupuestos -- por eso NO llevan asterisco en esta fase. */
.cuerpoPaginaEditar.p_riesgo_ItemART-wrapper {
    width: auto;
    max-width: none;
    overflow: visible;
}
.p_riesgo_ItemART-card {
    background: var(--ultu-global-surface);
    border-radius: calc(var(--ultu-radius-md) + 6px);
    box-shadow: var(--ultu-shadow-sm);
    margin: 0 0 20px;
    max-width: 1200px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color .15s;
}
.p_riesgo_ItemART-card.is-editing {
    border-color: var(--ultu-color-danger);
}
.p_riesgo_ItemART-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ultu-border-global-grid);
}
.p_riesgo_ItemART-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ultu-color-primary);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
}
.p_riesgo_ItemART-card__toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.p_riesgo_ItemART-card__body { padding: 18px 20px 20px; }

.p_riesgo_ItemART-cols__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--ultu-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.p_riesgo_ItemART-cols__title::after { content: ""; flex: 1; height: 1px; background: var(--ultu-border-global-grid); }
.p_riesgo_ItemART-cols__title:not(:first-child) { margin-top: 20px; }

.p_riesgo_ItemART-grid {
    display: grid;
    grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr);
    column-gap: 10px;
    row-gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}
.p_riesgo_ItemART-grid__label {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--ultu-text-muted);
    white-space: nowrap;
}
.p_riesgo_ItemART-grid__label.is-required::after {
    content: "*";
    margin-left: 3px;
    color: var(--ultu-color-danger);
    font-weight: bold;
}
.p_riesgo_ItemART-grid__label.is-required:has(+ :required:valid, + * :required:valid, + :required:disabled, + * :required:disabled)::after {
    display: none;
}
.p_riesgo_ItemART-grid__field--full { grid-column: 1 / -1; }
.p_riesgo_ItemART-grid__total { font-size: 13px; }
@media (max-width: 600px) {
    .p_riesgo_ItemART-grid { grid-template-columns: minmax(100px,auto) 1fr; }
}

/* Fila CUIT+Tomador: buscador de cliente, mismo lenguaje que
   .divCliente/.botones ya usado en Asegurados/pol_polizasEditarGeneral. */
.p_riesgo_ItemART-cliente {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.p_riesgo_ItemART-cliente__display {
    flex: 1;
    min-width: 180px;
    max-width: 320px;
    overflow-y: hidden;
    overflow-x: auto;
    height: 28px;
}
.p_riesgo_ItemART-cliente__acciones { display: flex; gap: 8px; flex-wrap: wrap; }

.p_riesgo_ItemART-acciones {
    display: flex;
    justify-content: center;
    gap: 8px;
    max-width: 1200px;
}

/* ──────────────────────────────────────────
   PARTE 20 — Fase 9: pol_polizasEditarItemAero.php + ...AeroEmbarcaciones.php

   Pese al nombre del riesgo (AERONAVEGACION en el mapa de $idRiesgo), el
   contenido real es de EMBARCACIONES (Tipo Embarcación/Material/Matrícula/
   Zona Navegación, etc.) -- se respeta igual, el namespace sigue el sufijo
   del archivo (Aero), no el nombre de negocio del riesgo.

   Mismo mecanismo que Hogar/IntCom/IntCon/Caución: tarjeta única que
   envuelve LISTA (grilla-global, modo endosoExclusion) + FORMULARIO DE
   DETALLE (grid+checks+Medidas de Seguridad) + Coberturas/Cláusulas
   (GrillasCobAdicClau, sin Adicionales) + Asegurados (wireado normal, a
   diferencia de ART). #botonesABMEmbarcacion y #botonesAceptarEmbarcacion
   usan solo style.visibility (igual que Caución/#botonesABMGarantia) --
   sin riesgo de especificidad, no hizo falta wrapper anti-especificidad.

   Obligatorios: NINGUNO -- datosValidosEmbarcacionPolizaEditarItemAero()
   tiene TODO el cuerpo comentado (mismo patrón que Agro/IntCom/IntCon/Caución). */
.cuerpoPaginaEditar.p_riesgo_ItemAero-wrapper {
    width: auto;
    max-width: none;
    overflow: visible;
}
.p_riesgo_ItemAero-card {
    background: var(--ultu-global-surface);
    border-radius: calc(var(--ultu-radius-md) + 6px);
    box-shadow: var(--ultu-shadow-sm);
    margin: 0 0 20px;
    max-width: 1200px;
    overflow: hidden;
}
#tablaEmbarcaciones {
    border: 2px solid transparent;
    transition: border-color .15s;
}
#tablaEmbarcaciones.is-editing {
    border-color: var(--ultu-color-danger);
}
.p_riesgo_ItemAero-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ultu-border-global-grid);
}
.p_riesgo_ItemAero-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ultu-color-primary);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
}
.p_riesgo_ItemAero-card__toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.p_riesgo_ItemAero-card__body { padding: 18px 20px 20px; }

.p_riesgo_ItemAero-grid {
    display: grid;
    grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr);
    column-gap: 10px;
    row-gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}
.p_riesgo_ItemAero-grid__label {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--ultu-text-muted);
    white-space: nowrap;
}
.p_riesgo_ItemAero-grid__field--full { grid-column: 1 / -1; }
@media (max-width: 600px) {
    .p_riesgo_ItemAero-grid { grid-template-columns: minmax(100px,auto) 1fr; }
}

.p_riesgo_ItemAero-cols__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--ultu-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.p_riesgo_ItemAero-cols__title::after { content: ""; flex: 1; height: 1px; background: var(--ultu-border-global-grid); }
.p_riesgo_ItemAero-cols__title:not(:first-child) { margin-top: 20px; }

.p_riesgo_ItemAero-checks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 28px;
    margin-bottom: 14px;
}
.p_riesgo_ItemAero-checks label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--ultu-text-base);
    white-space: nowrap;
}

.p_riesgo_ItemAero-acciones {
    display: flex;
    justify-content: center;
    gap: 8px;
    max-width: 1200px;
}

/* ──────────────────────────────────────────
   PARTE 21 — Fase 10: pol_polizasEditarItemRespCivil.php + ...RespCivilDatos.php
   + pantallasDetalleRespCivilGeneral.php

   Igual que ART (Fase 8): item de UN SOLO registro (sin grilla/ABM), toggle
   Editar→Guardar/Cancelar único (habilitarCamposDatosPolizaEditarItemRespCivil(),
   exclusiva de Pólizas acá -- a diferencia de ART no es compartida con
   Presupuestos/Órdenes). #botonesABMRespCivil/#botonesAceptarRespCivil usan
   solo style.visibility, sin riesgo de especificidad.

   La tarjeta (`.p_riesgo_ItemRespCivil-card__body`) se abre en
   pantallasDetalleRespCivilGeneral.php y se cierra recién en
   ...RespCivilDatos.php, después de Coberturas/Cláusulas (GrillasCobAdicClau,
   sin Adicionales) + MateriaAsegurada + Sublimites + el toolbar Guardar/
   Cancelar -- todo functiona como una sola tarjeta continua (mismo criterio
   que Hogar, PARTE 13). MateriaAsegurada/Sublimites/GrillasCobAdicClau/
   NominasDeAsegurados/Asegurados son los 4 partials ya resueltos en fases
   anteriores, solo se consumen. Igual que en Caución (bug post-deploy), la
   tarjeta cierra INMEDIATAMENTE después de `</form>` -- NominasDeAsegurados
   y Asegurados quedan fuera, nunca envueltos por la tarjeta.

   Bug legacy corregido de paso: el <td> de Volver/Siguiente en el .php
   principal tenía `class="botones"` en vez de `class="botonesGuardarItem"`
   (única fase de las 10 con esta inconsistencia) -- `.botones` también lo
   togglea botonesAsegurados() en polizasEditar.js, así que Volver/Siguiente
   se hubiera ocultado también al editar un cliente en Asegurados, no solo
   al editar el ítem. Corregido a `botonesGuardarItem`, coherente con las
   otras 9 fases.

   Obligatorios: NINGUNO -- datosValidosDatosPolizaEditarItemRespCivil() solo
   llama a validarMateriaConCobertura() (chequeo cruzado Materia/Cobertura,
   no exige ningún campo del formulario); los `is-required` que tenía el
   legacy en País/Provincia/Localidad/Código Postal eran decorativos, sin
   respaldo real en el validador -- se sacaron (mismo hallazgo que Fase 1). */
.cuerpoPaginaEditar.p_riesgo_ItemRespCivil-wrapper {
    width: auto;
    max-width: none;
    overflow: visible;
}
.p_riesgo_ItemRespCivil-card {
    background: var(--ultu-global-surface);
    border-radius: calc(var(--ultu-radius-md) + 6px);
    box-shadow: var(--ultu-shadow-sm);
    margin: 0 0 20px;
    max-width: 1200px;
    overflow: hidden;
}
#tablaRespCivil {
    border: 2px solid transparent;
    transition: border-color .15s;
}
#tablaRespCivil.is-editing {
    border-color: var(--ultu-color-danger);
}
.p_riesgo_ItemRespCivil-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ultu-border-global-grid);
}
.p_riesgo_ItemRespCivil-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ultu-color-primary);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
}
.p_riesgo_ItemRespCivil-card__toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.p_riesgo_ItemRespCivil-card__body { padding: 18px 20px 20px; }

.p_riesgo_ItemRespCivil-grid {
    display: grid;
    grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr);
    column-gap: 10px;
    row-gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}
.p_riesgo_ItemRespCivil-grid__label {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--ultu-text-muted);
    white-space: nowrap;
}
.p_riesgo_ItemRespCivil-grid__field--full { grid-column: 1 / -1; }
@media (max-width: 600px) {
    .p_riesgo_ItemRespCivil-grid { grid-template-columns: minmax(100px,auto) 1fr; }
}

.p_riesgo_ItemRespCivil-cols__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--ultu-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.p_riesgo_ItemRespCivil-cols__title::after { content: ""; flex: 1; height: 1px; background: var(--ultu-border-global-grid); }
.p_riesgo_ItemRespCivil-cols__title:not(:first-child) { margin-top: 20px; }

.p_riesgo_ItemRespCivil-acciones {
    display: flex;
    justify-content: center;
    gap: 8px;
    max-width: 1200px;
}

/* ──────────────────────────────────────────
   PARTE 22 — Fase 11: pol_polizasEditarItemIncendio.php + ...IncendioViviendas.php

   Gemela de Hogar (PARTE 13): mismo esqueleto tarjeta+grilla+checks+
   cols__title, modo endosoExclusion, MateriaAsegurada/Sublimites,
   Coberturas/Cláusulas (sin Adicionales), Asegurados wireado normal.
   #botonesABMVivienda/#botonesABM siguen con style.visibility (toolbar
   chico de header, sin hueco perceptible); #botonesAceptarVivienda usa
   directamente style.display (lección ya aplicada de Fase 9/10, no hizo
   falta volver a tocarlo después).

   Bug legacy corregido de paso: el <div style="width:98%;"> que envolvía
   todo (form + Asegurados) nunca se cerraba en el original -- mismo bug
   que apareció en Agro (Fase 6). Se agregó el cierre INMEDIATAMENTE
   después de `</form>`, sin envolver Asegurados (misma lección de Caución).

   Obligatorios: NINGUNO -- datosValidosViviendaPolizaEditarItemIncendio()
   solo llama a validarMateriaConCobertura() (chequeo cruzado, no exige
   campos), igual patrón que RespCivil (Fase 10). Sin is-required en el
   legacy tampoco. */
.cuerpoPaginaEditar.p_riesgo_ItemIncendio-wrapper {
    width: auto;
    max-width: none;
    overflow: visible;
}
.p_riesgo_ItemIncendio-card {
    background: var(--ultu-global-surface);
    border-radius: calc(var(--ultu-radius-md) + 6px);
    box-shadow: var(--ultu-shadow-sm);
    margin: 0 0 20px;
    max-width: 1200px;
    overflow: hidden;
}
#tablaViviendasIncendio {
    border: 2px solid transparent;
    transition: border-color .15s;
}
#tablaViviendasIncendio.is-editing {
    border-color: var(--ultu-color-danger);
}
.p_riesgo_ItemIncendio-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ultu-border-global-grid);
}
.p_riesgo_ItemIncendio-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ultu-color-primary);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
}
.p_riesgo_ItemIncendio-card__toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.p_riesgo_ItemIncendio-card__body { padding: 18px 20px 20px; }

.p_riesgo_ItemIncendio-grid {
    display: grid;
    grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr);
    column-gap: 10px;
    row-gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}
.p_riesgo_ItemIncendio-grid__label {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--ultu-text-muted);
    white-space: nowrap;
}
.p_riesgo_ItemIncendio-grid__field--full { grid-column: 1 / -1; }
@media (max-width: 600px) {
    .p_riesgo_ItemIncendio-grid { grid-template-columns: minmax(100px,auto) 1fr; }
}

.p_riesgo_ItemIncendio-cols__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--ultu-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.p_riesgo_ItemIncendio-cols__title::after { content: ""; flex: 1; height: 1px; background: var(--ultu-border-global-grid); }
.p_riesgo_ItemIncendio-cols__title:not(:first-child) { margin-top: 20px; }

.p_riesgo_ItemIncendio-checks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 28px;
    margin-bottom: 14px;
}
.p_riesgo_ItemIncendio-checks label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--ultu-text-base);
    white-space: nowrap;
}

.p_riesgo_ItemIncendio-acciones {
    display: flex;
    justify-content: center;
    gap: 8px;
    max-width: 1200px;
}

/* ──────────────────────────────────────────
   PARTE 23 — Fase 12: pol_polizasEditarItemBPGE.php + ...BPGEDatos.php
   + pantallaDetalleBPGEGeneral.php

   Single-record sin grilla/ABM, mismo mecanismo que ART/RespCivil (Fase
   8/10). #botonesABMBPGE/#botonesAceptarBPGE ya usaban jQuery .css() en vez
   de .style directo, pero el mecanismo es el mismo -- #botonesAceptarBPGE
   se pasó directo a display (lección de Fase 9/10, no hizo falta volver a
   tocarlo después).

   Único caso con campos de fecha con selector de calendario legacy
   (.date + <img class="oculto"> + <a class="oculto">, activados por un
   datepicker externo vía JS). Los íconos NO llevan ninguna clase nueva ni
   fijan display -- viven dentro de un <span class="p_riesgo_ItemXxx-grid__control">
   (flex, solo para alinear input+íconos), evitando por completo el bug de
   especificidad `display` vs `.oculto` (PARTE 9 de la receta): la nueva
   clase está en el WRAPPER, nunca en el elemento que JS oculta/muestra.

   Bug de coherencia UX corregido con aprobación explícita del usuario:
   habilitarCamposDatosPolizaEditarItemBPGE() nunca llamaba a habilitarDatos()
   (a diferencia de TODAS las demás fases single-record), o sea que
   Volver/Siguiente quedaban visibles y funcionando en modo edición. Se
   agregó el llamado a habilitarDatos(nuevo||editar) para unificar con el
   resto de las 13 pantallas -- también corregido el <td> de Volver/Siguiente
   de `class="botones"` a `class="botonesGuardarItem"` (mismo bug que
   apareció en RespCivil, Fase 10) para que el toggle realmente le pegue.

   Obligatorios: NINGUNO -- datosValidosDatosPolizaEditarItemBPGE() solo
   llama a validarMateriaConCobertura(), mismo patrón que RespCivil/Incendio. */
.cuerpoPaginaEditar.p_riesgo_ItemBPGE-wrapper {
    width: auto;
    max-width: none;
    overflow: visible;
}
.p_riesgo_ItemBPGE-card {
    background: var(--ultu-global-surface);
    border-radius: calc(var(--ultu-radius-md) + 6px);
    box-shadow: var(--ultu-shadow-sm);
    margin: 0 0 20px;
    max-width: 1200px;
    overflow: hidden;
}
#tablaBPGE {
    border: 2px solid transparent;
    transition: border-color .15s;
}
#tablaBPGE.is-editing {
    border-color: var(--ultu-color-danger);
}
.p_riesgo_ItemBPGE-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ultu-border-global-grid);
}
.p_riesgo_ItemBPGE-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ultu-color-primary);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
}
.p_riesgo_ItemBPGE-card__toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.p_riesgo_ItemBPGE-card__body { padding: 18px 20px 20px; }

.p_riesgo_ItemBPGE-grid {
    display: grid;
    grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr);
    column-gap: 10px;
    row-gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}
.p_riesgo_ItemBPGE-grid__label {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--ultu-text-muted);
    white-space: nowrap;
}
.p_riesgo_ItemBPGE-grid__field--full { grid-column: 1 / -1; }
.p_riesgo_ItemBPGE-grid__control { display: flex; align-items: center; gap: 6px; }
@media (max-width: 600px) {
    .p_riesgo_ItemBPGE-grid { grid-template-columns: minmax(100px,auto) 1fr; }
}

.p_riesgo_ItemBPGE-cols__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--ultu-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.p_riesgo_ItemBPGE-cols__title::after { content: ""; flex: 1; height: 1px; background: var(--ultu-border-global-grid); }
.p_riesgo_ItemBPGE-cols__title:not(:first-child) { margin-top: 20px; }

.p_riesgo_ItemBPGE-checks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 28px;
    margin-bottom: 14px;
}
.p_riesgo_ItemBPGE-checks label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--ultu-text-base);
    white-space: nowrap;
}

.p_riesgo_ItemBPGE-acciones {
    display: flex;
    justify-content: center;
    gap: 8px;
    max-width: 1200px;
}

/* ──────────────────────────────────────────
   PARTE 24 — Fase 13: pol_polizasEditarItemRobo.php + ...RoboGrilla.php
   + pol_grillaItemRobo.php (grillaRobo(), COMPARTIDA)

   Caso especial: el título+toolbar+grilla+formulario de detalle de Robo NO
   viven en un .php de Pólizas -- viven todos dentro de UNA función PHP
   (`grillaRobo()`, ~530 líneas, todo armado con concatenación de strings)
   en `pol_grillaItemRobo.php`, compartida con Órdenes (`ord_ordenesEditarItemRobo.php`)
   y con 2 pantallas de consulta/listado fuera de este proyecto de rediseño
   (`pol_polizasItemsVigentes.php`, `pol_polizasRiesgosItemRobo.php`).
   Confirmado con el usuario antes de tocarla (ver [[project_rediseno_polizasEditarItem_plan]]
   sección Fase 13) -- se aprobó rediseñar la función compartida completa.

   Alcance reducido deliberadamente respecto a las 12 fases anteriores:
   el formulario de detalle (Rubro/Producto/Marca/Modelo/domicilio/etc.)
   quedó como `<table>` legacy con colspans irregulares (7-17 columnas
   variables según fila) en vez de convertirse a `.grid` -- convertirlo a
   CSS grid hubiera sido de alto riesgo dado que: (a) está embebido en las
   4 pantallas mencionadas con layouts distintos, (b) tiene 3 `<div>`
   placeholder (`divClausulasCoberturas`/`divMateria`/`divSublimites`) que
   otro JS puebla de forma asincrona sin que se haya podido auditar ese
   mecanismo en el tiempo de esta fase. Se aplicó SOLO: tarjeta nueva
   (header+body) para el título/toolbar/grilla-global, `input_global` en
   cada `<input>`/`<textarea>` propio del detalle, y el borde rojo
   `is-editing` -- el layout interno del formulario de detalle se mantiene
   con el look de tabla legacy por ahora.

   Combos vía helpers compartidos (`CadenaComboEnEspera()`, sin soporte de
   clase custom) -- Provincia/Localidad/Producto/Paquete quedaron con el
   select legacy (`FormularioDatosCombo` sin `input_globalSelect`) porque
   agregarles la clase nueva requería tocar la función compartida en
   clases/utiles.php (fuera de alcance). El combo de Rubro sí se pudo
   resolver (`getSelectCombo()` soporta `$arr['class']`, ver
   pol_polizasEditarItemRoboGrilla.php).

   Obligatorios: NO se marcaron. A diferencia de las 12 fases anteriores,
   Robo SÍ tiene obligatorios reales -- `puedeGuardarItemOrdenRobo()`
   (js/ordenesNuevo.js) exige País/Provincia/Localidad siempre, y
   Fecha Compra/Marca/Modelo/Nro Serie/Suma Asegurada condicionalmente
   (solo si el `<td name="Xxx">` correspondiente está visible, un mecanismo
   ligado a qué Rubro/Producto se eligió que no se pudo auditar del todo en
   esta fase). País es el único campo con un `<select>` real editable
   directamente controlable, pero Provincia/Localidad usan el helper
   compartido sin soporte de `required` -- marcar el asterisco solo en País
   hubiera sido incoherente (dos de los tres campos siempre-obligatorios
   sin marcar). Pendiente: auditar el mecanismo de visibilidad condicional
   y, si se decide encarar, extender `CadenaComboEnEspera()`/`getSelectCombo()`
   para soportar `required` antes de marcar cualquier asterisco acá. */
.cuerpoPaginaEditar.p_riesgo_ItemRobo-wrapper {
    width: auto;
    max-width: none;
    overflow: visible;
}
.p_riesgo_ItemRobo-card {
    background: var(--ultu-global-surface);
    border-radius: calc(var(--ultu-radius-md) + 6px);
    box-shadow: var(--ultu-shadow-sm);
    margin: 0 0 20px;
    max-width: 1200px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color .15s;
}
.p_riesgo_ItemRobo-card.is-editing,
#tablaRobo.is-editing {
    border-color: var(--ultu-color-danger);
}
.p_riesgo_ItemRobo-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ultu-border-global-grid);
}
.p_riesgo_ItemRobo-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ultu-color-primary);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
}
.p_riesgo_ItemRobo-card__toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.p_riesgo_ItemRobo-card__body { padding: 18px 20px 20px; }

.p_riesgo_ItemRobo-detalle {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--ultu-border-global-grid);
}

.p_riesgo_ItemRobo-acciones {
    display: flex;
    justify-content: center;
    gap: 8px;
    max-width: 1200px;
}

/* ──────────────────────────────────────────
   PARTE 25 — Fase 14 (última): pol_polizasEditarItemResto.php + ...RestoItems.php

   Fallback genérico para los riesgos sin rama propia (ver
   [[project_idriesgo_mapa_rutas]]) -- gemela de Hogar/Incendio: mismo
   esqueleto tarjeta+grilla+cols__title, modo endosoExclusion, Coberturas/
   Cláusulas (sin Adicionales), MateriaAsegurada/Sublimites, Asegurados
   wireado. `#botonesAceptarItem` se hizo directo con `style.display`
   (lección de Fase 9/10 ya incorporada de entrada, como en Incendio/BPGE).

   Bug legacy corregido de paso: `<div style="width:800px;" class="fondo margenes">`
   que envolvía form+Asegurados nunca se cerraba en el original (mismo bug
   que Agro e Incendio) -- se cerró justo después de `</form>`, sin envolver
   Asegurados.

   Obligatorios: NINGUNO -- datosValidosItemPolizaEditarItemResto() solo
   llama a validarMateriaConCobertura() (chequeo cruzado, no exige campos),
   mismo patrón que RespCivil/Incendio/BPGE. Sin is-required en el legacy.

   Con esta fase se completan las 14 del plan [[project_rediseno_polizasEditarItem_plan]]. */
.cuerpoPaginaEditar.p_riesgo_ItemResto-wrapper {
    width: auto;
    max-width: none;
    overflow: visible;
}
.p_riesgo_ItemResto-card {
    background: var(--ultu-global-surface);
    border-radius: calc(var(--ultu-radius-md) + 6px);
    box-shadow: var(--ultu-shadow-sm);
    margin: 0 0 20px;
    max-width: 1200px;
    overflow: hidden;
}
#tablaResto {
    border: 2px solid transparent;
    transition: border-color .15s;
}
#tablaResto.is-editing {
    border-color: var(--ultu-color-danger);
}
.p_riesgo_ItemResto-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ultu-border-global-grid);
}
.p_riesgo_ItemResto-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ultu-color-primary);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
}
.p_riesgo_ItemResto-card__toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.p_riesgo_ItemResto-card__body { padding: 18px 20px 20px; }

.p_riesgo_ItemResto-grid {
    display: grid;
    grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr);
    column-gap: 10px;
    row-gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}
.p_riesgo_ItemResto-grid__label {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--ultu-text-muted);
    white-space: nowrap;
}
.p_riesgo_ItemResto-grid__field--full { grid-column: 1 / -1; }
@media (max-width: 600px) {
    .p_riesgo_ItemResto-grid { grid-template-columns: minmax(100px,auto) 1fr; }
}

.p_riesgo_ItemResto-cols__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--ultu-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.p_riesgo_ItemResto-cols__title::after { content: ""; flex: 1; height: 1px; background: var(--ultu-border-global-grid); }
.p_riesgo_ItemResto-cols__title:not(:first-child) { margin-top: 20px; }

.p_riesgo_ItemResto-acciones {
    display: flex;
    justify-content: center;
    gap: 8px;
    max-width: 1200px;
}

/* ══════════════════════════════════════════════════════════════════════
   PARTE 26 — REDISEÑO "NUEVA/EDITAR ORDEN" (ord_ordenesEditar.php)
   Mismo lenguaje visual que p_polizas-* (tarjeta + grilla densa etiqueta:
   campo), namespace propio p_ordenes-* por convención explícita del
   usuario: cada pantalla de este tramo tiene su propia familia de clases
   nuevas, aunque el mecanismo CSS sea idéntico al de pol_polizasEditarGeneral.php.
   Los campos de Tomador/Asegurado/Beneficiario e Intermediarios usan las
   mismas funciones JS (...PolizaEditarGeneral) que Pólizas -- comparten
   backend, así que el markup se calca 1 a 1 en esas dos tarjetas.
   ══════════════════════════════════════════════════════════════════════ */

/* Wrapper legacy .cuerpoPaginaEditar: compartido por ~30 pantallas más de
   Pólizas y Órdenes (regla base width:900px;overflow:hidden en estilos.css
   que NO se toca) -- se neutraliza el ancho fijo SOLO acá agregando una
   segunda clase, mismo mecanismo que .p_polizas-wrapper. */
.cuerpoPaginaEditar.p_ordenes-wrapper {
    width: auto;
    max-width: none;
    overflow: visible;
}

.p_ordenes-titulo {
    font-size: 20px;
    font-weight: 600;
    color: var(--ultu-color-primary);
    margin: 0 0 16px;
}

.p_ordenes-card {
    background: var(--ultu-global-surface);
    border-radius: calc(var(--ultu-radius-md) + 6px);
    box-shadow: var(--ultu-shadow-sm);
    margin: 0 0 20px;
    max-width: 1200px;
    overflow: hidden;
}
.p_ordenes-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ultu-border-global-grid);
}
.p_ordenes-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ultu-color-primary);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
}
.p_ordenes-card__body { padding: 18px 20px 20px; }

/* Grilla densa etiqueta:campo, 3 pares por fila -- mismo mecanismo que
   p_polizas-grid (Propietario de la Orden, Datos Principales, Vigencia). */
.p_ordenes-grid {
    display: grid;
    grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr);
    column-gap: 16px;
    row-gap: 12px;
    align-items: center;
}
.p_ordenes-grid__label {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--ultu-text-muted);
    white-space: nowrap;
}
.p_ordenes-grid__label.is-required::after {
    content: "*";
    margin-left: 3px;
    color: var(--ultu-color-danger);
    font-weight: bold;
}
/* Asterisco de obligatorio: label y campo son hermanos directos del grid,
   se ancla en la propia etiqueta y mira su hermano inmediato -- se
   autoculta solo en los campos con required real (no en placeholders
   reemplazados por AJAX, que no lo tienen). */
.p_ordenes-grid__label.is-required:has(+ :required:valid, + * :required:valid, + :required:disabled, + * :required:disabled)::after {
    display: none;
}
.p_ordenes-grid__field--wide { grid-column: 2 / -1; }
.p_ordenes-grid__field--full { grid-column: 1 / -1; }
@media (max-width: 1000px) {
    .p_ordenes-grid {
        grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr);
    }
}
@media (max-width: 600px) {
    .p_ordenes-grid {
        grid-template-columns: minmax(100px,auto) 1fr;
    }
}

/* Grilla de Intermediarios: llenado por COLUMNA, mismo mecanismo y mismo
   orden de campos que p_polizas-grid--vertical (Organizador/Productor/
   Agente, SubAgente/IntermediarioI/IntermediarioII, Ejecutivo). */
.p_ordenes-grid--vertical {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
    grid-template-columns: repeat(3, 1fr);
    column-gap: 24px;
    row-gap: 12px;
}
.p_ordenes-grid__item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.p_ordenes-grid__item > .p_ordenes-grid__label {
    width: 112px;
    flex-shrink: 0;
    white-space: normal;
}
.p_ordenes-grid__item > *:not(.p_ordenes-grid__label) {
    flex: 1;
    min-width: 0;
}
@media (max-width: 1000px) {
    .p_ordenes-grid--vertical {
        grid-auto-flow: row;
        grid-template-rows: none;
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .p_ordenes-grid--vertical {
        grid-template-columns: 1fr;
    }
}

/* .botones la comparten ~35 pantallas más con layouts propios -- nunca se
   tipa a secas, se escopea solo dentro del control de Tomador/Asegurado/
   Beneficiario de esta pantalla (mismo criterio que p_polizas-grid). */
.p_ordenes-grid__control { display: flex; align-items: center; gap: 8px; }
.p_ordenes-grid__control .botones { display: flex; gap: 6px; flex-shrink: 0; }
.p_ordenes-grid__control .divCliente {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

/* Bloque "No Renueva / Renovación Automática-Manual / Refacturación
   Automática / Es Flotante / Motivo": idéntico a p_polizas-renovacion,
   mismos ids compartidos entre Pólizas y Órdenes. */
.p_ordenes-renovacion {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.p_ordenes-renovacion__fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 28px;
}
.p_ordenes-renovacion__fila .panel_globalConsulta-field--checkbox {
    display: flex;
    padding-top: 0;
}

/* Acciones finales (Siguiente/Guardar + Cancelar). Se mantiene la clase
   legacy .botones ADEMÁS de la nueva: terminoCargarOrdenesEditarGeneral()
   en ordenesNuevo.js hace $('.botones').fadeOut() -- si se sacara esa
   clase, ese fadeOut dejaría de encontrar el contenedor. */
.p_ordenes-acciones {
    display: flex;
    justify-content: center;
    gap: 8px;
    max-width: 1200px;
}

/* ══════════════════════════════════════════════════════════════════════
   PARTE 27 — REDISEÑO ord_ordenesEditarItem*.php (Fase 0: infraestructura
   común a los 14 riesgos). A diferencia de Pólizas (14 archivos, cada uno
   abre su propio .cuerpoPaginaEditar), en Órdenes las 14 pantallas de
   ítem comparten UN SOLO wrapper -- ord_ordenesEditarItemGeneral.php abre
   .cuerpoPaginaEditar una vez e incluye adentro el .php de cada riesgo --
   así que el desbloqueo de ancho 900px se resuelve acá una sola vez,
   nunca por riesgo. Mismo mecanismo de 2 clases (0-2-0 le gana a 0-1-0)
   que .p_polizas-wrapper/.p_ordenes-wrapper, sin !important y sin tocar
   la regla compartida de estilos.css usada por ~30 pantallas más.
   ══════════════════════════════════════════════════════════════════════ */
.cuerpoPaginaEditar.p_ordenesItem-wrapper {
    width: auto;
    max-width: none;
    overflow: visible;
}

/* #divGrilla (envuelve el include de las 14 pantallas de riesgo) trae la
   clase legacy .fondo (estilos.css: background degradado + width/height
   100%). Con el ancho de .cuerpoPaginaEditar ya desbloqueado arriba, ese
   100% pasa a ser el ancho completo de la ventana -- mucho más ancho que
   las tarjetas p_riesgo_ItemXxx-card (max-width:1200px) que se renderizan
   adentro, dejando un bloque de fondo degradado vacío y visible a la
   derecha del contenido real. Se neutraliza SOLO en este contexto (mismo
   criterio de especificidad por 2 clases que el resto de esta sección),
   sin tocar la regla compartida de .fondo que usan decenas de pantallas
   más. */
.p_ordenesItem-wrapper #divGrilla.fondo {
    background: none;
    width: auto;
    height: auto;
}

/* Botones Volver/Siguiente compartidos por las 14 pantallas de riesgo
   (Agro es la única excepción, con $mostrarBotones=false y su propio
   footer). Mismo criterio de orden y flecha que .p_ordenes-acciones. */
.p_ordenesItem-acciones {
    display: flex;
    justify-content: center;
    gap: 8px;
    max-width: 1200px;
}

/* ══════════════════════════════════════════════════════════════════════
   PARTE 28 — REDISEÑO FLUJO DE ENDOSOS (namespace p_PolizaEndoso-*)
   Wizard de 5 pantallas modales disparado por editarPolEndosos() (ver
   js/polizasEndosos.js). Un solo namespace para las 5 pantallas del
   wizard (no una por archivo, como en PARTE 9-25) porque es una única
   feature, no 14 pantallas independientes.

   Fase 1: pol_polizasEndososEditarGeneral.php (pantalla 1 de 5, "Datos
   Generales del Endoso") — exclusiva del flujo de Endosos, sin impacto
   cruzado con Pólizas/Certificados/Órdenes. Mismo mecanismo de grid que
   .p_riesgo_ItemXxx-grid (PARTE 9): 3 pares label/campo por fila, wrap
   automático a la fila siguiente cuando el original tenía 4 pares —
   mismo criterio ya usado en toda la app, no se preserva la cantidad
   exacta de pares por <tr> del legacy.
   ══════════════════════════════════════════════════════════════════════ */
.p_PolizaEndoso-card {
    background: var(--ultu-global-surface);
    border: 1px solid var(--ultu-border-global-grid);
    border-radius: calc(var(--ultu-radius-md) + 6px);
    box-shadow: var(--ultu-shadow-sm);
    margin: 10px;
    max-width: 1200px;
    overflow: hidden;
}
.p_PolizaEndoso-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ultu-border-global-grid);
}
.p_PolizaEndoso-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ultu-color-primary);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
}
.p_PolizaEndoso-card__toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.p_PolizaEndoso-card__body { padding: 18px 20px 20px; }

.p_PolizaEndoso-grid {
    display: grid;
    grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr);
    column-gap: 10px;
    row-gap: 5px;
    align-items: center;
}
.p_PolizaEndoso-grid__label {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--ultu-text-muted);
    white-space: nowrap;
}
.p_PolizaEndoso-grid__label.is-required::after { content: "*"; margin-left: 3px; color: var(--ultu-color-danger); font-weight: bold; }
/* auto-ocultar asterisco, cubre control hermano directo Y control envuelto en div */
.p_PolizaEndoso-grid__label.is-required:has(+ :required:valid, + * :required:valid, + :required:disabled, + * :required:disabled)::after { display: none; }
.p_PolizaEndoso-grid__field--span2 { grid-column: span 3; }
.p_PolizaEndoso-grid__field--span3 { grid-column: span 5; }
.p_PolizaEndoso-grid__field--full  { grid-column: 1 / -1; }

/* Fase 4 (Composición del Premio): a pedido del usuario, NO usar el grid de
   3 pares por fila -- es una cuenta financiera que se lee de arriba hacia
   abajo, separarla en columnas "pierde la visual de las cuentas". Una sola
   columna de filas, con 3 franjas fijas: etiqueta | % (angosta, columna
   propia, vacía si la fila no tiene %) | importe (misma posición siempre,
   tengan o no % las filas de arriba/abajo). */
.p_PolizaEndoso-grid--composicion {
    display: grid;
    grid-template-columns: minmax(150px,auto) 80px minmax(160px,1fr);
    column-gap: 14px;
    row-gap: 2px;
    align-items: center;
    max-width: 640px;
}
.p_PolizaEndoso-grid--composicion__spacer { grid-column: 1 / -1; height: 4px; }
.p_PolizaEndoso-grid--composicion__total { grid-column: 1 / -1; text-align: right; }
@media (max-width: 560px) {
    .p_PolizaEndoso-grid--composicion { grid-template-columns: minmax(120px,auto) 64px 1fr; column-gap: 8px; }
}

/* Fase 5 (Distribución de Comisiones) -- reestructurado a pedido del
   usuario. Antes era UN grid de 4 columnas fingiendo ser 2 bloques
   (Interna/Compañía), lo que obligaba a alinear fila por fila entre dos
   secciones que ni siquiera tienen la misma cantidad de filas (Interna:
   hasta 8 filas; Compañía: 2). Ahora son 2 items flexbox independientes
   -- cada uno con su propio grid interno de 2 columnas (label|campo) --
   que se apilan solos por flex-wrap cuando no entran uno al lado del
   otro (Interna arriba, Compañía abajo), sin ningún @media que decida el
   quiebre. */
.p_PolizaEndoso-comisiones-top {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.p_PolizaEndoso-comisiones-top input.input_global {
    min-width: 57px;
    max-width: 90px;
}
.p_PolizaEndoso-comisiones-cols {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 28px;
}
.p_PolizaEndoso-comisiones-cols > div {
    flex: 1 1 320px;
    min-width: 280px;
}
.p_PolizaEndoso-comisiones-cols__title {
    text-align: center;
    font-weight: bold;
    margin: 0 0 12px;
}
.p_PolizaEndoso-comisiones-grid {
    display: grid;
    grid-template-columns: minmax(150px,auto) minmax(160px,1fr);
    column-gap: 14px;
    row-gap: 2px;
    align-items: center;
}
.p_PolizaEndoso-comisiones-grid .p_PolizaEndoso-grid__control { display: flex; align-items: center; gap: 8px; }
/* Los % de comisión son campos numéricos cortos, no texto libre -- se ven
   angostos a propósito. Acotado por descendencia a esta card exclusiva
   (nunca se toca la regla compartida .input_global/.FormularioDatos que
   reutilizan cientos de pantallas). Pide la etiqueta <input> a propósito:
   los <select> (Agente/SubAgente/IntermediarioI-II/Ejecutivo) quedan
   afuera del selector sin necesidad de excluirlos a mano, y siguen
   ocupando el 100% del ancho como ya lo hacían. */
.p_PolizaEndoso-comisiones-grid input.input_global {
    min-width: 57px;
    max-width: 90px;
}
/* Dentro de .p_PolizaEndoso-grid__control (input % + nombre en negrita, o
   input % + combo) el input y su compañero competían por flex sin reparto
   explícito. Primer intento (flex:0 1 90px, base=90, grow:0) quedó mal:
   con flex-grow:0 el input se queda FIJO en 90px apenas hay 90px+algo
   disponibles -- es el compañero el que absorbe TODO el apriete al
   achicarse la pantalla, y el input nunca cede espacio hasta que el total
   baja de 90px. Se corrige ancorando el input a su PISO (57px) en vez de
   a su techo, con muy poca prioridad de crecimiento (1 share) contra el
   compañero (5 shares): así el input solo crece hacia 90 cuando sobra
   espacio de verdad, y se achica gradualmente hacia 57 a medida que el
   espacio se reduce, en vez de quedar pegado en 90 y descargar todo el
   apriete en el nombre/combo. */
.p_PolizaEndoso-comisiones-grid .p_PolizaEndoso-grid__control > input.input_global {
    flex: 1 1 57px;
}
.p_PolizaEndoso-comisiones-grid .p_PolizaEndoso-grid__control > strong,
.p_PolizaEndoso-comisiones-grid .p_PolizaEndoso-grid__control > div {
    flex: 5 1 0%;
    min-width: 0;
}
/* Nombre de Organizador/Productor: sin font-size propio heredaba el
   tamaño por defecto del navegador (mucho más grande que el resto del
   grid, 12-13px) -- se empareja acá. Se trunca con "…" en vez de bajar de
   renglón cuando no entra (min-width:0 de la regla de arriba es lo que
   permite que text-overflow funcione dentro del flex). */
.p_PolizaEndoso-comisiones-grid .p_PolizaEndoso-grid__control > strong {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.p_PolizaEndoso-comisiones-grid .p_PolizaEndoso-grid__control select.FormularioDatosCombo {
    width: 100%;
}
.p_PolizaEndoso-grid__control { display: flex; align-items: center; gap: 6px; }
.p_PolizaEndoso-grid__control > input, .p_PolizaEndoso-grid__control > select { flex: 1; min-width: 0; }
/* Tomador/Asegurado/Beneficiario (Propietario de la Póliza): mismo patrón
   que .p_polizas-grid__control .divCliente / .p_riesgo_ItemAsegurados-grid__control
   .divCliente -- sin esto divCliente se queda en su ancho intrínseco (el
   texto del cliente) en vez de estirarse a ocupar el espacio disponible
   antes de los botones. */
.p_PolizaEndoso-grid__control .divCliente { flex: 1; min-width: 0; display: flex; align-items: center; }

/* responsive: mismos cortes que .p_polizas-grid/.p_riesgo_ItemXxx-grid en toda la app */
@media (max-width: 1000px) {
    .p_PolizaEndoso-grid { grid-template-columns: minmax(100px,auto) minmax(150px,1fr) minmax(100px,auto) minmax(150px,1fr); }
    .p_PolizaEndoso-grid__field--span3 { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .p_PolizaEndoso-grid { grid-template-columns: minmax(100px,auto) 1fr; }
    .p_PolizaEndoso-grid__field--span2, .p_PolizaEndoso-grid__field--span3 { grid-column: 1 / -1; }
}

/* acciones finales -- SIEMPRE centradas como grupo. padding (no margin) en
   los dos sentidos: al ser el último elemento dentro del contenedor con
   scroll propio (#contenidoVentanaModal.modal-content, overflow:auto), un
   margin-bottom del último hijo no expande el scrollHeight de forma
   confiable en todos los navegadores y termina "clippeado" contra el borde
   inferior del modal -- el padding sí forma parte del box del elemento y
   siempre se respeta. */
.p_PolizaEndoso-acciones { display: flex; justify-content: center; gap: 8px; max-width: 1200px; padding-bottom: 5px; }

/* Link "Actualizar con datos de poliza" (pol_polizasEndososEditarGeneral.php)
   sin clase propia en el legacy -- heredaba el font-size default del
   navegador (~16px), desproporcionado contra el resto del grid (12px). */
#actualizarDepacho { font-size: 12px; }

/* ======================================================================
   MAIL — mail_editar.php (redacción/edición de mail)
   BEM: p_mail-*
   Namespace propio de esta pantalla (no comparte componentes de
   p_miPerfil ni de ninguna otra pantalla). Reutiliza SOLO componentes
   "_global" (btn_globalSave/btn_globalCancel/input_globalSelect/
   panel_globalConsulta-field--checkbox/ultu-icon) -- todo lo demás es
   nuevo y específico de este namespace.
   ====================================================================== */

.p_mail-titulo {
    font-size: 24px;
    font-weight: 700;
    color: var(--ultu-color-primary);
    letter-spacing: -0.3px;
    margin: 0 0 18px;
}

/* Layout: card principal (ancha) + card lateral fija */
.p_mail-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    align-items: start;
    gap: 20px;
}
@media (max-width: 960px) {
    .p_mail-layout { grid-template-columns: 1fr; }
}

.p_mail-card {
    min-width: 0;
    background: var(--ultu-global-surface);
    border: 1px solid var(--ultu-border-global-grid);
    border-radius: var(--ultu-radius-lg);
    box-shadow: var(--ultu-shadow-sm);
    padding: 15px;
    padding-bottom: 10px;
}

.p_mail-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

/* Card de redacción: a diferencia de la de Plantillas (que mide lo que
   su contenido pida), esta SÍ tiene que ocupar el alto disponible de la
   ventana para que el editor de texto pueda crecer hasta ahí -- sin esta
   referencia de altura, un flex:1 más abajo no tiene contra qué crecer. */
/* La card mide lo que su contenido pida -- nada de min-height atado al
   viewport acá. Si necesitás más alto de arranque, se ajusta el
   min-height de .p_mail-editor-wrap (el único que tiene que crecer),
   nunca el de la card ni el de .p_mail-card-body -- si no, el contenedor
   se estira de más y queda un hueco vacío después de los botones. */
.p_mail-card--compose {
    display: flex;
    flex-direction: column;
}

/* Campo: label + input group -- compacto, poco espacio vertical entre
   Para/CC/CCO/Asunto (antes ocupaban demasiada altura). */
.p_mail-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.p_mail-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ultu-text-base);
    line-height: 1.3;
}
a.p_mail-label {
    text-decoration: none;
    cursor: pointer;
}
a.p_mail-label:hover {
    color: var(--ultu-color-primary);
}
.p_mail-required {
    color: var(--ultu-color-danger);
    margin-left: 2px;
}

/* Input con icono embebido -- reemplaza el input suelto para
   Para/CC/CCO/Asunto, que necesitan el icono adentro del campo */
.p_mail-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 33px;
    padding: 0 12px;
    background: #fff;
    border: 1.5px solid var(--ultu-border);
    border-radius: var(--ultu-radius-sm);
    transition: border-color .15s, box-shadow .15s;
}
.p_mail-input-group:focus-within {
    border-color: var(--ultu-primary-border-hover);
    box-shadow: var(--ultu-shadow-focus);
}
.p_mail-input-group-icon {
    --ultu-icon-size: 16px;
    color: var(--ultu-text-subtle);
    flex-shrink: 0;
}
/* CC/CCO: en vez del ícono de persona, el propio texto "CC"/"CCO" ocupa
   ese lugar adentro del input group -- reemplaza al ícono, no se suma a
   él, y elimina la fila de label de arriba (ahorra el espacio vertical
   que esos dos campos no necesitan tener por separado). Sigue abriendo
   el mismo picker de destinatario que antes (AbrirDestinatario()). */
.p_mail-input-group-label {
    min-width: 24px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ultu-text-muted);
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
}
.p_mail-input-group-label:hover {
    color: var(--ultu-color-primary);
}
.p_mail-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: var(--ultu-text-base);
    padding: 0;
    font-family: inherit;
}
.p_mail-input::placeholder {
    color: var(--ultu-text-placeholder);
}

/* Toggle "CC | CCO" dentro del input group de Para, y ocultamiento de las
   filas CC/CCO hasta que se clickea el link correspondiente (o ya tienen
   un valor precargado, en cuyo caso arrancan visibles y sin su link). */
.p_mail-field--hidden {
    display: none;
}
.p_mail-cc-cco-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.p_mail-cc-cco-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--ultu-color-primary);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.p_mail-cc-cco-link:hover {
    text-decoration: underline;
}
.p_mail-cc-cco-sep {
    color: var(--ultu-text-placeholder);
    font-size: 12px;
}

/* Fila de botones pill (Adjuntar Archivos / Destinatarios Masivos) */
.p_mail-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.p_mail-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    background: var(--ultu-primary-tint);
    color: var(--ultu-color-primary);
    border: 1px solid rgba(var(--ultu-color-primary-rgb), 0.18);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
.p_mail-pill-btn:hover {
    background: rgba(var(--ultu-color-primary-rgb), 0.14);
    border-color: rgba(var(--ultu-color-primary-rgb), 0.32);
}

/* Adjuntos ya cargados -- el contenido interno (links + "[x]") lo arma
   upload.js al agregar/quitar un archivo, por eso el contenedor solo
   aporta tipografía. Ver nota de alcance sobre EstiloMailLinkAzulSinSubrayar
   en la respuesta de la Fase 2 (upload.js/mails.js regeneran ese "[x]"
   con la clase legacy vieja -- pendiente de decisión, fuera de este CSS). */
.p_mail-attachments {
    font-size: 12px;
    color: var(--ultu-text-muted);
    line-height: 1.8;
}

/* "Incluir Firma" pegado a la derecha del toolbar (Adjuntar/Destinatarios
   Masivos/Asociar quedan agrupados a la izquierda, como acciones). */
.p_mail-toolbar-firma {
    margin-left: auto;
    padding-top: 0;
}
.p_mail-entidad-asociada {
    font-size: 12px;
    color: var(--ultu-text-muted);
}

/* ══════════════════════════════════════════════════════════════
   EDITOR DE TEXTO ENRIQUECIDO -- contenteditable propio, sin iframe
   (reemplaza al iframe de mail_textoEnriquecido.php SOLO en esta
   pantalla -- ese archivo sigue intacto para tmp_mail.php y
   tmp_templateNuevo.php, que lo siguen usando). Al vivir en el mismo
   documento, flex/resize funcionan nativos: nada de position:absolute,
   ResizeObserver ni trucos de porcentaje -- ver [[project_mail_editar_contenteditable]].
   ══════════════════════════════════════════════════════════════ */
.p_mail-editor-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    flex: none;
    min-height: 380px;
    resize: vertical;
    overflow: hidden;
    border: 1.5px solid var(--ultu-border);
    border-radius: var(--ultu-radius-sm);
    background: #fff;
}

.p_mail-rte-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
    gap: 2px;
    padding: 6px 8px;
    border-bottom: 1.5px solid var(--ultu-border);
    background: #fafafa;
}
.p_mail-rte-sep {
    width: 0;
    height: 20px;
    margin: 0 4px;
    border-left: 1px solid var(--ultu-border);
}

/* Botón base: mismo tratamiento para los de texto (B/I/S/U/H1/H2/H3) y
   los de ícono (alinear, listas, deshacer, etc.) */
.p_mail-rte-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 27px;
    height: 25px;
    padding: 0 6px;
    margin: 0;
    font-size: 0;
    line-height: 1;
    color: var(--ultu-text-muted);
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: background-color .15s, color .15s, border-color .15s;
}
.p_mail-rte-btn:hover {
    background-color: rgba(var(--ultu-color-primary-rgb), 0.10);
    color: var(--ultu-color-primary);
}
.p_mail-rte-btn--activo {
    background-color: rgba(var(--ultu-color-primary-rgb), 0.14);
    border-color: rgba(var(--ultu-color-primary-rgb), 0.28);
    color: var(--ultu-color-primary);
}

/* ── Botones de texto: B / I / S / U / H1 / H2 / H3 ── */
.p_mail-rte-btn--text {
    font-family: Arial, Helvetica, sans-serif;
}
.p_mail-rte-btn--bold          { font-size: 13px; font-weight: 700; }
.p_mail-rte-btn--italic        { font-size: 13px; font-style: italic; }
.p_mail-rte-btn--strike        { font-size: 13px; font-weight: 600; text-decoration: line-through; }
.p_mail-rte-btn--underline     { font-size: 13px; font-weight: 600; text-decoration: underline; }
.p_mail-rte-btn--text[data-value] { font-size: 11px; font-weight: 700; }

/* ── Botones de ícono: mismo técnica que .ultu-icon (mask +
   background-color:currentColor) -- el hover/activo de arriba ya
   los pinta violeta gratis, no hace falta color aparte acá. ── */
.p_mail-rte-icon {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 16px;
    mask-size: 16px;
    background-color: currentColor;
}
.p_mail-rte-icon--alignLeft      { -webkit-mask-image: var(--ultu-icon-rte-align-left);      mask-image: var(--ultu-icon-rte-align-left); }
.p_mail-rte-icon--alignCenter    { -webkit-mask-image: var(--ultu-icon-rte-align-center);    mask-image: var(--ultu-icon-rte-align-center); }
.p_mail-rte-icon--alignRight     { -webkit-mask-image: var(--ultu-icon-rte-align-right);     mask-image: var(--ultu-icon-rte-align-right); }
.p_mail-rte-icon--alignJustify   { -webkit-mask-image: var(--ultu-icon-rte-align-justify);   mask-image: var(--ultu-icon-rte-align-justify); }
.p_mail-rte-icon--indent         { -webkit-mask-image: var(--ultu-icon-rte-indent);          mask-image: var(--ultu-icon-rte-indent); }
.p_mail-rte-icon--outdent        { -webkit-mask-image: var(--ultu-icon-rte-outdent);         mask-image: var(--ultu-icon-rte-outdent); }
.p_mail-rte-icon--undo           { -webkit-mask-image: var(--ultu-icon-rte-undo);            mask-image: var(--ultu-icon-rte-undo); }
.p_mail-rte-icon--redo           { -webkit-mask-image: var(--ultu-icon-rte-redo);            mask-image: var(--ultu-icon-rte-redo); }
.p_mail-rte-icon--listOrdered    { -webkit-mask-image: var(--ultu-icon-rte-list-ordered);    mask-image: var(--ultu-icon-rte-list-ordered); }
.p_mail-rte-icon--listUnordered  { -webkit-mask-image: var(--ultu-icon-rte-list-unordered);  mask-image: var(--ultu-icon-rte-list-unordered); }
.p_mail-rte-icon--hr             { -webkit-mask-image: var(--ultu-icon-rte-hr);              mask-image: var(--ultu-icon-rte-hr); }
.p_mail-rte-icon--link           { -webkit-mask-image: var(--ultu-icon-rte-link);            mask-image: var(--ultu-icon-rte-link); }
.p_mail-rte-icon--image          { -webkit-mask-image: var(--ultu-icon-rte-image);           mask-image: var(--ultu-icon-rte-image); }
.p_mail-rte-icon--close          { -webkit-mask-image: var(--ultu-icon-close);               mask-image: var(--ultu-icon-close); }

/* ── El área editable en sí ── */
.p_mail-rte-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ultu-text-base);
    outline: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--ultu-color-primary-rgb), 0.25) var(--ultu-surface);
}
.p_mail-rte-body::-webkit-scrollbar { width: 4px; }
.p_mail-rte-body::-webkit-scrollbar-track { background: var(--ultu-surface); }
.p_mail-rte-body::-webkit-scrollbar-thumb {
    background: rgba(var(--ultu-color-primary-rgb), 0.25);
    border-radius: 2px;
}
.p_mail-rte-body:empty::before {
    content: attr(data-placeholder);
    color: var(--ultu-text-placeholder);
    font-style: italic;
    pointer-events: none;
}

/* Card lateral "Plantillas": header (ícono+título) + buscador + lista.
   El <select id="comboTemplate"> real sigue existiendo oculto -- ver
   seleccionarPlantillaMail()/filtrarPlantillasMail() en mails.js.
   La card NO se estira para igualar la altura de la card principal --
   mide lo que su propio contenido pida y termina ahí (sin importar cuánto
   mida el editor de texto de al lado). El único límite es la ventana: si
   la lista de plantillas no entra en el alto visible, ahí sí scrollea
   sola (ver .p_mail-template-list), sin arrastrar el resto de la card. */
.p_mail-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.p_mail-card-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--ultu-radius-sm);
    background: var(--ultu-primary-tint);
    color: var(--ultu-color-primary);
    flex-shrink: 0;
}
.p_mail-card-header-icon .ultu-icon {
    --ultu-icon-size: 16px;
}
.p_mail-card-header-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ultu-color-primary);
}

.p_mail-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 10px;
    background: #fff;
    border: 1.5px solid var(--ultu-border);
    border-radius: var(--ultu-radius-sm);
    margin-bottom: 10px;
    transition: border-color .15s, box-shadow .15s;
}
.p_mail-search:focus-within {
    border-color: var(--ultu-primary-border-hover);
    box-shadow: var(--ultu-shadow-focus);
}
.p_mail-search-icon {
    --ultu-icon-size: 14px;
    color: var(--ultu-text-subtle);
    flex-shrink: 0;
}
.p_mail-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 12px;
    color: var(--ultu-text-base);
    font-family: inherit;
}
.p_mail-search-input::placeholder {
    color: var(--ultu-text-placeholder);
}

.p_mail-template-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: calc(100vh - 260px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--ultu-color-primary-rgb), 0.25) var(--ultu-surface);
}
.p_mail-template-list::-webkit-scrollbar { width: 4px; }
.p_mail-template-list::-webkit-scrollbar-track { background: var(--ultu-surface); }
.p_mail-template-list::-webkit-scrollbar-thumb {
    background: rgba(var(--ultu-color-primary-rgb), 0.25);
    border-radius: 2px;
}
.p_mail-template-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    min-width: 0;
    border-radius: var(--ultu-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.p_mail-template-item:hover {
    background: var(--ultu-primary-tint);
}
.p_mail-template-item--activo {
    background: var(--ultu-primary-tint);
    border-color: rgba(var(--ultu-color-primary-rgb), 0.25);
}
.p_mail-template-item-icon {
    --ultu-icon-size: 15px;
    color: var(--ultu-color-primary);
    flex-shrink: 0;
}
.p_mail-template-item-title {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: var(--ultu-text-base);
    text-transform: capitalize;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.p_mail-template-empty {
    font-size: 12px;
    color: var(--ultu-text-muted);
    padding: 8px 2px;
}

/* Barra de acciones final -- SIEMPRE centrada como grupo, mismo criterio
   que .form_globalFieldset-finalActions / .p_PolizaEndoso-acciones */
.p_mail-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ultu-border-global-grid);
}

/* Popup de Destinatarios Masivos (#divDestinatariosMasivos): reemplaza la
   clase legacy .popup de estilos.css solo para este overlay puntual -- el
   otro overlay que sigue usando .popup (#contenedor, autocompletado de
   destinatario) es un componente compartido por 6 pantallas más y queda
   fuera de alcance de este rediseño (ver nota en la respuesta). */
.p_mail-popup {
    display: none;
    position: absolute;
    top: 80px;
    left: 80px;
    z-index: 100;
    background: var(--ultu-global-surface);
    border: 1px solid var(--ultu-border-global-grid);
    border-radius: var(--ultu-radius-md);
    box-shadow: var(--ultu-shadow-md);
    padding: 14px;
}

/* ======================================================================
   VENTANA FLOTANTE DE MAIL -- paginas/ventanaMail.php ("Mensaje Nuevo")
   BEM: p_mailPopup-*
   Namespace propio de esta pantalla (mismo criterio que p_mail-*, pero
   ventanaMail.php es un archivo/componente distinto de mail_editar.php).
   Fase 1 del plan: chrome de la ventana (anclaje + header + estado
   minimizado). El contenido interno (#headerMail/#cuerpoMail/#pieMail)
   se migra en las fases siguientes -- por ahora sigue con su look viejo
   adentro de .p_mailPopup-body.
   ====================================================================== */

/* position:fixed anclada abajo a la derecha del viewport -- reemplaza el
   calculo de left/top en JS (screenWidth/Height - ancho/alto) que nunca
   se recalculaba al cambiar el tamaño de la ventana del navegador (esa
   era la causa exacta de que "se pierda" al costado). Con right/bottom
   fijos el navegador la reubica solo, sin ninguna cuenta en JS. */
/* #ventanaMail es un selector por ID en estilos.css (width:26%; height:76%;
   text-transform:capitalize; font-size:80%; border/background propios;
   #ventanaMail input{height:70%}) -- un ID le gana a cualquier clase sin
   importar el orden de carga de los archivos, así que .p_mailPopup-window
   sola NUNCA iba a poder fijar el ancho/alto (mismo motivo por el que
   tuvimos que redeclarar #cuerpoMail/#pieMail/#btnAdjunto en la Fase 3 --
   se nos escapó hacerlo acá también en la Fase 1). Se redeclara el ID
   entero con las medidas reales: ancho fluido (25vw) acotado entre 200px
   y 400px según el espacio disponible, nunca por fuera de ese rango. */
#ventanaMail {
    display: flex;
    width: 25vw;
    min-width: 200px;
    max-width: 400px;
    height: 520px;
    max-height: calc(100vh - 80px);
    text-transform: none;
    font-size: 100%;
    border: 1px solid var(--ultu-border-global-grid);
    background: #fff;
}
/* Inputs dentro de #ventanaMail: la misma razón de arriba -- el selector
   compuesto "#ventanaMail input" (ID + tag) de estilos.css le ganaba a la
   clase suelta .p_mail-input. Un selector compuesto ID+clase es lo único
   con especificidad suficiente para ganarle de vuelta. */
#ventanaMail .p_mail-input {
    height: 100%;
    border: none;
}

.p_mailPopup-window {
    position: fixed;
    right: 24px;
    bottom: 0;
    z-index: 2000;
    flex-direction: column;
    border-radius: var(--ultu-radius-md) var(--ultu-radius-md) 0 0;
    box-shadow: var(--ultu-shadow-lg);
    overflow: hidden;
}

/* Estado minimizado: colapsa a solo la barra de título (mismo criterio
   que las conversaciones minimizadas de Gmail/Messenger). Un solo
   toggle de clase reemplaza la animación vieja de fadeIn/fadeOut +
   recalculo de alto en % + reposicionamiento en píxeles. Selector
   compuesto #ventanaMail.p_mailPopup-window--minimizado (no la clase
   sola) por la misma razón de especificidad de arriba -- si no, el
   height:520px del ID de arriba le seguiría ganando al height:auto. */
#ventanaMail.p_mailPopup-window--minimizado {
    height: auto;
}
.p_mailPopup-window--minimizado .p_mailPopup-body {
    display: none;
}

.p_mailPopup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    gap: 8px;
    padding: 10px 8px 10px 16px;
    background: var(--ultu-gradient-primary);
    cursor: pointer;
}
/* #cabMail es un selector por ID en estilos.css (background-color:#622179
   plano, padding:1% 0 1% 1%, height:5%) -- se nos escapó redeclararlo
   junto con #ventanaMail/#cuerpoMail/#pieMail/#btnAdjunto de arriba, y el
   ID le seguía ganando en especificidad a esta clase: el header quedaba
   con el violeta plano viejo en vez del degradé, y el padding/alto viejo. */
#cabMail.p_mailPopup-header {
    background: var(--ultu-gradient-primary);
    padding: 10px 8px 10px 16px;
    height: auto;
    color: #fff;
}
.p_mailPopup-title {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.p_mailPopup-header-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 6px;
}
/* Botones sobre header violeta: SIEMPRE fondo sólido blanco, nunca
   transparente ni violeta -- para que se despeguen del fondo en vez de
   mimetizarse (ver [[feedback_btn_styles]]). */
.p_mailPopup-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: #fff;
    color: var(--ultu-color-primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color .15s;
}
.p_mailPopup-header-btn:hover {
    background: var(--ultu-surface);
}
.p_mailPopup-header-btn .ultu-icon {
    --ultu-icon-size: 13px;
}

.p_mailPopup-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Fase 2: campos del formulario -- reusan los componentes globales/p_mail-*
   que ya existen (nada de CSS nuevo para el campo en sí, solo el
   contenedor propio de esta ventana). */
.p_mailPopup-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    flex-shrink: 0;
    border-bottom: 1.5px solid var(--ultu-border-global-grid);
}
.p_mailPopup-firma-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Label + combo en la misma fila (ahorra el alto de una fila completa) */
.p_mailPopup-field-inline {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.p_mailPopup-field-inline .p_mail-label {
    flex-shrink: 0;
}
.p_mailPopup-field-inline select {
    flex: 1;
    min-width: 0;
}

/* ── Fase 3: utilidad genérica "ocultar" ──
   .ocultar (estilos.css) pierde contra cualquier clase con display propio
   definida en ultu.css que cargue después (mismo problema que ya resolvimos
   con .p_mail-field--hidden en mail_editar.php) -- para un botón como
   #btnAsociar, que no es un .p_mail-field, hace falta un utility genérico
   con !important (uso legítimo: existe solo para esto). */
.p_mail-oculto {
    display: none !important;
}

/* ── Editor contenteditable de la ventana flotante (reemplaza el iframe
   de mail_cuerpoPopupMail.php) -- reutiliza .p_mail-rte-* tal cual, sin
   CSS nuevo para el editor en sí. #cuerpoMail/#pieMail son selectores
   por ID en estilos.css con floats/anchos en % pensados para el iframe
   viejo -- se redeclaran acá enteros (misma especificidad, ultu.css
   carga después) en vez de pelear propiedad por propiedad. ── */
#cuerpoMail {
    flex: 1;
    min-height: 0;
    width: 100%;
    height: auto;
    margin: 0;
    float: none;
    border: none;
    display: flex;
    flex-direction: column;
}

#pieMail {
    flex-shrink: 0;
    height: auto;
    margin: 0;
    float: none;
    clear: none;
    padding: 10px 12px;
    background: var(--ultu-global-surface);
    border-top: 1.5px solid var(--ultu-border-global-grid);
    display: flex;
    flex-direction: column;
}

#ventanaMail .panel_globalConsulta-field--checkbox {
    padding-top: 0;
}
.p_mailPopup-footer-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.p_mailPopup-footer-cccco {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

/* #btnAdjunto tenía estilos propios por ID en estilos.css (ancho fijo,
   sprite clip.png) pensados para el ícono viejo -- se redeclaran las
   propiedades en conflicto para que gane el look de pill button nuevo
   (.p_mail-pill-btn, ya aplicado como clase). */
#btnAdjunto {
    width: auto;
    height: 32px;
    font-size: 12px;
    color: var(--ultu-color-primary);
    border: 1px solid rgba(var(--ultu-color-primary-rgb), 0.18);
    border-radius: 999px;
    background-image: none;
}

/* ======================================================================
   PART 12 -- PRODUCTORES / ADMINISTRACION — Distribucion de Comisiones
   (adm_configuracionDistribucionDeComisiones.php, reusado tal cual en
   Productores -> Condiciones Comerciales y en Administracion ->
   Configuracion de Tablas -> Distribucion Comisiones). Solo estetica:
   reemplaza la <table> vieja por un layout flex; los onchange/onclick
   que arma el JS (seleccionarValores/seleccionarTodos en reportes.js)
   quedan intactos, sin tocar sus id/name.

   Los 4 <select> reales (Intermediario/Roles/CiasAseguradoras/Riesgos)
   NO conservan la clase que se les puso en el HTML: agregarProductor()
   (clases/utiles.php) y agregarListCombos.php -- generadores PHP/AJAX
   compartidos con media pantalla del sistema, que no se deben tocar --
   hardcodean class="FormularioDatosCombo" al reconstruir el <select> en
   cada carga. Por eso el look de listbox se fuerza acá por ID (estable,
   estos ids ya los usa el JS de esta pantalla) en vez de por clase.
   Los mismos ids (comboDivProductor/divcomboRoles/divcomboCiasAseguradoras/
   divcomboRiesgos) se reusan tal cual en otras pantallas -- de ahi el
   ancestro .p_adm_DistComisiones en cada selector, para no filtrar el
   estilo a esas otras pantallas. ────────────────────────────────────── */
.p_adm_DistComisiones {
    background: var(--ultu-gradient-global-grid);
    box-shadow: var(--ultu-shadow-sm);
    border: 1px solid var(--ultu-border-global-grid);
    border-radius: var(--ultu-radius-md);
    padding: 20px;
    margin: 5px 0;
}
.p_adm_DistComisiones-title {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ultu-color-primary);
}
/* Flex (no grid de columnas fijas): cuando el JS hace
   $('.administracion').hide() sobre la columna de Intermediarios (entrando
   desde Productores, donde ya hay un productor fijo), las 3 columnas
   restantes tienen que repartirse el ancho solas -- un grid de 4 columnas
   fijas dejaria un hueco vacio en su lugar. */
.p_adm_DistComisiones-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.p_adm_DistComisiones-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 220px;
    min-width: 220px;
}
.p_adm_DistComisiones-col__label {
    font-size: 12px;
    font-weight: 700;
    color: var(--ultu-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
/* Alto fijo en el DIV contenedor (estable, no lo toca ningun generador):
   3 de los 4 <select> reales llegan con style="height:100%" inline puesto
   por agregarProductor()/agregarListCombos.php -- un inline siempre le
   gana a "height:220px" puesto en el <select> por CSS externo. Dandole
   una altura definida al DIV padre, ese height:100% inline pasa a resolver
   correctamente contra un valor fijo y real, en vez de quedar indefinido
   (una altura porcentual sin ancestro con alto definido se comporta como
   auto) y terminar mas alto que el resto por el stretch del flex fila. */
.p_adm_DistComisiones #comboDivProductor,
.p_adm_DistComisiones #divcomboRoles,
.p_adm_DistComisiones #divcomboCiasAseguradoras,
.p_adm_DistComisiones #divcomboRiesgos {
    height: 220px;
}
.p_adm_DistComisiones .input_globalMultiSelect,
.p_adm_DistComisiones #comboDivProductor select,
.p_adm_DistComisiones #divcomboRoles select,
.p_adm_DistComisiones #divcomboCiasAseguradoras select,
.p_adm_DistComisiones #divcomboRiesgos select {
    width: 100%;
    height: 220px;
    min-height: 220px;
    padding: 4px;
    font-size: 12px;
    color: var(--ultu-text-base);
    background: #fff;
    border: 1.5px solid var(--ultu-border);
    border-radius: var(--ultu-radius-sm);
    outline: none;
    box-sizing: border-box;
    overflow-y: auto;
    transition: border-color .15s, box-shadow .15s;
}
.p_adm_DistComisiones .input_globalMultiSelect:hover:not(:focus),
.p_adm_DistComisiones #comboDivProductor select:hover:not(:focus),
.p_adm_DistComisiones #divcomboRoles select:hover:not(:focus),
.p_adm_DistComisiones #divcomboCiasAseguradoras select:hover:not(:focus),
.p_adm_DistComisiones #divcomboRiesgos select:hover:not(:focus) {
    border-color: var(--ultu-primary-border-hover);
}
.p_adm_DistComisiones .input_globalMultiSelect:focus,
.p_adm_DistComisiones #comboDivProductor select:focus,
.p_adm_DistComisiones #divcomboRoles select:focus,
.p_adm_DistComisiones #divcomboCiasAseguradoras select:focus,
.p_adm_DistComisiones #divcomboRiesgos select:focus {
    border-color: var(--ultu-primary-border-hover);
    box-shadow: var(--ultu-shadow-focus);
}
.p_adm_DistComisiones .input_globalMultiSelect option,
.p_adm_DistComisiones #comboDivProductor select option,
.p_adm_DistComisiones #divcomboRoles select option,
.p_adm_DistComisiones #divcomboCiasAseguradoras select option,
.p_adm_DistComisiones #divcomboRiesgos select option {
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: background .1s;
}
.p_adm_DistComisiones .input_globalMultiSelect option:hover,
.p_adm_DistComisiones #comboDivProductor select option:hover,
.p_adm_DistComisiones #divcomboRoles select option:hover,
.p_adm_DistComisiones #divcomboCiasAseguradoras select option:hover,
.p_adm_DistComisiones #divcomboRiesgos select option:hover {
    background: var(--ultu-primary-tint);
}
.p_adm_DistComisiones .input_globalMultiSelect option:checked,
.p_adm_DistComisiones #comboDivProductor select option:checked,
.p_adm_DistComisiones #divcomboRoles select option:checked,
.p_adm_DistComisiones #divcomboCiasAseguradoras select option:checked,
.p_adm_DistComisiones #divcomboRiesgos select option:checked {
    background: var(--ultu-color-primary);
    color: #fff;
}
.p_adm_DistComisiones #comboDivProductor select,
.p_adm_DistComisiones #divcomboRoles select,
.p_adm_DistComisiones #divcomboCiasAseguradoras select,
.p_adm_DistComisiones #divcomboRiesgos select {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--ultu-color-primary-rgb), 0.25) var(--ultu-surface);
}
.p_adm_DistComisiones #comboDivProductor select::-webkit-scrollbar,
.p_adm_DistComisiones #divcomboRoles select::-webkit-scrollbar,
.p_adm_DistComisiones #divcomboCiasAseguradoras select::-webkit-scrollbar,
.p_adm_DistComisiones #divcomboRiesgos select::-webkit-scrollbar { width: 4px; }
.p_adm_DistComisiones #comboDivProductor select::-webkit-scrollbar-track,
.p_adm_DistComisiones #divcomboRoles select::-webkit-scrollbar-track,
.p_adm_DistComisiones #divcomboCiasAseguradoras select::-webkit-scrollbar-track,
.p_adm_DistComisiones #divcomboRiesgos select::-webkit-scrollbar-track { background: var(--ultu-surface); }
.p_adm_DistComisiones #comboDivProductor select::-webkit-scrollbar-thumb,
.p_adm_DistComisiones #divcomboRoles select::-webkit-scrollbar-thumb,
.p_adm_DistComisiones #divcomboCiasAseguradoras select::-webkit-scrollbar-thumb,
.p_adm_DistComisiones #divcomboRiesgos select::-webkit-scrollbar-thumb {
    background: rgba(var(--ultu-color-primary-rgb), 0.25);
    border-radius: 2px;
}
/* La columna de Intermediarios se oculta completa via
   cargarPantallaProductoresConfiguracionComisiones() ($('.administracion').hide())
   cuando se entra desde Productores -> Condiciones Comerciales (ya hay un
   productor fijo). La clase .administracion no tiene reglas propias en
   ningun CSS -- es solo el hook que ese JS espera encontrar. */

/* Boton "Seleccionar Todos": el <input type="checkbox"> original sigue
   en el DOM con su mismo id/onClick (lo lee seleccionarTodos() en
   reportes.js) -- solo se oculta visualmente y el <label> que lo envuelve
   pasa a ocupar todo el ancho de la columna, mismo ancho que el listbox/
   combo de arriba por estar en la misma columna del grid. */
.p_adm_DistComisiones-selectall {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 32px;
    box-sizing: border-box;
    /* Borde bien visible en reposo (no tildado): marca toda la superficie
       clickeable del boton. El estado tildado (:has(input:checked), mas
       abajo) no toca este border-color -- queda igual que antes. */
    border: 1.5px solid var(--ultu-text-subtle);
    border-radius: var(--ultu-radius-sm);
    background: #fff;
    color: var(--ultu-text-base);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.p_adm_DistComisiones-selectall:hover {
    border-color: var(--ultu-primary-border-hover);
    background: var(--ultu-primary-tint);
}
.p_adm_DistComisiones-selectall:has(input:checked) {
    border-color: var(--ultu-color-primary);
    background: var(--ultu-primary-tint);
    color: var(--ultu-color-primary-dark);
}
.p_adm_DistComisiones-selectall input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.p_adm_DistComisiones-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

/* ======================================================================
   PART 13 -- REPORTES A PROCESAR (rpt_reportes*.php)
   Componente compartido para los paneles de filtro que rpt_reportesNuevo.php
   inyecta en #datosTipo segun Tipo/Sub Tipo (ver js/reportes.js). Cada
   archivo (rpt_reportesComisiones.php, rpt_reportesNuevoCobranza.php, etc.)
   sigue el mismo esqueleto legacy (tabla fondo + FilaFormularioEtiqueta/Dato)
   -- este componente lo reemplaza sin tocar ids/name (los usan los 4
   switches encadenados de reportes.js: cargarSubTipo -> habilitarDatosTipo
   -> guardarReporte -> datosvalidosReportes) ni las funciones compartidas
   seleccionarValores()/seleccionarTodos()/calendario() (esta ultima -- ver
   utiles.js -- engancha el calendario por id "btnfecha<Id>" sin importar
   si es <img> o <button>, por eso el boton de fecha se puede modernizar). */
/* Sin marco propio (borde/sombra): este panel se inyecta DENTRO del cuerpo
   de rpt_reportesNuevo.php -- con borde+sombra propios se notaba como "un
   bloque pegado". Pero #datosTipo (el contenedor real donde se inyecta)
   es transparente, así que sin ningún fondo quedaba blanco, cortando la
   continuidad visual con el resto de la pantalla (fila Tipo/Sub Tipo/
   Descripción, que sí tiene el fondo gris). Se le devuelve el mismo token
   de fondo que ya usa el resto del sistema para este gris, sin agregar
   borde/sombra -- así continúa la misma superficie en vez de apilar una
   tarjeta nueva encima. */
.p_reportes-panel {
    background: var(--ultu-gradient-global-grid);
    border: none;
    box-shadow: none;
    padding: 0 10px;
}
.p_reportes-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
/* Columnas angostas a propósito: son formularios de "pocos campos" para
   pedir un reporte, no un formulario de alta -- tienen que leerse como
   compactos, no ocupar todo el ancho de la pantalla. */
.p_reportes-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 1 300px;
    min-width: 150px;
    max-width: 300px;
}
.p_reportes-col__label {
    font-size: 12px;
    font-weight: 700;
    color: var(--ultu-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
/* Cualquier <select multiple> dentro de un panel de Reportes que haya sido
   reconstruido por agregarProductor()/agregarListCombos.php (clases/utiles.php,
   paginas/agregarListCombos.php -- los generadores PHP/AJAX compartidos con
   media pantalla del sistema que ya vimos en p_adm_DistComisiones-*) recibe
   el mismo look de listbox moderno. Selector por ATRIBUTO (class real que
   esos generadores siempre hardcodean + [multiple]) en vez de por id de
   wrapper: cubre Intermediario, Rol del Productor/Intermediario, Vía de
   Cobro, Cliente, etc. sin tener que ir agregando a mano el id de cada
   combo nuevo cada vez que se migra un archivo distinto del módulo. Los
   combos que arma el propio archivo de forma estática (Cías. Aseguradoras,
   Moneda, Riesgo/Riesgos) no pasan por esto -- a esos les alcanza con
   class="input_globalMultiSelect" puesto directo en el HTML. */
.p_reportes-panel select.FormularioDatosCombo[multiple] {
    /* !important en width Y height: esos generadores siempre emiten
       style="width:<px>px; height:100%" inline -- un inline le gana a
       cualquier CSS externo sin !important. Forzar el height con !important
       evita además el problema de que un alto porcentual necesite un
       ancestro con alto definido para resolver bien (ya no importa, queda
       fijo en 200px pase lo que pase). */
    width: 100% !important;
    height: 200px !important;
    min-height: 200px;
    padding: 4px;
    font-size: 12px;
    color: var(--ultu-text-base);
    background: #fff;
    border: 1.5px solid var(--ultu-border);
    border-radius: var(--ultu-radius-sm);
    outline: none;
    box-sizing: border-box;
    overflow-y: auto;
    transition: border-color .15s, box-shadow .15s;
}
.p_reportes-panel select.FormularioDatosCombo[multiple]:hover:not(:focus) {
    border-color: var(--ultu-primary-border-hover);
}
.p_reportes-panel select.FormularioDatosCombo[multiple]:focus {
    border-color: var(--ultu-primary-border-hover);
    box-shadow: var(--ultu-shadow-focus);
}
.p_reportes-panel select.FormularioDatosCombo[multiple] option {
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: background .1s;
}
.p_reportes-panel select.FormularioDatosCombo[multiple] option:hover {
    background: var(--ultu-primary-tint);
}
.p_reportes-panel select.FormularioDatosCombo[multiple] option:checked {
    background: var(--ultu-color-primary);
    color: #fff;
}
/* Scrollbar fina -- mismo motivo que width/height arriba: la clase real
   del <select> la pisa el generador compartido, así que la regla de
   .input_globalMultiSelect (que sí tiene esta barrita) nunca le llega. */
.p_reportes-panel select.FormularioDatosCombo[multiple] {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--ultu-color-primary-rgb), 0.25) var(--ultu-surface);
}
.p_reportes-panel select.FormularioDatosCombo[multiple]::-webkit-scrollbar { width: 4px; }
.p_reportes-panel select.FormularioDatosCombo[multiple]::-webkit-scrollbar-track { background: var(--ultu-surface); }
.p_reportes-panel select.FormularioDatosCombo[multiple]::-webkit-scrollbar-thumb {
    background: rgba(var(--ultu-color-primary-rgb), 0.25);
    border-radius: 2px;
}
.p_reportes-col .input_globalMultiSelect {
    height: 200px;
}
/* Boton "Seleccionar Todos": mismo patron ya validado en
   p_adm_DistComisiones-selectall -- el <input type="checkbox"> real sigue
   en el DOM con su mismo id/onClick (lo lee seleccionarTodos() en
   reportes.js), solo se oculta visualmente. Borde bien visible en reposo
   (no tildado) para marcar toda la superficie clickeable; el estado
   tildado no se toca. */
.p_reportes-selectall {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 32px;
    box-sizing: border-box;
    border: 1.5px solid var(--ultu-text-subtle);
    border-radius: var(--ultu-radius-sm);
    background: #fff;
    color: var(--ultu-text-base);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.p_reportes-selectall:hover {
    border-color: var(--ultu-primary-border-hover);
    background: var(--ultu-primary-tint);
}
.p_reportes-selectall:has(input:checked) {
    border-color: var(--ultu-color-primary);
    background: var(--ultu-primary-tint);
    color: var(--ultu-color-primary-dark);
}
.p_reportes-selectall input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* Par de fechas (Fecha Inicial/Fecha Final) -- uno al lado del otro, no
   apilados. Reusa .input_globalDate ya existente (mismo componente de
   Presupuestos/Ordenes/Polizas/Endosos). */
.p_reportes-dates {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}
.p_reportes-date-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
}
.p_reportes-date-field__label {
    font-size: 12px;
    color: var(--ultu-text-muted);
}
/* Envoltorio del selector doble-listbox compartido comboCombinadosEditar()
   (pantallaCombosCombinados.php) cuando aparece dentro de un panel de
   Reportes. Su propio markup interno NO se toca (lo usan 7 pantallas más
   de otros módulos) -- solo se le da separación respecto de la fila de
   filtros de arriba. */
.p_reportes-combinados {
    margin-top: 16px;
}