@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap");

/*
============================================================================================================================
    MAPA DEL CSS
======================================
    01. Base general
    02. Login
    03. Botones globales
    04. Selector de sucursal
    05. Mensajes flotantes
    06. Layout principal
    07. Header
    08. Footer
    09. Top menu
    10. Modales
    11. Botones de acciones
    12. Calendario
    13. Relaciones
    14. Sucursales y usuarios
    15. Proveedores
    16. Busqueda y paginacion
    17. Usuarios
    18. Responsive general
    19. Pantallas de gestion
    20. Modales de gestion
    21. Tablas responsivas
============================================================================================================================
*/

/*
============================================================================================================================
    01. BASE GENERAL
======================================
*/
/* Ajuste compacto general.
   Baja suavemente las medidas en rem sin redisenar las pantallas. */
html {
    font-size: 15px;
}

body{
    margin: 0;
    box-sizing: border-box;
	font-family: Inter, "Segoe UI", Arial, sans-serif;
}

/* Alto maximo del desplegable personalizado de sucursales.
   Para hacerlo mas bajo o mas alto, cambia solo este valor. */
:root{
    --agency-dropdown-height: 12rem;
}

.div_menu{
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 100vh;
}
.div_filter{ display: flex; backdrop-filter: blur(6px); background: rgba(255, 255, 255, .86); }

/*
============================================================================================================================
    01.1 MODO RENDIMIENTO
======================================
*/
html.tallerpro-performance-mode .div_filter,
html.tallerpro-performance-mode .table_login,
html.tallerpro-performance-mode .header_menu,
html.tallerpro-performance-mode .general_footer,
html.tallerpro-performance-mode .menu_tool,
html.tallerpro-performance-mode .menu_tool_lateral,
html.tallerpro-performance-mode .modal-fondo,
html.tallerpro-performance-mode .user-confirm-modal {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.tallerpro-performance-mode .div_filter {
    background: rgba(255, 255, 255, .92);
}

html.tallerpro-performance-mode .header_menu {
    background-color: rgba(255, 255, 255, .94);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
}

html.tallerpro-performance-mode .menu_tool,
html.tallerpro-performance-mode .menu_tool_lateral,
html.tallerpro-performance-mode .general_footer {
    background-color: rgba(0, 103, 148, .96);
}

html.tallerpro-performance-mode .modal-fondo,
html.tallerpro-performance-mode .user-confirm-modal {
    background: rgba(0, 13, 38, .84);
}

html.tallerpro-performance-mode .logo,
html.tallerpro-performance-mode .logout_ico:hover {
    filter: none;
}

html.tallerpro-performance-mode .btn_icon,
html.tallerpro-performance-mode .btn_add,
html.tallerpro-performance-mode .edit,
html.tallerpro-performance-mode .disable,
html.tallerpro-performance-mode .view {
    transition-duration: .12s !important;
}

/*
============================================================================================================================
    02. LOGIN
======================================
*/
.backpaper{
	background-image: url('../backpaper3.png');
	background-attachment: scroll;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.login{
	color: white;
	text-align: center;
}
.table_login{
	color: white;
	text-align: center;
	width: 30rem;
	border: solid rgba(255, 255, 255, 0.3) 1px;
	border-radius: 10px;
	margin-left: -9px;
	background-color: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(6px);
	padding: 1rem;
	box-shadow: 0px 8px 24px rgba(0, 0, 0, .42);
}
.table_login_input{
	color: white;
	width: 60%;
	border-radius: 30px;
	border: solid black 1px;
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 1rem;
	background-color: rgba(0, 0, 0, 0);
	border: solid rgba(0, 0, 0, 0);
	border-bottom: solid rgba(255, 255, 255, 0.8) 1px;
}
.table_login_input::placeholder {
    color: rgba(255, 255, 255, 0.6);
    opacity: 1;
}
.check_view_pass{ width: 1.2rem; height: 1.2rem; cursor: pointer; accent-color: rgba(0, 103, 148, 1); }

.td_show_pass { padding: 0.5rem 1rem 1rem; }
.show_pass_box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    color: white;
    font-size: 1rem;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
}
.show_pass_box span { padding: 0; }

.divbutton1{ display: flex; align-items: center; justify-content: center; }
.tdlogin{ padding:1rem; }
.trlogin{ background-color: rgba(0, 103, 148, 0.5); }
.tdth{ border-radius: 10px; color: white; text-align: center; }
.divforgot_pass{ padding-top: 25px; }
.aforgot_pass{ color: white; text-decoration: none; text-shadow: 0px 2px 2px black; }
.aforgot_pass:hover{ color: orange; }
.content{ display: grid; place-items: center; height: 100vh; }
.div_content{ backdrop-filter: blur(10px); background-size: cover; }

.title_table{
	background: rgba(0, 103, 148, 0.8);
	border-radius: 8px 8px 0 0;
	color: white; padding: 0.65rem;
}

/*
============================================================================================================================
    03. BOTONES GLOBALES
======================================*/
.th{
	border: none;
	border-bottom: solid 1px;
}
.btn_add{
	text-decoration: none;

	background: white;
	color: green;
	font-weight: bold;
	letter-spacing: 0.8px;
	width: 8.3rem;
	height: 2.3rem;
	border-radius: 7px;
	overflow: hidden;
	cursor: pointer;
	transition: .3s ease;
	text-align: center;
	border: solid 1px black;
	left: 85%;
}

/*
	Aqui vivia el brillo diagonal `.btn_add::before` (copiado de .btn_login/.btn_s), pero sin el
	`position: absolute` que si tienen esos dos, y `.btn_add` tampoco es un contenedor posicionado
	(su `left: 85%` de arriba esta muerto: el boton nunca deja de ser `position: static`).
	Como ademas `.btn_add` es `display: inline-flex` (bloque moderno, mas abajo), el pseudo-elemento
	no quedaba superpuesto sino que se volvia un ITEM FLEX mas: una franja vacia de `width: 60%`
	+ el `gap: 8px` del boton, delante del icono y del texto. Es decir, cada boton "Agregar",
	"Guardar" o "Cancelar" perdia hasta 60% de su ancho en espacio muerto y, con
	`overflow: hidden`, recortaba su propio texto.
	Se elimina el efecto (y su `:hover::before`) en vez de posicionarlo: `.btn_add` ya se rediseño
	plano, sin brillo, en el bloque moderno; .btn_login conserva el suyo, que si funciona.
*/

.btn_add:hover{
	background: rgba(0, 153, 6, 1.0) !important;
	color: white;
	box-shadow: 0px 0px 15px greenyellow !important;
	transform: translateY(-2px);
}
.grp{ color: rgba(0, 6, 153, 1.0); }
.grp:hover{ background: rgba(0, 6, 253, 1.0); box-shadow: 0 0 15px skyblue; }
.centercheck{ place-items: center; }

#agency-group-agencies-list {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #bfbfbf;
    border-radius: 8px;
    padding: 8px;
    background: #f5f5f5;
}
#agency-group-agencies-list.view-only label,
#agency-group-agencies-list.view-only .centercheck:hover {
    pointer-events: none; cursor: not-allowed;
}
#agency-group-agencies-list .check_view_pass {
    accent-color: rgba(127, 127, 181, 1);
}

.agency-group-search {
    margin-bottom: 8px;
}

.agency-group-agency-option {
    padding: 3px 2px;
}

.agency-group-agency-option[hidden] {
    display: none !important;
}

.agency-group-empty {
    margin: 8px 0 0 0;
    color: rgba(90, 90, 90, 1);
    font-weight: bold;
    text-align: center;
}

/* Button de login */
.btn_login{
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	background: linear-gradient(135deg, #ffffff, #dcdcdc);
	color: rgba(0,69,99,1);
	font-weight: bold;
	letter-spacing: 1px;
	width: 8.5rem;
	height: 2.3rem;
	border-radius: 8px;
	box-sizing: border-box;
	margin: 0.7rem;
	position: relative;
	overflow: hidden;
	box-shadow: 0 6px 15px rgba(0,0,0,.45);
	transition: background .3s ease, color .3s ease, box-shadow .3s ease, transform .2s ease;
	cursor: pointer;
	border: solid transparent;
	padding-left: 8.5rem;
	padding-right: 8.5rem;
}

.btn_login::before{
	content: "";
	position: absolute;
	top: 0;
	left: -130%;
	width: 60%;
	height: 100%;
	background: rgba(255,255,255,.35);
	transform: skewX(-25deg);
	transition: left .55s ease;
	pointer-events: none;
}

.btn_login:hover{
	background: linear-gradient(135deg, rgba(0,103,148,1), rgba(0,160,190,1));
	color: white;
	box-shadow: 0 0 22px rgba(0,255,255,.45);
}

.btn_login:hover::before{ left: 150%; }
.login_icons{ margin-right: 1rem; }

/*
============================================================================================================================
    04. SELECTOR DE SUCURSAL
======================================
Selector personalizado de sucursal.
Se usa para controlar el alto real del desplegable, cosa que el <select> nativo no permite bien.
*/
.agency-select{
    position: relative;
    width: min(21rem, 100%);
    margin: 0 auto;
}

/* Boton visible del selector. */
.agency-select__button{
    width: 100%;
    height: 2.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    box-sizing: border-box;
    padding: 0 2.2rem 0 1rem;
    color: white;
    background: rgba(0, 103, 148, 0.8);
    border: 2px solid white;
    border-radius: 10px;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
}

/* Color de sucursal de sesión */
#current-agency-name { color: green; font-weight: bold; }

/* Flecha visual del desplegable. */
.agency-select__button::after{
    content: "";
    position: absolute;
    right: 1rem;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(45deg);
}

.agency-select__button:focus{
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 2px;
}

.agency-select__button:disabled{
    cursor: not-allowed;
    opacity: 0.65;
}

/* Evita que nombres largos rompan el boton. */
.agency-select__text{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Lista desplegable.
   Aqui esta el control del alto: max-height usa --agency-dropdown-height. */
.agency-select__list{
    position: absolute;
    z-index: 50;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: var(--agency-dropdown-height);
    overflow-y: auto;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: white;
    color: black;
    border: 1px solid rgba(0, 103, 148, 0.55);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

.agency-select__list[hidden]{
    display: none;
}

/* Buscador dentro del selector personalizado de sucursal. */
.agency-select__search-row {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 6px;
    background: white;
}

.agency-select__search {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border: solid 1px rgba(0, 103, 148, 0.55);
    border-radius: 7px;
    box-sizing: border-box;
    font: inherit;
}

.agency-select__search:focus {
    outline: none;
    border-color: rgba(0, 103, 148, 1);
    box-shadow: 0 0 8px rgba(0, 103, 148, 0.3);
}

.agency-select__empty {
    padding: 9px;
    color: rgba(100, 100, 100, 1);
    font-weight: bold;
    text-align: center;
}

/* Cada sucursal dentro del desplegable. */
.agency-select__option{
    padding: 8px 12px;
    color: black;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}

/* Resalte al pasar el mouse, navegar con teclado o seleccionar. */
.agency-select__option:hover,
.agency-select__option:focus,
.agency-select__option.is-selected{
    background: rgba(0, 103, 148, 0.9);
    color: white;
    outline: none;
}

/* Select nativo con buscador.
   El select real queda oculto, pero sigue guardando el valor del formulario. */
.tallerpro-native-select {
    position: absolute;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
    pointer-events: none;
}

.tallerpro-select-wrap {
    position: relative;
    width: 100%;
}

.tallerpro-select-field {
    width: 100%;
    min-height: 38px;
    padding: 7px 34px 7px 10px;
    border: solid 1px rgba(204, 204, 204, 1);
    border-radius: 8px;
    box-sizing: border-box;
    background: white;
    color: black;
    cursor: pointer;
    font: inherit;
    text-align: center;
}

.tallerpro-select-wrap::after {
    content: "";
    position: absolute;
    right: 13px;
    top: 19px;
    width: 7px;
    height: 7px;
    border-right: solid 2px rgba(0, 69, 99, 0.85);
    border-bottom: solid 2px rgba(0, 69, 99, 0.85);
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
}

.tallerpro-select-field:focus,
.tallerpro-select-wrap.is-open .tallerpro-select-field {
    outline: none;
    border-color: rgba(0, 103, 148, 1);
    box-shadow: 0 0 8px rgba(0, 103, 148, 0.32);
}

.tallerpro-select-wrap.is-empty .tallerpro-select-field {
    color: rgba(120, 120, 120, 1);
}

.tallerpro-select-wrap.is-disabled .tallerpro-select-field {
    background: rgba(245, 245, 245, 1);
    color: rgba(80, 80, 80, 1);
    cursor: default;
    opacity: 1;
}

.tallerpro-select-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 10005;
    padding: 7px;
    border: solid 1px rgba(0, 103, 148, 0.55);
    border-radius: 8px;
    background: white;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.25);
}

.tallerpro-select-panel[hidden] {
    display: none;
}

.tallerpro-select-list {
    max-height: 11rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.tallerpro-select-option {
    width: 100%;
    min-height: 32px;
    padding: 7px 9px;
    border: none;
    border-radius: 6px;
    background: white;
    color: black;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.tallerpro-select-option.is-sticky-option {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: 4px;
    border-top: solid 1px rgba(0, 103, 148, 0.25);
    box-shadow: 0 -6px 10px rgba(255, 255, 255, 0.9);
    font-weight: bold;
}

.tallerpro-select-option-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
}

/* Oculta las filas completas del select de grupos cuando no coinciden con la busqueda. */
.tallerpro-select-option-row[hidden] {
    display: none !important;
}

.tallerpro-select-option-main {
    min-width: 0;
}

.tallerpro-select-option-vehicle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.tallerpro-select-option-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tallerpro-select-option-status {
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(220, 242, 249, 1);
    color: rgba(0, 69, 99, 1);
    font-size: 0.78rem;
    font-weight: bold;
    white-space: nowrap;
}

.tallerpro-select-option-status.is-warning {
    background: rgba(255, 239, 201, 1);
    color: rgba(128, 75, 0, 1);
}

.tallerpro-select-option-status.is-blocked {
    background: rgba(255, 224, 224, 1);
    color: rgba(144, 0, 0, 1);
}

.tallerpro-select-option:hover .tallerpro-select-option-status,
.tallerpro-select-option:focus .tallerpro-select-option-status,
.tallerpro-select-option.is-selected .tallerpro-select-option-status {
    background: rgba(255, 255, 255, 0.95);
}

.tallerpro-select-agencies-btn {
    min-width: 42px;
    height: 28px;
    padding: 0 8px;
    border: solid 1px rgba(0, 103, 148, 0.75);
    border-radius: 6px;
    background: rgba(0, 103, 148, 0.9);
    color: white;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: bold;
}

.tallerpro-select-agencies-btn:hover,
.tallerpro-select-agencies-btn:focus {
    outline: none;
    background: rgba(0, 69, 99, 1);
}

.tallerpro-select-agencies-panel {
    grid-column: 1 / -1;
    max-height: 5.5rem;
    overflow-y: auto;
    margin: 0 0 4px 0;
    padding: 7px 9px;
    border-radius: 6px;
    background: rgba(0, 103, 148, 1);
    /*color: rgba(0, 69, 99, 1);*/
    color: white;
    font-size: 0.85rem;
    font-weight: bold;
    line-height: 1.35;
}

.tallerpro-select-agencies-list {
    display: grid;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tallerpro-select-agencies-panel[hidden] {
    display: none;
}

.tallerpro-select-option:hover,
.tallerpro-select-option:focus,
.tallerpro-select-option.is-selected {
    outline: none;
    background: rgba(0, 103, 148, 0.9);
    color: white;
}

.tallerpro-select-option:disabled {
    color: rgba(130, 130, 130, 1);
    cursor: default;
}

.tallerpro-select-empty {
    padding: 8px;
    color: rgba(100, 100, 100, 1);
    font-weight: bold;
    text-align: center;
}

.users-pagination-label .tallerpro-select-wrap {
    width: 76px;
}

.users-pagination-label .tallerpro-select-field {
    min-height: 31px;
    padding-top: 4px;
    padding-bottom: 4px;
}

/*
============================================================================================================================
    05. MENSAJES FLOTANTES
======================================
*/
.d-message{
	transition: opacity .25s ease, transform .25s ease;
    opacity: 1;
	border-radius: 10px;
    position: fixed;
    top: 12.5rem;
	left: 0;
    right: 0;
    z-index: 100000;
    text-align: center;
	margin-left: auto;
    margin-right: auto;
	width: min(34rem, calc(100vw - 2rem));
    padding: 0.85rem 1rem;
    box-sizing: border-box;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
	pointer-events: none;
    transform: translateY(0);
}
.d-message.message-success { background: #0b6b2b; }
.d-message.message-error { background: #b00020; }
.float-message { margin: 0; line-height: 1.35; }
.oculto {
	opacity: 0;
	pointer-events: none;
    transform: translateY(-8px);
}

/*
============================================================================================================================
    06. LAYOUT PRINCIPAL
======================================
*/

.bckppr_2{
    min-height: 100vh;
    width: 100%;
    margin: 0px;
}

.c_menu{
	display: grid;
    place-items: center;
    height: 100vh;
}

.table_menu{
	color: white;
	text-align: center;
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.6);
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	margin: 16px auto;
	table-layout: fixed;
	width: 35%;
	border: none;
}
.table_menu th{ height: 54px; background: rgba(0,103,148,0.6); }
.branch-section-active th{ background: rgba(0, 6, 253, 0.6); }
.branch-section-agencies th{ background: rgba(0, 153, 6, 0.6); }
.tbody{ color: black; }

.t_menu{
	padding: 1rem;
}

.t_user{
	width: 95% !important;
    min-width: 760px;
}

.t_user th{ height: 46px; }

.btn_menu{
	padding-left: 0;
	padding-right: 0;
	width: 80%;
	font-size: 1.05rem;
	height: 3.1rem;
	margin: 0rem auto;
}

option{
	border-radius:10px;
	text-align: center;
	background:white;
	color:black;
}

main{
    flex: 1;
}

.input_m{
	color: rgba(0,69,99,1);
	font-weight: bold;
	letter-spacing: 1px;
	border-radius: 8px;
	box-sizing: border-box;
	box-shadow: none;
	border: solid 2px rgba(0,69,99,1);

	padding-left: 0.5rem;
	padding-right: 0.5rem;
	width: 90%;
	font-size: 0.95rem;
	height: 2.3rem;
}

/*
============================================================================================================================
    07. HEADER
======================================
*/
.header_menu{
	position: relative;
	text-align: center;
    backdrop-filter: blur(6px);
    background-color: rgba(255, 255, 255, 0.82);
    
    padding-left: 2rem; padding-right: 3.5rem;
    border-bottom: solid 2px rgba(0, 103, 148, .8);
    box-shadow: 0px 6px 16px rgba(0, 0, 0, .22);
    display: flex;
    height: 12rem;
    flex-direction: column;
}

.div_tallerpro{ padding: 1rem; text-align: center; }
.div_tallerpro label{ padding-top: 2rem; }

.logout_ico{
    width: 45px;
    height: auto;
    z-index: 2;
}

.a_logout_ico{
    display: block;
    position: absolute;
    z-index: 2;
    left: 1.5%;
    margin-top: 20px;
    width: 60px;
    height: 45px;
}

.logout_ico:hover{ filter: drop-shadow(0px 0px 5px rgba(255, 0, 0, .65)); }

.body_menu{
    text-align: center;
    background-size: cover;
    background-position: center center;
    background-attachment: scroll;
    font-weight: bold;
}

.text_salir{
    position: absolute; left: 5.5%; font-size: 22px;
    margin-top: 2rem; color: red;
}
.text_salir a{ color: red; }
.txt_salir { color:darkgreen; text-shadow:none; }

.h1_menu   { color: rgba(0,63,108,1); font-size: 1.8rem; font-weight:bold; }
.h2-2_menu { font-size: 1.3rem; }
.h2_menu   { text-align: left; left:30px; }
.h3_menu   { text-align: right; transform:translateY(-110px); } /* ROL */

.logo_ico{
    position: absolute;
    right: 1.5rem;
    top: 2.5rem;
    border-radius: 100px;
    background: rgba(0, 103, 148, 0.7);
    z-index: 2;
}
.logo{
    width: 185px;
    filter: drop-shadow(0px 0px 7px rgba(50, 70, 70, 1));
}
.inf_log{
	transform: translateY(-70px);
	background: rgba(0,103,148,0.8);
	width: 35%;
	border-radius: 10px;
}
.inf_log h2{
	margin: 0px;
	color: white;
	padding: 0.4rem;
}

/*
============================================================================================================================
    08. FOOTER
======================================
*/
.general_footer{
    text-align: center;
    padding: 1rem;
    position: relative;
    /*
        `footer.js` inyecta un <h3> y un <h4>. Sin resetear sus margenes por defecto del navegador
        (1em y 1.33em arriba y abajo cada uno) el pie medía ~130px de alto para dos lineas de
        texto, casi todo franja azul vacia. Se compacta a una sola pila con separacion minima.
    */
    backdrop-filter: blur(6px);
    background: rgba(0, 103, 148, .86);
    border-top: solid 1px rgba(0, 103, 148, 1.0);
    font-weight: bold;
    color: white;
    clear: both;
}

.general_footer h3,
.general_footer h4 {
    margin: 0;
    line-height: 1.35;
}

.general_footer h3 { font-size: 0.92rem; }
.general_footer h4 { font-size: 0.8rem; font-weight: 600; opacity: 0.85; }

/*
============================================================================================================================
    09. TOP MENU
======================================
*/
.menu_tool{
    position: sticky;
    top: 0;
    z-index: 1000;
	text-align: center;
	margin-top: 0;
    margin-bottom: 0;
    backdrop-filter: blur(6px);
    background-color: rgba(0, 103, 148, 0.9);
    border-bottom: solid 1px rgba(0, 0, 0, .3);
}
.menu_tool .li2_menu .a2_menu{
    text-decoration: none;
    color: white;
    padding: 16px;
    padding-inline-end: 42px;
    padding-inline-start: 42px;
    display: block;
}
.menu_tool .li2_menu, .l_menu{
    display: inline-block;
    text-align: center;
}
.menu_tool .li2_menu .a2_menu:hover, .a_menu:hover{
    background: white;
    color: rgba(0, 103, 148, 1.0);
    box-shadow: 0px 4px 10px rgba(0, 103, 148, 0.35);
    border-radius: 8px;
}

/*
========================================
    MENÚ LATERAL IZQUIERDO
========================================
*/

.zones {
    width: 100%;
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 0;
    align-items: start;
}

.contenedor_menu_lateral {
    position: sticky; /* FIJA ARRIBA */
    top: 49px;
    align-self: start;
    width: 200px;
    height: calc(100vh - 49px);
    z-index: 900;
}

.menu_tool_lateral {
    /*position: static;*/   
    top: auto;
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border-radius: 0px 10px 10px 0px;
    backdrop-filter: blur(6px);
    background-color: rgba(0, 103, 148, 0.9);
}

.li3_menu {
    list-style-type: none;
    border-bottom: solid 1px rgba(255, 255, 255, 0.25);
}

.menu_tool_lateral .a3_menu{
    text-decoration: none;
    display: block;        /* Ocupa el 100% del ancho de la lista (200px) */
    width: 100%;
    box-sizing: border-box;
    text-align: center;    /* Centra el texto de cada enlace */
    padding: 15px 0;       /* Controla la altura/grosor del botón */
    color: white;
    /*border-radius: 10px;*/
    border-radius: 0px 10px 10px 0px;
    transition: 0.3s;
}

.menu_tool_lateral button.a3_menu {
    background: transparent;
    border: none;
    font: inherit;
    cursor: pointer;
    appearance: none;
}

.a3_menu:hover, .menu_tool_lateral button.a3_menu:hover {
    /*display: flex;*/
    transform: translateX(10px);
    background: rgba(255, 255, 255, 1.0);
    box-shadow: -10px 10px 10px 0px rgba(0, 0, 0, 0.35);
    color: rgba(0, 103, 148, 1.0);
}

.zones > div {
    min-width: 0;
}

/*
==============================================
             DASHBOARD GESTION
==============================================
*/
/*
    Antes tenia `display:grid; grid-template-columns: 232px minmax(0,3fr)`, pensado para una
    maquetacion antigua donde el primer hijo era el menu lateral. En m_index.html el aside ya
    vive fuera de .dashboard (ver .contenedor_menu_lateral en dashboard-layout), asi que el
    unico hijo que dashboard.js inserta (section.dashboard-live) caia en la primera columna de
    232px fijos, dejando vacia la columna de 3fr y apilando las tarjetas en una tira angosta.
*/
.dashboard{
    width: 100%;
}


/*
============================================================================================================================
    10. MODALES BASE
======================================
*/
body.sin-scroll {
    overflow: hidden;
}

/* Fondo oscuro del modal */
.modal-fondo {
    display: none;

    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100dvh;

    background: linear-gradient(135deg, rgba(0,13,38,.82), rgba(0,0,0,.82));
    backdrop-filter: blur(3px);

    z-index: 9999;
}

/* Cuando el modal esta abierto */
.modal-fondo.activo {
    display: block;
}

/* Caja del formulario */
.modal-contenido {
    position: fixed;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    background: rgba(245, 245, 245, 0.95);

    width: 560px;
    max-width: calc(100vw - 2rem);
    max-height: calc(100dvh - 2rem);

    overflow-y: auto;
    overflow-x: hidden;

    padding: 1rem;
    border-radius: 12px;
    box-sizing: border-box;

    box-shadow: 0 0 30px rgba(0,0,0,.5);
}

/* Espaciado de las celdas */
.modal-contenido td {
    padding: 6px;
}

/* Boton cerrar */
.cerrar {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    margin: 1.4rem;
    font-size: 20px;
    font-weight: bold;
    background: rgba(100, 0, 0, 0.5);
    padding: 3px 10px 5px 10px;
    border-radius: 8px;
}

.cerrar:hover {
    color: white;
    background: red;
    box-shadow: 0px 0px 20px red;
}

/* Inputs, selects */
.form_add_agent {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
}

/* Boton guardar */
.btn_save {
    width: 100%;
    background: rgba(210, 255, 210, 1.0);
    position: initial;
    left: initial;
    margin: 0;
}

@keyframes aparecer{
    from{
        transform: scale(.8);
        opacity: 0;
    }
    to{
        transform: scale(1);
        opacity: 1;
    }
}

/* Required */
.required:required{
	background: rgba(255, 245, 245, 1.0);
	border: solid rgba(255, 80, 80, 1.0) 1px;
}
.required:required:valid{
	background: white;
	border: 1px solid #ccc;
}

/*
============================================================================================================================
    11. BOTONES DE ACCIONES
======================================*/
.actions{
	padding: 8px;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    overflow: visible;
}

.btn_icon{
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    background: #8A0002;
    color: white;
    transition: .3s ease;
    position: relative;
    overflow: visible;
}

.edit{ background: #217dbb; }
.view{ background: #BD950A; color: black; }

.edit:hover{ background: #3498db; transform: translateY(-1px); box-shadow: 0px 4px 12px rgba(0, 0, 0, .28); }
.disable:hover{ background: red; transform: translateY(-1px); box-shadow: 0px 4px 12px rgba(0, 0, 0, .28); }
.view:hover{ background: #FFC90E; transform: translateY(-1px); box-shadow: 0px 4px 12px rgba(0, 0, 0, .28); }

.btn_icon:hover,
.btn_icon:focus-visible {
    z-index: 30;
}

.btn_icon[title]::before,
.btn_icon[aria-label]::before,
.btn_icon.edit::before,
.btn_icon.view::before,
.btn_icon.delete::before,
.btn_icon.disable::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #003f5f;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility .18s ease;
}

.btn_icon[title]::after,
.btn_icon[aria-label]::after,
.btn_icon.edit::after,
.btn_icon.view::after,
.btn_icon.delete::after,
.btn_icon.disable::after {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 15px);
    transform: translate(-50%, 4px);
    min-width: max-content;
    max-width: 180px;
    padding: 6px 10px;
    border-radius: 6px;
    background: #003f5f;
    color: white;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .25);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}

.btn_icon[title]::after { content: attr(title); }
.btn_icon[aria-label]:not([title])::after { content: attr(aria-label); }
.btn_icon.view:not([title]):not([aria-label])::after { content: "Ver"; }
.btn_icon.edit:not([title]):not([aria-label])::after { content: "Editar"; }
.btn_icon.disable:not([title]):not([aria-label])::after { content: "Deshabilitar"; }
.btn_icon.delete:not([title]):not([aria-label])::after { content: "Borrar"; }

.btn_icon:hover::before,
.btn_icon:focus-visible::before,
.btn_icon:hover::after,
.btn_icon:focus-visible::after {
    opacity: 1;
    visibility: visible;
}

.btn_icon:hover::after,
.btn_icon:focus-visible::after {
    transform: translate(-50%, 0);
}


/*
============================================================================================================================
    12. CALENDARIO
======================================
*/
.end_date[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(30%);
}
.end_date:hover{ cursor: pointer; }

.date-box { position: relative; width: 100%; }
.custom-calendar {
    display: none;

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 320px;
    background: #ffffff;
    border: 1px solid lightgray;
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.25);
    z-index: 99999;
}
.custom-calendar.active { display: block; }
.calendar-header {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-bottom: 15px;
    color: #111;
}
.calendar-header button {
    width: 36px; height: 36px; border: none;
    border-radius: 50%; background: rgba(0, 103, 148, .7);
    color: white; font-size: 24px;
    cursor: pointer;
}
.week-days,
.calendar-grid {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 7px; text-align: center;
}
.week-days span { font-weight: bold; color: #555; font-size: 13px; }
.calendar-grid button {
    border: none; border-radius: 10px; padding: 9px 0;
    background: #f2f2f2; cursor: pointer; font-size: 14px;
}
.calendar-grid button:hover { background: rgba(0, 103, 148, .7); color: white; }
.calendar-grid button.disabled { background: #e0e0e0;color: #aaa; cursor: not-allowed; }
.calendar-grid button.today { background: #0066ff; color: white; }
.calendar-grid button.selected { background: #00a000; color: white; }
.calendar-actions { display: flex; justify-content: space-between; margin-top: 12px; }
.calendar-actions button { border: none; background: transparent; color: #0066cc;
    font-size: 13px; cursor: pointer; padding: 5px 8px; border-radius: 6px;
}
.calendar-actions button:hover { background: #eaf2ff; }
.label-end-date{
    color: rgba(150, 70, 70, 1);
}

.calendar-header strong {
    text-align: center;
}

/*
============================================================================================================================
    13. RELACIONES
======================================
*/
.div_t_relation{ display: flex; font-weight: bold; }
.relation-menu-table{
    overflow: visible;
}

.title_table{
	padding: 1.5rem;
	font-size: 1.5rem;
	letter-spacing: 5px;
	font-weight: bold;
}
.r_select{
	cursor: pointer;
	font-weight: bold;
	width: 90%;
	font-size: 1.2rem;
	height: 3.5rem;
	margin: 1rem auto;

	color: white;
	background: rgba(0, 103, 148, 0.8);
	border: solid darkcyan 2px;
	border-radius: 10px;
}

/*
Selector visual de Tipo de Relacion.
El select real queda oculto para conservar el valor y la navegacion.
*/
.r_select.relation-native-select{
    position: absolute;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
    pointer-events: none;
}

.relation-select{
    width: 90%;
    margin: 1rem auto;
    z-index: 20;
}

.relation-select .agency-select__button{
    height: 3.5rem;
    font-size: 1.2rem;
    border: solid darkcyan 2px;
}

.relation-select .agency-select__list{
    max-height: 12rem;
    top: calc(100% + 6px);
    border-radius: 0 0 8px 8px;
    z-index: 2000;
}

.relation-select__option.is-disabled{
    color: gray;
    cursor: default;
}

.relation-select__option.is-disabled:hover,
.relation-select__option.is-disabled:focus{
    color: gray;
    background: white;
}

a{ text-decoration:none; }

.btn_s{
	width: 100%;
    height: 3.5rem;
    font-size: 1.1rem;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	background: white;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	transition: .3s ease;
	text-align: center;
	border: solid 1px black;
}

.btn_s::before{
	content: "";
	position: absolute;
	top: 0;
	left: -130%;
	width: 60%;
	height: 100%;

	background: rgba(255,255,255,.30);
	transform: skewX(-25deg);
	pointer-events: none;
}

.btn_s:hover{
	background: rgba(0, 103, 148, .8);
	color: white;
	transform: translateY(-2px);
}

.btn_s:hover::before{
	left: 150%;
	transition: left .55s ease;
}

.t_relation{
	background: rgba(255, 255, 255, 0.8);
	text-align: center;
	color: rgba(0, 103, 148, 1.0);
	width: 100% !important;
	margin-left: 3rem;
	margin-right: 3rem;
	padding: 0px;
	border-radius: 10px;
	font-size: 1.2rem;
	border-spacing: 0px;
	border: solid darkcyan 2px;
}

/*
============================================================================================================================
    14. SUCURSALES Y USUARIOS
======================================
*/
.branches-view { width: 95%; margin: 20px auto; }
.branches-view,
.users-view {
    overflow-x: auto;
}
.branches-view .table_menu {
    width: 100% !important;
    min-width: 760px;
    margin: 20px auto;
}
/*
    Ocultamiento global. Ambas reglas llevan !important a proposito:
    - `.hidden` sin !important perdia contra reglas de vista mas especificas; taller.css y
      admin-global.css ya habian tenido que parchearlo por su cuenta.
    - `[hidden]` (atributo) perdia contra el `display: inline-flex` del bloque unificado de
      botones, por lo que flota.js:415-423 ocultaba IMPORTAR CSV / AGREGAR + y seguian visibles.
*/
.hidden { display: none !important; }
[hidden] { display: none !important; }
.branches-tabs { width: 95%; margin: 10px auto; display: flex; gap: 10px;
    justify-content: center;
}
.branches-tab { border: none; border-radius: 8px; padding: 10px 18px;
    font-weight: bold; color: white; background: rgba(0,103,148,0.8);
    cursor: pointer;
}
.branches-tab.active {
    background: rgba(0,103,148,1);
    box-shadow: 0px 0px 10px rgba(0,103,148,0.7);
}
.branches-tab.danger.active {
    background: rgba(150, 30, 30, 1);
}
.branches-tab.danger {
    background: rgba(150, 30, 30, 0.8);
}
.branches-table-disabled th, .users-table-disabled th {
    background: rgba(150, 30, 30, 0.65);
}
.branches-table-disabled, .users-table-disabled {
    box-shadow: 0px 0px 15px rgba(120, 20, 20, 0.45);
}

.branch-more-count {
    display: inline-block;
    margin-top: 4px;
    color: rgba(0, 69, 99, 1);
}

/*
============================================================================================================================
    16. BUSQUEDA DE TABLAS
======================================
*/
.table-search {
    width: 95%;
    margin: 12px auto 6px auto;
    display: flex;
    justify-content: center;
}

/*
    Wrapper con lupa + boton de limpiar, mismo patron que .fleet-search-wrap (flota.css) y
    .workshop-search-wrap (taller.css), generalizado aqui porque lo usan 4 vistas distintas
    (usuarios, roles, sucursales, clients) que antes no tenian ni icono ni boton de limpiar.
*/
.table-search-wrap {
    position: relative;
    width: min(620px, 100%);
}

.table-search-wrap > i {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: var(--tp-ink-faint, rgba(0, 69, 99, 0.72));
    pointer-events: none;
}

.table-search-input {
    width: min(620px, 100%);
    height: 40px;
    padding: 0 12px;
    border: solid 1px rgba(0, 69, 99, 0.65);
    border-radius: 8px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.9);
    color: black;
    font-size: 1rem;
    font-weight: bold;
}

.table-search-wrap .table-search-input {
    width: 100%;
    padding: 0 42px 0 40px;
}

.table-search-input::-webkit-search-cancel-button {
    cursor: pointer;
    filter: hue-rotate(120deg) saturate(2);
}
.table-search-input:focus {
    outline: none;
    border-color: rgba(0, 103, 148, 1);
    box-shadow: 0px 0px 10px rgba(0, 103, 148, 0.35);
}

.table-search-clear {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 28px;
    height: 28px;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: rgba(100, 100, 100, 1);
    cursor: pointer;
}

.table-search-clear.visible {
    display: inline-flex;
}

.table-search-clear:hover {
    background: rgba(150, 30, 30, 0.10);
    color: rgba(150, 30, 30, 1);
}

/*
============================================================================================================================
    16. PAGINACION DE TABLAS
======================================
*/
.users-pagination {
    width: 95%;
    margin: -8px auto 22px auto;
    padding: 8px 12px;
    box-sizing: border-box;
    color: black;
    background: rgba(255, 255, 255, 0.72);
    border-radius: 0 0 10px 10px;
    box-shadow: 0px 7px 14px rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
}

.users-pagination.hidden {
    display: none;
}

.users-pagination.is-empty {
    display: none;
}

.users-pagination-info {
    font-weight: bold;
    color: rgba(0, 69, 99, 1);
}

.users-pagination-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.users-pagination-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: bold;
    color: rgba(0, 69, 99, 1);
}

.users-pagination-select {
    height: 31px;
    min-width: 76px;
    border: solid 1px rgba(0, 69, 99, 0.7);
    border-radius: 8px;
    background: white;
    color: black;
    font-weight: bold;
    text-align: center;
}

.users-pagination-btn {
    width: 33px;
    height: 31px;
    border: solid 1px rgba(0, 69, 99, 0.8);
    border-radius: 8px;
    background: rgba(0, 103, 148, 0.85);
    color: white;
    cursor: pointer;
}

.users-pagination-btn:hover {
    background: rgba(0, 103, 148, 1);
    box-shadow: 0px 0px 8px rgba(0, 103, 148, 0.55);
}

.users-pagination-btn:disabled {
    background: rgba(127, 127, 127, 0.55);
    border-color: rgba(127, 127, 127, 0.4);
    cursor: not-allowed;
    box-shadow: none;
}

.users-pagination-page {
    min-width: 92px;
    text-align: center;
    font-weight: bold;
    color: rgba(0, 69, 99, 1);
}

/*
============================================================================================================================
    17. USUARIOS
======================================
*/
.user-name-cell,
.user-agent-cell,
.user-role-cell {
    padding-left: 10px;
    padding-right: 10px;
    overflow-wrap: anywhere;
}

.user-email-cell {
    padding-left: 10px;
    padding-right: 10px;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.25;
    font-size: 0.95rem;
}

.user-muted-cell {
    color: rgba(90, 90, 90, 0.75);
    font-style: italic;
}

.user-action-pending {
    opacity: 0.72;
    filter: grayscale(0.25);
}

.btn_icon:disabled,
.btn_add:disabled {
    opacity: 0.65;
    cursor: wait;
    transform: none;
    box-shadow: none;
}

.user-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(0, 13, 38, 0.82), rgba(0, 0, 0, 0.82));
    backdrop-filter: blur(3px);
}

.user-confirm-modal.activo {
    display: flex;
}

.user-confirm-card {
    width: min(460px, 100%);
    color: black;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
    padding: 1.2rem;
}

.user-confirm-header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9rem;
    align-items: start;
}

.user-confirm-mark {
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(150, 30, 30, 1);
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
}

.user-confirm-modal.is-info .user-confirm-mark {
    background: rgba(0, 103, 148, 1);
}

.user-confirm-header h3 {
    margin: 0;
    color: rgba(0, 69, 99, 1);
    font-size: 1.35rem;
}

.user-confirm-header p,
.user-confirm-detail {
    margin: 0.4rem 0 0 0;
    color: rgba(50, 50, 50, 1);
    line-height: 1.4;
}

.user-confirm-detail {
    padding: 0.9rem;
    border-radius: 8px;
    background: rgba(0, 103, 148, 0.08);
    font-weight: bold;
}

.user-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.1rem;
}

.user-confirm-btn {
    min-width: 7.5rem;
    min-height: 2.4rem;
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1rem;
    font-weight: bold;
    cursor: pointer;
}

.user-confirm-btn.secondary {
    color: rgba(0, 69, 99, 1);
    background: rgba(230, 240, 245, 1);
    border: solid 1px rgba(0, 69, 99, 0.25);
}

.user-confirm-btn.primary {
    color: white;
    background: rgba(0, 103, 148, 1);
}

.user-confirm-btn.danger {
    color: white;
    background: rgba(150, 30, 30, 1);
}

.user-confirm-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.22);
}

/*
============================================================================================================================
    18. RESPONSIVE GENERAL
======================================
*/
@media (max-width: 1359px) {

    .inf_log h2{
    	background:transparent;
    	color: white;
    	font-size: 0.9rem;
		padding: 0px auto;
    }

    .inf_log{
		border-radius: 10px;
    	margin-top: 1rem;
    	padding-bottom: 0;
		background: rgba(0,103,148,0.6);
    }
    
    .header_menu{
        padding: 20px;
        padding-top: 0;
        padding-bottom: 0;
        display: flex;
        height: 140px;
    }

    .a_logout_ico{
        margin-top: 6px;
        width: auto;
    }

    .logout_ico { width:35px; }
    .h1_menu    { font-size:120%; font-weight:bold; margin:0px; }
    .h2-2_menu  { pointer-events: none; display:none; }
    .h2_hora    { font-size:120%; font-weight:bold; margin-top:-1rem; }
    .h3_menu    { display:none; pointer-events:none; }
    .sucursal   {
    	font-size: 100%; font-weight: bold;
    	display: flex; position: absolute; 
    	margin: 0px; text-align: center;
    	right: 40px;
    	top: 50px;
    }

    .logo_ico{
        background: transparent;
    }

    .logo{ width: 150px; }
    .logo_smart{ display:none; }

    .table_menu{ width: 95% !important; margin: 20px auto; }
    .table_login{ width: 100% !important; margin: 20px auto; }

    .btn_menu{
        width: 90% !important;
        height: 3.5rem;
        font-size: 1.1rem;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .t_menu{ padding: 0.5rem; }
    .text_salir{ pointer-events:none; display:none; }

    .table_login input{
		font-weight: bold;
		border-radius: 0px;
		width: 75%;
	}

	.table_login input::placeholder {
	    color: rgba(255, 255, 255, 0.6);
	    opacity: 0.5;
	}

	.menu_tool{
		margin-top: 0px;
	}

	footer{
		right: 0; left: 0;
	    font-size: 13px;
	    backdrop-filter: blur(6px);
	    background-color: rgba(255, 255, 255, 0.72);
	    font-weight: bold; color: black;
	    margin-top: 1rem;
	}

	.bckppr_3{ background: rgba(255, 255, 255, 1.0); background-image: none; }

	/* Ajustes del top menu en pantallas pequenas. */
	.menu_tool{
		padding-left: 0;
		text-align: center;
	    backdrop-filter: blur(0px);
	}
	.menu_tool .li2_menu .a2_menu{
		font-weight: bold;
	    text-decoration: none;
	    color: white;
	    padding: 20px;
	    padding-inline-end: 10px;
	    padding-inline-start: 10px;
	}
	.menu_tool .li2_menu, .l_menu{
	    display: inline-block;
	    text-align: center;
	}
}

@media (max-width: 1229px) { .btn_add{ left: 83%; } }
@media (max-width: 1024px) { .btn_add{ left: 80%; } }
@media (max-width: 1000px) { .btn_add{ left: 79%; } }
@media (max-width: 800px)  { 
	.btn_add{ left: 74%; }
	
}
@media (max-width: 700px)  { .btn_add{ left: 71%; } }
@media (max-width: 600px)  { .btn_add{ position: initial; width: 90%; }
    .inf_log{ width: 100% !important; }
    .sucursal   { left: 20px; top: 103px; }
    .header_menu{ height: 170px; }
    .users-pagination {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .users-pagination-controls {
        justify-content: center;
    }
}
@media (max-width: 360px)  {
	.menu_tool .li2_menu .a2_menu{
	    padding: 10px;
	    padding-inline-end: 10px;
	    padding-inline-start: 10px;
	}
    .title_table{ letter-spacing: 0; }
}

/*
============================================================================================================================
    19. PANTALLAS DE GESTION - ESTILO COMUN
======================================
*/
:root {
    --gestion-azul: rgba(0, 103, 148, 1);
    --gestion-azul-oscuro: rgba(0, 69, 99, 1);
    --gestion-rojo: rgba(150, 30, 30, 1);
    --gestion-borde: rgba(0, 69, 99, 0.22);
    --gestion-panel: rgba(255, 255, 255, 0.72);
}

/* Contenedor principal de las pantallas con tablas. */
.gestion-main {
    width: 100%;
    padding: 0 0 0 0;
    box-sizing: border-box;
    /*
        `.div_menu` es una columna flex con `min-height: 100vh`, pero ningun hijo crecia: en las
        vistas de poco contenido (consultar_ruc, configuracion_hka, credenciales_hka, inventario
        vacio, detalle de factura...) el pie quedaba a media pagina con una franja beige debajo.
        Con `flex: 1 0 auto` el <main> absorbe el espacio sobrante y el pie baja al fondo, sin
        encogerse nunca por debajo de su contenido.
    */
    flex: 1 0 auto;
}

.gestion-main .gestion-view:last-of-type {
    margin-bottom: 0;
}

/* Filtros superiores: activos/deshabilitados y buscador. */
.gestion-tabs {
    width: min(94%, 1700px);
    margin: 18px auto 8px auto;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.gestion-tabs .branches-tab {
    min-width: 120px;
    min-height: 38px;
    border: solid 1px rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    padding: 0 15px;
    background: rgba(0, 103, 148, 0.78);
    color: white;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
}

.gestion-tabs .branches-tab.active {
    background: var(--gestion-azul);
    box-shadow: 0 8px 18px rgba(0, 103, 148, 0.35);
}

.gestion-tabs .branches-tab.danger {
    background: rgba(150, 30, 30, 0.82);
}

.gestion-tabs .branches-tab.danger.active {
    background: var(--gestion-rojo);
    box-shadow: 0 8px 18px rgba(150, 30, 30, 0.32);
}

.gestion-search {
    width: min(94%, 1700px);
    margin: 18px auto 18px auto;
}

.gestion-search .table-search-input {
    width: min(660px, 100%);
    height: 40px;
    border: solid 1px rgba(0, 69, 99, 0.72);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.08);
}

/* Contenedor de tabla + paginacion. */
.gestion-view {
    width: min(94%, 1700px);
    margin: 0 auto 16px auto;
    overflow-x: auto;
    box-sizing: border-box;
}

.gestion-view .gestion-table {
    width: 100% !important;
    min-width: 720px;
    margin: 0 auto;
    border: solid 1px var(--gestion-borde);
    border-radius: 8px 8px 0 0;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.gestion-table th {
    background: rgba(0, 103, 148, 0.66);
    color: white;
    border-color: rgba(255, 255, 255, 0.55);
}

/* Colores propios de sucursales: grupos azules y sucursales verdes. */
.gestion-table.branch-section-active th {
    background: rgba(0, 6, 253, 0.6);
}

.gestion-table.branch-section-active.branch-section-agencies th {
    background: rgba(0, 153, 6, 0.6);
}

.gestion-table.branches-table-disabled th,
.gestion-table.users-table-disabled th {
    background: rgba(150, 30, 30, 0.66);
}

.gestion-table tr:first-child th {
    height: 56px;
}

.gestion-table h2 {
    margin: 0;
    font-size: 1.3rem;
    letter-spacing: 0;
}

.gestion-table td {
    height: 50px;
    padding: 6px 10px;
    box-sizing: border-box;
    vertical-align: middle;
    border-color: rgba(0, 0, 0, 0.2);
}

.gestion-table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.32);
}

.gestion-table tbody tr:hover td {
    background: rgba(0, 103, 148, 0.08);
}

.gestion-table .actions {
    min-height: 50px;
    align-items: center;
}

/* Evita que los botones de acciones rompan el alto y las lineas de la tabla. */
.gestion-table td.actions {
    display: table-cell;
    min-height: 0;
    text-align: center;
    white-space: nowrap;
}

.gestion-table td.actions .btn_icon {
    margin: 0 5px;
    vertical-align: middle;
}

/*
    Exactamente el mismo problema que arregla el bloque de arriba, pero en las cuatro celdas de
    acciones que NO se llaman `.actions` y por eso nunca lo recibieron:

      .fleet-params-table .actions-cell   (flota.css)       -> Tipos / Modelos / Estados de flota
      .inventario-row-actions             (inventario.css)  -> Existencias
      .facturacion-table .celda_acciones  (facturacion.css) -> Facturas / Notas / Organizaciones
      .workshop-actions                   (taller.css)      -> Casos de taller y usos no productivos

    Las cuatro declaran `display: flex` sobre un <td>. Eso saca la celda del layout de tabla (el
    navegador la envuelve en una celda anonima), la fila deja de crecer con el alto real de los
    botones y estos se derraman por debajo de su fila; en la ultima fila el derrame queda cortado
    contra el borde del contenedor y se ve media fila. Se vuelve a `table-cell` y los botones se
    alinean en linea, que es lo que ya hacia `.gestion-table td.actions`.
*/
.gestion-table td.actions-cell,
.gestion-table td.celda_acciones,
.gestion-table td.inventario-row-actions,
.gestion-table td.workshop-actions {
    display: table-cell;
    min-height: 0;
    vertical-align: middle;
    white-space: normal;
}

/* `justify-content` deja de aplicar al salir de flex; se replica con `text-align`,
   conservando la alineacion que tenia cada celda (taller iba a la izquierda). */
.gestion-table td.actions-cell,
.gestion-table td.celda_acciones,
.gestion-table td.inventario-row-actions {
    text-align: center;
}

.gestion-table td.workshop-actions {
    text-align: left;
}

/* `gap` no existe fuera de flex/grid: la separacion pasa a margenes en los propios botones. */
.gestion-table td.actions-cell > *,
.gestion-table td.celda_acciones > *,
.gestion-table td.inventario-row-actions > *,
.gestion-table td.workshop-actions > * {
    margin: 3px;
    vertical-align: middle;
}

.gestion-table .btn_add {
    position: static;
    width: 8.3rem;
    min-width: 8.3rem;
    height: 2.3rem;
    margin: 0 auto;
    border: solid 1px rgba(0, 69, 99, 0.75);
    color: darkgreen;
    background: white;
}

.gestion-table .btn_add.grp {
    color: rgba(0, 6, 153, 1);
}

.gestion-table .btn_add:hover {
    background: rgba(0, 153, 6, 1.0);
    color: white;
    box-shadow: 0 0 15px greenyellow;
}

.gestion-table .btn_add.grp:hover {
    background: rgba(0, 6, 253, 1.0);
    color: white;
    box-shadow: 0 0 15px skyblue;
}

.gestion-table .btn_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gestion-table .btn_icon i {
    pointer-events: none;
}

/* Paginacion debajo de todas las tablas de gestion. */
.gestion-view .gestion-pagination {
    width: 100%;
    margin: -1px auto 22px auto;
    border: solid 1px var(--gestion-borde);
    border-top: none;
    border-radius: 0 0 8px 8px;
    background: var(--gestion-panel);
}

.gestion-view .gestion-pagination.hidden,
.gestion-view .gestion-pagination.is-empty {
    display: none;
}

@media (max-width: 700px) {
    .gestion-main {
        padding-top: 16px;
    }

    .gestion-tabs {
        width: 92%;
        gap: 8px;
    }

    .gestion-tabs .branches-tab {
        min-width: 0;
        flex: 1 1 140px;
    }

    .gestion-search,
    .gestion-view {
        width: 92%;
    }

    .gestion-table .btn_add {
        width: 100%;
        min-width: 0;
        max-width: 9rem;
    }
}

/*
============================================================================================================================
    20. MODALES DE GESTION
======================================
*/
.modal-contenido {
    width: min(var(--tp-modal-sm), calc(100vw - 2rem));
    padding: 1.15rem;
}

.modal-header table {
    display: block;
    width: 100%;
}

.modal-header tbody,
.modal-header tr {
    display: block;
}

/*
    `padding` e `text-align` van con !important a proposito: las 28 celdas de titulo de modal del
    sistema llevan un `style="text-align: left; padding-left: 8px;"` inline heredado de cuando el
    encabezado era una tabla real. Ese inline ganaba a esta regla y dejaba el titulo del modal
    corrido 8px a la derecha respecto de los campos del formulario de abajo, en todas las vistas.
*/
.modal-header th {
    display: block;
    padding: 0 !important;
    text-align: left;
}

.modal-header h2 {
    margin: 0 3rem 0.9rem 0;
    color: black;
    font-size: 1.42rem;
    letter-spacing: 0;
}

.cerrar {
    top: 1rem;
    right: 1rem;
    margin: 0;
    width: 2.15rem;
    height: 2.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Mantiene los formularios existentes, pero los acomoda como grid visual. */
.modal-contenido form table {
    display: block;
    width: 100%;
    border-spacing: 0;
}

.modal-contenido form table tbody {
    display: block;
}

.modal-contenido form table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}

.modal-contenido form table td {
    display: block;
    padding: 0;
    min-width: 0;
}

.modal-contenido form table td[colspan="2"] {
    grid-column: 1 / -1;
}

/* Nombre visible del campo: evita depender solo del placeholder cuando el input ya tiene valor. */
.modal-contenido .form-field-label {
    display: block;
    margin: 0 0 4px 2px;
    color: var(--gestion-azul-oscuro);
    font-size: 0.78rem;
    font-weight: bold;
    line-height: 1.1;
    text-align: left;
}

.modal-contenido .form_add_agent {
    min-height: 38px;
    font-size: 0.94rem;
}

.modal-contenido .btn_save {
    min-height: 40px;
    margin-top: 3px;
}

.modal-contenido .label-end-date {
    display: inline-block;
    margin-bottom: 6px;
    font-weight: bold;
}

/*
============================================================================================================================
    21. TABLAS RESPONSIVAS
======================================
*/
@media (max-width: 760px) {
    .d-message {
        top: 1rem;
    }

    .gestion-view {
        overflow-x: visible;
    }

    .gestion-view .gestion-table {
        display: block;
        min-width: 0;
        border: none;
        background: transparent;
        box-shadow: none;
    }

    .gestion-table .gestion-title-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 10px;
        border-radius: 8px;
        overflow: hidden;
        background: rgba(0, 103, 148, 0.72);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    }

    .gestion-table.branch-section-active .gestion-title-row {
        background: rgba(0, 6, 253, 0.62);
    }

    .gestion-table.branch-section-active.branch-section-agencies .gestion-title-row {
        background: rgba(0, 153, 6, 0.62);
    }

    .gestion-table.branches-table-disabled .gestion-title-row,
    .gestion-table.users-table-disabled .gestion-title-row {
        background: rgba(150, 30, 30, 0.68);
    }

    .gestion-table .gestion-title-row th {
        display: block;
        width: 100%;
        height: auto;
        padding: 10px;
        border: none;
        background: transparent;
        box-sizing: border-box;
    }

    .gestion-table .gestion-title-row th:empty {
        display: none;
    }

    .gestion-table .gestion-title-row h2 {
        font-size: 1.25rem;
    }

    .gestion-table .gestion-title-row .btn_add {
        width: min(100%, 12rem);
        max-width: 12rem;
    }

    .gestion-table .gestion-head-row {
        display: none;
    }

    .gestion-table .tbody {
        display: block;
    }

    .gestion-table .tbody tr {
        display: block;
        margin-bottom: 12px;
        border: solid 1px rgba(0, 69, 99, 0.22);
        border-radius: 8px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.88);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
    }

    .gestion-table .tbody td {
        display: grid;
        grid-template-columns: minmax(92px, 38%) 1fr;
        gap: 10px;
        width: 100%;
        height: auto;
        min-height: 44px;
        padding: 10px 12px;
        border: none;
        border-bottom: solid 1px rgba(0, 0, 0, 0.12);
        text-align: right;
        overflow-wrap: anywhere;
    }

    .gestion-table .tbody td::before {
        content: attr(data-label);
        text-align: left;
        font-weight: bold;
        color: var(--gestion-azul-oscuro);
    }

    .gestion-table .tbody td.actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        white-space: normal;
    }

    .gestion-table .tbody td.actions::before {
        margin-right: auto;
    }

    .gestion-table .tbody td:last-child {
        border-bottom: none;
    }

    .gestion-table .tbody td[colspan],
    .gestion-table .tbody td.gestion-empty-cell {
        display: block;
        text-align: center;
    }

    .gestion-table .tbody td[colspan]::before,
    .gestion-table .tbody td.gestion-empty-cell::before {
        content: none;
    }

    .gestion-view .gestion-pagination {
        border-radius: 8px;
        border-top: solid 1px var(--gestion-borde);
        margin-top: 0;
    }

    .modal-contenido {
        width: calc(100vw - 1rem);
        max-height: calc(100dvh - 1rem);
        padding: 1rem;
    }

    .modal-contenido form table tr {
        grid-template-columns: 1fr;
    }

    .modal-contenido form table td[colspan="2"] {
        grid-column: auto;
    }}

/*
============================================================================================================================
    22. TABLAS CON SCROLL HORIZONTAL EN MODULOS DE GESTION
======================================
*/
@media (max-width: 1200px) {
    .gestion-main.zones {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .gestion-main .contenedor_menu_lateral {
        position: static;
        width: 100%;
        height: auto;
        z-index: auto;
    }

    .gestion-main .menu_tool_lateral {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
        min-height: 0;
        border-radius: 0;
    }

    .gestion-main .li3_menu {
        border-right: solid 1px rgba(255, 255, 255, 0.22);
    }

    .gestion-main .a3_menu,
    .gestion-main .menu_tool_lateral button.a3_menu {
        min-height: 44px;
        padding: 0.55rem 0.45rem;
        border-radius: 0;
        font-size: 0.86rem;
        line-height: 1.15;
    }

    .gestion-main .a3_menu:hover,
    .gestion-main .menu_tool_lateral button.a3_menu:hover {
        transform: none;
    }

    .gestion-main .gestion-search,
    .gestion-main .gestion-view {
        width: calc(100% - 1rem);
    }

    .gestion-main .gestion-view {
        max-width: 100%;
        overflow-x: scroll;
        overflow-y: visible;
        padding-bottom: 0.35rem;
    }

    .gestion-main .gestion-view::-webkit-scrollbar {
        height: 12px;
    }

    .gestion-main .gestion-view::-webkit-scrollbar-track {
        background: rgba(0, 69, 99, 0.12);
        border-radius: 999px;
    }

    .gestion-main .gestion-view::-webkit-scrollbar-thumb {
        background: rgba(0, 103, 148, 0.85);
        border-radius: 999px;
    }

    .gestion-main .gestion-view .gestion-table {
        display: table;
        width: max(100%, 1040px) !important;
        min-width: 1040px;
        max-width: none;
        border: solid 1px var(--gestion-borde);
        border-radius: 8px 8px 0 0;
        background: rgba(255, 255, 255, 0.82);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
        table-layout: fixed;
    }

    .gestion-main .gestion-table .gestion-title-row {
        display: table-row;
        margin-bottom: 0;
        border-radius: 0;
        overflow: visible;
        background: transparent;
        box-shadow: none;
    }

    .gestion-main .gestion-table .gestion-title-row th {
        display: table-cell;
        width: auto;
        height: auto;
        padding: 8px;
        border: solid 1px var(--gestion-borde);
        background: rgba(0, 103, 148, 0.66);
        box-sizing: border-box;
    }

    .gestion-main .gestion-table.branches-table-disabled .gestion-title-row th,
    .gestion-main .gestion-table.users-table-disabled .gestion-title-row th {
        background: rgba(150, 30, 30, 0.66);
    }

    .gestion-main .gestion-table .gestion-title-row th:empty {
        display: table-cell;
    }

    .gestion-main .gestion-table .gestion-title-row h2 {
        font-size: 1rem;
    }

    .gestion-main .gestion-table .gestion-title-row .btn_add {
        width: 8rem;
        max-width: 8rem;
        min-height: 34px;
        font-size: 0.78rem;
    }

    .gestion-main .gestion-table .gestion-head-row {
        display: table-row;
    }

    .gestion-main .gestion-table .tbody {
        display: table-row-group;
    }

    .gestion-main .gestion-table .tbody tr {
        display: table-row;
        margin-bottom: 0;
        border: none;
        border-radius: 0;
        overflow: visible;
        background: transparent;
        box-shadow: none;
    }

    .gestion-main .gestion-table th,
    .gestion-main .gestion-table .tbody td {
        display: table-cell;
        width: auto;
        height: 44px;
        min-height: 0;
        padding: 0.35rem 0.4rem;
        border: solid 1px rgba(0, 69, 99, 0.22);
        text-align: center;
        font-size: 0.78rem;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .gestion-main .gestion-table .tbody td::before {
        content: none;
    }

    .gestion-main .gestion-table .tbody td.actions {
        display: table-cell;
        min-width: 160px;
        padding: 0.35rem;
        text-align: center;
        white-space: nowrap;
    }

    .gestion-main .gestion-table .tbody td.actions::before {
        content: none;
    }

    .gestion-main .gestion-table td.actions .btn_icon {
        width: 32px;
        min-width: 32px;
        height: 32px;
        margin: 0 3px;
        font-size: 13px;
    }
}

/*
============================================================================================================================
    TALLER PRO VISUAL SYSTEM
    Guia visual basada en taller_dashboard.html
============================================================================================================================
*/
:root {
    --tp-bg: #E3E0D8;
    --tp-surface: #FBFAF7;
    --tp-surface-alt: #EFEBE2;
    --tp-ink: #1C1E1F;
    --tp-ink-soft: #5C6063;
    --tp-ink-faint: #8C908F;
    --tp-line: #D2CCBF;
    --tp-line-strong: #B9B2A0;
    --tp-steel: #223349;
    --tp-steel-light: #2E4864;
    --tp-steel-pale: #DCE3EA;
    --tp-orange: #DE5A0E;
    --tp-orange-dark: #B84708;
    --tp-orange-soft: #F7DEC6;
    --tp-green: #3E7D4F;
    --tp-green-soft: #DCEAE0;
    --tp-yellow: #C99315;
    --tp-yellow-soft: #F3E6C4;
    --tp-red: #B03A2E;
    --tp-red-soft: #F2DAD6;
    --tp-radius: 8px;
    --tp-radius-lg: 12px;
    --tp-shadow: 0 1px 2px rgba(28,30,31,0.06), 0 6px 16px rgba(28,30,31,0.07);
    --tp-shadow-hover: 0 2px 4px rgba(28,30,31,0.08), 0 12px 24px rgba(28,30,31,0.12);
    /* Escala unica de anchos de modal (ver .modal-contenido y variantes por vista) */
    --tp-modal-sm: 620px;
    --tp-modal-md: 780px;
    --tp-modal-lg: 960px;
    --tp-modal-xl: 1160px;
    --gestion-azul-oscuro: var(--tp-steel);
    --gestion-borde: var(--tp-line);
    --gestion-panel: var(--tp-surface);
}

html { font-size: 15px; }

body {
    background-color: var(--tp-bg);
    background-image: radial-gradient(circle at 1px 1px, rgba(28,30,31,0.05) 1px, transparent 0);
    background-size: 22px 22px;
    color: var(--tp-ink);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.backpaper {
    background-color: var(--tp-bg) !important;
    background-image: radial-gradient(circle at 1px 1px, rgba(28,30,31,0.05) 1px, transparent 0) !important;
    background-size: 22px 22px !important;
}

.div_filter {
    background: rgba(227, 224, 216, 0.92) !important;
    backdrop-filter: none !important;
}

.header_menu {
    background: var(--tp-surface) !important;
    border-bottom: 1px solid var(--tp-line) !important;
    box-shadow: var(--tp-shadow) !important;
    color: var(--tp-ink) !important;
}

.h1_menu,
#role-modal-title,
.gestion-title-row h2,
.modal-header h2,
.fleet-catalog-title h2 {
    color: var(--tp-ink) !important;
    font-family: Oswald, "Arial Narrow", "Segoe UI", sans-serif;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.h2_menu,
.h2-2_menu,
.sucursal {
    color: var(--tp-ink-soft) !important;
}

.logo_ico {
    background: var(--tp-orange) !important;
    box-shadow: none !important;
}

.general_footer,
.menu_tool,
.menu_tool_lateral {
    background: var(--tp-steel) !important;
    color: #EEF1F4 !important;
    border-color: rgba(255,255,255,0.1) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.menu_tool {
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.menu_tool .li2_menu .a2_menu,
.menu_tool_lateral .a3_menu,
.menu_tool_lateral button.a3_menu {
    border-radius: var(--tp-radius) !important;
    color: #C3CEDA !important;
    font-weight: 600 !important;
    transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease !important;
}

.menu_tool .li2_menu .a2_menu:hover,
.a_menu:hover,
.a3_menu:hover,
.menu_tool_lateral button.a3_menu:hover,
.menu_tool_lateral .a3_menu.active,
.menu_tool_lateral button.a3_menu.active {
    background: var(--tp-steel-light) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 var(--tp-orange) !important;
    transform: none !important;
}

.contenedor_menu_lateral {
    width: 232px !important;
}

.menu_tool_lateral {
    padding: 14px 10px !important;
    border-radius: 0 !important;
}

.menu_tool_lateral .li3_menu {
    margin: 2px 0 !important;
}

.menu_tool_lateral .a3_menu,
.menu_tool_lateral button.a3_menu {
    padding: 10px 12px !important;
    text-align: left !important;
    justify-content: flex-start !important;
}

.gestion-main,
.zones > div {
    color: var(--tp-ink);
}

.gestion-tabs,
.gestion-search,
.workshop-toolbar,
.fleet-toolbar,
.client-driver-status-tabs,
.user-confirm-card,
.panel,
.fleet-catalog-view .fleet-params-panel {
    background: var(--tp-surface) !important;
    border: 1px solid var(--tp-line) !important;
    border-radius: 10px !important;
    box-shadow: var(--tp-shadow) !important;
    backdrop-filter: none !important;
}

.table_menu,
.gestion-view .gestion-table,
.users-table,
.branches-table,
.fleet-table,
.fleet-params-table {
    background: var(--tp-surface) !important;
    border: 1px solid var(--tp-line) !important;
    border-radius: 10px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    box-shadow: var(--tp-shadow) !important;
    color: var(--tp-ink) !important;
    overflow: hidden;
}

.table_menu th,
.gestion-table th,
.users-table th,
.fleet-table th,
.fleet-params-table th,
.gestion-head-row th {
    background: var(--tp-surface-alt) !important;
    border-bottom: 1px solid var(--tp-line) !important;
    /* --tp-ink-faint sobre --tp-surface-alt daba 2.71:1 (ilegible en 11.5px mayusculas). --tp-ink-soft da 5.34:1 (WCAG AA). */
    color: var(--tp-ink-soft) !important;
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    height: auto !important;
    padding: 12px 16px !important;
}

.gestion-title-row th,
.table_menu .th {
    background: var(--tp-surface) !important;
    color: var(--tp-ink) !important;
}

/*
    Tablas de registros deshabilitados: el bloque de `th` de arriba anulaba con !important
    el rojo de .branches-table-disabled (styles.css:1500) y de flota.css:254, dejando las
    tablas de deshabilitados identicas a las activas. Se restaura la senal con los tokens
    del tema (--tp-red sobre --tp-red-soft = 4.56:1, WCAG AA).
*/
.branches-table-disabled th,
.users-table-disabled th,
.branches-table-disabled .gestion-title-row th,
.users-table-disabled .gestion-title-row th {
    background: var(--tp-red-soft) !important;
    border-bottom: 1px solid var(--tp-red) !important;
    color: var(--tp-red) !important;
}

.branches-table-disabled,
.users-table-disabled {
    border-color: var(--tp-red) !important;
}

.table_menu td,
.gestion-table td,
.users-table td,
.fleet-table td,
.fleet-params-table td,
.tbody td {
    background: var(--tp-surface) !important;
    border-bottom: 1px solid var(--tp-surface-alt) !important;
    color: var(--tp-ink) !important;
    padding: 12px 16px !important;
    text-align: left;
}

.table_menu tr:last-child td,
.gestion-table tr:last-child td {
    border-bottom: none !important;
}

.btn_add,
.btn_save,
.client-section-btn,
.users-pagination-btn,
.gestion-tab-btn,
.fleet-status-btn,
.workshop-status-btn,
.fleet-catalog-add,
.fleet-params-cancel,
.user-confirm-actions button {
    align-items: center;
    background: var(--tp-surface) !important;
    border: 1px solid var(--tp-line-strong) !important;
    border-radius: var(--tp-radius) !important;
    box-shadow: none !important;
    color: var(--tp-ink) !important;
    display: inline-flex;
    /*
        Sin esto, un boton .btn_add con icono + texto (ej. "<i class=fa-plus></i> AGREGAR +")
        quedaba con el icono pegado al texto: .btn_add nunca definio gap, y solo lo disimulaban
        las vistas cuyo boton tenia ademas una clase propia con su propio gap (.fleet-status-btn,
        .workshop-status-btn, .workshop-service-picker-btn, etc). Con un solo hijo (boton de solo
        icono o de solo texto) gap no tiene efecto visible, asi que es seguro para toda la clase.
    */
    gap: 8px;
    font-weight: 700 !important;
    justify-content: center;
    letter-spacing: 0 !important;
    min-height: 38px;
    padding: 8px 14px !important;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease !important;
    width: auto !important;
}

.btn_add:hover,
.btn_save:hover,
.client-section-btn:hover,
.users-pagination-btn:hover,
.gestion-tab-btn:hover,
.fleet-status-btn:hover,
.workshop-status-btn:hover,
.fleet-catalog-add:hover,
.fleet-params-cancel:hover {
    background: var(--tp-surface-alt) !important;
    border-color: var(--tp-orange) !important;
    color: var(--tp-orange-dark) !important;
    transform: translateY(-1px) !important;
}

.btn_save,
.btn_add.btn_save,
.gestion-tab-btn.active,
.client-section-btn.active,
.fleet-status-btn.active,
.workshop-status-btn.active,
.user-confirm-actions .confirm-accept {
    background: var(--tp-orange) !important;
    border-color: var(--tp-orange) !important;
    color: #fff !important;
}

.fleet-status-btn.danger,
.workshop-status-btn.danger,
.disable,
.delete {
    color: var(--tp-red) !important;
}

.fleet-status-btn.danger.active,
.workshop-status-btn.danger.active,
.btn_icon.delete,
.btn_icon.disable {
    background: var(--tp-red) !important;
    color: #fff !important;
}

.btn_icon {
    background: var(--tp-steel-pale) !important;
    border: 1px solid transparent !important;
    border-radius: var(--tp-radius) !important;
    box-shadow: none !important;
    color: var(--tp-steel) !important;
}

.btn_icon.view { background: var(--tp-green-soft) !important; color: var(--tp-green) !important; }
.btn_icon.edit { background: var(--tp-orange-soft) !important; color: var(--tp-orange-dark) !important; }
.btn_icon:hover { transform: translateY(-1px); box-shadow: var(--tp-shadow) !important; }

.form_add_agent,
.table_login_input,
.table-search-input,
.fleet-search-input,
.workshop-search-input,
.users-pagination-select,
select,
input,
textarea {
    border: 1px solid var(--tp-line) !important;
    border-radius: var(--tp-radius) !important;
    background: var(--tp-surface) !important;
    color: var(--tp-ink) !important;
    font-family: Inter, "Segoe UI", Arial, sans-serif !important;
    box-shadow: none !important;
}

.form_add_agent:focus,
.table_login_input:focus,
.table-search-input:focus,
.fleet-search-input:focus,
.workshop-search-input:focus,
select:focus,
input:focus,
textarea:focus {
    border-color: var(--tp-orange) !important;
    box-shadow: 0 0 0 3px rgba(222, 90, 14, 0.14) !important;
    outline: none !important;
}

.modal-fondo,
.user-confirm-modal {
    background: rgba(28, 30, 31, 0.48) !important;
    backdrop-filter: blur(4px) !important;
}

.modal-contenido,
.user-confirm-card {
    background: var(--tp-surface) !important;
    border: 1px solid var(--tp-line) !important;
    border-radius: 10px !important;
    box-shadow: var(--tp-shadow-hover) !important;
    color: var(--tp-ink) !important;
}

.cerrar {
    background: var(--tp-steel) !important;
    border-radius: var(--tp-radius) !important;
    color: #fff !important;
}

.users-pagination,
.gestion-pagination,
.fleet-catalog-pagination {
    background: var(--tp-surface-alt) !important;
    border-color: var(--tp-line) !important;
    color: var(--tp-ink-soft) !important;
}

.d-message,
.float-message {
    background: var(--tp-green) !important;
    color: #fff !important;
}

/*
    El verde de arriba lleva `!important` y ganaba a `.d-message.message-error { background: #b00020 }`
    (seccion 05), asi que TODOS los avisos de error de agencies/flota/inventario/parametros/roles/
    taller/users salian con fondo verde de exito; lo unico rojo era el texto, ilegible encima.
    Esta regla es mas especifica (0,2,0) que ambas, asi que el error vuelve a ser rojo.
*/
.d-message.message-error,
.d-message.message-error .float-message {
    background: var(--tp-red) !important;
    color: #fff !important;
}

.message-error,
.fleet-params-status.error,
.client-field-warning {
    color: var(--tp-red) !important;
}

/*
    `.fleet-params-status` es el <p> de estado dentro de los modales de flota/parametros/inventario.
    Estaba agrupado con `.d-message` y por eso el exito se pintaba como una caja verde solida
    mientras el error (justo arriba) solo cambiaba el color del texto: dos formas distintas para
    el mismo tipo de mensaje. Se le devuelve el tratamiento de texto que ya tenia en flota.css.
*/
.fleet-params-status.success {
    color: var(--tp-green) !important;
}

/*
    Sin mensaje, este <p> seguia ocupando su hueco: en flota.css tiene `min-height: 1.4rem` y
    `margin: 0.55rem 0`, y en las vistas que no cargan flota.css (parametros, inventario,
    facturacion, credenciales) se queda con el margen de parrafo por defecto del navegador.
    El caso mas visible era el catalogo "Tipos de flota": entre la barra del titulo y la cabecera
    de la tabla quedaba una franja blanca vacia de ~65px (este <p> + el formulario de alta oculto).
    Los scripts hacen `textContent = ""` al limpiar, asi que `:empty` casa exacto.
*/
.fleet-params-status:empty {
    display: none;
}

.table_login {
    background: var(--tp-surface) !important;
    border: 1px solid var(--tp-line) !important;
    box-shadow: var(--tp-shadow-hover) !important;
    color: var(--tp-ink) !important;
}

.login,
.show_pass_box,
.aforgot_pass {
    color: var(--tp-ink) !important;
}

.title_table,
.trlogin {
    background: var(--tp-steel) !important;
    color: #fff !important;
}

@media (max-width: 900px) {
    .contenedor_menu_lateral { width: 100% !important; height: auto !important; position: static !important; }
    .menu_tool_lateral { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .menu_tool_lateral .a3_menu,
    .menu_tool_lateral button.a3_menu { justify-content: center !important; text-align: center !important; }
}
/*
============================================================================================================================
    TALLER CASOS REFINEMENT - GLOBAL
    Ajustes basados en taller_casos.html
============================================================================================================================
*/
.header_menu {
    min-height: 0 !important;
    height: auto !important;
    padding: 16px 32px !important;
    display: grid !important;
    grid-template-columns: minmax(120px, 180px) minmax(260px, 1fr) minmax(190px, 260px) auto;
    align-items: center !important;
    gap: 22px !important;
    text-align: left !important;
}

.header_menu > div:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.a_logout_ico,
.text_salir,
.logo_ico {
    position: static !important;
    margin: 0 !important;
    transform: none !important;
}

.a_logout_ico {
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: var(--tp-radius);
    background: var(--tp-red);
}

.logout_ico {
    width: 22px !important;
    max-height: 22px;
    object-fit: contain;
    filter: brightness(0) invert(1) !important;
}

.text_salir {
    color: var(--tp-red) !important;
    font-size: 0.95rem !important;
    font-weight: 700;
    text-decoration: none;
}

.div_tallerpro {
    padding: 0 !important;
    text-align: center !important;
    min-width: 0;
}

.div_tallerpro br {
    display: none;
}

.div_tallerpro label {
    display: block;
    padding: 0 !important;
    line-height: 1.25;
}

.h1_menu {
    font-size: 1.6rem !important;
}

.h2-2_menu {
    font-size: 0.9rem !important;
}

.sucursal {
    margin-top: 5px;
    color: var(--tp-steel) !important;
    font-weight: 700;
}

.inf_log {
    transform: none !important;
    width: auto !important;
    padding: 9px 14px !important;
    border-radius: var(--tp-radius) !important;
    background: var(--tp-steel-pale) !important;
    color: var(--tp-steel) !important;
}

.inf_log h2 {
    color: var(--tp-steel) !important;
    font-size: 0.83rem !important;
    line-height: 1.45;
}

/*
    Nombre del rol. En la maquetacion vieja era un bloque suelto que se subia a mano con
    `transform: translateY(-110px)` (seccion 08). Con el `.header_menu` en grid de 4 columnas
    ese <h3> era un 5º hijo: abria una segunda fila (alto muerto en la cabecera del dashboard)
    y ademas el translate lo montaba encima del boton "Salir". Ahora vive dentro de `.inf_log`,
    junto a "Agente:" y la hora, que es a lo que pertenece.
*/
.inf_log .h3_menu {
    transform: none !important;
    margin: 2px 0 0 !important;
    text-align: left !important;
    color: var(--tp-steel) !important;
    font-size: 0.83rem !important;
    font-weight: 700;
    line-height: 1.45;
}

.logo_ico {
    width: auto !important;
    border-radius: 999px !important;
    padding: 7px 12px;
}

.logo {
    width: 78px !important;
    filter: none !important;
}

.menu_tool {
    padding: 0 32px !important;
    text-align: left !important;
}

.menu_tool .li2_menu .a2_menu {
    padding: 14px 20px !important;
    border-bottom: 3px solid transparent;
    border-radius: 0 !important;
}

.menu_tool .li2_menu .a2_menu:hover,
.menu_tool .li2_menu .a2_menu.active {
    background: transparent !important;
    border-bottom-color: var(--tp-orange);
    box-shadow: none !important;
}

.gestion-main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 28px 32px 40px !important;
}

.gestion-main.zones,
.zones {
    max-width: none;
    padding: 0 !important;
}

/*
    Scroll horizontal de tablas. Este bloque declaraba `overflow: visible !important`, lo que
    anulaba el `overflow-x: auto` de la definicion base (.gestion-view, arriba) y dejaba muerto
    el scrollbar estilizado del media query. Como los `min-width` de las tablas (720px en
    .gestion-table, 920px en .global-admin-table, 760px en .branches-view .table_menu) si
    seguian vivos, por debajo de ~920px las tablas desbordaban la pagina entera en vez de
    hacer scroll dentro de su contenedor.
    Se adopta el patron que ya funcionaba en flota (.fleet-table-scroll, flota.css:192).
*/
.gestion-view {
    overflow-x: auto;
    overflow-y: visible;
}

.gestion-view::-webkit-scrollbar {
    height: 12px;
}

.gestion-view::-webkit-scrollbar-track {
    background: var(--tp-surface-alt);
    border-radius: 999px;
}

.gestion-view::-webkit-scrollbar-thumb {
    background: var(--tp-line-strong);
    border-radius: 999px;
}

.gestion-title-row h2,
.workshop-table-title h2,
.fleet-catalog-title h2 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    font-size: 1.05rem !important;
}

.gestion-title-row h2::before,
.workshop-table-title h2::before,
.fleet-catalog-title h2::before {
    content: "";
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: var(--tp-orange);
    display: inline-block;
}

.gestion-view .gestion-table,
.table_menu {
    margin-bottom: 0 !important;
}

.gestion-view .gestion-pagination,
.users-pagination {
    padding: 14px 20px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.users-pagination-info,
.users-pagination-page,
.users-pagination label {
    color: var(--tp-ink-soft) !important;
    font-size: 0.83rem;
}

.users-pagination-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.users-pagination-select,
.users-pagination-size {
    min-height: 30px;
    padding: 4px 8px !important;
    font-family: "IBM Plex Mono", Consolas, monospace !important;
    font-size: 0.8rem !important;
}

@media (max-width: 980px) {
    .header_menu {
        grid-template-columns: 1fr !important;
        justify-items: center;
        text-align: center !important;
    }

    .menu_tool {
        padding: 0 12px !important;
        text-align: center !important;
    }

    .gestion-main {
        padding: 20px 14px 32px !important;
    }
}

/*
============================================================================================================================
    TALLER PRO DASHBOARD
============================================================================================================================
*/
/*
    Selector reforzado a `.gestion-main.dashboard-layout` (antes solo `.dashboard-layout`):
    `main` lleva las clases `gestion-main zones dashboard-layout` a la vez, y
    `.gestion-main.zones { padding: 0 !important }` (arriba) tenia mayor especificidad que el
    `.dashboard-layout` de una sola clase, asi que el padding lateral del dashboard nunca se
    aplicaba y el panel quedaba pegado a los bordes.
*/
.gestion-main.dashboard-layout {
    align-items: flex-start;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 24px;
    padding: 24px 32px 40px !important;
}

.dashboard-content {
    display: grid;
    gap: 18px;
    min-width: 0;
    width: 100%;
}

.dashboard-quick-header,
.dashboard-live {
    background: var(--tp-surface);
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-radius-lg);
    box-shadow: var(--tp-shadow);
}

.dashboard-quick-header {
    padding: 20px 22px;
}

.dashboard-eyebrow {
    margin: 0 0 6px;
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tp-orange-dark);
}

.dashboard-quick-header h1,
.dashboard-live h1,
.dashboard-live-panel h2 {
    margin: 0;
    font-family: "Oswald", Arial, sans-serif;
    letter-spacing: 0;
    color: var(--tp-ink);
}

.dashboard-quick-header h1,
.dashboard-live h1 {
    font-size: 1.6rem;
}

.dashboard-quick-header p:last-child,
.dashboard-live-header p {
    margin: 6px 0 0;
    color: var(--tp-ink-soft);
}

.dashboard-shortcuts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}

.dashboard-shortcut,
.dashboard-live-card {
    min-height: 132px;
    padding: 18px;
    display: grid;
    gap: 10px;
    align-content: start;
    color: var(--tp-ink);
    text-decoration: none;
    background: var(--tp-surface);
    /* Borde y sombra reforzados (--tp-line-strong / --tp-shadow-hover en vez de --tp-line /
       --tp-shadow): sobre el fondo de .div_filter la tarjeta y el fondo quedaban casi al mismo
       tono (~1.15:1 de contraste), apenas separados. */
    border: 1px solid var(--tp-line-strong);
    border-radius: var(--tp-radius-lg);
    box-shadow: var(--tp-shadow-hover);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.dashboard-shortcut:hover,
.dashboard-live-card:hover {
    transform: translateY(-2px);
    border-color: var(--tp-orange);
    box-shadow: var(--tp-shadow-hover);
}

.dashboard-shortcut-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--tp-radius);
    color: var(--tp-steel);
    background: var(--tp-steel-pale);
}

.dashboard-shortcut.primary .dashboard-shortcut-icon {
    color: #fff;
    background: var(--tp-orange);
}

.dashboard-shortcut strong,
.dashboard-live-card strong {
    font-family: "Oswald", Arial, sans-serif;
    font-size: 1.08rem;
    color: var(--tp-ink);
}

.dashboard-shortcut small,
.dashboard-live-card span {
    color: var(--tp-ink-soft);
    line-height: 1.35;
}

.dashboard-live {
    padding: 20px 22px;
}

.dashboard-live-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.dashboard-live-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.dashboard-live-card {
    min-height: 108px;
}

.dashboard-live-card span {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
}

.dashboard-live-card strong {
    font-size: 1.9rem;
}

.dashboard-live-panel {
    margin-top: 18px;
    border-top: 1px solid var(--tp-line);
    padding-top: 16px;
}

.dashboard-live-panel h2 {
    font-size: 1.12rem;
    margin-bottom: 12px;
}

.dashboard-live-list {
    display: grid;
    gap: 10px;
}

.dashboard-live-activity,
.dashboard-live-empty {
    padding: 12px 14px;
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-radius);
    background: var(--tp-bg);
}

.dashboard-live-activity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.dashboard-live-activity-title,
.dashboard-live-activity-detail {
    margin: 0;
}

.dashboard-live-activity-title {
    font-weight: 800;
    color: var(--tp-ink);
}

.dashboard-live-activity-detail,
.dashboard-live-activity-date,
.dashboard-live-empty {
    color: var(--tp-ink-soft);
    font-size: 0.86rem;
}

.dashboard-live-activity-date {
    white-space: nowrap;
}

@media (max-width: 760px) {
    .gestion-main.dashboard-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding: 18px 14px 32px !important;
    }

    .dashboard-shortcuts {
        grid-template-columns: 1fr;
    }

    .dashboard-shortcut,
    .dashboard-live-card {
        min-height: auto;
    }

    .dashboard-live-header,
    .dashboard-live-activity {
        display: grid;
    }

    .dashboard-live-activity-date {
        white-space: normal;
    }
}