@charset "utf-8";

/* MAIN CSS - REORGANIZADO POR CATEGORÍAS
=============================================================================

ÍNDICE:
1. RESET Y BASE
2. VARIABLES CSS PERSONALIZADAS
3. UTILIDADES GENERALES
4. TIPOGRAFÍA
5. SISTEMA DE COLORES
6. LAYOUT Y ESTRUCTURA
7. SISTEMA DE BOTONES
8. FORMULARIOS E INPUTS
9. SISTEMA DE ICONOS
10. SISTEMA DE TABLAS
11. SISTEMA DE MODALES
12. NAVEGACIÓN Y HEADER
13. MENSAJES Y NOTIFICACIONES
14. COMPONENTES ESPECÍFICOS DE NEGOCIO
15. ANIMACIONES Y EFECTOS
16. RESPONSIVE Y MEDIA QUERIES

============================================================================= */

/*-----------------------------------------------------------------------------------
	1. RESET Y BASE
-----------------------------------------------------------------------------------*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
figure,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	vertical-align: baseline;
	white-space: normal;
	outline: none;
	font-family: 'DM Sans', sans-serif;
	/*font-family: "Tahoma", sans-serif; */
	font-size: 1.4rem;
}

html {
	font-size: 62.4%;
}

body {
	line-height: 1;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

footer {
	margin-top: auto;
}

ul {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

caption,
th,
td {
	text-align: left;
	font-weight: normal;
}

a {
	display: inline-block;
}

a,
a:hover {
	text-decoration: none;
}

a:focus {
	outline: 0px;
	color: #007168
}

p {
	line-height: 1.75rem;
}

sup {
	font-size: 13px;
	top: -.1rem;
	left: .2rem;
}

sub {
	font-size: 10px;
	vertical-align: sub;
}

section {
	position: relative;
	min-height: 300px;
	padding-bottom: 1rem;
}

form {
	margin-bottom: 2rem;
}

/*-----------------------------------------------------------------------------------
	2. VARIABLES CSS PERSONALIZADAS
-----------------------------------------------------------------------------------*/

:root {
	/* Colores Principales */
	--primary-color: #009286;
	--primary-hover: #018275;
	--primary-light: #44C0A4;
	--danger-color: #AB0101;
	--danger-hover: #AD0000;
	--success-color: #B9D5CC;
	--warning-color: #ECD854;

	/* Colores de Texto */
	--text-primary: #6f6f6f;
	--text-secondary: #8c8c8c;
	--text-dark: #333;
	--text-muted: #737373;
	--text-light: #adadad;
	--text-white: #ffffff;

	/* Colores de Fondo */
	--bg-primary: #f6f6f2;
	--bg-secondary: #efefef;
	--bg-modal: #F9F8F8;
	--bg-readonly: #D3D3D3;
	--bg-loader: rgb(249, 249, 249);

	/* Bordes */
	--border-default: #ccc;
	--border-light: #ddd;
	--border-section: #DDE8E7;
	--border-modal: #DEE0E3;
	--border-table: #ededed;

	/* Sombras */
	--shadow-light: 1px 1px 3px #6B6B6B;
	--shadow-error: 0 0 2px 0px #900;
	--shadow-focus: 0px 0px 1px 1px var(--primary-color);

	/* Espaciado */
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;
	--spacing-xxl: 3rem;

	/* Tipografía */
	--font-family-primary: 'DM Sans', sans-serif;
	--font-family-secondary: "Tahoma", sans-serif;
	--font-size-small: 0.7rem;
	--font-size-base: 1.4rem;
	--font-size-large: 1.6rem;
	--font-size-xl: 2rem;
}

/*-----------------------------------------------------------------------------------
	3. UTILIDADES GENERALES
-----------------------------------------------------------------------------------*/

/* Utilidades de Display */
.formHidden {
	display: none;
}

#infoContravalor.formHidden,
#frequent .popover-delete.formHidden {
	display: none !important;
}

.changeSelection {
	display: none;
}

.displayOption {
	display: table-row !important;
	border-bottom: 1px solid var(--border-default);
}

/* Utilidades de Posicionamiento */
.clear {
	clear: both;
}

hr.clear {
	clear: both;
	visibility: hidden;
	margin: 0px;
	padding: 0px;
	height: 0px;
}

/* Utilidades de Texto */
.text-hide {
	text-indent: -9999px;
	/* IE8 */
	color: transparent;
}

.underline {
	text-decoration: underline;
}

.bold {
	font-weight: bold;
}

.uppercase {
	text-transform: uppercase;
}

.smallText {
	font-size: var(--font-size-small);
}

/* Utilidades de Estado */
.readonly {
	background-color: var(--bg-readonly) !important;
}

.lined {
	border-bottom: 1px solid var(--primary-color);
}

/*-----------------------------------------------------------------------------------
	4. TIPOGRAFÍA
-----------------------------------------------------------------------------------*/

/* Headings */
h1 {
	color: var(--primary-color);
}

h4,
h5,
h6,
p,
span,
a,
label {
	color: var(--text-primary);
}

section h2 {
	font-size: var(--font-size-base);
	font-weight: bold;
	margin-bottom: var(--spacing-md);
}

section h3 {
	margin-bottom: var(--spacing-md);
}

#formSection3 h3 {
	margin-bottom: var(--spacing-xl);
}

small {
	font-size: var(--spacing-md);
	color: var(--text-secondary);
}

/* Elementos de Texto Específicos */
u {
	color: #686A6A;
	text-decoration: none;
	line-height: 1.5;
	font-weight: bold;
}

/*-----------------------------------------------------------------------------------
	5. SISTEMA DE COLORES
-----------------------------------------------------------------------------------*/

/* Colores de Texto */
.white {
	color: var(--text-white);
}

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

a.corporateColor:hover,
a.corporateColor:focus {
	color: var(--primary-light);
	text-decoration: none;
	border-bottom: 1px solid var(--primary-light);
}

a:hover {
	color: var(--primary-color);
}

/* Estados de Mensaje */
.bg-danger {
	border: 1px solid #FFB1B1;
	color: rgb(118, 0, 0);
	background-color: #f8d7da;
}

.bg-warning {
	border: 1px solid var(--warning-color);
	color: rgb(95, 87, 0);
	background-color: #fff3cd;
}

.bg-success {
	border: 1px solid var(--success-color);
	color: rgb(37, 84, 0);
	background-color: #d1eddf;
}

/*-----------------------------------------------------------------------------------
	6. LAYOUT Y ESTRUCTURA
-----------------------------------------------------------------------------------*/

/* Contenedores */
.container-fluid {
	padding-left: 15%;
	padding-right: 15%;
	margin-right: unset;
	margin-left: unset;
}

.row {
	margin-top: var(--spacing-xl);
}

.navbar-space {
	margin-top: 100px;
}

.navbar-brand {
	padding: 10px 0px;
	margin-right: 15px;
}

/* Secciones */
section>.row>div {
	margin-bottom: var(--spacing-lg);
}

section .row .col-sm-4:nth-child(2),
section .row .col-sm-4:nth-child(3),
section .row .col-sm-8 {
	padding-left: var(--spacing-md);
	border-left: 2px solid var(--border-section);
}

/* Loader */
.loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url('https://exactchange.es/cuentas-pago/public/assets/img/loader.svg') 50% 50% no-repeat var(--bg-loader);
	opacity: 1;
}

/* Componentes de Layout */
.two-col-align-center {
	display: flex;
	align-items: center;
	gap: var(--spacing-xl);
	flex-wrap: wrap;
}

.two-col-align-center>div {
	flex: 1 1 0;
}

.greyForm {
	padding: var(--spacing-lg) var(--spacing-sm);
	background-color: var(--bg-secondary);
	margin-bottom: var(--spacing-xl);
}

.greyForm form {
	margin-top: .75rem;
}

.well {
	padding: var(--spacing-md);
	margin-top: var(--spacing-xl);
}

.well p {
	font-size: 1.2rem;
	color: var(--text-muted);
}

/*-----------------------------------------------------------------------------------
	7. SISTEMA DE BOTONES
-----------------------------------------------------------------------------------*/

/* Base de Botones */
.btn {
	margin-top: var(--spacing-md);
}

.btn:focus {
	color: rgb(232, 232, 232);
}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
	outline-color: #017B71;
}

/* Botones Corporativos */
.btnCorporate {
	color: var(--text-white);
	background-color: var(--primary-color);
}

.btnCorporate:hover {
	background-color: var(--primary-hover);
	box-shadow: var(--shadow-light);
	color: var(--text-white);
}

.btnCorporateGhost {
	color: var(--primary-color);
	background-color: white;
	border-color: var(--primary-color);
}

.btnCorporateGhost:hover {
	color: var(--text-white);
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}

/* Botón Eliminar */
.btnDelete {
	display: block;
	margin: var(--spacing-md) auto var(--spacing-sm);
	background-color: var(--danger-color);
	color: var(--text-white);
}

.btnDelete:hover {
	background-color: var(--danger-hover);
	box-shadow: var(--shadow-light);
	color: var(--text-white);
}

/* Botón Logout */
.btn-logout {
	font-size: 23px;
	padding: 0px 20px;
	color: var(--text-white) !important;
	background-color: var(--primary-color);
	border: none;
	justify-content: center;
	align-items: center;
	display: flex;
}

.btn-gradient {
	position: relative;
	display: inline-block;
	left: -20px;
	background: rgba(0, 0, 0, 0.15);
	border-top-right-radius: 50px;
	padding: 6px 10px 6px 8px;
	box-shadow: 2px 0px 0px 0px rgb(78 72 72 / 40%);
	color: white !important;
}

.btn-text {
	width: 50px;
	color: white !important;
}

/* Botones en Operaciones */
.tableOperations button {
	margin-top: 0;
}

.buttonReceipt span {
	font-size: var(--font-size-xl);
	padding-top: 0.35rem;
}

/*-----------------------------------------------------------------------------------
	8. FORMULARIOS E INPUTS
-----------------------------------------------------------------------------------*/

/* Estados Base de Inputs */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus,
.form-control:focus {
	border: 1px solid var(--primary-color);
	outline: none;
	box-shadow: var(--shadow-focus);
}

.form-control.my-form-control {
	height: auto;
}

/* Placeholders */
input::-webkit-input-placeholder {
	color: var(--text-light);
}

input:-moz-placeholder {
	color: var(--text-light);
}

input::-moz-placeholder {
	color: var(--text-light);
}

input:-ms-input-placeholder {
	color: var(--text-light);
}

/* Estados de Error */
input.has-error,
select.has-error {
	box-shadow: var(--shadow-error);
}

span.has-error,
div.has-error,
p.has-error {
	box-shadow: 0 0 2px 1px #900;
}

/* Input Readonly */
.inputReadonly {
	cursor: not-allowed;
	background-color: #eee;
	opacity: 1;
}

.inputReadonly:focus {
	border-color: var(--border-default) !important;
	box-shadow: none !important;
}

/* Labels y Form Groups */
.greyForm form label,
.form-group label {
	color: var(--text-secondary);
	margin: 0 0 0.4rem 0.3rem;
}

.radio label,
.checkbox label {
	line-height: 1.45;
}

#keyForm label {
	color: var(--text-secondary);
}

#keyForm button {
	margin-top: 0;
}

#keyForm {
	margin-top: var(--spacing-xl);
}

select {
	color: var(--text-secondary);
}

/* Radio Buttons Personalizados */
input[type="radio"] {
	position: absolute;
	width: 0;
	visibility: hidden;
}

.radioSelection .glyphicon {
	font-size: 3rem;
	left: .7rem;
	top: -0.2rem;
	cursor: pointer;
}

.glyphiconUnchecked,
.glyphiconExpand {
	font-family: sans-serif;
}

.glyphiconUnchecked:before {
	content: "\29BE";
	color: #ababab;
}

.glyphiconExpand:before {
	content: "\29BF";
	color: #56a59e;
}

/*-----------------------------------------------------------------------------------
	9. SISTEMA DE ICONOS
-----------------------------------------------------------------------------------*/

/* Base de Iconos */
.icon {
	width: 24px;
	height: 24px;
	display: inline-block;
	margin-right: 3px;
	vertical-align: middle;
	background-size: contain;
	background-repeat: no-repeat;
}

/* Iconos de Monedas */
.iconEUR {
	background-image: url('../img/euro.png');
}

.iconUSD {
	background-image: url('../img/dollar.png');
}

.iconGBP {
	background-image: url('../img/gbp.png');
}

/* Iconos de Contacto */
.iconMail {
	background-image: url('../img/email.png');
}

.iconPhone {
	background-image: url('../img/telefono.png');
}

.iconHelpDesk {
	background-image: url('../img/operadora.png');
}

/* Iconos de Acciones */
.iconAdd {
	background-image: url('../img/add.png');
}

.iconTick {
	background-image: url('../img/check.png');
}

.iconClose {
	background-image: url('../img/close.png');
}

.iconSwift {
	background-image: url('../img/swift.png');
	cursor: pointer;
}

.iconInfo {
	width: 18px;
	height: 18px;
	background-image: url('../img/info.png');
	margin-left: .3rem;
	float: right;
	cursor: pointer;
}

/* Iconos de Navegación */
.arrowRight {
	width: 18px;
	height: 18px;
	background-image: url('../img/arrowRight.png');
}

.arrowLeft {
	width: 18px;
	height: 18px;
	background-image: url('../img/arrowLeft.png');
}

/* Iconos Específicos */
.iconDestination {
	background-image: url('../img/destinos.png');
}

.iconAccounts {
	background-image: url('../img/cuentas.png');
}

.iconE {
	background-image: url('../img/e.png');
}

/* Glyphicons Personalizados */
.glyphicon-remove-circle {
	color: #B60000;
	font-size: 2.6rem !important;
	top: .3rem !important;
	left: .9rem !important;
	cursor: pointer;
}

#pendingOrders .glyphicon-remove-circle {
	left: var(--spacing-xl);
}

.glyphicon-remove-circle:hover {
	color: #990000
}

.svg-inline--fa.fa-w-16 {
	width: 0.8em !important;
}

#spinner {
	display: block;
	margin: 0 auto;
}

/*-----------------------------------------------------------------------------------
	10. SISTEMA DE TABLAS
-----------------------------------------------------------------------------------*/

/* Base de Tablas */
table>thead>tr>th {
	text-align: center;
}

.table {
	margin: var(--spacing-xl) 0;
}

.table>thead>tr>th {
	font-weight: bold;
}

.table.tableOperations>thead>tr>th {
	border-bottom: 2px solid var(--primary-color);
}

.table.tableOperations>tbody>tr>td {
	border: 1px solid var(--border-table);
	vertical-align: middle;
}

.table-hover>tbody>tr:hover {
	background-color: #f1f1f1;
}

/* Tabla de Cuentas */
.tableAccount a {
	width: 100%;
	display: block;
	padding: .7rem 0;
}

.tableAccount p {
	margin-left: 3.25rem;
}

.tableAccount td {
	display: block;
}

.tableAccount tr:last-child {
	border-bottom: 1px solid var(--border-light);
}

.tableAccount .accountNumber {
	margin-top: -5px;
	margin-bottom: .6rem;
	font-size: 1.25rem;
}

.accountQuantity {
	color: var(--primary-color);
	font-size: var(--font-size-large);
	font-weight: bold;
}

/* Tabla de Opciones */
.tableOptions.table>tbody>tr>td>a,
.tableOptions.table>tbody>tr>td>div>a {
	display: block;
	padding: 2.5rem .5em;
	vertical-align: middle;
}

.tableOptions tr:last-child td {
	border-bottom: 1px solid var(--border-light);
}

.tableOptions.table a:hover,
.tableOptions.table a:focus {
	color: var(--primary-color);
	border-bottom: none;
}

.tableOptions h5,
.greyForm h5 {
	display: inline;
	font-weight: bold;
}

/* Tabla con Fondos Alternados */
.tableBg tr:nth-child(odd)>td {
	background-color: #f0f0f0;
}

.tableBg tr:nth-child(even)>td {
	background-color: #f8f8f8;
}

/* Operaciones en Tablas */
.tableOperations .popover-delete {
	display: inline-block !important;
	vertical-align: middle;
}

#frequent .popover-delete {
	display: inline-block;
}

/*-----------------------------------------------------------------------------------
	11. SISTEMA DE MODALES
-----------------------------------------------------------------------------------*/

/* Base de Modales */
.container.modal-open {
	padding-right: 15px !important;
	padding-left: 15px !important;
	overflow: auto;
}

.modal-dialog {
	top: 10rem;
}

.modal-header {
	text-transform: uppercase;
	font-weight: bold;
	border-bottom: 1px solid var(--border-modal);
	background-color: var(--bg-modal);
}

.close {
	text-shadow: none;
}

.modal-header .close {
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid #adadad;
	border-radius: 4px;
	font-size: 1.5rem;
	opacity: .4;
}

.modal-header .close:hover {
	background-color: #E6E6E6;
}

.modal-body {
	min-height: 150px;
	background-color: var(--bg-modal);
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.modal-body table {
	width: 100% !important;
}

/* Modal de Recibo Específico */
#receiptModal .modal-dialog {
	width: 99%;
	max-width: 768px;
	max-height: 500px;
	overflow: scroll;
	top: 3rem;
}

#receiptModal .modal-body {
	background-color: var(--text-white);
	padding-top: .3rem;
	padding-bottom: .3rem;
}

#receiptModal .modal-body div {
	margin: var(--spacing-sm) 0;
	line-height: 1.2;
	text-align: justify;
	color: #797979;
}

#receiptModal .modal-body div a {
	color: var(--primary-color);
	font-weight: bold;
}

#receiptModal .modal-body tr td:nth-child(2) {
	padding-left: var(--spacing-xl);
}

#receiptModal .modal-body table:first-child div {
	text-align: inherit;
}

#receiptModal .modal-body table:first-child tr:nth-child(2) div {
	color: #000;
	font-weight: bold;
	margin: var(--spacing-xl) 0;
}

#requestInfo {
	margin: 0.5rem auto;
	display: block;
}

/* Moderniza el contenedor del modal usando la paleta corporativa */
.modern-modal {
  border-radius: 10px;
  border: none;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Encabezado con fondo corporativo claro y borde definido */
.modern-modal .modal-header {
  background: var(--bg-modal);
  border-bottom: 1px solid var(--border-modal);
  padding: 15px 20px;
}

.modern-modal .modal-title {
  font-weight: 600;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Cuerpo del modal con tipografía más legible */
.modern-modal .modal-body {
  font-size: 1.5rem; /* equivalente a 15px si 1rem=10px */
  line-height: 1.6;
  padding: 20px;
  background-color: var(--bg-modal);
  color: var(--text-primary);
}

/* Footer con fondo claro y borde superior */
.modern-modal .modal-footer {
  border-top: 1px solid var(--border-modal);
  background: var(--bg-modal);
  padding: 12px 20px;
}

/* Botón principal adaptado a los colores corporativos */
.modern-modal .btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.modern-modal .btn-primary:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  box-shadow: var(--shadow-light);
}

/*-----------------------------------------------------------------------------------
	12. NAVEGACIÓN Y HEADER
-----------------------------------------------------------------------------------*/

/* Header Base */
header {
	padding-top: var(--spacing-lg);
	margin-bottom: var(--spacing-xl);
}

header a {
	border-bottom: none;
}

header h1+a {
	display: block;
}

header .btn {
	margin-top: 0;
}

#logo {
	width: 18rem;
	margin: 0 auto var(--spacing-xl);
	display: block;
}

.navbar-brand {
	margin-top: 4% !important;
}

/* Navbar */
.navbar-default {
	background-color: white;
	border-bottom: 2px solid var(--bg-primary);
}

.navbar-default .navbar-toggle {
	border-color: var(--primary-color);
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
	background-color: var(--primary-color);
}

.navbar-default .navbar-toggle .icon-bar {
	background-color: var(--primary-color);
}

.navbar-default .navbar-toggle:hover .icon-bar,
.navbar-default .navbar-toggle:focus .icon-bar {
	background-color: white;
}

.nav>li>a {
	text-transform: uppercase;
	padding: 25px 15px;
	font-size: 13px;
	color: var(--primary-color) !important;
	font-weight: 800;
	font-family: var(--font-family-primary);
}

.nav>li>a:hover,
.nav>li>a:focus {
	text-decoration: underline solid var(--primary-color) 2px;
	text-underline-offset: 5px;
	background-color: white;
}

nav navbar-nav {
	margin-left: 4%;
}

/* Dropdowns */
.dropdown-item {
	padding: 12px;
}

.dropdown-divider {
	border-top: 2px solid var(--primary-color);
}

.dropdown-menu>li>a {
	padding: 10px;
}

/* Contacto en Header */
#contactPhone {
	margin: var(--spacing-md) auto 0;
}

#contactPhone img {
	width: 3rem;
	height: 3rem;
	display: inline-block;
	vertical-align: middle;
	margin-right: var(--spacing-md);
}

#contactPhone p {
	display: inline-block;
	padding-left: var(--spacing-lg);
	border-left: 2px solid var(--border-default);
	font-weight: bold;
	font-size: var(--font-size-large);
	vertical-align: middle;
}

#contactHeader {
	margin-bottom: var(--spacing-md);
}

#contactHeader>div:first-child {
	min-height: 3.5rem;
	border-right: 2px solid var(--border-default);
}

#contactHeader>div:first-child img {
	width: 3.5rem;
	height: 2.5rem;
	display: block;
	vertical-align: middle;
	margin: 0 auto .3rem;
}

#contactHeader button {
	display: block;
	width: 16rem;
	max-width: 100%;
}

#contactHeader div:nth-child(2) img {
	display: inline-block;
	width: var(--spacing-xl);
	height: var(--spacing-xl);
	margin-right: var(--spacing-sm);
	vertical-align: middle;
}

/* Usuario en Header */
#icoUser {
	margin: var(--spacing-md) var(--spacing-sm) var(--spacing-md) 1.2rem;
}

#icoUser+span {
	width: 75%;
	margin-top: var(--spacing-lg);
	font-size: 1.2rem;
}

#logoutBtn {
	text-transform: uppercase;
	font-size: 14px;
	color: var(--primary-color) !important;
}

/* Idiomas */
.translate {
	cursor: pointer;
}

.div-idiomas {
	margin-bottom: 5px;
}

.div-idiomas>#en {
	float: right;
	padding-top: 10px;
}

.div-idiomas>#es {
	padding-top: 10px;
}

/* Navegación Cambio Password */
#navMenuChangePsw {
	margin-top: 10rem;
}

#navMenuChangePsw li a {
	opacity: .3;
}

#navMenuChangePsw li.activated a {
	opacity: 1;
}

/*-----------------------------------------------------------------------------------
	13. MENSAJES Y NOTIFICACIONES
-----------------------------------------------------------------------------------*/

/* Sistema de Mensajes */
#messagesForm {
	width: 100%;
	position: relative;
	display: inline-block;
	margin-top: 15px;
	margin-bottom: 15px;
}

.bg-danger,
li.bg-warning,
li.bg-success {
	padding: 10px;
	margin: 3px 0;
	border-radius: 5px;
	font-size: var(--font-size-base);
	line-height: 1.6rem;
}

/* Sistema de Tooltips */
/* .tooltip {
	position: relative;
	display: inline-block;
	opacity: 1 !important;
	cursor: pointer !important;
}

.tooltip .tooltiptext {
	visibility: hidden;
	background-color: #555;
	color: var(--text-white);
	text-align: center;
	border-radius: 6px;
	padding: 5px 5px;
	position: absolute;
	z-index: 1;
	bottom: 125%;
	left: 50%;
	margin-left: -60px;
	opacity: 0;
	transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
} */

.tooltip-inner {
	background-color: var(--primary-color)
}

.tooltip.right .tooltip-arrow {
	border-right-color: var(--primary-color)
}

/*-----------------------------------------------------------------------------------
	14. COMPONENTES ESPECÍFICOS DE NEGOCIO
-----------------------------------------------------------------------------------*/

/* Operaciones y Transferencias */
#orderCompleted {
	margin: var(--spacing-xxl) 0 0;
	background-color: var(--text-white);
}

/* Información de Datos */
.dataInfo p {
	margin: var(--spacing-md) 0;
}

.dataInfo p span {
	font-weight: bold;
	color: var(--primary-color);
}

.dataInfo button,
.dataInfo a {
	width: 220px;
	white-space: normal;
	margin: var(--spacing-xl) auto;
}

.dataInfo .panel-default {
	width: 480px;
	border: 1px solid var(--primary-color);
	padding: var(--spacing-sm);
	margin-left: var(--spacing-xl);
}

#infoNoFw .btn {
	width: 250px;
	padding: var(--spacing-md) 0;
	margin: var(--spacing-xl) auto;
}

/* Páginas Específicas */
#quienesSomos p,
#avisoLegal p {
	margin: var(--spacing-lg) 0;
	text-align: justify;
}

/* Deshabilitar visualmente y funcionalmente los enlaces con data-tipo="2" */
a.accountSelection[data-tipo="2"] {
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
    filter: grayscale(50%);
}

/* Anular cualquier efecto hover */
a.accountSelection[data-tipo="2"]:hover {
    opacity: 0.6 !important;
    background-color: transparent !important;
    transform: none !important;
    box-shadow: none !important;
    /* Añade aquí cualquier otra propiedad que necesites resetear */
}

/*-----------------------------------------------------------------------------------
	15. ANIMACIONES Y EFECTOS
-----------------------------------------------------------------------------------*/

/* Nota: Animación shake comentada en original - se mantiene comentada */
/*
.shake {
	position: relative;
	-webkit-animation: shaking 0.1s linear 0s 6;
	animation: shaking 0.3s linear 0s 3;
}

@-webkit-keyframes shaking {
	0% {
		left: 15x;
	}

	50% {
		left: -15px;
	}

	100% {
		left: 0px;
	}
}

@keyframes shaking {
	0% {
		left: 15px;
	}

	50% {
		left: -15px;
	}

	100% {
		left: 0px;
	}
}
*/

/*-----------------------------------------------------------------------------------
	16. RESPONSIVE Y MEDIA QUERIES
-----------------------------------------------------------------------------------*/

/* Nota: No hay media queries específicos en el CSS original, 
   se basa en el sistema grid de Bootstrap 3.4.1 */