/*
 * SorribesApp - Estilos generales de la aplicacion.
 *
 * Esta hoja complementa Bootstrap 3 y contiene solamente los elementos comunes
 * que utiliza la aplicacion. Los estilos particulares de cada pantalla permanecen
 * en su pagina hasta que se puedan trasladar sin alterar su composicion actual.
 */

/* ========================================================================== */
/* 1. Paleta y ajustes generales                                              */
/* ========================================================================== */

:root {
    /*
     * Identidad corporativa.
     * Cambiando este primer grupo se actualizan botones, enlaces, iconos, cabeceras,
     * degradados y elementos interactivos de todas las paginas de la aplicacion.
     */
    --sorribes-primary: #ab1835;
    --sorribes-primary-hover: #9d2840;
    --sorribes-primary-dark: #651424;
    --sorribes-primary-accent: #c91a3d;
    --sorribes-primary-deep: #3f1e25;
    --sorribes-primary-soft: #fbf2f4;
    --sorribes-primary-border: #e4c6cc;

    /*
     * Superficies y textos neutros.
     * Se separan por funcion para poder aclarar u oscurecer la interfaz sin buscar
     * valores sueltos dentro de cada bloque especifico de pagina.
     */
    --sorribes-page-background: #f4f6f8;
    --sorribes-page-background-alt: #f4f6f8;
    --sorribes-panel-background: #ffffff;
    --sorribes-surface-soft: #f9f4f5;
    --sorribes-surface-subtle: #fbf9fa;
    --sorribes-surface-muted: #f7f9fa;
    --sorribes-surface-disabled: #f3f6f9;
    --sorribes-surface-cool: #f2f7fb;
    --sorribes-surface-input: #fbfcfe;
    --sorribes-surface-panel-soft: #fbfcfd;
    --sorribes-surface-footer: #f8fafc;
    --sorribes-surface-table: #fafbfd;
    --sorribes-surface-warm: #fcfafb;
    --sorribes-surface-tint: #faf7f8;
    --sorribes-surface-neutral: #f9fafb;
    --sorribes-surface-disabled-alt: #f6f7f8;
    --sorribes-surface-control: #f0f3f5;
    --sorribes-surface-switch: #f2f2f2;
    --sorribes-text: #472f35;
    --sorribes-text-strong: #3f2930;
    --sorribes-text-deep: #2f2023;
    --sorribes-text-secondary: #5f474d;
    --sorribes-text-tertiary: #776168;
    --sorribes-text-subtle: #88747a;
    --sorribes-text-placeholder: #9b8a8f;
    --sorribes-text-muted: #846f74;
    --sorribes-text-disabled: #a7b0b9;
    --sorribes-text-neutral: #999999;
    --sorribes-text-cool-muted: #7f8b97;

    /* Bordes neutros ordenados desde el mas visible hasta el mas ligero. */
    --sorribes-border-strong: #cbd6df;
    --sorribes-border-medium: #cdd7df;
    --sorribes-border-control: #dce4eb;
    --sorribes-border-input: #dfe7ef;
    --sorribes-border-panel: #e1e7ec;
    --sorribes-border-soft: #e8edf1;
    --sorribes-border-row: #edf1f4;
    --sorribes-border-footer: #edf1f5;
    --sorribes-border-disabled: #e5e9ed;
    --sorribes-border-on-dark: #e3e9ef;
    --sorribes-border-neutral: #e0e0e0;
    --sorribes-border-switch: #bdbdbd;
    --sorribes-border-basic: #cccccc;

    /*
     * Colores de estado. Estos no dependen del corporativo porque comunican
     * correctamente exito, aviso, error o una accion destructiva.
     */
    --sorribes-info: #965464;
    --sorribes-success: #64745b;
    --sorribes-success-strong: #268044;
    --sorribes-success-bright: #00aa00;
    --sorribes-success-toggle: #26b99a;
    --sorribes-success-background: #f1faf4;
    --sorribes-success-border: #cfe8d8;
    --sorribes-warning: #a7783f;
    --sorribes-warning-strong: #9a6b05;
    --sorribes-warning-background: #fff9e8;
    --sorribes-warning-border: #efd9a6;
    --sorribes-danger: #a1273f;
    --sorribes-danger-strong: #c0392b;
    --sorribes-danger-bright: #ff0000;
    --sorribes-danger-muted: #b94a48;
    --sorribes-danger-dark: #762033;
    --sorribes-danger-text: #8d4b59;
    --sorribes-danger-hover: #8f2036;
    --sorribes-danger-accent: #b83851;
    --sorribes-danger-background: #fff4f4;
    --sorribes-danger-background-soft: #fff3f3;
    --sorribes-danger-background-pale: #fff5f7;
    --sorribes-danger-background-icon: #fdecec;
    --sorribes-danger-border: #f0c9c9;
    --sorribes-danger-border-soft: #f3cccc;
    --sorribes-danger-border-pale: #efc5cd;
    --sorribes-selection-background: #eadde0;
    --sorribes-selection-active: #d9bcc2;
    --sorribes-selection-border: #e7dadd;
    --sorribes-selection-soft: #efe3e6;

    /* Transparencias corporativas para focos, sombras, fondos e indicadores. */
    --sorribes-primary-alpha-05: rgba(133, 27, 48, 0.05);
    --sorribes-primary-alpha-06: rgba(133, 27, 48, 0.06);
    --sorribes-primary-alpha-07: rgba(133, 27, 48, 0.07);
    --sorribes-primary-alpha-08: rgba(133, 27, 48, 0.08);
    --sorribes-primary-alpha-09: rgba(133, 27, 48, 0.09);
    --sorribes-focus-shadow: rgba(133, 27, 48, 0.1);
    --sorribes-primary-alpha-15: rgba(133, 27, 48, 0.15);
    --sorribes-primary-alpha-16: rgba(133, 27, 48, 0.16);
    --sorribes-primary-alpha-18: rgba(133, 27, 48, 0.18);
    --sorribes-primary-alpha-20: rgba(133, 27, 48, 0.2);
    --sorribes-primary-alpha-22: rgba(133, 27, 48, 0.22);
    --sorribes-primary-alpha-24: rgba(133, 27, 48, 0.24);
    --sorribes-primary-alpha-28: rgba(133, 27, 48, 0.28);
    --sorribes-primary-alpha-30: rgba(133, 27, 48, 0.3);
    --sorribes-danger-alpha-12: rgba(161, 39, 63, 0.12);
    --sorribes-danger-alpha-18: rgba(161, 39, 63, 0.18);
    --sorribes-danger-alpha-22: rgba(161, 39, 63, 0.22);
    --sorribes-danger-alpha-30: rgba(161, 39, 63, 0.3);
    --sorribes-white-alpha-08: rgba(255, 255, 255, 0.08);
    --sorribes-white-alpha-09: rgba(255, 255, 255, 0.09);
    --sorribes-white-alpha-12: rgba(255, 255, 255, 0.12);
    --sorribes-white-alpha-14: rgba(255, 255, 255, 0.14);
    --sorribes-white-alpha-42: rgba(255, 255, 255, 0.42);
    --sorribes-white-alpha-88: rgba(255, 255, 255, 0.88);
    --sorribes-white-alpha-96: rgba(255, 255, 255, 0.96);
    --sorribes-black-alpha-08: rgba(0, 0, 0, 0.08);
    --sorribes-black-alpha-22: rgba(0, 0, 0, 0.22);
    --sorribes-overlay-dark: rgba(24, 34, 45, 0.96);
    --sorribes-transparent: transparent;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    background: var(--sorribes-page-background);
    color: var(--sorribes-text);
}

a {
    color: var(--sorribes-primary);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--sorribes-primary-hover);
    text-decoration: none;
}

a,
button,
.btn,
.form-control {
    outline: 0;
}

.full-width {
    width: 100%;
}

.full-height {
    height: 100%;
}

.no-padding,
.p-0 {
    padding: 0 !important;
}

.p-1 {
    padding: 4px !important;
}

.p-2 {
    padding: 8px !important;
}

.no-gutter {
    margin-right: 0;
    margin-left: 0;
}

.no-gutter > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.border-0 {
    border: 0 !important;
}

.text-dark {
    color: var(--sorribes-text) !important;
}

.text-white {
    color: var(--sorribes-panel-background) !important;
}

.bg-dark {
    background: var(--sorribes-primary-dark) !important;
    color: var(--sorribes-panel-background);
}

/* Bootstrap utiliza contenedores con ancho maximo. La aplicacion necesita que
 * el contenedor principal ocupe toda la ventana para alojar el menu lateral. */
.container.body {
    width: 100%;
    padding: 0;
}

/* ========================================================================== */
/* 2. Layout principal y menu lateral                                         */
/* ========================================================================== */

.main_container {
    min-height: 100vh;
}

body.nav-md .main_container,
body.nav-sm .main_container {
    display: flex;
    flex-direction: column;
}

.left_col {
    min-height: 100%;
    padding: 0;
    /* Reutiliza el degradado de legal.php para dar profundidad al menu lateral. */
    background: linear-gradient(to right, var(--sorribes-primary), var(--sorribes-primary-dark));
}

.nav-md .container.body .col-md-3.left_col {
    position: absolute;
    z-index: 1001;
    display: block;
    width: 230px;
}

.nav-md .container.body .col-md-3.left_col.menu_fixed {
    position: fixed;
    height: 100%;
}

.nav-sm .container.body .col-md-3.left_col {
    position: absolute;
    z-index: 1001;
    display: block;
    width: 70px;
    padding: 0;
}

.nav-sm .container.body .col-md-3.left_col.menu_fixed {
    position: fixed;
    height: 100%;
}

.right_col {
    flex: 1 0 auto;
    min-height: 0 !important;
    padding: 10px 20px 0;
    background: var(--sorribes-page-background);
}

.nav-md .container.body .right_col {
    margin-left: 230px;
}

.nav-sm .container.body .right_col {
    margin-left: 70px;
}

/* La cabecera de marca mantiene exactamente el ancho del menu abierto o cerrado. */
.nav_title {
    float: left;
    width: 230px;
    height: 57px;
    border-radius: 0;
    /* La marca continua el degradado del lateral para evitar un corte de color. */
    background: linear-gradient(to right, var(--sorribes-primary), var(--sorribes-primary-dark));
}

.nav-sm .navbar.nav_title {
    width: 70px;
}

.site_title {
    display: block;
    width: 100%;
    height: 55px;
    margin: 0;
    padding-left: 10px;
    overflow: hidden;
    color: var(--sorribes-panel-background) !important;
    font-size: 22px;
    font-weight: 400;
    line-height: 55px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * La marca utiliza una fuente moderna del propio sistema operativo para que
 * conserve un aspecto limpio en Windows, macOS, iOS y Android sin necesitar
 * descargar una tipografia externa antes de mostrar el menu.
 */
.site_title span {
    font-family: "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.site_title img {
    max-width: 50px;
    max-height: 50px;
}

.nav-sm .navbar.nav_title a span,
.nav-sm .menu_section h3,
.nav-sm .side-menu > li > a > span.fa {
    display: none;
}

.main_menu_side {
    padding: 0;
}

.menu_section {
    margin-bottom: 35px;
}

.menu_section > ul {
    margin-top: 10px;
}

.nav.side-menu > li {
    position: relative;
    display: block;
    cursor: pointer;
}

.nav.side-menu > li > a,
.nav.child_menu > li > a {
    color: var(--sorribes-white-alpha-88);
    font-weight: 500;
}

.nav.side-menu > li > a {
    margin-bottom: 6px;
    padding: 13px 15px 12px;
}

.nav.side-menu > li > a:hover,
.nav.side-menu > li > a:focus,
.nav.child_menu > li > a:hover,
.nav.child_menu > li > a:focus {
    background: var(--sorribes-white-alpha-08);
    color: var(--sorribes-panel-background);
}

.nav.side-menu > li.current-page,
.nav.side-menu > li.active,
.nav-sm .nav.child_menu li.active,
.nav-sm .nav.side-menu li.active-sm {
    border-right: 5px solid var(--sorribes-primary-accent);
}

.nav.side-menu > li.active > a {
    background: linear-gradient(var(--sorribes-primary-hover), var(--sorribes-primary-dark));
    box-shadow: inset 0 1px 0 var(--sorribes-white-alpha-12);
}

.nav.child_menu {
    display: none;
    background: var(--sorribes-black-alpha-08);
}

.nav.child_menu li {
    position: relative;
    padding-left: 36px;
}

.nav.child_menu li:hover,
.nav.child_menu li.active,
.nav li.current-page {
    background: var(--sorribes-white-alpha-09);
}

.nav.child_menu > li > a {
    padding: 9px;
    font-size: 12px;
}

/* El punto y la linea ayudan a reconocer visualmente la jerarquia del submenu. */
.nav-md ul.nav.child_menu li:before {
    position: absolute;
    top: 15px;
    left: 23px;
    z-index: 1;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sorribes-primary-accent);
    content: "";
}

.nav-md ul.nav.child_menu li:after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 27px;
    border-left: 1px solid var(--sorribes-primary-accent);
    content: "";
}

.nav-md ul.nav.child_menu li:last-child:after {
    bottom: 50%;
}

/* En modo compacto cada opcion muestra solo su icono y el submenu aparece al lado. */
.nav-sm .nav.side-menu > li > a {
    padding: 10px 5px;
    text-align: center !important;
    font-size: 10px;
}

.nav-sm .nav.side-menu li a i {
    width: 100% !important;
    margin-bottom: 5px;
    font-size: 25px !important;
    text-align: center;
}

.nav-sm ul.nav.child_menu {
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 4000;
    width: 210px;
    background: linear-gradient(to right, var(--sorribes-primary), var(--sorribes-primary-dark));
}

.nav-sm ul.nav.child_menu li {
    padding: 0 10px;
}

.nav-sm ul.nav.child_menu li a {
    text-align: left !important;
}

/* ========================================================================== */
/* 3. Navegacion superior                                                     */
/* ========================================================================== */

.top_nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
}

.nav-md .main_container .top_nav {
    left: 230px;
}

.nav-sm .main_container .top_nav {
    left: 70px;
}

.top_nav .nav_menu {
    float: left;
    width: 100%;
    min-height: 43px;
    border-bottom: 1px solid var(--sorribes-primary-border);
    background: var(--sorribes-panel-background);
}

.top_nav .navbar-right {
    float: right;
    width: auto;
    margin: 0;
}

.top_nav .navbar-right > li {
    float: right;
}

.top_nav .toggle {
    float: left;
    width: 70px;
    height: 43px;
    margin: 0;
    padding-top: 8px;
}

.top_nav .toggle a {
    display: block;
    padding: 8px 15px 0;
    color: var(--sorribes-primary);
    cursor: pointer;
}

.top_nav .toggle a:hover,
.top_nav .toggle a:focus {
    color: var(--sorribes-primary-accent);
}

.top_nav .toggle a i {
    /* El icono recibe el color directamente para sobrescribir el tema antiguo. */
    color: var(--sorribes-primary) !important;
    font-size: 22px;
}

.top_nav .toggle a:hover i,
.top_nav .toggle a:focus i {
    color: var(--sorribes-primary-accent) !important;
}

/* Reserva la altura de la barra fija para que no cubra el inicio del contenido. */
.top-navigation-spacer {
    clear: both;
    height: 43px;
}

.top-user-navigation {
    margin-right: 10px;
}

.top-user-navigation.navbar-nav > li > a.top-user-trigger {
    display: flex;
    align-items: center;
    min-height: 43px;
    margin: 0 !important;
    padding: 4px 12px;
    color: var(--sorribes-primary) !important;
    line-height: normal;
}

.top-user-navigation.navbar-nav > li > a.top-user-trigger:hover,
.top-user-navigation.navbar-nav > li > a.top-user-trigger:focus,
.top-user-dropdown.open > a.top-user-trigger {
    background: var(--sorribes-primary-soft);
    color: var(--sorribes-primary) !important;
}

.top-user-avatar,
.top-user-menu-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sorribes-primary), var(--sorribes-primary-accent));
    color: var(--sorribes-panel-background);
    box-shadow: 0 3px 10px var(--sorribes-primary-alpha-22);
}

/*
 * Font Awesome puede recibir un color propio desde el tema Gentelella antiguo.
 * Se aplica el blanco al icono interior para que el circulo granate no herede
 * el azul o verde que utilizaba anteriormente la navegacion superior.
 */
.top_nav .top-user-avatar i,
.top_nav .top-user-menu-avatar i {
    color: var(--sorribes-panel-background) !important;
}

.top-user-avatar {
    width: 32px;
    height: 32px;
    margin-right: 10px;
    font-size: 15px;
}

.top-user-information {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-right: 12px;
    line-height: 1.15;
    text-align: left;
}

.top-user-label {
    margin-bottom: 3px;
    color: var(--sorribes-text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.top-user-name {
    max-width: 180px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-user-arrow {
    color: var(--sorribes-primary) !important;
    font-size: 14px;
    transition: transform 0.2s ease;
}

.top-user-dropdown.open .top-user-arrow {
    transform: rotate(180deg);
}

.top-user-menu.dropdown-menu {
    right: 0;
    left: auto;
    width: 290px;
    margin-top: 7px;
    padding: 8px;
    border: 1px solid var(--sorribes-primary-border);
    border-radius: 10px;
    box-shadow: 0 14px 35px var(--sorribes-primary-alpha-18);
}

.top-user-menu-header {
    display: flex;
    align-items: center;
    padding: 10px;
}

.top-user-menu-avatar {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    margin-right: 11px;
    font-size: 17px;
}

.top-user-menu-header-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.top-user-menu-header-text strong {
    overflow: hidden;
    color: var(--sorribes-primary);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-user-menu-header-text small,
.top-user-menu-option small {
    display: block;
    margin-top: 2px;
    color: var(--sorribes-text-muted);
    font-size: 11px;
    font-weight: 400;
}

.top-user-menu-divider {
    height: 1px;
    margin: 3px 6px 7px;
    overflow: hidden;
    background: var(--sorribes-primary-border);
}

.dropdown-menu > li > a.top-user-menu-option {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 7px;
    color: var(--sorribes-primary);
    white-space: normal;
}

.dropdown-menu > li > a.top-user-menu-option:hover,
.dropdown-menu > li > a.top-user-menu-option:focus {
    background: var(--sorribes-primary-soft);
    color: var(--sorribes-primary);
}

.top-user-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin-right: 10px;
    border-radius: 8px;
    background: var(--sorribes-primary-soft);
    color: var(--sorribes-primary);
    font-size: 15px;
}

/* El engranaje y cualquier futuro icono de opcion usan siempre el granate corporativo. */
.top_nav .top-user-menu-option:not(.top-user-menu-logout) .top-user-menu-icon,
.top_nav .top-user-menu-option:not(.top-user-menu-logout) .top-user-menu-icon i {
    color: var(--sorribes-primary) !important;
}

/* La accion de cerrar sesion conserva el rojo porque representa una salida. */
.top-user-menu-logout .top-user-menu-icon {
    background: var(--sorribes-danger-background-icon);
    color: var(--sorribes-danger) !important;
}

.top_nav .top-user-menu-logout .top-user-menu-icon i {
    color: var(--sorribes-danger) !important;
}

.dropdown-menu > li > a.top-user-menu-logout:hover,
.dropdown-menu > li > a.top-user-menu-logout:focus {
    background: var(--sorribes-danger-background-soft);
    color: var(--sorribes-danger);
}

/* ========================================================================== */
/* 4. Paneles, formularios y botones                                          */
/* ========================================================================== */

.x_panel {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
    padding: 10px 17px;
    border: 1px solid var(--sorribes-primary-border);
    background: var(--sorribes-panel-background);
}

.x_title {
    margin-bottom: 10px;
    padding: 1px 5px 6px;
    border-bottom: 2px solid var(--sorribes-primary-border);
}

.x_title:before,
.x_title:after {
    display: table;
    content: " ";
}

.x_title:after {
    clear: both;
}

.x_title h2 {
    display: block;
    float: left;
    margin: 5px 0 6px;
    overflow: hidden;
    color: var(--sorribes-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.x_content {
    position: relative;
    float: left;
    clear: both;
    width: 100%;
    margin-top: 5px;
    padding: 0 5px 6px;
}

.panel,
.well,
.modal-content,
.dropdown-menu {
    border-color: var(--sorribes-primary-border);
}

.modal-header,
.modal-footer,
.panel-default > .panel-heading {
    border-color: var(--sorribes-primary-border);
}

.modal-title,
legend {
    color: var(--sorribes-primary);
}

.form-control,
.input-group-addon {
    border-color: var(--sorribes-primary-border);
}

.form-control:focus {
    border-color: var(--sorribes-primary-accent);
    box-shadow: 0 0 0 3px var(--sorribes-focus-shadow) !important;
}

.input-group-addon {
    background: var(--sorribes-primary-soft);
    color: var(--sorribes-primary);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--sorribes-primary);
}

.btn-round {
    border-radius: 30px;
}

.btn-primary,
.label-primary,
.progress-bar,
.bg-primary {
    border-color: var(--sorribes-primary);
    background: var(--sorribes-primary);
    color: var(--sorribes-panel-background);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    border-color: var(--sorribes-primary-hover);
    background: var(--sorribes-primary-hover);
    color: var(--sorribes-panel-background);
}

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary {
    border-color: var(--sorribes-primary-border);
    background: var(--sorribes-primary);
    opacity: 0.58;
}

.btn-dark {
    border-color: var(--sorribes-primary-dark);
    background: var(--sorribes-primary-dark);
    color: var(--sorribes-panel-background);
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-dark.active {
    border-color: var(--sorribes-primary-hover);
    background: var(--sorribes-primary-hover);
    color: var(--sorribes-panel-background);
}

.btn-info,
.label-info,
.progress-bar-info,
.bg-info {
    border-color: var(--sorribes-info);
    background: var(--sorribes-info);
    color: var(--sorribes-panel-background);
}

.btn-success,
.label-success,
.progress-bar-success,
.bg-success {
    border-color: var(--sorribes-success);
    background: var(--sorribes-success);
    color: var(--sorribes-panel-background);
}

.btn-warning,
.label-warning,
.progress-bar-warning,
.bg-warning {
    border-color: var(--sorribes-warning);
    background: var(--sorribes-warning);
    color: var(--sorribes-panel-background);
}

.btn-danger,
.label-danger,
.progress-bar-danger,
.bg-danger {
    border-color: var(--sorribes-danger);
    background: var(--sorribes-danger);
    color: var(--sorribes-panel-background);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active {
    border-color: var(--sorribes-primary-border);
    background: var(--sorribes-primary-soft);
    color: var(--sorribes-primary);
}

.text-primary {
    color: var(--sorribes-primary) !important;
}

.text-info {
    color: var(--sorribes-info) !important;
}

.alert-info {
    border-color: var(--sorribes-primary-border);
    background: var(--sorribes-primary-soft);
    color: var(--sorribes-info);
}

/* ========================================================================== */
/* 5. Tablas, DataTables y paginacion                                         */
/* ========================================================================== */

.table > thead > tr > th {
    border-bottom-color: var(--sorribes-primary-border);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background: var(--sorribes-surface-subtle);
}

.table-hover > tbody > tr:hover,
table.jambo_table tbody tr:hover td {
    background: var(--sorribes-primary-soft);
}

table.jambo_table {
    border: 1px solid var(--sorribes-primary-border);
}

table.jambo_table thead {
    background: var(--sorribes-primary);
    color: var(--sorribes-panel-background);
}

table.jambo_table tbody tr.selected,
table.dataTable tbody tr.selected {
    background: var(--sorribes-selection-background);
}

table.dataTable th.focus,
table.dataTable td.focus {
    outline: 2px solid var(--sorribes-primary-accent) !important;
    outline-offset: -1px;
}

.dataTables_wrapper {
    position: relative;
    clear: both;
}

.dataTables_wrapper > .row {
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
}

.dataTables_length {
    float: left;
}

.dataTables_filter,
.dataTables_paginate {
    float: right;
    text-align: right;
}

.dataTables_info {
    float: left;
}

.pagination > li > a,
.pagination > li > span {
    border-color: var(--sorribes-primary-border);
    color: var(--sorribes-primary);
}

.pagination > li > a:hover,
.pagination > li > a:focus {
    border-color: var(--sorribes-primary-accent);
    background: var(--sorribes-primary-soft);
    color: var(--sorribes-primary);
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span,
.pagination > .active > span:hover,
.pagination > .active > span:focus,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    border-color: var(--sorribes-primary) !important;
    background: var(--sorribes-primary) !important;
    color: var(--sorribes-panel-background) !important;
}

.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > span {
    border-color: var(--sorribes-border-disabled);
    background: var(--sorribes-surface-disabled-alt);
    color: var(--sorribes-text-disabled);
}

.dt-button,
button.DTTT_button,
div.DTTT_button,
a.DTTT_button {
    border-color: var(--sorribes-primary-border) !important;
    background: var(--sorribes-panel-background) !important;
    color: var(--sorribes-primary) !important;
}

.dt-button:hover,
button.DTTT_button:hover,
div.DTTT_button:hover,
a.DTTT_button:hover {
    border-color: var(--sorribes-primary) !important;
    background: var(--sorribes-primary-soft) !important;
}

/* ========================================================================== */
/* 6. Selector de fechas                                                      */
/* ========================================================================== */

.daterangepicker .ranges li {
    color: var(--sorribes-text);
}

.daterangepicker .ranges li.active,
.daterangepicker .ranges li:hover,
.daterangepicker td.active,
.daterangepicker td.active:hover {
    border-color: var(--sorribes-primary);
    background: var(--sorribes-primary);
    color: var(--sorribes-panel-background);
}

.daterangepicker td.in-range {
    background: var(--sorribes-primary-soft);
    color: var(--sorribes-primary);
}

.daterangepicker .input-mini.active {
    border-color: var(--sorribes-primary-accent);
}

/* ========================================================================== */
/* 7. Pie de pagina                                                           */
/* ========================================================================== */

footer.modern-footer {
    flex: 0 0 auto;
    margin-left: 230px;
    padding: 10px 20px;
    border-top: 1px solid var(--sorribes-primary-border);
    background: var(--sorribes-panel-background);
    color: var(--sorribes-text-muted);
    box-shadow: 0 -4px 14px var(--sorribes-primary-alpha-05);
}

.nav-sm footer.modern-footer {
    margin-left: 70px;
}

.modern-footer-content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 20px;
    line-height: 20px;
}

.modern-footer-brand,
.modern-footer-company {
    display: inline-flex;
    align-items: center;
}

.modern-footer-brand {
    color: var(--sorribes-primary);
}

.modern-footer-logo {
    width: auto;
    height: 20px;
    margin-right: 7px;
    object-fit: contain;
}

.modern-footer-company,
.modern-footer-legal {
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid var(--sorribes-primary-border);
}

.modern-footer-company i {
    margin-right: 5px;
    font-size: 11px;
}

/* ========================================================================== */
/* 8. Adaptacion responsive                                                   */
/* ========================================================================== */

@media (max-width: 991px) {
    .nav-md .container.body .col-md-3.left_col {
        display: none;
    }

    .nav-md .main_container .top_nav,
    .nav-md .container.body .right_col {
        left: 0;
        width: 100%;
        margin-left: 0;
    }

    .right_col {
        width: 100%;
        padding: 10px !important;
    }

    .nav-md footer.modern-footer {
        margin-left: 0;
    }
}

@media (max-width: 767px) {
    /*
     * Bootstrap convierte los desplegables de la barra de navegacion en bloques
     * estaticos y de ancho automatico en movil. Para el menu de usuario no es
     * necesario ocupar toda la pantalla: se mantiene como panel flotante, con su
     * anchura propia y anclado al borde derecho del boton que lo despliega.
     */
    .top-user-navigation.navbar-nav .top-user-dropdown.open > .top-user-menu.dropdown-menu {
        position: absolute;
        right: 0;
        left: auto;
        float: left;
        width: 290px;
        margin-top: 7px;
        background: var(--sorribes-panel-background);
        border: 1px solid var(--sorribes-primary-border);
        box-shadow: 0 14px 35px var(--sorribes-primary-alpha-18);
    }

    .dataTables_length,
    .dataTables_filter,
    .dataTables_info,
    .dataTables_paginate {
        float: none;
        width: 100%;
        text-align: center;
    }

    footer.modern-footer {
        padding-right: 12px;
        padding-left: 12px;
    }

    .modern-footer-content {
        justify-content: center;
        flex-wrap: wrap;
    }

    .modern-footer-legal {
        width: 100%;
        margin: 5px 0 0;
        padding: 0;
        border-left: 0;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .top-user-navigation {
        margin-right: 0;
    }

    .top-user-label {
        display: none;
    }

    .top-user-name {
        max-width: 120px;
        font-size: 15px;
    }

    .top-user-menu.dropdown-menu {
        right: 0;
        width: 290px;
        max-width: calc(100vw - 10px);
        padding: 10px;
    }

    .dropdown-menu > li > a.top-user-menu-option {
        min-height: 66px;
        padding: 12px;
        font-size: 16px;
    }

    .top-user-menu-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        font-size: 18px;
    }
}

/* ========================================================================== */
/* 9. Pagina de listados                                                      */
/* ========================================================================== */

/*
 * Esta seccion contiene solamente la composicion propia de listados.php.
 * La paleta, los botones, los formularios y la paginacion proceden de las
 * secciones generales anteriores para evitar repetir esas reglas en la pagina.
 */
body.listados-modern .right_col {
    padding: 18px 20px 26px;
}

.listados-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*
     * La columna Bootstrap mide 890 px, pero el panel visible ocupa 860 px.
     * La cabecera conserva el mismo inicio que el resto del contenido.
     */
    box-sizing: border-box;
    width: 860px;
    max-width: calc(100% - 30px);
    margin-bottom: 12px;
    padding: 14px 18px;
    border: 1px solid var(--sorribes-primary-border);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--sorribes-panel-background) 0%, var(--sorribes-primary-soft) 100%);
    box-shadow: 0 8px 24px var(--sorribes-primary-alpha-07);
}

.listados-page-title {
    display: flex;
    align-items: center;
}

.listados-page-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 11px;
    border-radius: 10px;
    background: var(--sorribes-primary);
    color: var(--sorribes-panel-background);
    font-size: 18px;
}

.listados-page-title h1 {
    margin: 0 0 3px;
    color: var(--sorribes-text);
    font-size: 21px;
    font-weight: 600;
}

.listados-page-title p {
    margin: 0;
    color: var(--sorribes-text-muted);
    font-size: 13px;
}

.listados-page-badge {
    padding: 6px 10px;
    border: 1px solid var(--sorribes-primary-border);
    border-radius: 20px;
    background: var(--sorribes-primary-soft);
    color: var(--sorribes-primary);
    font-size: 12px;
    font-weight: 600;
}

/* El ancho limitado evita que la tabla se extienda innecesariamente en monitores grandes. */
.listados-panel-column {
    float: none;
    width: 890px;
    max-width: 100%;
}

.listados-panel {
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 10px 28px var(--sorribes-primary-alpha-07);
}

.listados-panel .x_title {
    min-height: 0;
    margin: 0;
    padding: 13px 17px;
    border-bottom-width: 1px;
}

.listados-panel .x_title h2 {
    float: none;
    margin: 0;
    color: var(--sorribes-text);
    font-size: 16px;
    font-weight: 600;
}

.listados-panel .x_title p {
    margin: 3px 0 0;
    color: var(--sorribes-text-muted);
    font-size: 13px;
}

.listados-panel .x_content {
    float: none;
    padding: 12px 16px 14px;
}

/* Los filtros se mantienen en una franja compacta mientras exista ancho suficiente. */
.listados-filter-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid var(--sorribes-primary-border);
    border-radius: 10px;
    background: var(--sorribes-surface-subtle);
}

.listados-filter-form .form-group {
    display: contents;
}

.listados-filter-form .control-label {
    display: inline-flex;
    align-items: center;
    float: none;
    width: auto;
    height: 34px;
    padding: 0;
    color: var(--sorribes-text);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
}

.listados-filter-form .form-group > div {
    float: none;
    width: auto;
    padding: 0;
}

.listados-filter-form .form-control {
    width: 125px;
    height: 34px;
    border-radius: 7px;
    box-shadow: none;
}

#matricula_filtro {
    width: 110px;
}

#id_pesada_filtro {
    width: 105px;
}

.listados-filter-form .text-center,
.listados-filter-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/*
 * Las acciones fuerzan un salto de linea intencionado dentro del contenedor flex.
 * flex-basis al 100% evita que intenten aprovechar el hueco libre junto al campo ID.
 */
.listados-filter-actions {
    flex: 0 0 100%;
    width: 100% !important;
    margin-top: 2px;
    padding: 0 !important;
}

.listados-filter-button,
.listados-clear-button {
    height: 34px;
    margin: 0;
    padding: 6px 13px;
    border-radius: 7px;
}

.listados-table-wrap {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--sorribes-primary-border);
    border-radius: 10px;
}

#datatable-l {
    width: 100%;
    margin: 0;
    font-size: 13px;
}

.listados-table-wrap table.dataTable thead th {
    padding: 9px;
    border-bottom: 1px solid var(--sorribes-primary-dark);
    background: var(--sorribes-primary);
    color: var(--sorribes-panel-background);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.35px;
    text-transform: uppercase;
}

#datatable-l > tbody > tr > td {
    padding: 6px 9px;
    border-top: 0;
    border-bottom: 1px solid var(--sorribes-border-row);
    font-weight: 600;
    vertical-align: middle !important;
    white-space: nowrap;
}

#datatable-l > tbody > tr:hover > td {
    background: var(--sorribes-selection-background) !important;
    color: var(--sorribes-text);
}

#datatable-l > tbody > tr.listados-row-selected > td {
    background: var(--sorribes-selection-active) !important;
    color: var(--sorribes-text);
}

.dataTables_scrollHeadInner,
.dataTables_scrollHeadInner table {
    width: 100%;
}

#datatable-l tbody td:first-child {
    vertical-align: middle;
    white-space: nowrap;
}

#datatable-l .input-sm {
    height: 28px;
    border-radius: 6px;
}

/* El selector de registros y los botones de exportacion comparten una sola fila. */
.listados-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    color: var(--sorribes-text-muted);
    font-size: 12px;
}

.listados-length select {
    height: 32px;
    border-radius: 7px;
    box-shadow: none;
}

.listados-buttons .btn {
    height: 30px;
    margin: 0 0 0 4px;
    padding: 5px 9px;
    border-radius: 7px;
    font-size: 11px;
}

.listados-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 10px;
    color: var(--sorribes-text-muted);
    font-size: 12px;
}

.listados-footer .dataTables_info,
.listados-footer .dataTables_paginate {
    float: none;
    padding: 0;
}

.listados-panel .pagination {
    margin: 0;
}

/* Visor de fotografias compartido visualmente con la pagina principal. */
.modal-fotos-content {
    overflow: hidden;
    border-radius: 12px;
    color: var(--sorribes-text);
    box-shadow: 0 18px 45px var(--sorribes-primary-alpha-18);
}

.modal-fotos-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--sorribes-primary-border);
    background: linear-gradient(135deg, var(--sorribes-panel-background) 0%, var(--sorribes-primary-soft) 100%);
}

.modal-fotos-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.modal-fotos-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0;
    border-radius: 50%;
    color: var(--sorribes-primary);
    line-height: 1;
    opacity: 1;
}

.modal-fotos-close:hover,
.modal-fotos-close:focus {
    background: var(--sorribes-primary);
    color: var(--sorribes-panel-background);
    opacity: 1;
}

.modal-fotos-body {
    padding: 12px;
}

.modal-fotos-grid {
    display: grid;
    grid-template-columns: repeat(2, calc((100% - 10px) / 2));
    gap: 10px;
}

.modal-fotos-item {
    min-width: 0;
}

.modal-fotos-label {
    margin-bottom: 6px;
    color: var(--sorribes-text);
    font-size: 12px;
    font-weight: 700;
}

.modal-fotos-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    overflow: hidden;
    border: 1px solid var(--sorribes-primary-border);
    border-radius: 8px;
    background: var(--sorribes-page-background);
}

.modal-fotos-frame img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.modal-fotos-empty {
    display: none;
    color: var(--sorribes-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.modal-fotos-item.modal-fotos-no-image img {
    display: none;
}

.modal-fotos-item.modal-fotos-no-image .modal-fotos-empty {
    display: block;
}

/* El modal de agrupacion conserva dimensiones compactas y usa la paleta general. */
#modalAgruparPesada .modal-content {
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 22px 52px var(--sorribes-primary-alpha-24);
}

#modalAgruparPesada .modal-header {
    padding: 14px 17px;
    border-bottom: 0;
    background: var(--sorribes-primary);
    color: var(--sorribes-panel-background);
}

#modalAgruparPesada .modal-title,
#modalAgruparPesada .close {
    color: var(--sorribes-panel-background);
}

#modalAgruparPesada .modal-body {
    padding: 16px;
}

#modalAgruparPesada .form-control {
    height: 34px;
    border-radius: 7px;
    box-shadow: none;
}

#modalAgruparPesada .modal-footer {
    padding: 10px 16px;
}

@media (max-width: 767px) {
    body.listados-modern .right_col {
        padding: 15px 12px 25px !important;
    }

    .listados-page-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 14px;
    }

    .listados-page-badge {
        margin-top: 10px;
    }

    .listados-filter-form {
        display: block;
    }

    .listados-filter-form .form-group {
        display: block;
        margin-bottom: 8px;
        /* Bootstrap aplica -10px a ambos lados en formularios horizontales.
         * Al apilar los campos en movil esos margenes provocaban el desbordamiento. */
        margin-right: 0;
        margin-left: 0;
    }

    .listados-filter-form .control-label,
    .listados-filter-form .form-group > div,
    .listados-filter-form .form-control {
        display: block;
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    .listados-filter-form .control-label {
        height: auto;
        padding: 0 0 4px;
    }

    .listados-filter-form .text-center,
    .listados-filter-actions {
        justify-content: center;
        margin-top: 10px;
    }

    .listados-controls {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .listados-buttons .btn {
        margin: 0 4px 4px 0;
    }

    .listados-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .modal-fotos-grid {
        grid-template-columns: 1fr;
    }
}

/* En movil horizontal hay espacio suficiente para mantener las exportaciones en una fila. */
@media (orientation: landscape) and (max-width: 950px) {
    .listados-controls {
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .listados-length {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .listados-buttons {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
        min-width: 0;
        white-space: nowrap;
    }

    .listados-buttons .btn {
        flex: 0 0 auto;
        margin: 0 0 0 3px;
        padding-right: 7px;
        padding-left: 7px;
    }
}


/* ========================================================================== */
/* Estilos migrados de adduser.php                                               */
/* ========================================================================== */

/* Este bloque conserva la composicion especifica de ADDUSER. */
/* La presentacion moderna queda limitada al alta de usuarios para no alterar otros formularios. */
        body.adduser-modern .right_col {
            padding: 24px 24px 34px;
            background: var(--sorribes-page-background-alt);
        }

        .adduser-page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            /*
             * La columna mide 680 px, pero Bootstrap reserva 15 px a cada lado.
             * La cabecera replica los 650 px visibles del panel.
             */
            box-sizing: border-box;
            width: 650px;
            max-width: calc(100% - 30px);
            margin-bottom: 20px;
            padding: 22px 24px;
            border: 1px solid var(--sorribes-border-panel);
            border-radius: 14px;
            background: linear-gradient(135deg, var(--sorribes-panel-background) 0%, var(--sorribes-surface-soft) 100%);
            box-shadow: 0 8px 24px var(--sorribes-primary-alpha-07);
        }

        .adduser-page-title {
            display: flex;
            align-items: center;
        }

        .adduser-page-title-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            width: 48px;
            height: 48px;
            margin-right: 14px;
            border-radius: 12px;
            background: var(--sorribes-primary);
            color: var(--sorribes-panel-background);
            font-size: 21px;
        }

        .adduser-page-title h1 {
            margin: 0 0 4px;
            color: var(--sorribes-text-strong);
            font-size: 24px;
            font-weight: 600;
        }

        .adduser-page-title p {
            margin: 0;
            color: var(--sorribes-text-placeholder);
            font-size: 13px;
        }

        .adduser-back-button {
            display: inline-flex;
            align-items: center;
            min-height: 40px;
            padding: 8px 14px;
            border: 1px solid var(--sorribes-border-control);
            border-radius: 9px;
            background: var(--sorribes-panel-background);
            color: var(--sorribes-text-tertiary);
            font-size: 13px;
            font-weight: 600;
        }

        .adduser-back-button i {
            margin-right: 7px;
        }

        .adduser-back-button:hover,
        .adduser-back-button:focus {
            border-color: var(--sorribes-primary);
            color: var(--sorribes-primary);
            text-decoration: none;
        }

        .adduser-panel-column {
            float: none;
            width: 100%;
            max-width: 760px;
            margin: 0 auto;
        }

        .adduser-panel {
            padding: 0;
            overflow: hidden;
            border: 1px solid var(--sorribes-border-panel);
            border-radius: 14px;
            background: var(--sorribes-panel-background);
            box-shadow: 0 10px 28px var(--sorribes-primary-alpha-07);
        }

        .adduser-panel .x_title {
            min-height: 0;
            margin: 0;
            padding: 20px 24px;
            border-bottom: 1px solid var(--sorribes-border-soft);
            background: var(--sorribes-panel-background);
        }

        .adduser-panel .x_title h2 {
            float: none;
            margin: 0;
            color: var(--sorribes-text-strong);
            font-size: 18px;
            font-weight: 600;
        }

        .adduser-panel .x_title p {
            margin: 5px 0 0;
            color: var(--sorribes-text-placeholder);
            font-size: 13px;
        }

        .adduser-panel .x_content {
            float: none;
            padding: 22px 24px 0;
        }

        .adduser-section {
            margin-bottom: 22px;
            padding: 20px 20px 4px;
            border: 1px solid var(--sorribes-border-soft);
            border-radius: 12px;
            background: var(--sorribes-surface-panel-soft);
        }

        .adduser-section-title {
            display: flex;
            align-items: center;
            margin: 0 0 18px;
            color: var(--sorribes-text-secondary);
            font-size: 15px;
            font-weight: 600;
        }

        .adduser-section-title i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            margin-right: 9px;
            border-radius: 8px;
            background: var(--sorribes-primary-alpha-08);
            color: var(--sorribes-primary);
        }

        .adduser-modern-form .form-group {
            margin-right: 0;
            margin-bottom: 16px;
            margin-left: 0;
        }

        .adduser-modern-form .control-label {
            padding-top: 10px;
            color: var(--sorribes-text-secondary);
            font-size: 13px;
            font-weight: 600;
            text-align: left;
        }

        .adduser-modern-form .form-control {
            height: 42px;
            border: 1px solid var(--sorribes-border-control);
            border-radius: 8px;
            background: var(--sorribes-panel-background);
            color: var(--sorribes-text-strong);
            box-shadow: none;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .adduser-modern-form .form-control:focus {
            border-color: var(--sorribes-primary);
            box-shadow: 0 0 0 3px var(--sorribes-focus-shadow);
        }

        .adduser-modern-form .adduser-field-main {
            width: 65%;
        }

        .adduser-modern-form .adduser-field-short {
            width: 42%;
        }

        .adduser-save-area {
            margin: 0 -24px;
            padding: 17px 24px;
            border-top: 1px solid var(--sorribes-border-soft);
            background: var(--sorribes-panel-background);
            text-align: right;
        }

        .adduser-save-button {
            min-width: 145px;
            height: 44px;
            border: 0;
            border-radius: 9px;
            background: linear-gradient(135deg, var(--sorribes-primary), var(--sorribes-primary-accent));
            color: var(--sorribes-panel-background);
            font-weight: 600;
            box-shadow: 0 8px 18px var(--sorribes-primary-alpha-20);
        }

        .adduser-save-button:hover,
        .adduser-save-button:focus {
            outline: 0;
            color: var(--sorribes-panel-background);
            box-shadow: 0 10px 22px var(--sorribes-primary-alpha-28);
            transform: translateY(-1px);
        }

        @media (max-width: 767px) {
            body.adduser-modern .right_col {
                padding: 15px 12px 25px;
            }

            .adduser-page-header {
                align-items: flex-start;
                flex-direction: column;
                width: 100%;
                padding: 14px;
            }

            .adduser-back-button {
                width: 100%;
                margin-top: 10px;
                justify-content: center;
            }

            .adduser-page-title h1 {
                font-size: 20px;
            }

            .adduser-panel .x_title,
            .adduser-panel .x_content {
                padding-right: 16px;
                padding-left: 16px;
            }

            .adduser-section {
                padding-right: 14px;
                padding-left: 14px;
            }

            .adduser-modern-form .control-label {
                padding-top: 0;
                padding-bottom: 6px;
            }

            .adduser-modern-form .adduser-field-main,
            .adduser-modern-form .adduser-field-short {
                width: 100%;
            }

            .adduser-save-area {
                margin-right: -16px;
                margin-left: -16px;
                padding-right: 16px;
                padding-left: 16px;
            }

            .adduser-save-button {
                width: 100%;
            }
        }

        /*
         * Politica compacta comun con ajustes.php: panel a la izquierda, campos contenidos
         * y menor separacion vertical para mostrar el formulario sin scroll innecesario.
         */
        body.adduser-modern .right_col {
            padding: 18px 20px 26px;
        }

        .adduser-page-header {
            margin-bottom: 12px;
            padding: 14px 18px;
        }

        .adduser-page-title-icon {
            width: 40px;
            height: 40px;
            margin-right: 11px;
            border-radius: 10px;
            font-size: 18px;
        }

        .adduser-page-title h1 {
            font-size: 21px;
        }

        .adduser-back-button {
            min-height: 34px;
            padding: 6px 11px;
        }

        .adduser-panel-column {
            width: 680px;
            max-width: 100%;
            margin: 0;
        }

        .adduser-panel .x_title {
            padding: 13px 17px;
        }

        .adduser-panel .x_title h2 {
            font-size: 16px;
        }

        .adduser-panel .x_title p {
            margin-top: 3px;
        }

        .adduser-panel .x_content {
            padding: 12px 16px 0;
        }

        .adduser-section {
            margin-bottom: 10px;
            padding: 11px 12px 3px;
        }

        .adduser-section-title {
            margin-bottom: 9px;
            font-size: 14px;
        }

        .adduser-section-title i {
            width: 25px;
            height: 25px;
            margin-right: 7px;
            border-radius: 7px;
        }

        .adduser-modern-form .form-group {
            margin-bottom: 7px;
        }

        .adduser-modern-form .control-label {
            width: 155px;
            padding-top: 7px;
        }

        .adduser-modern-form .form-control {
            height: 34px;
        }

        .adduser-modern-form .form-control:focus {
            border-color: var(--sorribes-primary-accent);
            box-shadow: 0 0 0 3px var(--sorribes-focus-shadow);
        }

        .adduser-modern-form .adduser-field-main {
            width: 350px;
            max-width: calc(100% - 155px);
        }

        .adduser-modern-form .adduser-field-short {
            width: 230px;
            max-width: calc(100% - 155px);
        }

        .adduser-save-area {
            margin: 0 -16px;
            padding: 10px 16px;
        }

        .adduser-save-button {
            min-width: 130px;
            height: 36px;
        }

        @media (max-width: 767px) {
            .adduser-page-header {
                padding: 14px;
            }

            .adduser-panel .x_title,
            .adduser-panel .x_content {
                padding-right: 12px;
                padding-left: 12px;
            }

            .adduser-section {
                padding-right: 10px;
                padding-left: 10px;
            }

            .adduser-modern-form .control-label,
            .adduser-modern-form .adduser-field-main,
            .adduser-modern-form .adduser-field-short {
                width: 100%;
                max-width: 100%;
            }

            .adduser-save-area {
                margin-right: -12px;
                margin-left: -12px;
                padding-right: 12px;
                padding-left: 12px;
            }
        }


/* ========================================================================== */
/* Estilos migrados de ajustes.php                                               */
/* ========================================================================== */

/* Este bloque conserva la composicion especifica de AJUSTES. */
/*
         * La presentacion moderna se aplica solo a ajustes para no alterar
         * otros formularios que comparten Bootstrap y la hoja general.
         */
        body.ajustes-modern .right_col {
            padding: 18px 20px 26px;
            background: var(--sorribes-page-background-alt);
        }

        .ajustes-page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 660px;
            max-width: calc(100% - 20px);
            box-sizing: border-box;
            margin-bottom: 12px;
            padding: 14px 18px;
            border: 1px solid var(--sorribes-border-panel);
            border-radius: 14px;
            background: linear-gradient(135deg, var(--sorribes-panel-background) 0%, var(--sorribes-surface-soft) 100%);
            box-shadow: 0 8px 24px var(--sorribes-primary-alpha-07);
        }

        .ajustes-page-title {
            display: flex;
            align-items: center;
        }

        .ajustes-page-title-icon {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            width: 40px;
            height: 40px;
            margin-right: 11px;
            border-radius: 10px;
            background: var(--sorribes-primary);
            color: var(--sorribes-panel-background);
            font-size: 18px;
        }

        /*
         * Font Awesome 4.6 no dispone de un icono combinado para ajustes de cuenta.
         * El engranaje se coloca como distintivo del usuario sin incorporar otra libreria.
         */
        .ajustes-account-user {
            font-size: 19px;
            transform: translate(-2px, -1px);
        }

        .ajustes-account-cog {
            position: absolute;
            right: 6px;
            bottom: 5px;
            padding: 2px;
            border-radius: 50%;
            background: var(--sorribes-primary);
            color: var(--sorribes-panel-background);
            font-size: 10px;
        }

        .ajustes-page-title h1 {
            margin: 0 0 4px;
            color: var(--sorribes-text-strong);
            font-size: 21px;
            font-weight: 600;
        }

        .ajustes-page-title p {
            margin: 0;
            color: var(--sorribes-text-placeholder);
            font-size: 13px;
        }

        .ajustes-page-badge {
            padding: 6px 10px;
            border: 1px solid var(--sorribes-primary-alpha-15);
            border-radius: 20px;
            background: var(--sorribes-primary-alpha-06);
            color: var(--sorribes-primary);
            font-size: 12px;
            font-weight: 600;
        }

        .ajustes-panel-column {
            float: none;
            width: 680px;
            max-width: 100%;
            margin: 0;
        }

        .ajustes-panel {
            padding: 0;
            overflow: hidden;
            border: 1px solid var(--sorribes-border-panel);
            border-radius: 14px;
            background: var(--sorribes-panel-background);
            box-shadow: 0 10px 28px var(--sorribes-primary-alpha-07);
        }

        .ajustes-panel .x_title {
            min-height: 0;
            margin: 0;
            padding: 13px 17px;
            border-bottom: 1px solid var(--sorribes-border-soft);
            background: var(--sorribes-panel-background);
        }

        .ajustes-panel .x_title h2 {
            float: none;
            margin: 0;
            color: var(--sorribes-text-strong);
            font-size: 16px;
            font-weight: 600;
        }

        .ajustes-panel .x_title p {
            margin: 3px 0 0;
            color: var(--sorribes-text-placeholder);
            font-size: 13px;
        }

        .ajustes-panel .x_content {
            float: none;
            padding: 12px 16px 0;
        }

        .ajustes-section {
            margin-bottom: 10px;
            padding: 11px 12px 3px;
            border: 1px solid var(--sorribes-border-soft);
            border-radius: 12px;
            background: var(--sorribes-surface-panel-soft);
        }

        .ajustes-section-title {
            display: flex;
            align-items: center;
            margin: 0 0 9px;
            color: var(--sorribes-text-secondary);
            font-size: 14px;
            font-weight: 600;
        }

        .ajustes-section-title i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 25px;
            height: 25px;
            margin-right: 7px;
            border-radius: 7px;
            background: var(--sorribes-primary-alpha-08);
            color: var(--sorribes-primary);
        }

        .ajustes-modern-form .form-group {
            margin-right: 0;
            margin-bottom: 7px;
            margin-left: 0;
        }

        .ajustes-modern-form .control-label {
            width: 155px;
            padding-top: 7px;
            color: var(--sorribes-text-secondary);
            font-size: 13px;
            font-weight: 600;
            text-align: left;
        }

        .ajustes-modern-form .form-control {
            height: 34px;
            border: 1px solid var(--sorribes-border-control);
            border-radius: 8px;
            background: var(--sorribes-panel-background);
            color: var(--sorribes-text-strong);
            box-shadow: none;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .ajustes-modern-form .form-control:focus {
            border-color: var(--sorribes-primary-accent);
            box-shadow: 0 0 0 3px var(--sorribes-focus-shadow);
        }

        /*
         * Las muestras de tema acompanan al selector sin sustituirlo. El select
         * sigue siendo el control que se envia al servidor y las muestras solo
         * ayudan a reconocer visualmente cada opcion numerica.
         */
        .ajustes-theme-swatches {
            display: flex;
            gap: 7px;
            margin-top: 8px;
        }

        .ajustes-theme-swatch {
            display: inline-block;
            width: 28px;
            height: 16px;
            border: 1px solid var(--sorribes-border-control);
            border-radius: 6px;
            box-shadow: inset 0 0 0 2px var(--sorribes-panel-background);
        }

        .ajustes-theme-swatch-0 {
            background: #ab1835;
        }

        .ajustes-theme-swatch-1 {
            background: #1f5f99;
        }

        .ajustes-theme-swatch-2 {
            background: #2f6f4e;
        }

        .ajustes-theme-swatch-3 {
            background: #60468f;
        }

        /* En escritorio los campos ocupan el espacio necesario sin extenderse hasta el borde del panel. */
        .ajustes-modern-form .ajustes-field-main {
            width: 350px;
            max-width: calc(100% - 155px);
        }

        .ajustes-modern-form .ajustes-field-short {
            width: 230px;
            max-width: calc(100% - 155px);
        }

        .ajustes-security-note {
            margin: 0 0 9px;
            padding: 8px 10px;
            border-left: 3px solid var(--sorribes-primary);
            border-radius: 0 8px 8px 0;
            background: var(--sorribes-primary-soft);
            color: var(--sorribes-text-tertiary);
            font-size: 12px;
            line-height: 1.4;
        }

        .ajustes-save-area {
            margin: 0 -16px;
            padding: 10px 16px;
            border-top: 1px solid var(--sorribes-border-soft);
            background: var(--sorribes-panel-background);
            text-align: right;
        }

        .ajustes-save-button {
            min-width: 130px;
            height: 36px;
            border: 0;
            border-radius: 9px;
            background: linear-gradient(135deg, var(--sorribes-primary), var(--sorribes-primary-accent));
            color: var(--sorribes-panel-background);
            font-weight: 600;
            box-shadow: 0 8px 18px var(--sorribes-primary-alpha-20);
        }

        .ajustes-save-button:hover,
        .ajustes-save-button:focus {
            outline: 0;
            color: var(--sorribes-panel-background);
            box-shadow: 0 10px 22px var(--sorribes-primary-alpha-28);
            transform: translateY(-1px);
        }

        @media (max-width: 767px) {
            body.ajustes-modern .right_col {
                padding: 15px 12px 25px;
            }

            .ajustes-page-header {
                align-items: flex-start;
                flex-direction: column;
                padding: 14px;
            }

            .ajustes-page-badge {
                margin-top: 13px;
            }

            .ajustes-page-title h1 {
                font-size: 20px;
            }

            .ajustes-panel .x_title,
            .ajustes-panel .x_content {
                padding-right: 12px;
                padding-left: 12px;
            }

            .ajustes-section {
                padding-right: 10px;
                padding-left: 10px;
            }

            .ajustes-modern-form .control-label {
                width: 100%;
                padding-top: 0;
                padding-bottom: 4px;
            }

            .ajustes-modern-form .ajustes-field-main,
            .ajustes-modern-form .ajustes-field-short {
                width: 100%;
                max-width: 100%;
            }

            .ajustes-save-area {
                margin-right: -12px;
                margin-left: -12px;
                padding-right: 12px;
                padding-left: 12px;
            }

            .ajustes-save-button {
                width: 100%;
            }
        }


/* ========================================================================== */
/* Estilos migrados de alertas.php                                               */
/* ========================================================================== */

/* Este bloque conserva la composicion especifica de ALERTAS. */
/*
         * Estos estilos se limitan a la pagina de alertas para conservar intacta
         * la presentacion del resto de formularios que utilizan el tema general.
         */
        body.alertas-modern .right_col {
            padding: 18px 20px 26px;
            background: var(--sorribes-page-background-alt);
        }

        .alertas-page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            /*
             * La columna Bootstrap mide 760 px, pero el panel visible ocupa 730 px.
             * La cabecera mantiene el mismo inicio horizontal que dicho panel.
             */
            box-sizing: border-box;
            width: 730px;
            max-width: calc(100% - 30px);
            margin-bottom: 12px;
            padding: 14px 18px;
            border: 1px solid var(--sorribes-border-panel);
            border-radius: 14px;
            background: linear-gradient(135deg, var(--sorribes-panel-background) 0%, var(--sorribes-surface-soft) 100%);
            box-shadow: 0 8px 24px var(--sorribes-primary-alpha-07);
        }

        .alertas-page-title {
            display: flex;
            align-items: center;
        }

        .alertas-page-title-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            width: 40px;
            height: 40px;
            margin-right: 11px;
            border-radius: 10px;
            background: var(--sorribes-primary);
            color: var(--sorribes-panel-background);
            font-size: 18px;
        }

        .alertas-page-title h1 {
            margin: 0 0 4px;
            color: var(--sorribes-text-strong);
            font-size: 21px;
            font-weight: 600;
        }

        .alertas-page-title p {
            margin: 0;
            color: var(--sorribes-text-placeholder);
            font-size: 13px;
        }

        .alertas-page-badge {
            padding: 6px 10px;
            border: 1px solid var(--sorribes-primary-alpha-15);
            border-radius: 20px;
            background: var(--sorribes-primary-alpha-06);
            color: var(--sorribes-primary);
            font-size: 12px;
            font-weight: 600;
        }

        .alertas-panel-column {
            float: none;
            width: 760px;
            max-width: 100%;
            margin: 0;
        }

        .alertas-panel {
            padding: 0;
            overflow: hidden;
            border: 1px solid var(--sorribes-border-panel);
            border-radius: 14px;
            background: var(--sorribes-panel-background);
            box-shadow: 0 10px 28px var(--sorribes-primary-alpha-07);
        }

        .alertas-panel .x_title {
            min-height: 0;
            margin: 0;
            padding: 13px 17px;
            border-bottom: 1px solid var(--sorribes-border-soft);
            background: var(--sorribes-panel-background);
        }

        .alertas-panel .x_title h2 {
            float: none;
            margin: 0;
            color: var(--sorribes-text-strong);
            font-size: 16px;
            font-weight: 600;
        }

        .alertas-panel .x_title p {
            margin: 3px 0 0;
            color: var(--sorribes-text-placeholder);
            font-size: 13px;
        }

        .alertas-panel .x_content {
            float: none;
            padding: 12px 16px 0;
        }

        .alertas-section {
            margin-bottom: 10px;
            padding: 11px 12px;
            border: 1px solid var(--sorribes-border-soft);
            border-radius: 12px;
            background: var(--sorribes-surface-panel-soft);
        }

        .alertas-section-title {
            display: flex;
            align-items: center;
            margin: 0 0 3px;
            color: var(--sorribes-text-secondary);
            font-size: 14px;
            font-weight: 600;
        }

        .alertas-section-title i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 25px;
            height: 25px;
            margin-right: 7px;
            border-radius: 7px;
            background: var(--sorribes-primary-alpha-08);
            color: var(--sorribes-primary);
        }

        .alertas-section-description {
            margin: 0 0 8px 32px;
            color: var(--sorribes-text-placeholder);
            font-size: 12px;
        }

        .alertas-options-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 7px;
        }

        .alertas-modern-form .alertas-option {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 44px;
            margin: 0;
            padding: 7px 10px;
            border: 1px solid var(--sorribes-border-panel);
            border-radius: 10px;
            background: var(--sorribes-panel-background);
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .alertas-modern-form .alertas-option:hover {
            border-color: var(--sorribes-border-strong);
            box-shadow: 0 5px 14px var(--sorribes-primary-alpha-06);
        }

        .alertas-option .control-label {
            float: none;
            width: auto;
            max-width: calc(100% - 54px);
            padding: 0;
            color: var(--sorribes-text-secondary);
            font-size: 13px;
            font-weight: 600;
            text-align: left;
        }

        .alertas-option .alertas-switch-column {
            float: none;
            width: auto;
            padding: 0;
        }

        .alertas-modern-form .text-info {
            margin-left: 4px;
            color: var(--sorribes-text-placeholder);
        }

        .alertas-delivery-grid {
            display: grid;
            grid-template-columns: 350px 130px;
            justify-content: start;
            gap: 9px;
        }

        .alertas-field-card {
            padding: 9px 10px;
            border: 1px solid var(--sorribes-border-panel);
            border-radius: 10px;
            background: var(--sorribes-panel-background);
        }

        .alertas-field-card .form-group {
            margin: 0;
        }

        .alertas-field-card .control-label {
            float: none;
            display: block;
            width: 100%;
            margin-bottom: 4px;
            padding: 0;
            color: var(--sorribes-text-secondary);
            font-size: 13px;
            font-weight: 600;
            text-align: left;
        }

        .alertas-field-card .alertas-field-column {
            float: none;
            width: 100%;
            padding: 0;
        }

        .alertas-modern-form .form-control {
            height: 34px;
            border: 1px solid var(--sorribes-border-control);
            border-radius: 8px;
            background: var(--sorribes-panel-background);
            color: var(--sorribes-text-strong);
            box-shadow: none;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .alertas-modern-form .form-control:focus {
            border-color: var(--sorribes-primary-accent);
            box-shadow: 0 0 0 3px var(--sorribes-focus-shadow);
        }

        /* Los anchos responden al contenido esperado en cada campo. */
        #mail_alertas {
            max-width: 330px;
        }

        #repeticion {
            width: 80px;
        }

        .alertas-recovery-option {
            max-width: 350px;
            margin-top: 0 !important;
            margin-bottom: 9px !important;
        }

        .alertas-save-area {
            margin: 0 -16px;
            padding: 10px 16px;
            border-top: 1px solid var(--sorribes-border-soft);
            background: var(--sorribes-panel-background);
            text-align: right;
        }

        .alertas-save-button {
            min-width: 130px;
            height: 36px;
            border: 0;
            border-radius: 9px;
            background: linear-gradient(135deg, var(--sorribes-primary), var(--sorribes-primary-accent));
            color: var(--sorribes-panel-background);
            font-weight: 600;
            box-shadow: 0 8px 18px var(--sorribes-primary-alpha-20);
        }

        .alertas-save-button:hover,
        .alertas-save-button:focus {
            outline: 0;
            color: var(--sorribes-panel-background);
            box-shadow: 0 10px 22px var(--sorribes-primary-alpha-28);
            transform: translateY(-1px);
        }

        /* Switch estilo iOS */
        .switch {
            position: relative;
            display: inline-block;
            width: 42px;
            height: 24px;
            margin: 0;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--sorribes-border-basic);
            transition: .3s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: var(--sorribes-panel-background);
            transition: .3s;
        }

        input:checked+.slider {
            background-color: var(--sorribes-success-toggle);
            /* verde Gentelella */
        }

        input:checked+.slider:before {
            transform: translateX(18px);
        }

        .slider.round {
            border-radius: 24px;
        }

        .slider.round:before {
            border-radius: 50%;
        }

        @media (max-width: 767px) {
            body.alertas-modern .right_col {
                padding: 15px 12px 25px;
            }

            .alertas-page-header {
                align-items: flex-start;
                flex-direction: column;
                padding: 14px;
            }

            .alertas-page-badge {
                margin-top: 13px;
            }

            .alertas-page-title h1 {
                font-size: 20px;
            }

            .alertas-panel .x_title,
            .alertas-panel .x_content {
                padding-right: 12px;
                padding-left: 12px;
            }

            .alertas-section {
                padding: 10px;
            }

            .alertas-options-grid,
            .alertas-delivery-grid {
                grid-template-columns: 1fr;
            }

            .alertas-save-area {
                margin-right: -12px;
                margin-left: -12px;
                padding-right: 12px;
                padding-left: 12px;
            }

            .alertas-save-button {
                width: 100%;
            }
        }


/* ========================================================================== */
/* Estilos migrados de config.php                                                */
/* ========================================================================== */

/* Este bloque conserva la composicion especifica de CONFIG. */
/*
         * La modernizacion queda limitada a esta pagina para no modificar formularios antiguos
         * que comparten Bootstrap y la hoja general de la aplicacion.
         */
        body.config-modern .right_col {
            padding: 24px 24px 34px;
            background: var(--sorribes-page-background-alt);
        }

        .config-page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            /*
             * La cabecera conserva el mismo inicio que los paneles. En escritorios
             * grandes se descuentan los 30 px de padding Bootstrap que separan las
             * medidas de las columnas de la anchura exterior realmente visible.
             */
            box-sizing: border-box;
            width: 100%;
            max-width: 1212px;
            margin-bottom: 20px;
            padding: 22px 24px;
            border: 1px solid var(--sorribes-border-panel);
            border-radius: 14px;
            background: linear-gradient(135deg, var(--sorribes-panel-background) 0%, var(--sorribes-surface-soft) 100%);
            box-shadow: 0 8px 24px var(--sorribes-primary-alpha-07);
        }

        .config-page-title {
            display: flex;
            align-items: center;
        }

        .config-page-title-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            width: 48px;
            height: 48px;
            margin-right: 14px;
            border-radius: 12px;
            background: var(--sorribes-primary);
            color: var(--sorribes-panel-background);
            font-size: 21px;
        }

        .config-page-title h1 {
            margin: 0 0 4px;
            color: var(--sorribes-text-strong);
            font-size: 24px;
            font-weight: 600;
        }

        .config-page-title p {
            margin: 0;
            color: var(--sorribes-text-placeholder);
            font-size: 13px;
        }

        .config-page-badge {
            padding: 8px 12px;
            border: 1px solid var(--sorribes-primary-alpha-15);
            border-radius: 20px;
            background: var(--sorribes-primary-alpha-06);
            color: var(--sorribes-primary);
            font-size: 12px;
            font-weight: 600;
        }

        .config-layout-row {
            display: flex;
            align-items: flex-start;
            flex-wrap: wrap;
        }

        .config-panel {
            padding: 0;
            overflow: hidden;
            border: 1px solid var(--sorribes-border-panel);
            border-radius: 14px;
            background: var(--sorribes-panel-background);
            box-shadow: 0 10px 28px var(--sorribes-primary-alpha-07);
        }

        .config-panel .x_title {
            min-height: 0;
            margin: 0;
            padding: 20px 24px;
            border-bottom: 1px solid var(--sorribes-border-soft);
            background: var(--sorribes-panel-background);
        }

        .config-panel .x_title h2 {
            float: none;
            margin: 0;
            color: var(--sorribes-text-strong);
            font-size: 18px;
            font-weight: 600;
        }

        .config-panel .x_title p {
            margin: 5px 0 0;
            color: var(--sorribes-text-placeholder);
            font-size: 13px;
        }

        .config-panel .x_content {
            float: none;
            padding: 22px 24px 0;
        }

        .config-section {
            margin-bottom: 22px;
            padding: 20px 20px 4px;
            border: 1px solid var(--sorribes-border-soft);
            border-radius: 12px;
            background: var(--sorribes-surface-panel-soft);
        }

        .config-section-title {
            display: flex;
            align-items: center;
            margin: 0 0 18px;
            color: var(--sorribes-text-secondary);
            font-size: 15px;
            font-weight: 600;
        }

        .config-section-title i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            margin-right: 9px;
            border-radius: 8px;
            background: var(--sorribes-primary-alpha-08);
            color: var(--sorribes-primary);
        }

        .config-modern-form .form-group {
            margin-right: 0;
            margin-bottom: 16px;
            margin-left: 0;
        }

        .config-modern-form .control-label {
            padding-top: 10px;
            color: var(--sorribes-text-secondary);
            font-size: 13px;
            font-weight: 600;
            text-align: left;
        }

        .config-modern-form .text-info {
            margin-left: 4px;
            color: var(--sorribes-text-placeholder);
        }

        .config-modern-form .form-control {
            height: 42px;
            border: 1px solid var(--sorribes-border-control);
            border-radius: 8px;
            background: var(--sorribes-panel-background);
            color: var(--sorribes-text-strong);
            box-shadow: none;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .config-modern-form textarea.form-control {
            height: auto;
            min-height: 100px;
            resize: vertical;
        }

        .config-modern-form .form-control:focus {
            border-color: var(--sorribes-primary);
            box-shadow: 0 0 0 3px var(--sorribes-focus-shadow);
        }

        .config-modern-form input[type="file"].form-control {
            height: auto;
            min-height: 42px;
            padding: 9px 12px;
        }

        .config-viewers {
            max-height: 150px;
            padding: 10px 14px;
            overflow-y: auto;
            border: 1px solid var(--sorribes-border-control);
            border-radius: 8px;
            background: var(--sorribes-panel-background);
        }

        .config-viewers label {
            margin: 0;
            padding: 6px 0;
            color: var(--sorribes-text-secondary);
            font-weight: 400;
        }

        .config-logo-preview {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 88px;
            padding: 10px;
            border: 1px dashed var(--sorribes-border-medium);
            border-radius: 9px;
            background: var(--sorribes-panel-background);
        }

        .config-logo-preview img {
            max-width: 100%;
            max-height: 80px;
            object-fit: contain;
        }

        .config-save-area {
            margin: 0 -24px;
            padding: 17px 24px;
            border-top: 1px solid var(--sorribes-border-soft);
            background: var(--sorribes-panel-background);
            text-align: right;
        }

        .config-save-button {
            min-width: 145px;
            height: 44px;
            border: 0;
            border-radius: 9px;
            background: linear-gradient(135deg, var(--sorribes-primary), var(--sorribes-primary-accent));
            color: var(--sorribes-panel-background);
            font-weight: 600;
            box-shadow: 0 8px 18px var(--sorribes-primary-alpha-20);
        }

        .config-save-button:hover,
        .config-save-button:focus {
            outline: 0;
            color: var(--sorribes-panel-background);
            box-shadow: 0 10px 22px var(--sorribes-primary-alpha-28);
            transform: translateY(-1px);
        }

        .config-map-panel {
            position: sticky;
            top: 63px;
        }

        .config-map-panel .x_content {
            padding: 14px;
        }

        .config-map-header {
            display: flex;
            align-items: center;
        }

        .config-map-header i {
            margin-right: 9px;
            color: var(--sorribes-primary);
        }

        #map-canvas {
            width: 100%;
            height: 560px;
            overflow: hidden;
            border-radius: 10px;
            background: var(--sorribes-page-background-alt);
        }

        /* Switch estilo iOS */
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 28px;
            margin-top: 7px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--sorribes-border-basic);
            transition: .3s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 22px;
            width: 22px;
            left: 3px;
            bottom: 3px;
            background-color: var(--sorribes-panel-background);
            transition: .3s;
        }

        input:checked+.slider {
            background-color: var(--sorribes-success-toggle);
            /* verde Gentelella */
        }

        input:checked+.slider:before {
            transform: translateX(22px);
        }

        .slider.round {
            border-radius: 24px;
        }

        .slider.round:before {
            border-radius: 50%;
        }

        /* Switch desactivado */
        .switch input:disabled+.slider {
            background-color: var(--sorribes-border-neutral);
            /* gris claro */
            cursor: not-allowed;
            opacity: 0.6;
        }

        .switch input:disabled+.slider:before {
            background-color: var(--sorribes-border-switch);
            /* botón gris */
        }

        /* Opcional: quitar sombra/efecto */
        .switch input:disabled+.slider {
            box-shadow: none;
        }

        /* Input numérico desactivado */
        input[type="number"]:disabled {
            background-color: var(--sorribes-surface-switch);
            color: var(--sorribes-text-neutral);
            cursor: not-allowed;
            opacity: 0.8;
        }

        /* El mensaje ocupa el hueco del mapa mientras Google no tenga permiso para cargarse. */
        .google-maps-consent {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            height: 100%;
            padding: 25px;
            background: var(--sorribes-page-background-alt);
            color: var(--sorribes-text-subtle);
            text-align: center;
        }

        .google-maps-consent .btn {
            margin-top: 12px;
        }

        @media (max-width: 991px) {
            .config-map-panel {
                position: static;
                margin-top: 4px;
            }

            #map-canvas {
                height: 420px;
            }
        }

        @media (max-width: 767px) {
            body.config-modern .right_col {
                padding: 15px 12px 25px;
            }

            .config-page-header {
                width: 100%;
                margin-left: 0;
                align-items: flex-start;
                flex-direction: column;
                padding: 18px;
            }

            .config-page-badge {
                margin-top: 13px;
            }

            .config-page-title h1 {
                font-size: 20px;
            }

            .config-panel .x_title,
            .config-panel .x_content {
                padding-right: 16px;
                padding-left: 16px;
            }

            .config-section {
                padding-right: 14px;
                padding-left: 14px;
            }

            .config-modern-form .control-label {
                padding-top: 0;
                padding-bottom: 6px;
            }

            .config-save-area {
                margin-right: -16px;
                margin-left: -16px;
                padding-right: 16px;
                padding-left: 16px;
            }

            .config-save-button {
                width: 100%;
            }
        }

        /*
         * Politica compacta comun con ajustes.php y alertas.php.
         * Se reducen espacios y controles sin alterar la estructura ni la logica del formulario.
         */
        body.config-modern .right_col {
            padding: 18px 20px 26px;
        }

        .config-page-header {
            margin-bottom: 12px;
            padding: 14px 18px;
        }

        .config-page-title-icon {
            width: 40px;
            height: 40px;
            margin-right: 11px;
            border-radius: 10px;
            font-size: 18px;
        }

        .config-page-title h1 {
            font-size: 21px;
        }

        .config-page-badge {
            padding: 6px 10px;
        }

        .config-layout-row {
            justify-content: flex-start;
        }

        .config-panel .x_title {
            padding: 13px 17px;
        }

        .config-panel .x_title h2 {
            font-size: 16px;
        }

        .config-panel .x_title p {
            margin-top: 3px;
        }

        .config-panel .x_content {
            padding: 12px 16px 0;
        }

        .config-section {
            margin-bottom: 10px;
            padding: 11px 12px 3px;
        }

        .config-section-title {
            margin-bottom: 9px;
            font-size: 14px;
        }

        .config-section-title i {
            width: 25px;
            height: 25px;
            margin-right: 7px;
            border-radius: 7px;
        }

        .config-modern-form .form-group {
            margin-bottom: 7px;
        }

        .config-modern-form .control-label {
            width: 155px;
            padding-top: 7px;
        }

        .config-modern-form .form-control {
            height: 34px;
        }

        .config-modern-form .form-control:focus {
            border-color: var(--sorribes-primary-accent);
            box-shadow: 0 0 0 3px var(--sorribes-focus-shadow);
        }

        /* Los campos se dimensionan segun el tipo de dato que reciben. */
        #alias,
        #mail_pesada {
            max-width: 350px;
        }

        #usuario {
            max-width: 230px;
        }

        #pesadas,
        #tiempo_transito,
        #min_peso {
            width: 90px;
        }

        .config-modern-form textarea.form-control {
            min-height: 70px;
        }

        .config-modern-form input[type="file"].form-control {
            min-height: 34px;
            padding: 5px 8px;
        }

        .config-viewers {
            max-width: 350px;
            max-height: 110px;
            padding: 5px 10px;
        }

        .config-viewers label {
            padding: 3px 0;
        }

        .config-logo-preview {
            min-height: 62px;
            padding: 6px;
        }

        .config-logo-preview img {
            max-height: 56px;
        }

        .config-save-area {
            margin: 0 -16px;
            padding: 10px 16px;
        }

        .config-save-button {
            min-width: 130px;
            height: 36px;
        }

        .config-map-panel .x_content {
            padding: 10px;
        }

        /*
         * Las coordenadas permanecen accesibles aunque Google Maps no tenga consentimiento.
         * El campo de solo lectura permite seleccionarlas manualmente ademas de usar el boton de copia.
         */
        .config-coordinates {
            display: flex;
            align-items: center;
            margin-top: 8px;
        }

        .config-coordinates .form-control {
            height: 34px;
            border: 1px solid var(--sorribes-border-control);
            border-radius: 7px 0 0 7px;
            background: var(--sorribes-panel-background);
            color: var(--sorribes-text-secondary);
            font-family: monospace;
            box-shadow: none;
        }

        .config-coordinates-copy {
            flex: 0 0 auto;
            height: 34px;
            padding: 6px 11px;
            border: 1px solid var(--sorribes-primary);
            border-radius: 0 7px 7px 0;
            background: var(--sorribes-primary);
            color: var(--sorribes-panel-background);
        }

        .config-coordinates-copy:hover,
        .config-coordinates-copy:focus {
            background: var(--sorribes-primary-hover);
            color: var(--sorribes-panel-background);
        }

        .config-coordinates-copy i {
            margin-right: 5px;
        }

        #map-canvas {
            height: 520px;
        }

        .switch {
            width: 42px;
            height: 24px;
            margin-top: 5px;
        }

        .slider:before {
            width: 18px;
            height: 18px;
        }

        input:checked+.slider:before {
            transform: translateX(18px);
        }

        @media (min-width: 1500px) {
            /* El formulario conserva mas espacio que el mapa, pero el conjunto no ocupa todo el escritorio. */
            .config-layout-row > .col-md-7 {
                width: 680px;
            }

            .config-layout-row > .col-md-5 {
                /*
                 * La columna compensa los rellenos de Bootstrap y del panel,
                 * dejando un area visible de mapa cercana a 520 x 520 px.
                 */
                width: 562px;
            }
        }

        @media (max-width: 991px) {
            #map-canvas {
                height: 360px;
            }
        }

        @media (max-width: 767px) {
            .config-page-header {
                padding: 14px;
            }

            .config-panel .x_title,
            .config-panel .x_content {
                padding-right: 12px;
                padding-left: 12px;
            }

            .config-section {
                padding-right: 10px;
                padding-left: 10px;
            }

            .config-modern-form .control-label {
                width: 100%;
                padding-top: 0;
                padding-bottom: 4px;
            }

            #alias,
            #mail_pesada,
            #usuario,
            #pesadas,
            #tiempo_transito,
            #min_peso,
            .config-viewers {
                width: 100%;
                max-width: 100%;
            }

            .config-save-area {
                margin-right: -12px;
                margin-left: -12px;
                padding-right: 12px;
                padding-left: 12px;
            }

            #map-canvas {
                height: 320px;
            }
        }


/* ========================================================================== */
/* Estilos migrados de cookie_notice.php                                         */
/* ========================================================================== */

/* Este bloque conserva la composicion especifica de COOKIE NOTICE. */
.cookie-notice {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10050;
        padding: 16px;
        background: var(--sorribes-overlay-dark);
        color: var(--sorribes-panel-background);
        box-shadow: 0 -6px 24px var(--sorribes-black-alpha-22);
    }

    .cookie-notice[hidden] {
        display: none;
    }

    .cookie-notice-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 1180px;
        margin: 0 auto;
    }

    .cookie-notice-information {
        max-width: 760px;
        padding-right: 25px;
    }

    .cookie-notice-information strong {
        display: block;
        margin-bottom: 5px;
        font-size: 17px;
    }

    .cookie-notice-information p {
        margin: 0 0 5px;
        color: var(--sorribes-border-on-dark);
        font-size: 13px;
        line-height: 1.5;
    }

    .cookie-notice-information a {
        color: var(--sorribes-panel-background);
        text-decoration: underline;
    }

    .cookie-notice-actions {
        display: flex;
        flex: 0 0 auto;
        gap: 10px;
    }

    .cookie-notice-button {
        min-height: 42px;
        padding: 9px 15px;
        border: 1px solid var(--sorribes-panel-background);
        border-radius: 6px;
        background: var(--sorribes-transparent);
        color: var(--sorribes-panel-background);
        font-weight: 600;
    }

    .cookie-notice-button:hover,
    .cookie-notice-button:focus {
        outline: 0;
        background: var(--sorribes-panel-background);
        color: var(--sorribes-text-strong);
    }

    @media (max-width: 767px) {
        .cookie-notice-content {
            align-items: stretch;
            flex-direction: column;
        }

        .cookie-notice-information {
            padding-right: 0;
        }

        .cookie-notice-actions {
            margin-top: 12px;
        }

        .cookie-notice-button {
            flex: 1 1 50%;
        }
    }


/* ========================================================================== */
/* Estilos migrados de deluser.php                                               */
/* ========================================================================== */

/* Este bloque conserva la composicion especifica de DELUSER. */
/* La confirmacion de borrado utiliza un diseño propio para destacar que la accion es irreversible. */
        body.deluser-modern .right_col {
            padding: 24px 24px 34px;
            background: var(--sorribes-page-background-alt);
        }

        .deluser-page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            padding: 22px 24px;
            border: 1px solid var(--sorribes-border-panel);
            border-radius: 14px;
            background: linear-gradient(135deg, var(--sorribes-panel-background) 0%, var(--sorribes-surface-soft) 100%);
            box-shadow: 0 8px 24px var(--sorribes-primary-alpha-07);
        }

        .deluser-page-title {
            display: flex;
            align-items: center;
        }

        .deluser-page-title-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            width: 48px;
            height: 48px;
            margin-right: 14px;
            border-radius: 12px;
            background: var(--sorribes-danger);
            color: var(--sorribes-panel-background);
            font-size: 21px;
        }

        .deluser-page-title h1 {
            margin: 0 0 4px;
            color: var(--sorribes-text-strong);
            font-size: 24px;
            font-weight: 600;
        }

        .deluser-page-title p {
            margin: 0;
            color: var(--sorribes-text-placeholder);
            font-size: 13px;
        }

        .deluser-back-button {
            display: inline-flex;
            align-items: center;
            min-height: 40px;
            padding: 8px 14px;
            border: 1px solid var(--sorribes-border-control);
            border-radius: 9px;
            background: var(--sorribes-panel-background);
            color: var(--sorribes-text-tertiary);
            font-size: 13px;
            font-weight: 600;
        }

        .deluser-back-button i {
            margin-right: 7px;
        }

        .deluser-back-button:hover,
        .deluser-back-button:focus {
            border-color: var(--sorribes-primary);
            color: var(--sorribes-primary);
            text-decoration: none;
        }

        .deluser-panel-column {
            float: none;
            width: 100%;
            max-width: 680px;
            margin: 0 auto;
        }

        .deluser-panel {
            padding: 0;
            overflow: hidden;
            border: 1px solid var(--sorribes-border-panel);
            border-radius: 14px;
            background: var(--sorribes-panel-background);
            box-shadow: 0 10px 28px var(--sorribes-primary-alpha-07);
        }

        .deluser-panel .x_title {
            min-height: 0;
            margin: 0;
            padding: 20px 24px;
            border-bottom: 1px solid var(--sorribes-border-soft);
            background: var(--sorribes-panel-background);
        }

        .deluser-panel .x_title h2 {
            float: none;
            margin: 0;
            color: var(--sorribes-text-strong);
            font-size: 18px;
            font-weight: 600;
        }

        .deluser-panel .x_title p {
            margin: 5px 0 0;
            color: var(--sorribes-text-placeholder);
            font-size: 13px;
        }

        .deluser-content {
            padding: 24px;
        }

        .deluser-warning {
            display: flex;
            align-items: flex-start;
            padding: 16px;
            border: 1px solid var(--sorribes-danger-border-pale);
            border-radius: 10px;
            background: var(--sorribes-danger-background-pale);
            color: var(--sorribes-danger-dark);
        }

        .deluser-warning-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            width: 38px;
            height: 38px;
            margin-right: 12px;
            border-radius: 50%;
            background: var(--sorribes-danger-alpha-12);
            color: var(--sorribes-danger);
            font-size: 18px;
        }

        .deluser-warning h3 {
            margin: 0 0 5px;
            font-size: 15px;
            font-weight: 700;
        }

        .deluser-warning p {
            margin: 0;
            color: var(--sorribes-danger-text);
            font-size: 13px;
            line-height: 1.5;
        }

        .deluser-summary {
            margin-top: 18px;
            border: 1px solid var(--sorribes-border-soft);
            border-radius: 10px;
            background: var(--sorribes-surface-panel-soft);
        }

        .deluser-summary-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 15px;
            border-bottom: 1px solid var(--sorribes-border-soft);
        }

        .deluser-summary-row:last-child {
            border-bottom: 0;
        }

        .deluser-summary-label {
            color: var(--sorribes-text-placeholder);
            font-size: 12px;
            font-weight: 600;
        }

        .deluser-summary-value {
            max-width: 65%;
            overflow: hidden;
            color: var(--sorribes-text-secondary);
            font-size: 13px;
            font-weight: 600;
            text-align: right;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .deluser-reassignment {
            margin: 18px 0 0;
            padding: 12px 14px;
            border-left: 3px solid var(--sorribes-primary);
            border-radius: 0 8px 8px 0;
            background: var(--sorribes-surface-cool);
            color: var(--sorribes-text-tertiary);
            font-size: 12px;
            line-height: 1.5;
        }

        .deluser-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            margin: 24px -24px -24px;
            padding: 17px 24px;
            border-top: 1px solid var(--sorribes-border-soft);
            background: var(--sorribes-panel-background);
        }

        .deluser-cancel-button,
        .deluser-delete-button {
            min-width: 135px;
            height: 44px;
            border-radius: 9px;
            font-weight: 600;
        }

        .deluser-cancel-button {
            border: 1px solid var(--sorribes-border-control);
            background: var(--sorribes-panel-background);
            color: var(--sorribes-text-tertiary);
        }

        .deluser-cancel-button:hover,
        .deluser-cancel-button:focus {
            border-color: var(--sorribes-text-placeholder);
            color: var(--sorribes-text-secondary);
        }

        .deluser-delete-button {
            border: 0;
            background: linear-gradient(135deg, var(--sorribes-danger-hover), var(--sorribes-danger-accent));
            color: var(--sorribes-panel-background);
            box-shadow: 0 8px 18px var(--sorribes-danger-alpha-22);
        }

        .deluser-delete-button:hover,
        .deluser-delete-button:focus {
            outline: 0;
            color: var(--sorribes-panel-background);
            box-shadow: 0 10px 22px var(--sorribes-danger-alpha-30);
            transform: translateY(-1px);
        }

        @media (max-width: 767px) {
            body.deluser-modern .right_col {
                padding: 15px 12px 25px;
            }

            .deluser-page-header {
                align-items: flex-start;
                flex-direction: column;
                padding: 18px;
            }

            .deluser-back-button {
                width: 100%;
                margin-top: 14px;
                justify-content: center;
            }

            .deluser-page-title h1 {
                font-size: 20px;
            }

            .deluser-content {
                padding: 18px 16px;
            }

            .deluser-actions {
                align-items: stretch;
                flex-direction: column-reverse;
                margin-right: -16px;
                margin-bottom: -18px;
                margin-left: -16px;
                padding-right: 16px;
                padding-left: 16px;
            }

            .deluser-cancel-button,
            .deluser-delete-button {
                width: 100%;
            }
        }

        /*
         * La confirmacion mantiene su caracter de advertencia, pero adopta la misma
         * alineacion izquierda y densidad visual que el resto de formularios de usuario.
         */
        body.deluser-modern .right_col {
            padding: 18px 20px 26px;
        }

        .deluser-page-header {
            margin-bottom: 12px;
            padding: 14px 18px;
        }

        .deluser-page-title-icon {
            width: 40px;
            height: 40px;
            margin-right: 11px;
            border-radius: 10px;
            font-size: 18px;
        }

        .deluser-page-title h1 {
            font-size: 21px;
        }

        .deluser-back-button {
            min-height: 34px;
            padding: 6px 11px;
        }

        .deluser-panel-column {
            width: 580px;
            max-width: 100%;
            margin: 0;
        }

        .deluser-panel .x_title {
            padding: 13px 17px;
        }

        .deluser-panel .x_title h2 {
            font-size: 16px;
        }

        .deluser-panel .x_title p {
            margin-top: 3px;
        }

        .deluser-content {
            padding: 12px 16px;
        }

        .deluser-warning {
            padding: 10px 12px;
        }

        .deluser-warning-icon {
            width: 30px;
            height: 30px;
            margin-right: 9px;
            font-size: 15px;
        }

        .deluser-warning h3 {
            margin-bottom: 3px;
            font-size: 14px;
        }

        .deluser-warning p {
            font-size: 12px;
            line-height: 1.4;
        }

        .deluser-summary {
            margin-top: 10px;
        }

        .deluser-summary-row {
            padding: 7px 11px;
        }

        .deluser-reassignment {
            margin-top: 10px;
            padding: 8px 10px;
            border-left-color: var(--sorribes-primary);
            background: var(--sorribes-primary-soft);
            line-height: 1.4;
        }

        .deluser-actions {
            gap: 7px;
            margin: 12px -16px -12px;
            padding: 10px 16px;
        }

        .deluser-cancel-button,
        .deluser-delete-button {
            min-width: 120px;
            height: 36px;
        }

        @media (max-width: 767px) {
            .deluser-page-header {
                padding: 14px;
            }

            .deluser-content {
                padding: 12px;
            }

            .deluser-actions {
                margin-right: -12px;
                margin-bottom: -12px;
                margin-left: -12px;
                padding-right: 12px;
                padding-left: 12px;
            }
        }


/* ========================================================================== */
/* Estilos migrados de edituser.php                                              */
/* ========================================================================== */

/* Este bloque conserva la composicion especifica de EDITUSER. */
/* La presentacion moderna queda limitada a la edicion de usuarios. */
        body.edituser-modern .right_col {
            padding: 24px 24px 34px;
            background: var(--sorribes-page-background-alt);
        }

        .edituser-page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            /*
             * La columna mide 680 px, pero Bootstrap reserva 15 px a cada lado.
             * La cabecera replica los 650 px visibles del panel.
             */
            box-sizing: border-box;
            width: 650px;
            max-width: calc(100% - 30px);
            margin-bottom: 20px;
            padding: 22px 24px;
            border: 1px solid var(--sorribes-border-panel);
            border-radius: 14px;
            background: linear-gradient(135deg, var(--sorribes-panel-background) 0%, var(--sorribes-surface-soft) 100%);
            box-shadow: 0 8px 24px var(--sorribes-primary-alpha-07);
        }

        .edituser-page-title {
            display: flex;
            align-items: center;
        }

        .edituser-page-title-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            width: 48px;
            height: 48px;
            margin-right: 14px;
            border-radius: 12px;
            background: var(--sorribes-primary);
            color: var(--sorribes-panel-background);
            font-size: 21px;
        }

        .edituser-page-title h1 {
            margin: 0 0 4px;
            color: var(--sorribes-text-strong);
            font-size: 24px;
            font-weight: 600;
        }

        .edituser-page-title p {
            margin: 0;
            color: var(--sorribes-text-placeholder);
            font-size: 13px;
        }

        .edituser-back-button {
            display: inline-flex;
            align-items: center;
            min-height: 40px;
            padding: 8px 14px;
            border: 1px solid var(--sorribes-border-control);
            border-radius: 9px;
            background: var(--sorribes-panel-background);
            color: var(--sorribes-text-tertiary);
            font-size: 13px;
            font-weight: 600;
        }

        .edituser-back-button i {
            margin-right: 7px;
        }

        .edituser-back-button:hover,
        .edituser-back-button:focus {
            border-color: var(--sorribes-primary);
            color: var(--sorribes-primary);
            text-decoration: none;
        }

        .edituser-panel-column {
            float: none;
            width: 100%;
            max-width: 760px;
            margin: 0 auto;
        }

        .edituser-panel {
            padding: 0;
            overflow: hidden;
            border: 1px solid var(--sorribes-border-panel);
            border-radius: 14px;
            background: var(--sorribes-panel-background);
            box-shadow: 0 10px 28px var(--sorribes-primary-alpha-07);
        }

        .edituser-panel .x_title {
            min-height: 0;
            margin: 0;
            padding: 20px 24px;
            border-bottom: 1px solid var(--sorribes-border-soft);
            background: var(--sorribes-panel-background);
        }

        .edituser-panel .x_title h2 {
            float: none;
            margin: 0;
            color: var(--sorribes-text-strong);
            font-size: 18px;
            font-weight: 600;
        }

        .edituser-panel .x_title p {
            margin: 5px 0 0;
            color: var(--sorribes-text-placeholder);
            font-size: 13px;
        }

        .edituser-panel .x_content {
            float: none;
            padding: 22px 24px 0;
        }

        .edituser-section {
            margin-bottom: 22px;
            padding: 20px 20px 4px;
            border: 1px solid var(--sorribes-border-soft);
            border-radius: 12px;
            background: var(--sorribes-surface-panel-soft);
        }

        .edituser-section-title {
            display: flex;
            align-items: center;
            margin: 0 0 18px;
            color: var(--sorribes-text-secondary);
            font-size: 15px;
            font-weight: 600;
        }

        .edituser-section-title i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            margin-right: 9px;
            border-radius: 8px;
            background: var(--sorribes-primary-alpha-08);
            color: var(--sorribes-primary);
        }

        .edituser-modern-form .form-group {
            margin-right: 0;
            margin-bottom: 16px;
            margin-left: 0;
        }

        .edituser-modern-form .control-label {
            padding-top: 10px;
            color: var(--sorribes-text-secondary);
            font-size: 13px;
            font-weight: 600;
            text-align: left;
        }

        .edituser-modern-form .form-control {
            height: 42px;
            border: 1px solid var(--sorribes-border-control);
            border-radius: 8px;
            background: var(--sorribes-panel-background);
            color: var(--sorribes-text-strong);
            box-shadow: none;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .edituser-modern-form .form-control:focus {
            border-color: var(--sorribes-primary);
            box-shadow: 0 0 0 3px var(--sorribes-focus-shadow);
        }

        .edituser-modern-form .edituser-field-main {
            width: 65%;
        }

        .edituser-modern-form .edituser-field-short {
            width: 42%;
        }

        .edituser-security-note {
            margin: 0 0 16px;
            padding: 12px 14px;
            border-left: 3px solid var(--sorribes-primary);
            border-radius: 0 8px 8px 0;
            background: var(--sorribes-surface-cool);
            color: var(--sorribes-text-tertiary);
            font-size: 12px;
            line-height: 1.5;
        }

        .edituser-save-area {
            margin: 0 -24px;
            padding: 17px 24px;
            border-top: 1px solid var(--sorribes-border-soft);
            background: var(--sorribes-panel-background);
            text-align: right;
        }

        .edituser-save-button {
            min-width: 145px;
            height: 44px;
            border: 0;
            border-radius: 9px;
            background: linear-gradient(135deg, var(--sorribes-primary), var(--sorribes-primary-accent));
            color: var(--sorribes-panel-background);
            font-weight: 600;
            box-shadow: 0 8px 18px var(--sorribes-primary-alpha-20);
        }

        .edituser-save-button:hover,
        .edituser-save-button:focus {
            outline: 0;
            color: var(--sorribes-panel-background);
            box-shadow: 0 10px 22px var(--sorribes-primary-alpha-28);
            transform: translateY(-1px);
        }

        @media (max-width: 767px) {
            body.edituser-modern .right_col {
                padding: 15px 12px 25px;
            }

            .edituser-page-header {
                align-items: flex-start;
                flex-direction: column;
                width: 100%;
                padding: 14px;
            }

            .edituser-back-button {
                width: 100%;
                margin-top: 10px;
                justify-content: center;
            }

            .edituser-page-title h1 {
                font-size: 20px;
            }

            .edituser-panel .x_title,
            .edituser-panel .x_content {
                padding-right: 16px;
                padding-left: 16px;
            }

            .edituser-section {
                padding-right: 14px;
                padding-left: 14px;
            }

            .edituser-modern-form .control-label {
                padding-top: 0;
                padding-bottom: 6px;
            }

            .edituser-modern-form .edituser-field-main,
            .edituser-modern-form .edituser-field-short {
                width: 100%;
            }

            .edituser-save-area {
                margin-right: -16px;
                margin-left: -16px;
                padding-right: 16px;
                padding-left: 16px;
            }

            .edituser-save-button {
                width: 100%;
            }
        }

        /*
         * Politica compacta comun con ajustes.php: formulario alineado a la izquierda,
         * campos proporcionados a su contenido y menor separacion entre lineas.
         */
        body.edituser-modern .right_col {
            padding: 18px 20px 26px;
        }

        .edituser-page-header {
            margin-bottom: 12px;
            padding: 14px 18px;
        }

        .edituser-page-title-icon {
            width: 40px;
            height: 40px;
            margin-right: 11px;
            border-radius: 10px;
            font-size: 18px;
        }

        .edituser-page-title h1 {
            font-size: 21px;
        }

        .edituser-back-button {
            min-height: 34px;
            padding: 6px 11px;
        }

        .edituser-panel-column {
            width: 680px;
            max-width: 100%;
            margin: 0;
        }

        .edituser-panel .x_title {
            padding: 13px 17px;
        }

        .edituser-panel .x_title h2 {
            font-size: 16px;
        }

        .edituser-panel .x_title p {
            margin-top: 3px;
        }

        .edituser-panel .x_content {
            padding: 12px 16px 0;
        }

        .edituser-section {
            margin-bottom: 10px;
            padding: 11px 12px 3px;
        }

        .edituser-section-title {
            margin-bottom: 9px;
            font-size: 14px;
        }

        .edituser-section-title i {
            width: 25px;
            height: 25px;
            margin-right: 7px;
            border-radius: 7px;
        }

        .edituser-modern-form .form-group {
            margin-bottom: 7px;
        }

        .edituser-modern-form .control-label {
            width: 155px;
            padding-top: 7px;
        }

        .edituser-modern-form .form-control {
            height: 34px;
        }

        .edituser-modern-form .form-control:focus {
            border-color: var(--sorribes-primary-accent);
            box-shadow: 0 0 0 3px var(--sorribes-focus-shadow);
        }

        .edituser-modern-form .edituser-field-main {
            width: 350px;
            max-width: calc(100% - 155px);
        }

        .edituser-modern-form .edituser-field-short {
            width: 230px;
            max-width: calc(100% - 155px);
        }

        .edituser-security-note {
            margin-bottom: 9px;
            padding: 8px 10px;
            border-left-color: var(--sorribes-primary);
            background: var(--sorribes-primary-soft);
            line-height: 1.4;
        }

        .edituser-save-area {
            margin: 0 -16px;
            padding: 10px 16px;
        }

        .edituser-save-button {
            min-width: 130px;
            height: 36px;
        }

        @media (max-width: 767px) {
            .edituser-page-header {
                padding: 14px;
            }

            .edituser-panel .x_title,
            .edituser-panel .x_content {
                padding-right: 12px;
                padding-left: 12px;
            }

            .edituser-section {
                padding-right: 10px;
                padding-left: 10px;
            }

            .edituser-modern-form .control-label,
            .edituser-modern-form .edituser-field-main,
            .edituser-modern-form .edituser-field-short {
                width: 100%;
                max-width: 100%;
            }

            .edituser-save-area {
                margin-right: -12px;
                margin-left: -12px;
                padding-right: 12px;
                padding-left: 12px;
            }
        }


/* ========================================================================== */
/* Estilos migrados de imprime.php                                               */
/* ========================================================================== */

/* Este bloque conserva la composicion especifica de IMPRIME. */
body.imprime-page {
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
    background:var(--sorribes-panel-background);
}
body.imprime-page .icono {
    font-size:200px;
}


/* ========================================================================== */
/* Estilos migrados de index.php                                                 */
/* ========================================================================== */

/* Este bloque conserva la composicion especifica de INDEX. */
/* El panel principal comparte la misma base clara y la paleta granate de las paginas modernizadas. */
        body.index-modern .right_col {
            padding: 24px 24px 34px;
            background: var(--sorribes-page-background-alt);
        }

        /*
         * Las columnas de Bootstrap 3 flotan a la izquierda. Si una tarjeta de la
         * primera fila queda mas alta que las otras, la cuarta puede engancharse en
         * el hueco libre de la derecha en vez de empezar una fila nueva a la izquierda.
         * Este corte fuerza que cada grupo de tres basculas empiece siempre alineado
         * al margen izquierdo en escritorio.
         */
        @media (min-width: 992px) {
            body.index-modern .right_col > .row > .col-md-4:nth-child(3n+1) {
                clear: left;
            }
        }

        /*
         * En tablet Bootstrap usa dos columnas por fila con col-sm-6, asi que se
         * aplica el mismo criterio cada dos basculas para mantener la alineacion.
         */
        @media (min-width: 768px) and (max-width: 991px) {
            body.index-modern .right_col > .row > .col-sm-6:nth-child(2n+1) {
                clear: left;
            }
        }

        /* Cada bascula se presenta como una tarjeta coherente con configuracion, alertas y ajustes. */
        body.index-modern .right_col .x_panel {
            padding: 14px;
            border: 1px solid var(--sorribes-border-panel);
            border-radius: 14px;
            background: var(--sorribes-panel-background);
            box-shadow: 0 10px 28px var(--sorribes-primary-alpha-07);
        }

        body.index-modern .right_col .text-center > img {
            border: 1px solid var(--sorribes-border-soft);
            border-radius: 9px;
            background: var(--sorribes-surface-muted);
        }

        .se-pre-con {
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9999;
            opacity: 0.6;
        }

        .se-pre-con2 {
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background: url(../../images/loading7_orange.gif) center no-repeat var(--sorribes-page-background-alt);
            opacity: 0.6;
        }

        .icon-ok {
            color: var(--sorribes-success-bright);
            /* verde */
        }

        .icon-error {
            color: var(--sorribes-danger-bright);
            /* rojo */
        }

        /* Cabecera de cada bascula: separa el titulo de las imagenes y evita el aspecto antiguo de bg-primary dentro de etiquetas <i>. */
        .bascula-header {
            margin-bottom: 12px;
        }

        /* El enlace completo permite entrar a la configuracion desde cualquier punto de la cabecera sin perder la funcion actual. */
        body.index-modern .bascula-header-link {
            display: block;
            padding: 12px 14px;
            /* Todo el contorno pertenece a la identidad corporativa, no solo el lateral destacado. */
            border: 1px solid var(--sorribes-primary);
            border-left: 4px solid var(--sorribes-primary);
            border-radius: 10px;
            background: linear-gradient(135deg, var(--sorribes-panel-background) 0%, var(--sorribes-surface-soft) 100%);
            color: var(--sorribes-text-strong);
            text-decoration: none;
            box-shadow: 0 8px 20px var(--sorribes-primary-alpha-08);
            transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
        }

        /* Estado hover: da una senal moderna de que la cabecera es clicable, sin cambiar el layout de la tarjeta. */
        body.index-modern .bascula-header-link:hover,
        body.index-modern .bascula-header-link:focus {
            color: var(--sorribes-primary-dark);
            text-decoration: none;
            border-color: var(--sorribes-primary-accent);
            box-shadow: 0 10px 24px var(--sorribes-primary-alpha-16);
            transform: translateY(-1px);
        }

        /* Primera linea: nombre a la izquierda e ID a la derecha para que se lea rapido encima de las camaras. */
        .bascula-header-main {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 6px;
        }

        .bascula-header-title {
            display: flex;
            align-items: center;
            min-width: 0;
            font-size: 18px;
            font-weight: 600;
            line-height: 1.25;
        }

        /*
         * Los iconos incluidos ahora o en el futuro dentro del titulo heredan siempre
         * el color corporativo aunque Font Awesome o Bootstrap definan otro color base.
         */
        body.index-modern .bascula-header-title i,
        body.index-modern .bascula-header-title .fa,
        body.index-modern .bascula-header-title .glyphicon,
        body.index-modern .bascula-header-user i {
            color: var(--sorribes-primary);
        }

        /* Elipsis para que un alias largo no rompa el ancho de las columnas de Bootstrap. */
        .bascula-header-name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .bascula-header-id {
            flex: 0 0 auto;
            padding: 3px 8px;
            border-radius: 12px;
            background: var(--sorribes-primary-alpha-08);
            color: var(--sorribes-primary);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0;
            text-transform: uppercase;
        }

        /* Segunda linea: muestra el propietario solo cuando corresponde, con un peso visual menor que el nombre de la bascula. */
        .bascula-header-user {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--sorribes-text-subtle);
            font-size: 13px;
            line-height: 1.3;
        }

        /* Linea de estado: usa el mismo ancho visual que las imagenes superiores, que ocupan el 45% + 45%. */
        .bascula-status {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 6px;
            width: 90%;
            margin: 10px auto 14px auto;
        }

        /* Cada estado es una pieza independiente para que el navegador pueda ajustar bien el contenido en pantallas pequeñas. */
        .bascula-status-item {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            min-width: 0;
            min-height: 32px;
            padding: 6px 5px;
            border: 1px solid var(--sorribes-border-panel);
            border-radius: 8px;
            background: var(--sorribes-panel-background);
            color: var(--sorribes-text-strong);
            font-size: 11px;
            font-weight: 600;
            line-height: 1.1;
            text-align: center;
        }

        /* El texto puede recortarse antes de romper el ancho disponible del bloque de imagenes. */
        .bascula-status-text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* Estado correcto: fondo verde suave para indicar que funciona sin llamar demasiado la atencion. */
        .bascula-status-ok {
            border-color: var(--sorribes-success-border);
            background: var(--sorribes-success-background);
            color: var(--sorribes-success-strong);
        }

        /* Estado de error: rojo suave para que se vea rapido sin romper la estetica del panel. */
        .bascula-status-error {
            border-color: var(--sorribes-danger-border);
            background: var(--sorribes-danger-background);
            color: var(--sorribes-danger-strong);
        }

        /* Estado de aviso: se usa para casos intermedios como poco papel en la impresora. */
        .bascula-status-warning {
            border-color: var(--sorribes-warning-border);
            background: var(--sorribes-warning-background);
            color: var(--sorribes-warning-strong);
        }

        @media (max-width: 480px) {
            /* En movil se mantiene el mismo ancho que las imagenes, pero se reparte en varias filas para no aplastar los textos. */
            .bascula-status {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

        /* Ultimas pesadas: lista compacta agrupada por fecha para que cada pesada ocupe una sola linea. */
        .bascula-pesadas {
            --pesada-row-font-size: 11px;
            --pesada-label-font-size: 9px;
            --pesada-matricula-width: 82px;
            width: 100%;
            margin-top: 4px;
        }

        /* Titulo ligero para separar visualmente los estados de la actividad reciente sin ocupar mucho alto. */
        .bascula-pesadas-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 0 0 8px 0;
            color: var(--sorribes-text-strong);
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
        }

        .bascula-pesadas-title span {
            color: var(--sorribes-text-subtle);
            font-size: 11px;
            font-weight: 600;
            text-transform: none;
        }

        /* Separador de fecha: agrupa las pesadas del mismo dia sin repetir la fecha en cada registro. */
        .bascula-pesadas-fecha {
            margin: 8px 0 5px 0;
            padding: 4px 7px;
            border-radius: 5px;
            background: var(--sorribes-primary-alpha-08);
            color: var(--sorribes-primary);
            font-size: 11px;
            font-weight: 700;
            line-height: 1.2;
        }

        /* Cabecera de columnas: pone las etiquetas una sola vez encima de los valores para ganar espacio en cada fila. */
        .bascula-pesadas-header {
            display: grid;
            grid-template-columns: var(--pesada-matricula-width) repeat(5, minmax(0, 1fr)) 26px;
            align-items: center;
            gap: 7px;
            padding: 0 7px 3px 7px;
            color: var(--sorribes-text-subtle);
            font-size: var(--pesada-label-font-size);
            font-weight: 700;
            line-height: 1.1;
            text-transform: uppercase;
        }

        .bascula-pesadas-header-cell {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
        }

        .bascula-pesadas-header-cell:first-child {
            text-align: left;
        }

        /* Cada pesada queda en una sola linea: matricula, pesos, horas, diferencia y camara comparten la misma fila. */
        .bascula-pesada-row {
            display: grid;
            grid-template-columns: var(--pesada-matricula-width) repeat(5, minmax(0, 1fr)) 26px;
            align-items: center;
            gap: 7px;
            min-height: 36px;
            padding: 6px 7px;
            margin-bottom: 5px;
            border: 1px solid var(--sorribes-border-panel);
            border-radius: 8px;
            background: var(--sorribes-panel-background);
            box-shadow: 0 4px 14px var(--sorribes-primary-alpha-06);
        }

        /* Las filas vacias conservan la altura de los paneles cuando hay menos de cinco pesadas. */
        .bascula-pesada-row-empty {
            display: block;
            background: var(--sorribes-surface-table);
            box-shadow: none;
        }

        /* Bloque de matricula: tiene un ancho estable para que los datos empiecen siempre desde la izquierda de la fila. */
        .bascula-pesada-matricula {
            grid-column: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: var(--sorribes-text-strong);
            font-size: calc(var(--pesada-row-font-size) + 2px);
            font-weight: 700;
            line-height: 1.2;
            text-transform: uppercase;
        }

        /* Cada dato se mantiene compacto para que toda la informacion quepa en la misma linea. */
        .bascula-pesada-info {
            display: flex;
            align-items: center;
            gap: 3px;
            min-width: 0;
            padding: 2px 5px;
            border-radius: 5px;
            background: var(--sorribes-surface-muted);
            color: var(--sorribes-text-strong);
            font-size: var(--pesada-row-font-size);
            line-height: 1.2;
            overflow: hidden;
            justify-content: center;
        }

        /* Columnas fijas dentro de la rejilla: asi P1/H1/P2/H2/DIF quedan alineados entre filas. */
        .bascula-pesada-info-p1 {
            grid-column: 2;
        }

        .bascula-pesada-info-h1 {
            grid-column: 3;
        }

        .bascula-pesada-info-p2 {
            grid-column: 4;
        }

        .bascula-pesada-info-h2 {
            grid-column: 5;
        }

        .bascula-pesada-info-diferencia {
            grid-column: 6;
        }

        .bascula-pesada-info-value {
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Boton de camara: se empuja al final para que siempre quede alineado a la derecha de la linea. */
        .bascula-pesada-camera {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            grid-column: 7;
            width: 26px;
            height: 26px;
            border-radius: 6px;
            background: var(--sorribes-primary-alpha-08);
            color: var(--sorribes-primary);
            text-decoration: none;
        }

        .bascula-pesada-camera:hover,
        .bascula-pesada-camera:focus {
            background: var(--sorribes-primary);
            color: var(--sorribes-panel-background);
            text-decoration: none;
        }

        @media (max-width: 480px) {
            /* En movil se compacta la separacion para conservar la pesada en una sola linea. */
            .bascula-pesadas-header {
                grid-template-columns: var(--pesada-matricula-width) repeat(5, minmax(0, 1fr)) 22px;
                gap: 2px;
                padding-right: 4px;
                padding-left: 4px;
            }

            .bascula-pesada-row {
                grid-template-columns: var(--pesada-matricula-width) repeat(5, minmax(0, 1fr)) 22px;
                gap: 2px;
                padding-right: 4px;
                padding-left: 4px;
            }

            .bascula-pesada-info {
                gap: 2px;
                padding-right: 2px;
                padding-left: 2px;
            }

            .bascula-pesadas {
                --pesada-row-font-size: 9px;
                --pesada-label-font-size: 8px;
                --pesada-matricula-width: 72px;
            }

            .bascula-pesada-camera {
                width: 22px;
                height: 22px;
            }
        }

        /* Modal de fotos: fondo claro para que las imagenes se vean sobre un entorno mas limpio. */
        .modal-fotos-content {
            border: 1px solid var(--sorribes-border-panel);
            border-radius: 12px;
            background: var(--sorribes-panel-background);
            color: var(--sorribes-text-strong);
            overflow: hidden;
            box-shadow: 0 18px 45px var(--sorribes-primary-alpha-18);
        }

        /* Cabecera compacta del modal, con titulo claro y boton de cierre separado del contenido. */
        .modal-fotos-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 14px;
            border-bottom: 1px solid var(--sorribes-border-soft);
            background: linear-gradient(135deg, var(--sorribes-panel-background) 0%, var(--sorribes-surface-soft) 100%);
        }

        .modal-fotos-title {
            margin: 0;
            font-size: 15px;
            font-weight: 700;
            line-height: 1.2;
        }

        .modal-fotos-close {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border: 0;
            border-radius: 6px;
            background: var(--sorribes-primary-alpha-08);
            color: var(--sorribes-primary);
            font-size: 22px;
            line-height: 1;
            opacity: 1;
        }

        .modal-fotos-close:hover,
        .modal-fotos-close:focus {
            background: var(--sorribes-primary);
            color: var(--sorribes-panel-background);
            opacity: 1;
        }

        .modal-fotos-body {
            padding: 12px;
        }

        /* Galeria responsive: dos columnas en escritorio y una columna cuando el ancho es pequeno. */
        .modal-fotos-grid {
            display: grid;
            grid-template-columns: repeat(2, calc((100% - 10px) / 2));
            gap: 10px;
        }

        .modal-fotos-item {
            min-width: 0;
        }

        .modal-fotos-label {
            margin-bottom: 6px;
            color: var(--sorribes-text-strong);
            font-size: 12px;
            font-weight: 700;
            line-height: 1.2;
        }

        /* Marco de cada foto: no fuerza altura para conservar la proporcion real de la imagen. */
        .modal-fotos-frame {
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--sorribes-border-panel);
            border-radius: 8px;
            background: var(--sorribes-surface-muted);
            overflow: hidden;
        }

        /* La imagen ocupa todo el ancho disponible y deja crecer la altura para no recortar contenido. */
        .modal-fotos-frame img {
            display: block;
            width: 100%;
            height: auto;
            max-width: 100%;
            object-fit: contain;
        }

        .modal-fotos-empty {
            display: none;
            color: var(--sorribes-text-cool-muted);
            font-size: 13px;
            font-weight: 600;
        }

        /* Cuando no hay imagen, se oculta el img y se deja un estado vacio estable para que la cuadricula no salte. */
        .modal-fotos-item.modal-fotos-no-image img {
            display: none;
        }

        .modal-fotos-item.modal-fotos-no-image .modal-fotos-empty {
            display: block;
        }

        @media (max-width: 767px) {
            .modal-fotos-grid {
                grid-template-columns: 1fr;
            }

            .modal-fotos-frame img {
                height: auto;
            }
        }

        @media (max-width: 767px) and (orientation: landscape) {
            /* Movil girado: se recupera el 2x2 y se compacta el visor para que entren las cuatro fotos. */
            .modal-dialog {
                width: calc(100% - 12px);
                margin: 6px auto;
            }

            .modal-fotos-header {
                padding: 8px 10px;
            }

            .modal-fotos-body {
                padding: 8px;
            }

            .modal-fotos-grid {
                grid-template-columns: repeat(2, calc((100% - 6px) / 2));
                gap: 6px;
            }

            .modal-fotos-label {
                margin-bottom: 4px;
                font-size: 11px;
            }

            .modal-fotos-frame img {
                height: auto;
            }
        }

        @media (max-width: 767px) {
            body.index-modern .right_col {
                padding: 15px 12px 25px;
            }

            body.index-modern .right_col .x_panel {
                padding: 12px;
            }
        }


/* ========================================================================== */
/* Estilos migrados de legal.php                                                 */
/* ========================================================================== */

/* Este bloque conserva la composicion especifica de LEGAL. */
/* La pagina legal utiliza una composicion independiente porque debe poder consultarse sin iniciar sesion. */
        body.legal-page {
            margin: 0;
            background: var(--sorribes-page-background);
            color: var(--sorribes-text);
        }

        .legal-header {
            /* Altura compacta para mantener visible mas contenido legal al entrar. */
            padding: 12px 18px;
            background: linear-gradient(135deg, var(--sorribes-primary-dark), var(--sorribes-primary));
            color: var(--sorribes-panel-background);
            box-shadow: 0 5px 18px var(--sorribes-primary-alpha-20);
        }

        .legal-header-content,
        .legal-content {
            width: 100%;
            max-width: 980px;
            margin: 0 auto;
        }

        .legal-header-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .legal-brand {
            display: inline-flex;
            align-items: center;
            color: var(--sorribes-panel-background);
            font-size: 18px;
            font-weight: 600;
        }

        .legal-brand img {
            width: auto;
            height: 30px;
            margin-right: 8px;
        }

        .legal-back {
            padding: 6px 10px;
            border: 1px solid var(--sorribes-white-alpha-42);
            border-radius: 7px;
            background: var(--sorribes-white-alpha-08);
            color: var(--sorribes-panel-background);
            font-weight: 600;
        }

        .legal-back:hover,
        .legal-back:focus {
            border-color: var(--sorribes-panel-background);
            background: var(--sorribes-panel-background);
            color: var(--sorribes-primary);
            text-decoration: none;
        }

        .legal-content {
            padding: 32px 18px 46px;
        }

        .legal-card {
            padding: 34px 40px;
            border: 1px solid var(--sorribes-primary-border);
            border-radius: 12px;
            background: var(--sorribes-panel-background);
            box-shadow: 0 12px 30px var(--sorribes-primary-alpha-08);
        }

        .legal-card h1 {
            margin: 0 0 10px;
            color: var(--sorribes-primary);
            font-size: 30px;
        }

        .legal-card h2 {
            margin: 32px 0 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--sorribes-primary-border);
            color: var(--sorribes-primary);
            font-size: 21px;
        }

        .legal-card h3 {
            margin: 22px 0 8px;
            color: var(--sorribes-info);
            font-size: 17px;
        }

        .legal-card p,
        .legal-card li {
            font-size: 15px;
            line-height: 1.7;
        }

        .legal-card ul {
            padding-left: 22px;
        }

        .legal-summary {
            margin-bottom: 24px;
            padding: 12px 14px;
            border-left: 3px solid var(--sorribes-primary);
            border-radius: 0 7px 7px 0;
            background: var(--sorribes-primary-soft);
            color: var(--sorribes-info);
        }

        .legal-update {
            margin-top: 32px;
            color: var(--sorribes-text-muted);
            font-size: 13px;
        }

        @media (max-width: 767px) {
            .legal-header-content {
                align-items: center;
                flex-direction: row;
            }

            .legal-back {
                margin-top: 0;
                font-size: 12px;
            }

            .legal-card {
                padding: 25px 20px;
            }

            .legal-card h1 {
                font-size: 25px;
            }
        }


/* ========================================================================== */
/* Estilos migrados de login.php                                                 */
/* ========================================================================== */

/* Este bloque conserva la composicion especifica de LOGIN. */
/* La pagina ocupa toda la ventana y centra la tarjeta sin depender de tablas ni saltos de linea. */
    body.login.login-modern {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      margin: 0;
      padding: 28px 18px;
      /* El granate y el rojo vino proceden de la paleta del logotipo de SorribesApp. */
      background:
        radial-gradient(circle at 15% 15%, var(--sorribes-danger-alpha-18), var(--sorribes-transparent) 34%),
        radial-gradient(circle at 85% 85%, var(--sorribes-primary-alpha-16), var(--sorribes-transparent) 36%),
        linear-gradient(145deg, var(--sorribes-selection-soft) 0%, var(--sorribes-surface-tint) 48%, var(--sorribes-selection-border) 100%);
      color: var(--sorribes-text);
    }

    /* Las formas decorativas aportan profundidad y no interfieren con los controles del formulario. */
    .login-modern-background {
      position: fixed;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .login-modern-background:before,
    .login-modern-background:after {
      position: absolute;
      content: "";
      width: 320px;
      height: 320px;
      border: 1px solid var(--sorribes-focus-shadow);
      border-radius: 50%;
    }

    .login-modern-background:before {
      top: -150px;
      right: -80px;
    }

    .login-modern-background:after {
      bottom: -190px;
      left: -80px;
    }

    .login-modern-shell {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 430px;
    }

    /* La tarjeta concentra el acceso y utiliza una sombra ligera para separarse del fondo. */
    .login-modern-card {
      padding: 38px 38px 32px;
      border: 1px solid var(--sorribes-primary-border);
      border-radius: 18px;
      background: var(--sorribes-white-alpha-96);
      box-shadow: 0 24px 60px var(--sorribes-primary-alpha-16);
    }

    .login-modern-logo {
      display: block;
      width: 100%;
      /* Aprovecha casi todo el ancho disponible de la tarjeta sin deformar el logotipo. */
      max-width: 340px;
      height: auto;
      margin: 0 auto 28px;
    }

    .login-modern-header {
      margin-bottom: 26px;
      text-align: center;
    }

    .login-modern-header h1 {
      margin: 0 0 8px;
      color: var(--sorribes-primary);
      font-size: 25px;
      font-weight: 600;
      letter-spacing: -0.3px;
    }

    .login-modern-header p {
      margin: 0;
      color: var(--sorribes-text-muted);
      font-size: 14px;
      line-height: 1.5;
    }

    .login-modern-form-group {
      margin-bottom: 18px;
    }

    .login-modern-label {
      display: block;
      margin-bottom: 7px;
      color: var(--sorribes-text);
      font-size: 13px;
      font-weight: 600;
    }

    /* El icono y el campo comparten contenedor para aumentar la superficie visual y mantener la alineacion. */
    .login-modern-input-wrap {
      position: relative;
    }

    .login-modern-input-icon {
      position: absolute;
      top: 50%;
      left: 15px;
      z-index: 2;
      color: var(--sorribes-info);
      font-size: 16px;
      transform: translateY(-50%);
      pointer-events: none;
    }

    .login-modern-card .login-modern-input {
      width: 100%;
      height: 50px;
      margin: 0;
      padding: 10px 46px 10px 43px;
      border: 1px solid var(--sorribes-primary-border);
      border-radius: 10px;
      background: var(--sorribes-surface-warm);
      color: var(--sorribes-text);
      font-size: 16px;
      box-shadow: none;
      transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    }

    .login-modern-card .login-modern-input:focus {
      border-color: var(--sorribes-primary-accent);
      outline: 0;
      background: var(--sorribes-panel-background);
      box-shadow: 0 0 0 3px var(--sorribes-focus-shadow);
    }

    .login-modern-password-toggle {
      position: absolute;
      top: 50%;
      right: 8px;
      z-index: 3;
      width: 36px;
      height: 36px;
      padding: 0;
      border: 0;
      border-radius: 8px;
      background: var(--sorribes-transparent);
      color: var(--sorribes-text-muted);
      transform: translateY(-50%);
    }

    .login-modern-password-toggle:hover,
    .login-modern-password-toggle:focus {
      outline: 0;
      background: var(--sorribes-primary-soft);
      color: var(--sorribes-primary);
    }

    .login-modern-error {
      display: flex;
      align-items: flex-start;
      margin-bottom: 18px;
      padding: 11px 13px;
      border: 1px solid var(--sorribes-danger-border-soft);
      border-radius: 9px;
      background: var(--sorribes-danger-background);
      color: var(--sorribes-danger-muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .login-modern-error i {
      margin: 2px 8px 0 0;
    }

    .login-modern-submit {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 50px;
      margin-top: 24px;
      padding: 12px 18px;
      border: 0;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--sorribes-primary-dark), var(--sorribes-primary-accent));
      color: var(--sorribes-panel-background);
      font-size: 15px;
      font-weight: 600;
      box-shadow: 0 9px 20px var(--sorribes-primary-alpha-24);
      transition: box-shadow 0.2s ease, transform 0.2s ease;
    }

    .login-modern-submit:hover,
    .login-modern-submit:focus {
      outline: 0;
      color: var(--sorribes-panel-background);
      background: linear-gradient(135deg, var(--sorribes-primary), var(--sorribes-primary-accent));
      box-shadow: 0 11px 24px var(--sorribes-primary-alpha-30);
      transform: translateY(-1px);
    }

    .login-modern-submit:active {
      box-shadow: 0 5px 12px var(--sorribes-primary-alpha-20);
      transform: translateY(0);
    }

    .login-modern-submit i {
      margin-right: 9px;
    }

    .login-modern-footer {
      margin-top: 24px;
      padding-top: 20px;
      border-top: 1px solid var(--sorribes-primary-border);
      color: var(--sorribes-text-muted);
      font-size: 12px;
      text-align: center;
    }

    /* En moviles reducimos el marco exterior, pero conservamos controles amplios y faciles de pulsar. */
    @media (max-width: 480px) {
      body.login.login-modern {
        align-items: flex-start;
        padding: 18px 12px;
      }

      .login-modern-card {
        padding: 28px 20px 24px;
        border-radius: 14px;
      }

      .login-modern-logo {
        max-width: 290px;
        margin-bottom: 22px;
      }

      .login-modern-header {
        margin-bottom: 22px;
      }

      .login-modern-header h1 {
        font-size: 23px;
      }
    }


/* ========================================================================== */
/* Estilos migrados de taras.php                                                 */
/* ========================================================================== */

/* Este bloque conserva la composicion especifica de TARAS. */
/* Fondo suave para separar visualmente esta pantalla de la plantilla general sin tocar el resto de paginas. */
        body.taras-modern {
            background: var(--sorribes-surface-disabled);
        }

        /* Este bloque coloca el contenido principal de taras.
           En movil ocupa todo el ancho disponible y en escritorio se limita a un ancho parecido a un tercio de pantalla. */
        .tara-page {
            display: flex;
            justify-content: flex-start;
            width: 100%;
            min-height: calc(100vh - 95px);
            padding: 18px 10px 28px 10px;
        }

        /* Contenedor real de la pantalla: evita depender de columnas Bootstrap antiguas como col-xs-5,
           porque en movil dejaban la tabla demasiado estrecha. */
        .tara-shell {
            width: 100%;
            max-width: 520px;
        }

        /* En pantallas grandes usamos vw para que la caja se aproxime a un tercio del ordenador,
           pero mantenemos limites para que no quede ni demasiado estrecha ni exageradamente grande. */
        @media (min-width: 992px) {
            .tara-shell {
                width: 33vw;
                min-width: 430px;
                max-width: 620px;
            }
        }

        /* Panel modernizado: mantiene la clase x_panel de la plantilla, pero actualiza borde, sombra y respiracion. */
        .tara-panel {
            width: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            border: 1px solid var(--sorribes-border-input);
            border-radius: 8px;
            background: var(--sorribes-panel-background);
            box-shadow: 0 14px 34px var(--sorribes-primary-alpha-15);
        }

        /*
         * Cabecera independiente con el mismo lenguaje visual que usuarios.php.
         * Al vivir dentro de tara-shell comparte exactamente el ancho del panel.
         */
        .tara-page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            box-sizing: border-box;
            width: 100%;
            margin-bottom: 12px;
            padding: 14px 18px;
            border: 1px solid var(--sorribes-border-panel);
            border-radius: 14px;
            background: linear-gradient(135deg, var(--sorribes-panel-background) 0%, var(--sorribes-surface-soft) 100%);
            box-shadow: 0 8px 24px var(--sorribes-primary-alpha-07);
        }

        .tara-page-title {
            display: flex;
            align-items: center;
            min-width: 0;
        }

        /* El camion identifica visualmente que las taras pertenecen a vehiculos. */
        .tara-page-title-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            width: 40px;
            height: 40px;
            margin-right: 11px;
            border-radius: 10px;
            background: var(--sorribes-primary);
            color: var(--sorribes-panel-background);
            font-size: 18px;
        }

        .tara-page-title h1 {
            margin: 0 0 3px;
            color: var(--sorribes-text-strong);
            font-size: 21px;
            font-weight: 600;
        }

        .tara-page-title p {
            margin: 0;
            color: var(--sorribes-text-placeholder);
            font-size: 13px;
        }

        /* Boton principal de alta: se hace mas tactil que el boton xs anterior, especialmente en movil. */
        .tara-add-button {
            flex: 0 0 auto;
            margin: 0;
            min-height: 38px;
            padding: 8px 14px;
            border: 0;
            border-radius: 9px;
            background: linear-gradient(135deg, var(--sorribes-primary), var(--sorribes-primary-accent));
            color: var(--sorribes-panel-background);
            font-size: 13px;
            font-weight: 600;
            box-shadow: 0 8px 18px var(--sorribes-primary-alpha-20);
        }

        .tara-add-button:hover,
        .tara-add-button:focus {
            background: linear-gradient(135deg, var(--sorribes-primary), var(--sorribes-primary-accent));
            color: var(--sorribes-panel-background);
            box-shadow: 0 10px 22px var(--sorribes-primary-alpha-28);
            transform: translateY(-1px);
        }

        .tara-add-button i {
            margin-right: 6px;
        }

        /* El cuerpo queda separado de la cabecera para que DataTables no se pegue a los bordes del panel. */
        .tara-table-wrap {
            padding: 12px 14px 16px 14px;
        }

        /* Los controles conservan el mismo reparto visual utilizado en la tabla de usuarios. */
        .tara-table-wrap .dataTables_wrapper {
            width: 100%;
        }

        /*
         * DataTables inserta el selector y el buscador dentro de esta fila propia.
         * Las dos columnas laterales iguales hacen que el buscador quede centrado respecto a la tabla.
         */
        .tara-table-wrap .tara-controls {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: start;
        }

        .tara-table-wrap .dataTables_length {
            float: left;
            margin-bottom: 12px;
            color: var(--sorribes-text-tertiary);
            font-size: 13px;
        }

        .tara-table-wrap .dataTables_filter {
            grid-column: 2;
            float: none !important;
            margin-bottom: 12px;
            color: var(--sorribes-text-tertiary);
            font-size: 13px;
            text-align: center;
            white-space: nowrap;
        }

        .tara-table-wrap .dataTables_length select,
        .tara-table-wrap .dataTables_filter input {
            height: 34px;
            border: 1px solid var(--sorribes-border-control);
            border-radius: 7px;
            box-shadow: none;
        }

        .tara-table-wrap .dataTables_filter input {
            box-sizing: border-box;
            /* El filtro se utiliza principalmente para matriculas, por lo que no necesita un campo largo. */
            width: 115px;
            margin-left: 8px;
        }

        #datatable-l {
            width: 100% !important;
            font-size: 13px;
            margin-bottom: 0;
        }

        /* DataTables crea una segunda tabla para la cabecera cuando scrollX esta activo. */
        .tara-table-wrap table.dataTable thead th {
            padding: 10px 12px;
            font-weight: 700;
            border-bottom: 1px solid var(--sorribes-primary-deep);
            background: var(--sorribes-primary);
            color: var(--sorribes-panel-background);
            font-size: 11px;
            letter-spacing: 0.4px;
            text-transform: uppercase;
        }

        #datatable-l > tbody > tr > td {
            padding: 5px 12px;
            font-weight: 600;
            border-top: 0;
            border-bottom: 1px solid var(--sorribes-border-row);
            vertical-align: middle !important;
        }

        /* El tono visible facilita seguir una linea al recorrer la tabla. */
        #datatable-l > tbody > tr:hover > td {
            background: var(--sorribes-selection-background) !important;
            color: var(--sorribes-text-deep);
        }

        /* La linea pulsada permanece resaltada hasta seleccionar otra. */
        #datatable-l > tbody > tr.tara-row-selected > td {
            background: var(--sorribes-selection-active) !important;
            color: var(--sorribes-text-deep);
        }

        /* Las acciones reutilizan el mismo grafismo compacto de la tabla de usuarios. */
        .tara-actions {
            display: flex;
            justify-content: center;
        }

        .tara-action-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            margin-right: 6px;
            border: 1px solid var(--sorribes-border-control);
            border-radius: 8px;
            background: var(--sorribes-panel-background);
            color: var(--sorribes-text-tertiary);
            text-decoration: none;
        }

        .tara-action-link:hover,
        .tara-action-link:focus {
            border-color: var(--sorribes-primary);
            background: var(--sorribes-panel-background);
            color: var(--sorribes-primary);
            text-decoration: none;
        }

        .tara-action-delete:hover,
        .tara-action-delete:focus {
            border-color: var(--sorribes-danger);
            color: var(--sorribes-danger);
        }

        /* Modales de esta pantalla: se mantienen claros, pero con borde, sombra y separaciones mas actuales. */
        .InsModal .modal-dialog,
        .modModal .modal-dialog,
        .delModal .modal-dialog {
            width: calc(100% - 30px);
            max-width: 440px;
            margin-top: 7vh;
            margin-right: auto;
            margin-left: auto;
        }

        .delModal .modal-dialog {
            max-width: 410px;
        }

        .InsModal .modal-content,
        .modModal .modal-content,
        .delModal .modal-content {
            overflow: hidden;
            border: 1px solid var(--sorribes-primary-border);
            border-radius: 14px;
            background: var(--sorribes-panel-background);
            box-shadow: 0 22px 52px var(--sorribes-primary-alpha-24);
        }

        /* La cabecera granate conecta visualmente los modales con la tabla y el boton de alta. */
        .InsModal .modal-header,
        .modModal .modal-header,
        .delModal .modal-header {
            padding: 16px 18px;
            border-bottom: 0;
            background: var(--sorribes-primary);
        }

        .InsModal .modal-title,
        .modModal .modal-title,
        .delModal .modal-title {
            color: var(--sorribes-panel-background);
            font-size: 17px;
            font-weight: 700;
            line-height: 1.3;
        }

        /* Boton de cerrar mas limpio y con area de click comoda. */
        .InsModal .close,
        .modModal .close,
        .delModal .close {
            width: 30px;
            height: 30px;
            margin-top: -4px;
            border-radius: 50%;
            color: var(--sorribes-panel-background);
            font-size: 14px;
            line-height: 30px;
            text-align: center;
            opacity: 1;
            text-shadow: none;
        }

        .InsModal .close:hover,
        .modModal .close:hover,
        .delModal .close:hover {
            background: var(--sorribes-white-alpha-14);
            color: var(--sorribes-panel-background);
        }

        /* Cuerpo del modal: fondo claro y aire alrededor de los campos para que el formulario sea mas legible. */
        .InsModal .modal-body,
        .modModal .modal-body,
        .delModal .modal-body {
            padding: 18px;
            background: var(--sorribes-panel-background);
        }

        /* Los formularios ya estan dentro del modal, por eso quitamos el comportamiento flotante de la columna Bootstrap. */
        .InsModal .modal-body .col-md-12,
        .modModal .modal-body .col-md-12 {
            float: none;
            padding-right: 0;
            padding-left: 0;
        }

        .InsModal .form-group,
        .modModal .form-group {
            margin-bottom: 14px;
        }

        .InsModal .control-label,
        .modModal .control-label {
            margin-bottom: 6px;
            color: var(--sorribes-primary);
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
        }

        /* Campos con fondo claro y borde suave, manteniendo la clase form-control de Bootstrap. */
        .InsModal .form-control,
        .modModal .form-control {
            height: 38px;
            border: 1px solid var(--sorribes-border-input);
            border-radius: 6px;
            background: var(--sorribes-surface-input);
            color: var(--sorribes-text-strong);
            box-shadow: none;
        }

        .InsModal .form-control:focus,
        .modModal .form-control:focus {
            border-color: var(--sorribes-primary-accent);
            background: var(--sorribes-panel-background);
            box-shadow: 0 0 0 3px var(--sorribes-focus-shadow);
        }

        .modModal .form-control[readonly] {
            background: var(--sorribes-surface-disabled);
            color: var(--sorribes-text-subtle);
        }

        /* Pie del modal: mantiene el fondo claro y alinea las acciones con separacion uniforme. */
        .InsModal .modal-footer,
        .modModal .modal-footer,
        .delModal .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            padding: 14px 18px;
            border-top: 1px solid var(--sorribes-border-footer);
            background: var(--sorribes-surface-footer);
        }

        .InsModal .modal-footer .btn,
        .modModal .modal-footer .btn,
        .delModal .modal-footer .btn {
            min-height: 34px;
            margin: 0;
            padding: 7px 13px;
            border-radius: 6px;
            font-weight: 700;
        }

        .InsModal .btn-dark,
        .modModal .btn-dark {
            border-color: var(--sorribes-primary);
            background: linear-gradient(135deg, var(--sorribes-primary), var(--sorribes-primary-accent));
            color: var(--sorribes-panel-background);
        }

        .InsModal .btn-dark:hover,
        .modModal .btn-dark:hover {
            border-color: var(--sorribes-primary);
            background: linear-gradient(135deg, var(--sorribes-primary), var(--sorribes-primary-accent));
            color: var(--sorribes-panel-background);
        }

        /* La accion destructiva mantiene su significado, pero comparte forma y proporciones con el resto. */
        .delModal .btn-danger {
            border-color: var(--sorribes-danger);
            background: var(--sorribes-danger);
        }

        .delModal .modal-body p:first-of-type {
            margin-bottom: 8px;
            color: var(--sorribes-text-strong);
        }

        /* Ajuste movil: mantenemos el mismo aspecto de tabla que en ordenador,
           pero dejamos el contenedor a pantalla completa para que se aproveche todo el ancho del telefono. */
        @media (max-width: 767px) {
            .right_col {
                padding: 10px 0 0 0 !important;
            }

            .tara-page {
                min-height: calc(100vh - 70px);
                padding: 10px;
            }

            .tara-shell {
                max-width: none;
            }

            .tara-panel {
                min-height: calc(100vh - 70px);
            }

            .tara-page-header {
                align-items: flex-start;
                flex-direction: column;
                margin: 0 0 14px;
                width: 100%;
                padding: 14px;
            }

            .tara-page-title h1 {
                font-size: 20px;
            }

            .tara-add-button {
                justify-content: center;
                width: 100%;
                margin-top: 10px;
                min-height: 38px;
            }

            .tara-table-wrap {
                padding: 10px 10px 16px 10px;
            }

            /* Controles de DataTables en una sola columna para que buscar y cambiar pagina no estrechen la vista movil. */
            .tara-table-wrap .dataTables_length,
            .tara-table-wrap .dataTables_filter,
            .tara-table-wrap .dataTables_info,
            .tara-table-wrap .dataTables_paginate {
                float: none !important;
                width: 100%;
                text-align: left;
            }

            .tara-table-wrap .dataTables_filter {
                grid-column: auto;
            }

            .tara-table-wrap .tara-controls {
                display: block;
            }

            .tara-table-wrap .dataTables_filter label,
            .tara-table-wrap .dataTables_length label {
                width: 100%;
            }

            /* El input de busqueda queda en la misma linea que "Buscar:" sin salirse del panel. */
            .tara-table-wrap .dataTables_filter input {
                width: calc(100% - 54px) !important;
                max-width: 100%;
                margin-left: 6px;
                box-sizing: border-box;
            }

            .tara-table-wrap .dataTables_length select {
                margin: 0 6px;
            }

            /* En movil el modal respeta un pequeno margen lateral para que no toque los bordes de la pantalla. */
            .InsModal .modal-dialog,
            .modModal .modal-dialog,
            .delModal .modal-dialog {
                margin: 12px;
            }

            .InsModal .modal-header,
            .modModal .modal-header,
            .delModal .modal-header,
            .InsModal .modal-body,
            .modModal .modal-body,
            .delModal .modal-body,
            .InsModal .modal-footer,
            .modModal .modal-footer,
            .delModal .modal-footer {
                padding-right: 14px;
                padding-left: 14px;
            }

            .InsModal .modal-footer,
            .modModal .modal-footer,
            .delModal .modal-footer {
                flex-direction: column;
            }

            .InsModal .modal-footer .btn,
            .modModal .modal-footer .btn,
            .delModal .modal-footer .btn {
                width: 100%;
            }
        }

        /* En movil horizontal hay espacio suficiente para conservar selector y buscador en una sola linea. */
        @media (orientation: landscape) and (max-width: 950px) {
            .tara-table-wrap .tara-controls {
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: nowrap;
                column-gap: 18px;
            }

            .tara-table-wrap .dataTables_length {
                float: left !important;
                width: auto;
                white-space: nowrap;
            }

            .tara-table-wrap .dataTables_filter {
                float: right !important;
                width: auto;
                white-space: nowrap;
                text-align: right;
            }

            .tara-table-wrap .dataTables_filter label,
            .tara-table-wrap .dataTables_length label {
                width: auto;
            }

            .tara-table-wrap .dataTables_filter input {
                width: 115px !important;
                margin: 0 0 0 8px;
            }
        }


/* ========================================================================== */
/* Estilos migrados de usuarios.php                                              */
/* ========================================================================== */

/* Este bloque conserva la composicion especifica de USUARIOS. */
/* La modernizacion se limita a esta pagina para conservar el resto de tablas del tema. */
        body.usuarios-modern .right_col {
            padding: 24px 24px 34px;
            background: var(--sorribes-page-background-alt);
        }

        .usuarios-page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            /*
             * La cabecera comparte el ancho exterior del panel de usuarios.
             * border-box incluye padding y borde dentro de los 760 px para que
             * ambos contenedores terminen exactamente en la misma posicion.
             */
            box-sizing: border-box;
            width: 760px;
            max-width: 100%;
            margin-bottom: 12px;
            padding: 14px 18px;
            border: 1px solid var(--sorribes-border-panel);
            border-radius: 14px;
            background: linear-gradient(135deg, var(--sorribes-panel-background) 0%, var(--sorribes-surface-soft) 100%);
            box-shadow: 0 8px 24px var(--sorribes-primary-alpha-07);
        }

        .usuarios-page-title {
            display: flex;
            align-items: center;
        }

        .usuarios-page-title-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            width: 40px;
            height: 40px;
            margin-right: 11px;
            border-radius: 10px;
            background: var(--sorribes-primary);
            color: var(--sorribes-panel-background);
            font-size: 18px;
        }

        .usuarios-page-title h1 {
            margin: 0 0 3px;
            color: var(--sorribes-text-strong);
            font-size: 21px;
            font-weight: 600;
        }

        .usuarios-page-title p {
            margin: 0;
            color: var(--sorribes-text-placeholder);
            font-size: 13px;
        }

        .usuarios-add-button {
            display: inline-flex;
            align-items: center;
            min-height: 38px;
            padding: 8px 14px;
            border-radius: 9px;
            background: linear-gradient(135deg, var(--sorribes-primary), var(--sorribes-primary-accent));
            color: var(--sorribes-panel-background);
            font-size: 13px;
            font-weight: 600;
            box-shadow: 0 8px 18px var(--sorribes-primary-alpha-20);
        }

        .usuarios-add-button i {
            margin-right: 8px;
        }

        .usuarios-add-button:hover,
        .usuarios-add-button:focus {
            color: var(--sorribes-panel-background);
            text-decoration: none;
            box-shadow: 0 10px 22px var(--sorribes-primary-alpha-28);
            transform: translateY(-1px);
        }

        .usuarios-panel {
            display: inline-block;
            /* Un ancho definido evita el calculo circular entre la tabla y el contenedor de DataTables. */
            width: 760px;
            min-width: 0;
            max-width: 100%;
            padding: 0;
            overflow: hidden;
            border: 1px solid var(--sorribes-border-panel);
            border-radius: 14px;
            background: var(--sorribes-panel-background);
            box-shadow: 0 10px 28px var(--sorribes-primary-alpha-07);
        }

        .usuarios-panel .x_title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 0;
            margin: 0;
            padding: 20px 24px;
            border-bottom: 1px solid var(--sorribes-border-soft);
            background: var(--sorribes-panel-background);
        }

        .usuarios-panel .x_title h2 {
            float: none;
            margin: 0;
            color: var(--sorribes-text-strong);
            font-size: 18px;
            font-weight: 600;
        }

        .usuarios-panel .x_title p {
            margin: 5px 0 0;
            color: var(--sorribes-text-placeholder);
            font-size: 13px;
        }

        .usuarios-count {
            flex: 0 0 auto;
            padding: 6px 11px;
            border-radius: 16px;
            background: var(--sorribes-surface-control);
            color: var(--sorribes-text-tertiary);
            font-size: 12px;
            font-weight: 600;
        }

        .usuarios-panel .x_content {
            float: none;
            padding: 0;
        }

        .usuarios-panel-column {
            width: auto;
            max-width: 100%;
        }

        .usuarios-table-wrap {
            width: 100%;
            max-width: 100%;
            /* En escritorio la tabla forma parte del ancho del panel y no necesita una barra propia. */
            overflow-x: hidden;
        }

        /* Los controles de DataTables se mantienen dentro del ancho real del panel. */
        .usuarios-panel .dataTables_wrapper {
            box-sizing: border-box;
            width: 100%;
            padding: 0;
        }

        /*
         * El espacio se aplica a las filas de controles y no al contenedor completo.
         * De este modo los 720 px minimos de la tabla no reciben otros 36 px adicionales.
         */
        .usuarios-panel .dataTables_wrapper > .row {
            margin-right: 0;
            margin-left: 0;
            padding-right: 18px;
            padding-left: 18px;
        }

        .usuarios-panel .dataTables_wrapper > .row:first-child {
            /*
             * La primera fila reserva una zona izquierda para el selector y otra central para buscar.
             * Se anulan los anchos de Bootstrap para que el buscador se centre respecto a todo el panel.
             */
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: start;
            padding-top: 16px;
        }

        .usuarios-panel .dataTables_wrapper > .row:first-child > div:first-child {
            grid-column: 1;
            width: auto;
        }

        .usuarios-panel .dataTables_wrapper > .row:first-child > div:last-child {
            grid-column: 2;
            width: auto;
        }

        .usuarios-panel .dataTables_wrapper > .row:first-child > div {
            float: none;
            padding-right: 0;
            padding-left: 0;
        }

        .usuarios-panel .dataTables_filter {
            text-align: center;
        }

        .usuarios-panel .dataTables_length,
        .usuarios-panel .dataTables_filter {
            margin-bottom: 14px;
            color: var(--sorribes-text-tertiary);
            font-size: 13px;
        }

        .usuarios-panel .dataTables_length select,
        .usuarios-panel .dataTables_filter input {
            height: 34px;
            border: 1px solid var(--sorribes-border-control);
            border-radius: 7px;
            box-shadow: none;
        }

        .usuarios-panel .dataTables_filter input {
            box-sizing: border-box;
            width: 190px;
            margin-left: 8px;
        }

        .usuarios-panel .dataTables_info,
        .usuarios-panel .dataTables_paginate {
            padding-top: 14px;
            padding-bottom: 16px;
            color: var(--sorribes-text-subtle);
            font-size: 12px;
        }

        /* DataTables anade sus indicadores sobre estas dos cabeceras ordenables. */
        .usuarios-table thead th.sorting,
        .usuarios-table thead th.sorting_asc,
        .usuarios-table thead th.sorting_desc {
            cursor: pointer;
        }

        .usuarios-table {
            width: 100% !important;
            min-width: 0;
            margin: 0;
            border-collapse: separate;
            border-spacing: 0;
            table-layout: auto;
        }

        .usuarios-table thead th {
            padding: 13px 18px;
            border-bottom: 1px solid var(--sorribes-primary-deep);
            background: var(--sorribes-primary);
            color: var(--sorribes-panel-background);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.4px;
            text-transform: uppercase;
        }

        .usuarios-table > tbody > tr > td {
            /*
             * Se usa el mismo nivel de detalle que Bootstrap para asegurar la alineacion vertical.
             * El menor relleno y los controles compactos reducen claramente la altura de cada fila.
             */
            padding: 5px 18px;
            border-top: 0;
            border-bottom: 1px solid var(--sorribes-border-row);
            color: var(--sorribes-text-secondary);
            vertical-align: middle !important;
            white-space: nowrap;
        }

        .usuarios-table tbody tr:last-child td {
            border-bottom: 0;
        }

        /* El contraste mas marcado permite identificar claramente la fila bajo el puntero. */
        .usuarios-table tbody tr:hover td {
            background: var(--sorribes-selection-background);
            color: var(--sorribes-text-deep);
        }

        /* La fila pulsada conserva un tono mas intenso hasta seleccionar otra. */
        .usuarios-table tbody tr.usuarios-row-selected td {
            background: var(--sorribes-selection-active);
            color: var(--sorribes-text-deep);
        }

        .usuarios-user {
            display: flex;
            align-items: center;
            font-weight: 600;
        }

        .usuarios-avatar {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            width: 26px;
            height: 26px;
            margin-right: 8px;
            border-radius: 50%;
            background: var(--sorribes-primary-alpha-09);
            color: var(--sorribes-primary);
        }

        .usuarios-password-wrap {
            display: inline-flex;
            align-items: center;
            min-width: 130px;
            /* La clave se presenta como una etiqueta compacta, no como un campo de formulario. */
            padding: 2px 7px;
            border: 1px solid var(--sorribes-border-panel);
            border-radius: 6px;
            background: var(--sorribes-surface-neutral);
            font-family: monospace;
            line-height: 17px;
        }

        .usuarios-password-wrap .password {
            min-width: 86px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .usuarios-password-wrap .toggle-pass {
            margin-left: 8px;
            color: var(--sorribes-text-subtle);
            cursor: pointer;
        }

        .usuarios-actions {
            white-space: nowrap;
        }

        .usuarios-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            margin-right: 6px;
            border: 1px solid var(--sorribes-border-control);
            border-radius: 8px;
            background: var(--sorribes-panel-background);
            color: var(--sorribes-text-tertiary);
        }

        .usuarios-action:hover,
        .usuarios-action:focus {
            border-color: var(--sorribes-primary);
            color: var(--sorribes-primary);
            text-decoration: none;
        }

        .usuarios-action-delete:hover,
        .usuarios-action-delete:focus {
            border-color: var(--sorribes-danger);
            color: var(--sorribes-danger);
        }

        .usuarios-empty {
            padding: 45px 20px;
            color: var(--sorribes-text-placeholder);
            text-align: center;
        }

        .usuarios-empty i {
            display: block;
            margin-bottom: 10px;
            font-size: 28px;
        }

        @media (max-width: 767px) {
            body.usuarios-modern .right_col {
                padding: 15px 12px 25px;
            }

            .usuarios-page-header {
                align-items: flex-start;
                flex-direction: column;
                padding: 14px;
            }

            .usuarios-add-button {
                width: 100%;
                margin-top: 10px;
                justify-content: center;
            }

            .usuarios-page-title h1 {
                font-size: 20px;
            }

            .usuarios-panel .x_title {
                padding: 16px;
            }

            .usuarios-panel {
                width: 100%;
                min-width: 0;
            }

            .usuarios-panel .dataTables_wrapper {
                width: 100%;
                min-width: 0;
                padding: 0;
            }

            .usuarios-panel .dataTables_wrapper > .row {
                padding-right: 12px;
                padding-left: 12px;
            }

            .usuarios-panel .dataTables_wrapper > .row:first-child {
                display: block;
                padding-top: 14px;
            }

            .usuarios-panel .dataTables_wrapper > .row:first-child > div:first-child,
            .usuarios-panel .dataTables_wrapper > .row:first-child > div:last-child {
                width: 100%;
            }

            .usuarios-panel .dataTables_filter,
            .usuarios-panel .dataTables_length {
                text-align: left;
            }

            .usuarios-panel .dataTables_filter input {
                width: 100%;
                margin: 6px 0 0;
            }

            /* En movil se mantiene el desplazamiento para conservar todas las columnas en una linea. */
            .usuarios-table-wrap {
                overflow-x: auto;
            }

            .usuarios-table {
                min-width: 720px;
            }
        }

        /*
         * En un telefono girado hay anchura suficiente para mantener ambos controles en una linea.
         * Esta regla tambien cubre dispositivos cuyo ancho horizontal supera el corte movil de Bootstrap.
         */
        @media (orientation: landscape) and (max-width: 950px) {
            .usuarios-panel .dataTables_wrapper > .row:first-child {
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: nowrap;
                column-gap: 18px;
            }

            .usuarios-panel .dataTables_wrapper > .row:first-child > div:first-child,
            .usuarios-panel .dataTables_wrapper > .row:first-child > div:last-child {
                flex: 0 1 auto;
                width: auto;
            }

            .usuarios-panel .dataTables_length,
            .usuarios-panel .dataTables_filter {
                margin-bottom: 14px;
                white-space: nowrap;
            }

            .usuarios-panel .dataTables_filter {
                text-align: right;
            }

            .usuarios-panel .dataTables_filter input {
                width: 170px;
                margin: 0 0 0 8px;
            }
        }

/* ========================================================================== */
/* Cabeceras en movil horizontal                                              */
/* ========================================================================== */

/*
 * En orientacion vertical las acciones se apilan para conservar legibilidad.
 * Al girar el telefono existe ancho suficiente para mantener titulo y elemento
 * derecho en una sola linea, evitando una altura innecesaria en la cabecera.
 */
@media (orientation: landscape) and (max-width: 950px) {
    .listados-page-header,
    .adduser-page-header,
    .ajustes-page-header,
    .alertas-page-header,
    .config-page-header,
    .deluser-page-header,
    .edituser-page-header,
    .tara-page-header,
    .usuarios-page-header {
        align-items: center;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 14px;
    }

    .listados-page-title,
    .adduser-page-title,
    .ajustes-page-title,
    .alertas-page-title,
    .config-page-title,
    .deluser-page-title,
    .edituser-page-title,
    .tara-page-title,
    .usuarios-page-title {
        flex: 1 1 auto;
        min-width: 0;
    }

    .listados-page-badge,
    .ajustes-page-badge,
    .alertas-page-badge,
    .config-page-badge,
    .adduser-back-button,
    .deluser-back-button,
    .edituser-back-button,
    .tara-add-button,
    .usuarios-add-button {
        flex: 0 0 auto;
        width: auto;
        margin-top: 0;
        white-space: nowrap;
    }
}