/*
 * Name: CABVAL Bootstrap Stylesheet
 * Bootstrap v4.0.0 (https://getbootstrap.com)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

 :root {

  --transparent: rgba(0,0,0,0.0001);

  /*Device Dimensions*/
  --breakpoint-mobile: 600px;
  --breakpoint-tablet: 1024px;
  --breakpoint-desktop: 1440px;
  --breakpoint-wide-desktop: 1920px;
  --breakpoint-ultra-wide: 2560px;

  --font-family-sans-serif: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /*Body*/
  --body-margin-top: 0px;
  --body-margin-bottom: 180px;

  /*NavBar*/
  --navbar-height: 150px;
  --navbar-width: 95vw;

  /*Page Content Wrapper*/
  --max-page-content-width: 1500px;
  
  /*Social Floating Tab*/
  --social-tab-background-color: rgba(84, 84, 84, 0.3);

  /*Table*/
  --table-margin: 10px;
  --table-border-padding: 10px;
  --table-border-radius: 4px;

  /*Thick Bordered*/
  --thick-border-size: 3px;
  --thick-border-style: solid;

  /* Region Section */
  --region-section-border-size: 1px;
  --region-section-border-style: solid;
  --region-section-border-round: 8px;

  /*Card Regions*/
  --card-item-border-size: 1px;
  --card-item-border-style: solid;
  --card-item-border-round: 4px;
  --card-item-icon-size: 128px;
  --card-item-icon-border-radius: 50%;

  /*Scrollbars*/
  --scrollbars-size: 5px;

  /*WordPress*/
  --wordpress-icon-size: 32px;

}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: var(--transparent);
  user-select: none;
  overflow: hidden;
  margin: 0px !important;
  padding: 0px !important;
  width: 100vw;
  height: 100vh;
}

@-ms-viewport {
  width: device-width;
}

/*article,
aside,
dialog,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}*/

/*body {
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  background-color: var(--body-background-color);
  color: var(--body-foreground-color);
  margin: 0px;
  padding: 0px;
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  user-select: none;
  overflow: auto;
  text-align: justify;
  hyphens: auto;
}*/

body {
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  background-color: var(--body-background-color);
  color: var(--body-foreground-color);
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  user-select: none;
  overflow-y: auto;
  overflow-x: hidden;
  text-align: justify;
  hyphens: auto;
}

@media (max-height: 800px) {
	html,
    body {
        overflow: auto;
    }
}

@media (max-height: 80dvh) {
	html,
    body {
        overflow: auto;
    }
}

a {
  text-decoration: none;
  color: inherit;
}

h1 {
  font-size: clamp(28px, 5vw, 42px);
}

h2 {
  font-size: clamp(24px, 4vw, 32px);
}

h3 {
  font-size: clamp(20px, 3.5vw, 26px);
}

h4 {
  font-size: clamp(18px, 3vw, 20px);
}

h5 {
  font-size: clamp(16px, 2.5vw, 18px);
}

h6 {
  font-size: clamp(16px, 2vw, 16px);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 3px 0px 3px 0px;
  padding: 0px;
  background-color: var(--transparent);
  color: var(--headers-foreground-color);	
}

p {
  margin: 3px 0px 3px 0px;
  padding: 0px;
  background-color: var(--transparent);
  color: var(--body-foreground-color);	
}

h1,h2,h3,h4,h5,h6 {
  text-align: left;
  hyphens: unset;
}

.navbar-brand {
  padding: 0px 20px 0px 20px;
}

.navbar-brand .custom-logo {
  height: 100px;
  width: auto;
}

.dropmenu {
  height: 25px;
  width: 36px;
  background-color: white;
  -webkit-mask: url("/wp-content/themes/cabval/assets/img/icon-lines-options-92x64-white.png") center/contain no-repeat;
  mask: url("/wp-content/themes/cabval/assets/img/icon-lines-options-92x64-white.png") center/contain no-repeat;
  transition: background-color 0.3s ease;
  display: none;
}

.dropmenu:hover {
  background-color: var(--primary-color);
}

.cabval-dropdown-menu {
  position: fixed;
  top: 0;
  right: 0;
  /* drawer attaches to the right side */
  width: 85vw;
  height: 100vh;
  background-color: var(--navbar-background-color);
  color: var(--navbar-foreground-color);
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: flex-start;
  align-items: stretcg;
  z-index: 900;
  padding: 20px 0px 5px 0px;
  margin: 0px;
  list-style: none;
  border-left: 1px solid var(--navbar-foreground-color);
}

.cabval-dropdown-menu>li {
  display: flex;
  padding: 10px;
  margin: 0px;
  font-size: 1.2rem;
  cursor: pointer;
  align-items: center;
  justify-content: flex-start;
}

.cabval-dropdown-menu>li:not(:first-child) {
  border-top: 1px dotted var(--navbar-foreground-color);
  margin-top: 2px;
}

.cabval-dropdown-menu>li:last-child {
  border-bottom: 1px dotted var(--navbar-foreground-color);
}

.cabval-dropdown-menu>li>a {
  width: 100%;
}

.cabval-dropdown-menu>li br {
  display: inline;
  content: " ";
}

.cabval-dropdown-menu {
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.cabval-dropdown-menu.open {
  transform: translateX(0);
}

/*--------------------------- Footers -----------------------------*/
/*.body-section.footer {
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	gap: 10px;
	font-size: 0.7rem;
}*/

.body-section.footer {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 10px;
  font-size: 0.5rem;
  padding: 1rem;         /* Opcional: para que no pegue al borde */
  background-color: var(--body-background-color); /* Para que no sea transparente */
  width: var(--max-page-content-width);
  max-width: var(--max-page-content-width);
}

.body-section.footer .left,
.body-section.footer .right {
	display: flex;
	flex-direction: column;
	align-items:flex-end;
	flex-grow: 1;
	margin-bottom: 100px;
	margin-left: auto;
  	margin-right: auto;
}

.body-section.footer .right {
	justify-content: flex-end;
}

.body-section.footer .designer {
	font-size: 0.7rem;
}

.body-section.footer .designor>a:before {
	content: "Núbol Solutions, S. de R.L. de C.V.";
}

/*-------------------- Unordered Lists -----------------------------*/
ul {
  margin-block-start: 3px;
  margin-block-end: 3px;
}

.inline-link {
  text-decoration: none;
  color: var(--primary-color);
  font-weight: 600;
  font-style: italic;
}

.link {
  cursor: pointer;
  position: relative;
  padding: 2px 4px;
  transition: all 0.25s ease;
  text-align: left;
}

.link.current {
  color: var(--link-current-color);
  font-weight: 600;
}

.link:hover {
  filter: var(--link-current-brightness);
  color: var(--link-current-color);
  text-shadow:
    0 0 6px var(--link-current-shadow-6px-color),
    0 0 12px var(--link-current-shadow-12px-color);
  transition: all 0.25s ease;
}

.link.animated {
  border-radius: 4px;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.custom-link.animated::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 2px;
  background: var(--link-hover-animated-background-after-color);
  transition: width 0.25s ease;
}

.link.animated:hover {
  background-color: var(--link-hover-animated-background-color);
}

.link.as-button {
  background-color: var(--primary-color);
  color: var(--body-background-color);
  outline: none;
  border: 0px;
  border-radius: 4px;
  padding: 12px 12px;
  min-width: 120px;
  cursor: pointer;
  overflow: hidden;
  width: 100%;
  text-align: center;
}

/*------------ Tables ------------*/
.table-wrapper {
	display:flex;
	flex-direction: column;
	flex-grow: 1;
	height: -webkit-fill-available;
}

.table-header {
  display: block;
  gap: 0px;
  background-color: transparent;
  padding: 0px;
  border-top: 1px solid var(--table-border-color);
  border-left: 1px solid var(--table-border-color);
  border-right: 1px solid var(--table-border-color);
  border-radius: 4px 4px 0px 0px;
  margin-bottom: 0px;
}

.table-body-wrapper {
  flex: 1 1 0;   /* Fuerza al elemento a empezar con altura 0 y luego crecer */
  min-height: 0; /* Clave en Firefox/Chrome para que el scroll funcione en flex */
  overflow-y: auto;
  margin-top: 0px;
  border-bottom: 1px solid var(--table-border-color);
  border-left: 1px solid var(--table-border-color);
  border-right: 1px solid var(--table-border-color);
  border-radius: 0px 0px 4px 4px;
}

.table-header .thead,
.table-body-wrapper .tbody {
  width: 100%;
  max-width: 100%;
}

.table-body-wrapper .tbody {
  font-size: 0.8em;
}

.table-header .row,
.table-body-wrapper .tbody>.row {
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  margin-top: 2px;
}

.table-body-wrapper .tbody>.row:last-child {
	margin-bottom: 2px;
}

.table .row:not(:last-child) {
  margin-bottom: 2px;
}

.table-header .thead .column.header {
  text-align: center;
}

.table-header .column.row-header,
.table-body-wrapper .column.row-header {
	display: flex;
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 0;
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  overflow: hidden;
}

.table-body-wrapper .column {
  padding: 0.75rem;
  vertical-align: top;
  background-color: var(--table-cell-background-color);
  color: var(--table-cell-foreround-color);
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Corta texto largo para no romper la tabla */
  white-space: nowrap;
  height: 100%;
}

.table-header .thead .column.header {
  vertical-align: bottom;
  border-bottom: 2px solid var(--table-border-color);
}

.thead .column:not(:first-child):not(:last-child),
.tbody .column:not(:first-child) {
  border-left: 1px dotted var(--table-border-color);
}

.table-body-wrapper .tbody>.row.hidden {
  display: none;
}

.table-header .row-header,
.table-header .column.header,
.table-header .scrollbar-fill {
  padding: 0.75rem;
  vertical-align: top;
  /*border-top: 1px solid var(--table-border-color);*/
  background-color: var(--table-cell-background-color);
  color: var(--table-cell-foreround-color);
}

.table-header .thead .column.row-header {
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
}

.thead .column.scrollbar-fill {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 0;
  width: var(--scrollbars-size);
  min-width: var(--scrollbars-size);
  max-width: var(--scrollbars-size);
}

.thead .column.row-header,
.thead .column.scrollbar-fill,
.tbody .column.row-header {
	padding: 0.75rem 0px 0.75rem 0px;
}


/*------------------------------------ Scrollbars ------------------------------------*/
/* Chrome, Edge, Safari */
*::-webkit-scrollbar {
  width: var(--scrollbars-size);
  height: var(--scrollbars-size);
}

*::-webkit-scrollbar-track {
  background: var(--body-background-color);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: 6px;
  border: 2px solid var(--body-background-color);
}

*::-webkit-scrollbar-thumb:hover {
  filter: brightness(1.5);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--primary-color) var(--body-background-color);
}

/*------------------------------ inputs ------------------------------------*/
input,
select,
textarea {
  background-color: var(--input-background-color);
  color: var(--input-foreground-color);
  padding: 8px 10px;
  font-size: 16px;
  border: 0.5px solid var(--input-border-color);
  border-radius: 4px;
  outline: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* Hover */
input:hover,
select:hover,
textarea:hover {
  background-color: var(--input-hover-background-color);
  border-color: var(--input-hover-foreground-color);
}

/* Focus */
input:focus,
select:focus,
textarea:focus {
  background-color: var(--input-focus-background-color);
  border-color: var(--input-focus-border-color);
  /* professional blue accent */
  /*box-shadow: 0 0 0 3px var(--input-focus-border-color); -- rgba(106, 160, 255, 0.25);*/
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--input-focus-border-color), transparent 75%);
  outline: none;
}

/* Disabled */
input:disabled,
select:disabled,
textarea:disabled {
  background-color: #1f1f1f;
  color: #777;
  border-color: #333;
  cursor: not-allowed;
}

input[type="search"] {
  padding-left: 36px;
  background-image: url('/wp-content/themes/cabval/assets/img/magnifying-glass-24x24-white.png');
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: 6px center;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: brightness(0) invert(0.9);
}

input:required+label::before,
select:required+label::before,
textarea:required+label::before {
  content: "* ";
  color: var(--required-color);
}

input:required:invalid+label::before,
select:required:invalid+label::before,
textarea:required:invalid+label::before {
  content: "! ";
  color: var(--danger-color);
}

/*------------------------------ file inputs ------------------------------------*/
.file-drop-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.file-drop-zone {
  border: 2px dashed var(--file-drop-zone-border-color);
  border-radius: 6px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  background-color: var(--file-drop-zone-background-color);
  transition: border-color 0.2s, background-color 0.2s;
  filter: brightness(0.8);
}

.file-drop-zone:hover {
  border-color: var(--file-drop-zone-hover-border-color);
  background-color: var(--file-drop-zone-hover-background-color);
  filter: brightness(1.0);
}

.file-drop-zone.dragover {
  border-color: var(--primary-color);
}

.file-drop-text {
  font-size: 14px;
  color: var(--input-foreground-color);
}

.file-hidden {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

/*------------------------------------ navbar ------------------------------------*/
.navbar-wrapper {
  position: absolute;
  top: 0px;
  left: 50%;
  height: var(--navbar-height);
  width: var(--navbar-width);
  transform: translateX(-50%);
  background-color: transparent;
  z-index: 1000;
}

.navbar-wrapper .nav-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  opacity: 0.80;
}

.navbar-wrapper .content {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  gap: 20px;
  flex-wrap: nowrap;
  align-items: center;
  padding: 5px 10px;
  background-color: var(--navbar-background-color);
}

.cabval-user-card-info-placeholder {
	flex-grow: 1;
}

.navbar-wrapper .content .navmenu {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  font-size: 1.15rem;
}

.navbar-wrapper .content .navmenu .cabval-menu-container {
  display: flex;
  flex-direction: row;
  gap: 10px;
  flex-wrap: nowrap;
  height: 100%;
  width: 100%;
  justify-content: flex-end;
}

.navbar-wrapper .content .navmenu .cabval-menu {
  display: flex;
  flex-direction: row;
  gap: 10px;
  position: relative;
  justify-content: flex-end;
}

.navbar-wrapper .content .navmenu .sub-menu {
  position: absolute;
  display: none;
  flex-direction: column;
  margin: 0px;
  padding: 10px 0px 10px 0px;
  gap: 0px;
  top: 98%;
  transform: none;
  background-color: var(--navbar-background-color-solid);
  z-index: 1010;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  min-width: 300px;
}

.navbar-wrapper .content .navmenu .cabval-menu>li {
  color: var(--body-background-color);
  background-color: var(--navbar-background-color-solid);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 150px;
  cursor: pointer;

  /* animation setup */
  background: linear-gradient(to bottom, transparent 0%, transparent 100%);
  background-size: 100% 200%;
  background-position: top;
  transition: background-position 5s ease-out;

  overflow: visible;
}

.navbar-wrapper .content .navmenu .cabval-menu>li.current,
.navbar-wrapper .content .navmenu .cabval-menu>li:hover {
  background: linear-gradient(to bottom, var(--navbar-emphasis-color) 0%, var(--navbar-emphasis-color) 100%);
  background-size: 100% 200%;
  background-position: bottom;
  transition: background-position 5s ease-in;
}

.navbar-wrapper .content .navmenu .sub-menu>li {
  background-color: var(--background-color-solid);
  color: var(--navbar-foreground-color);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 48px;
  /* Asegura que los hijos también llenen el ancho */
  min-width: unset;
  /* Quitamos el min-width para que no desborde si el padre es pequeño */
  padding: 5px 10px 5px 10px;
  /* Ajuste opcional de espaciado */
  margin: 0px;
  cursor: pointer;
  border-bottom: var(--navbar-background-divider-style);
}

.navbar-wrapper .content .navmenu .sub-menu>li:first-child {
  border-top: var(--navbar-background-divider-style);
}

.cabval-menu .menu-item {
  padding-left: 10px;
  padding-right: 10px;
  font-weight: 600;
}

.navbar-wrapper .content .navmenu .cabval-menu>li:has(.sub-menu):hover .sub-menu {
  display: flex;
}

.navbar-wrapper .content .navmenu .cabval-menu>li>span {
  width: 100%;
  text-align: center;
}

.navbar-wrapper .content .navmenu .sub-menu>li>span:hover {
  text-shadow: 0.5px 0 0 currentColor, -0.5px 0 0 currentColor;
}

.navbar-wrapper .menu-item span {
  width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.navbar-wrapper .sub-menu .menu-item span {
  text-align: left;
  font-weight: 200;
}

.body-section {
  margin-left: auto;
  margin-right: auto;
  padding: 0px 20px;
  max-width: var(--max-page-content-width);
}

/*------------------------------------ page-content-wrapper ------------------------------------*/
.body-section.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0px;
  margin-top: var(--navbar-height);
  margin-bottom: 5px;
  width: var(--max-page-content-width);
  max-width: var(--max-page-content-width);
  /*height: -webkit-fill-available;*/
  padding-top: 10px;
}

/*------------------------------------- region --------------------------------------------------*/
.region-section {
  border: var(--region-section-border-size) var(--region-section-border-style) var(--region-section-border-color);
  border-radius: var(--region-section-border-round);
  background-color: var(--region-section-background-color);
  color: var(--region-section-foreground-color);
  padding: 20px;
}

/*------------------------------------- forms --------------------------------------------------*/
form.record-edit {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0px;
}

form.record-edit .toolbar {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 4px;
}

.toolbar {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  padding: 5px 20px 5px 20px;
}

.toolbar button {
  position: relative;
  color: white;
  background: none;
  /* remove direct background */
  outline: none;
  border: 0px;
  border-radius: 4px;
  padding: 12px 12px;
  min-width: 120px;
  cursor: pointer;
  overflow: hidden;
  /* keep pseudo-element clipped */
}

.toolbar button::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--primary-color);
  filter: brightness(0.8);
  z-index: -1;
  /* sits behind the text */
  border-radius: 4px;
}

.toolbar button:hover::before {
  filter: brightness(1);
}

form.record-edit .toolbar button:hover {
  filter: brightness(1);
}

.field-list {
  list-style: none;
  padding: 0px;
  margin: 0px;
  display: flex;
  flex-direction: row;
  gap: 2px;
}

.field-list.vertical {
  flex-direction: column;
}

.field-list li {
  display: flex;
  flex-direction: column-reverse;
  gap: 1px;
  align-content: stretch;
}

/*-------------------------------------------------- confirm dialog -------------------------------------------------*/
.custom-confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.custom-confirm-modal {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  min-width: 300px;
  max-width: 420px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.custom-confirm-message {
  font-size: 16px;
  color: #333;
}

.custom-confirm-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.custom-confirm-cancel {
  padding: 6px 14px;
  border: 1px solid #aaa;
  background: #f5f5f5;
  border-radius: 4px;
  cursor: pointer;
}

.custom-confirm-ok {
  padding: 6px 14px;
  border: none;
  background: var(--primary-color, #0073aa);
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

/*-------------------------------------------------- alert dialog -------------------------------------------------*/
.custom-alert-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.custom-alert-modal {
  background: white;
  padding: 20px;
  width: 320px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.custom-alert-header {
  height: 6px;
  border-radius: 4px;
}

.alert-error {
  background: #d9534f;
}

.alert-warning {
  background: #f0ad4e;
}

.alert-info {
  background: #0275d8;
}

.custom-alert-message {
  font-size: 15px;
  color: #333;
}

.custom-alert-ok {
  align-self: flex-end;
  padding: 6px 14px;
  border: none;
  border-radius: 4px;
  background: #0275d8;
  color: white;
  cursor: pointer;
}

/*--------------------------------- Region Modifiers ----------------------------------------------*/
.thick-bordered {
  border: var(--thick-border-size);
  border-style: var(--thick-border-style);
  border-color: transparent;
}

.thick-bordered.left {
  border-left-color: var(--thick-border-color);
}

.thick-bordered.right {
  border-right-color: var(--thick-border-color);
}

.thick-bordered.top {
  border-top-color: var(--thick-border-color);
}

.thick-bordered.bottom {
  border-bottom-color: var(--thick-border-color);
}

.greedy {
  flex-grow: 1;
}

.padded-10 {
  padding: 10px;
}

.padded-20 {
  padding: 20px;
}

.scrollable {
  overflow: hidden;
}

.scrollable.vertical {
  overflow-y: auto;
}

.scrollable.horizontal {
  overflow-x: auto;
}

.scrollable.auto {
  overflow: auto;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

.centered-text {
  text-align: center;
}

.rounded {
  border-radius: 50% !important;
}

.contained-background {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
}

.background-120 {
  width: 120px;
  height: 120px;
}

.background-22 {
  width: 22px;
  height: 22px;
}

.inline {
  display: inline-block;
}

.overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: var(--overlay-color);
  opacity: var(--overlay-opacity);
  z-index: 9000;
}

.not-justified {
  text-align: start;
  hyphens: none;
}

.hidden {
  display: none !important;
}

.full-height {
  height: 100%;
}

.full-width {
  width: 100%;
}

.fill-height {
  height: -webkit-fill-available;
}

.fill-width {
  width: -webkit-fill-available;
}

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

.align-center {
  align-items: center;
}

.flex-flow {
  display: flex;
  flex-direction: row;
  gap: 5px;
  width: 100%;
}

.flex-flow.horizontal-flow {
  flex-direction: row;
}

.flex-flow.vertical-flow {
  flex-direction: column;
}

.gap-10,
.flex-flow.gap-10 {
  gap: 10px;
}

.gap-15,
.flex-flow.gap-10 {
  gap: 10px;
}

.gap-20,
.flex-flow.gap-20 {
  gap: 20px;
}

.block-header {
	flex-grow: 0;
	text-align: center;
}

.block-body {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.pointer {
	cursor: pointer;
}

.pointer:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    transition: box-shadow 0.2s ease;
}

/*--------------------------------- Wordpress related --------------------------------------------*/

div:has(.cabval-wordpress-icon) {
  margin-right: 10px;
}

.wordpress-link .cabval-wordpress-icon {
  display: block;
  width: var(--wordpress-icon-size);
  height: var(--wordpress-icon-size);
  background-color: var(--wordpress-icon-color); 
  -webkit-mask: url("/wp-content/themes/cabval/assets/img/wordpress-icon-64x64-black.png") center/contain no-repeat;
  mask: url("/wp-content/themes/cabval/assets/img/wordpress-icon-64x64-black.png") center/contain no-repeat;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.wordpress-link:hover .cabval-wordpress-icon {
  background-color: var(--wordpress-icon-hover-color);
}

.wordpress-link .label {
  font-size: 0.8rem;
  color: var(--navbar-foreground-color);
}

.wordpress-link:hover .label {
  color: var(--wordpress-icon-hover-color);
}

/*--------------------------------- Google Maps --------------------------------------------*/
.google-maps-frame {
  width: 100%;
  border: 0;
  border-radius: 4px;
}

.google-maps-link {
  display: none !important;
}

/*-------------------------------- 404 Error Page ------------------------------------------*/
/* Fondo general */
.cv-error-page {
  padding: 80px 0;
  background: var(--p404-body-background-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Contenedor principal */
.cv-error-wrapper {
  background: var(--p404-body-wrapper-background-color);
  padding: 60px 40px;
  border-radius: 10px;
  max-width: 700px;
  margin: 0 auto;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* Código 404 */
.cv-error-code {
  font-size: 120px;
  font-weight: 800;
  color: var(--primary-color);
  /* Azul institucional */
  margin-bottom: 10px;
  letter-spacing: -3px;
}

/* Mensaje principal */
.cv-error-message {
  font-size: 26px;
  font-weight: 600;
  color: white;
  margin-bottom: 15px;
}

/* Descripción */
.cv-error-description {
  font-size: 17px;
  color: rgb(199, 199, 199);
  margin-bottom: 30px;
}

/* Botón */
.cv-btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.cv-btn-primary {
  background: var(--primary-color);
  color: #ffffff;
  border: 1px solid var(--primary-color);
}

.cv-btn-primary:hover {
  background: #ffffff;
  color: var(--primary-color);
}

/* Ajustes responsivos */
@media (max-width: 768px) {
  .cv-error-code {
    font-size: 90px;
  }

  .cv-error-wrapper {
    padding: 40px 25px;
  }
}

/*# sourceMappingURL=bootstrap.css.map */