:root{
	--primary-color: #EC5C20;
	--secondary-color: #1A478B;
	--third-color: #2c323a;
	--fourth-color: #23282E;
	--fifth-color: #1B2026;	
}

@font-face{
	font-family: 'sanfrancisco-regular';
	src:url('sanfrancisco-regular.woff');
}

/* vietnamese */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/anton/v25/1Ptgg87LROyAm3K8-C8QSw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/anton/v25/1Ptgg87LROyAm3K9-C8QSw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/anton/v25/1Ptgg87LROyAm3Kz-C8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*{
	padding:0px;
	margin:0px;
}

html,
body{
	font-family: 'sanfrancisco-regular' !important;
	height:100%;
	padding:0px;
	margin:0px;
}

/* Controles nativos (<select>, scrollbars): el desplegable sigue el tema del sistema del navegador */
body.oscuro{
	color-scheme: dark;
}

body.claro{
	color-scheme: light;
}

h1 {
	font-family: 'Anton' !important;
  font-size: clamp(2rem, 5vw, 3.5rem);
}

h2 {
	font-family: 'Anton' !important;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}

h3 {
	font-family: 'Anton' !important;
  font-size: clamp(1.2rem, 3vw, 2rem);
}

h4 {
	font-family: 'Anton' !important;
  font-size: clamp(1rem, 2vw, 1.5rem);
}

h5 {
	font-family: 'Anton' !important;
  font-size: clamp(0.9rem, 1.5vw, 1.2rem);
}

h6 {
	font-family: 'Anton' !important;
  font-size: clamp(0.8rem, 1vw, 1rem);
}

/* Dropdowns Bootstrap — superficie flotante, ítems en píldora */
.dropdown-menu{
	min-width: 10.5rem;
	padding: 0.35rem !important;
	font-size: 0.8125rem;
	line-height: 1.35;
	list-style: none;
	border-radius: 12px !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	background:
		linear-gradient(185deg, rgba(50, 58, 68, 0.98) 0%, rgba(28, 33, 40, 0.99) 100%) !important;
	box-shadow:
		0 14px 42px rgba(0, 0, 0, 0.38),
		0 1px 0 rgba(255, 255, 255, 0.05),
		inset 0 1px 0 rgba(255, 255, 255, 0.055);
	margin-top: 0.35rem !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.claro .dropdown-menu{
	border-color: rgba(15, 23, 42, 0.1) !important;
	background:
		linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important;
	box-shadow:
		0 14px 40px rgba(15, 23, 42, 0.14),
		0 2px 0 rgba(255, 255, 255, 0.85) inset,
		inset 0 -1px 0 rgba(15, 23, 42, 0.04);
}

.dropdown-menu .dropdown-item{
	border-radius: 8px;
	padding: 0.45rem 0.72rem !important;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.92) !important;
	transition:
		background-color 0.16s ease,
		color 0.16s ease,
		transform 0.16s ease;
}

.claro .dropdown-menu .dropdown-item{
	color: #1e293b !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus{
	background: rgba(255, 255, 255, 0.11) !important;
	color: #fff !important;
}

.claro .dropdown-menu .dropdown-item:hover,
.claro .dropdown-menu .dropdown-item:focus{
	background: rgba(26, 71, 139, 0.1) !important;
	color: #0f172a !important;
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active{
	background:
		linear-gradient(145deg, rgba(236, 92, 32, 0.28) 0%, rgba(236, 92, 32, 0.1) 100%) !important;
	color: #fff !important;
}

.claro .dropdown-menu .dropdown-item.active,
.claro .dropdown-menu .dropdown-item:active{
	background:
		linear-gradient(145deg, rgba(26, 71, 139, 0.16) 0%, rgba(26, 71, 139, 0.06) 100%) !important;
	color: var(--secondary-color) !important;
}

.dropdown-menu .dropdown-item.disabled,
.dropdown-menu .dropdown-item:disabled{
	opacity: 0.45;
	pointer-events: none;
}

.dropdown-menu .dropdown-divider{
	margin: 0.3rem 0.45rem;
	border-top-color: rgba(255, 255, 255, 0.1);
	opacity: 1;
}

.claro .dropdown-menu .dropdown-divider{
	border-top-color: rgba(15, 23, 42, 0.08);
}

.dropdown-menu .dropdown-header{
	font-family: Anton, sans-serif;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.42) !important;
	padding: 0.42rem 0.72rem 0.28rem !important;
}

.claro .dropdown-menu .dropdown-header{
	color: rgba(15, 23, 42, 0.45) !important;
}

.dropdown-menu > li.dropdown-item,
.dropdown-menu li.dropdown-item{
	cursor: pointer;
	margin: 0;
	padding: 0.45rem 0.72rem !important;
	border-radius: 8px;
	font-weight: 500;
	list-style: none;
	border-bottom: none !important;
	color: rgba(255, 255, 255, 0.92);
	transition:
		background-color 0.16s ease,
		color 0.16s ease,
		transform 0.16s ease;
}

.claro .dropdown-menu > li.dropdown-item,
.claro .dropdown-menu li.dropdown-item{
	color: #1e293b;
}

.dropdown-menu > li.dropdown-item:hover,
.dropdown-menu li.dropdown-item:hover{
	background: rgba(255, 255, 255, 0.11) !important;
	color: #fff !important;
}

.claro .dropdown-menu > li.dropdown-item:hover,
.claro .dropdown-menu li.dropdown-item:hover{
	background: rgba(26, 71, 139, 0.1) !important;
	color: #0f172a !important;
}

.dropdown-menu > li > a.dropdown-item{
	padding: 0.45rem 0.72rem !important;
}

.dropdown-menu > li > a:not(.dropdown-item){
	display: block;
	padding: 0.45rem 0.72rem;
	border-radius: 8px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.92) !important;
	text-decoration: none;
}

.claro .dropdown-menu > li > a:not(.dropdown-item){
	color: #1e293b !important;
}

.dropdown-menu > li > a:not(.dropdown-item):hover{
	background: rgba(255, 255, 255, 0.11);
	color: #fff !important;
}

.claro .dropdown-menu > li > a:not(.dropdown-item):hover{
	background: rgba(26, 71, 139, 0.1);
	color: #0f172a !important;
}

@media (prefers-reduced-motion: reduce){
	.dropdown-menu .dropdown-item,
	.dropdown-menu > li.dropdown-item,
	.dropdown-menu li.dropdown-item{
		transition: none;
	}
}

/* Pestañas — barra tipo “segmented control” */
.nav-tabs{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.5rem;
	margin-bottom: 1rem;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.09) !important;
	background:
		linear-gradient(180deg, rgba(48, 56, 65, 0.95) 0%, rgba(28, 33, 39, 0.98) 100%);
	box-shadow:
		0 4px 18px rgba(0, 0, 0, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.claro .nav-tabs{
	border-color: rgba(15, 23, 42, 0.09) !important;
	background:
		linear-gradient(180deg, #f6f8fb 0%, #e9eef5 100%);
	box-shadow:
		0 2px 12px rgba(15, 23, 42, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.nav-tabs .nav-item{
	margin-bottom: 0 !important;
}

.nav-tabs .nav-item a,
.nav-tabs .nav-link{
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.35;
	padding: 0.48rem 0.92rem !important;
	border: none !important;
	border-radius: 10px !important;
	color: rgba(255, 255, 255, 0.78) !important;
	background: transparent !important;
	transition:
		color 0.18s ease,
		background-color 0.18s ease,
		box-shadow 0.18s ease,
		transform 0.18s ease;
}

.claro .nav-tabs .nav-item a,
.claro .nav-tabs .nav-link{
	color: #3d4a5c !important;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-item a:hover{
	color: #fff !important;
	background: rgba(255, 255, 255, 0.1) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	transform: translateY(-1px);
}

.claro .nav-tabs .nav-link:hover,
.claro .nav-tabs .nav-item a:hover{
	color: #1e293b !important;
	background: rgba(255, 255, 255, 0.85) !important;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-item a.active,
.nav-tabs .active.nav-link,
.nav-tabs .nav-link.active:hover{
	color: #fff !important;
	background:
		linear-gradient(180deg, #ffa256 0%, var(--primary-color) 50%, #c95616 138%) !important;
	box-shadow:
		0 4px 14px rgba(236, 92, 32, 0.38),
		inset 0 1px 0 rgba(255, 255, 255, 0.25);
	transform: none !important;
}

.claro .nav-tabs .nav-link.active,
.claro .nav-tabs .nav-item.show .nav-link,
.claro .nav-tabs .nav-item a.active,
.claro .nav-tabs .active.nav-link,
.claro .nav-tabs .nav-link.active:hover{
	color: #fff !important;
	background:
		linear-gradient(180deg, #3f7bc9 0%, var(--secondary-color) 52%, #12355d 138%) !important;
	box-shadow:
		0 4px 14px rgba(26, 71, 139, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.nav-tabs .nav-link.disabled,
.nav-tabs .nav-item a.disabled{
	opacity: 0.45 !important;
	pointer-events: none;
	transform: none !important;
	box-shadow: none !important;
}

.nav-tabs .nav-link:focus-visible,
.nav-tabs .nav-item a:focus-visible{
	outline: 2px solid rgba(120, 180, 255, 0.85);
	outline-offset: 2px;
}

.claro .nav-tabs .nav-link:focus-visible,
.claro .nav-tabs .nav-item a:focus-visible{
	outline-color: rgba(26, 71, 139, 0.55);
}

@media (prefers-reduced-motion: reduce){
	.nav-tabs .nav-link,
	.nav-tabs .nav-item a{
		transition: none;
	}
	.nav-tabs .nav-link:hover,
	.nav-tabs .nav-item a:hover{
		transform: none;
	}
}


.form-floating > label {
		font-family: 'Anton' !important;
    background: transparent !important;
    color: #ffffff !important;
}

.claro .form-floating > label {
	color:#666 !important;
}

.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-select ~ label::after {
    background: transparent !important;
}

.form-floating > input:not(:focus):placeholder-shown + label {
    color:#FFF !important;
}

.form-floating > input + label:after {
   color:#FFF !important;
}

.claro .form-floating > input:not(:focus):placeholder-shown + label,
.claro .form-floating > input + label:after {
	color:#666 !important;
}

/* Etiqueta un poco más arriba y más aire hasta el texto del valor */
.form-floating > .form-control:not(textarea),
.form-floating > .form-select{
	padding-top: 1.92rem !important;
	padding-bottom: 0.65rem !important;
	min-height: calc(3.5rem + 2px);
}

.form-floating > label{
	line-height: 1.25 !important;
}

/* textarea se excluye: su etiqueta necesita height:auto + transform (reglas siguientes) */
.form-floating > .form-control:not(textarea):focus ~ label,
.form-floating > .form-control:not(textarea):not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label{
	transform: scale(0.875) translateY(-0.85rem) translateX(0.12rem);
}

.form-floating > .form-control:not(textarea):-webkit-autofill ~ label{
	transform: scale(0.875) translateY(-0.85rem) translateX(0.12rem);
}

/*
 * Textarea + etiqueta flotante: Bootstrap iguala la altura a la de un <input>;
 * el <label> usa height:100% y puede tapar el texto si no se eleva bien.
 * (Ver Bootstrap 5: textarea en .form-floating debe usar height: auto.)
 */
.form-floating > textarea.form-control{
	height: auto !important;
	box-sizing: border-box;
	min-height: calc(3.5rem + 2px);
}

.form-floating > textarea.form-control:focus,
.form-floating > textarea.form-control:not(:-moz-placeholder-shown),
.form-floating > textarea.form-control:not(:placeholder-shown){
	padding-top: 2.1rem !important;
	padding-bottom: 0.7rem !important;
}

/*
 * Etiqueta flotante + textarea: refuerzo con ~ label y :focus-within (sin depender de :has).
 * El padding global .form-control { padding: ... !important } exige reglas fuertes arriba.
 */
.form-floating:focus-within > textarea.form-control ~ label,
.form-floating > textarea.form-control:focus ~ label,
.form-floating > textarea.form-control:not(:-moz-placeholder-shown) ~ label,
.form-floating > textarea.form-control:not(:placeholder-shown) ~ label{
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	padding-top: 0.5rem !important;
	padding-bottom: 0 !important;
	transform: scale(0.875) translateY(-0.62rem) translateX(0.12rem) !important;
}

/*
 * Textarea = mismo comportamiento que input: clase .form-floating--textarea-active
 * (sincronizada en clases.js: foco, input, modales y .val() tras LimpiarFormulario).
 */
.form-floating.form-floating--textarea-active > textarea.form-control{
	padding-top: 1.92rem !important;
	padding-bottom: 0.65rem !important;
}

.form-floating.form-floating--textarea-active > label{
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	padding-top: 0.5rem !important;
	padding-bottom: 0 !important;
	padding-left: 0.82rem !important;
	padding-right: 0.82rem !important;
	transform: scale(0.875) translateY(-0.62rem) translateX(0.12rem) !important;
}

/*
 * Punto de venta (#form_pven): el bloque se inyecta vía AJAX y trae su <style>;
 * el selector con # refuerza sobre .form-control { padding: ... !important } y #form_pven textarea[...].
 */
#form_pven .form-floating > textarea.form-control{
	height: auto !important;
	box-sizing: border-box;
}

#form_pven .form-floating.form-floating--textarea-active > textarea.form-control{
	padding-top: 1.92rem !important;
	padding-bottom: 0.65rem !important;
}

#form_pven .form-floating.form-floating--textarea-active > label{
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	padding-top: 0.5rem !important;
	padding-bottom: 0 !important;
	padding-left: 0.82rem !important;
	padding-right: 0.82rem !important;
	transform: scale(0.875) translateY(-0.62rem) translateX(0.12rem) !important;
}

/* —— Tablas (Bootstrap .table) —— */
.table-responsive{
	border-radius: 12px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow:
		0 4px 18px rgba(0, 0, 0, 0.22),
		0 1px 0 rgba(255, 255, 255, 0.03) inset;
	margin-bottom: 1rem;
}

.claro .table-responsive{
	border-color: rgba(0, 0, 0, 0.085);
	box-shadow:
		0 2px 14px rgba(0, 0, 0, 0.07),
		0 0 0 1px rgba(0, 0, 0, 0.04);
}

.table{
	--tbl-border-oscuro: rgba(255, 255, 255, 0.08);
	--tbl-border-claro: rgba(15, 23, 42, 0.08);
	--tbl-pad-x: 0.85rem;
	--tbl-pad-y: 0.62rem;
	margin-bottom: 0;
	border-color: transparent;
	vertical-align: middle;
}

.table:not(.table-sm) > :not(caption) > * > *{
	padding: var(--tbl-pad-y) var(--tbl-pad-x);
	transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.table.table-sm > :not(caption) > * > *{
	transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.table thead th + th{
	border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.table thead th{
	background: linear-gradient(180deg, #255a94 0%, var(--secondary-color) 45%, #153a63 100%);
	color: #fff;
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	border-bottom-width: 0;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset;
	white-space: nowrap;
}

.oscuro .table td{
	border-color: var(--tbl-border-oscuro) !important;
	color: rgba(255, 255, 255, 0.93);
	font-size: 13px;
}

.oscuro .table tbody td,
.oscuro .table tbody th,
.oscuro .table tfoot td,
.oscuro .table tfoot th{
	background-color: var(--fourth-color) !important;
	color:#FFF !important;
}

.claro .table td{
	border-color: var(--tbl-border-claro) !important;
	color: #2d3340;
	font-size: 13px;
}

.claro .table tbody td,
.claro .table tbody th,
.claro .table tfoot td,
.claro .table tfoot th{
	background-color: #fafbfc !important;
	color: var(--fourth-color) !important;
}

.claro .table tbody tr:nth-of-type(even) > td,
.claro .table tbody tr:nth-of-type(even) > th,
.claro .table tfoot tr:nth-of-type(even) > td,
.claro .table tfoot tr:nth-of-type(even) > th{
	background-color: #fff !important;
}

.table tfoot td,
.table tfoot th{
	font-weight: 600;
	font-size: 0.8125rem;
	border-top-width: 2px;
	border-top-color: rgba(236, 92, 32, 0.35) !important;
}

.claro .table tfoot td,
.claro .table tfoot th{
	border-top-color: rgba(26, 71, 139, 0.25) !important;
}

.oscuro .table-striped > tbody > tr:nth-of-type(odd) > td,
.oscuro .table-striped > tbody > tr:nth-of-type(odd) > th{
	background-color: #1a1f26 !important;
}

.oscuro .table-striped > tbody > tr:nth-of-type(even) > td,
.oscuro .table-striped > tbody > tr:nth-of-type(even) > th{
	background-color: var(--fourth-color) !important;
}

.claro .table-striped > tbody > tr:nth-of-type(odd) > td,
.claro .table-striped > tbody > tr:nth-of-type(odd) > th{
	background-color: #eef2f6 !important;
}

.claro .table-striped > tbody > tr:nth-of-type(even) > td,
.claro .table-striped > tbody > tr:nth-of-type(even) > th{
	background-color: #fafbfc !important;
}

.table caption{
	caption-side: top;
	padding: 0.5rem var(--tbl-pad-x) 0.35rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: inherit;
}

.claro .table caption{
	color: #495057;
}

::placeholder {
  font-size:10px;
}

a{
	color:var(--secondary-color);
}

.img_grilla{
	width:40px;
	border-radius: 50px;
	border:1px solid #EEE;
}

.consecutivo {
  font-size: 20px;
  color: red;
  background-color: #E9EFFA;
}

[data-toggle="money"]{
	text-align:right;
}

[data-toggle="datepicker"]{
	cursor: pointer;
}

.bg-success{
	color:#FFF;
	background-color: var(--primary-color) !important;
}

.bg-primary{
	color:#FFF;
	background-color: var(--secondary-color) !important;
}

.input-group-text.bg-success,
.input-group-text.bg-primary{
	color: #FFF;
}

/* —— Inputs, selects e .input-group (campos pegados / addons clicables / botón al final) —— */
.form-control,
.form-select{
	--inp-r: 11px;
	font-size: 0.8125rem !important;
	line-height: 1.42;
	box-sizing: border-box;
	transition:
		border-color 0.18s ease,
		box-shadow 0.18s ease,
		background-color 0.18s ease;
	border-radius: var(--inp-r) !important;
	padding: 0.44rem 0.82rem !important;
}

.form-control,
.form-select{
	color: rgba(246, 248, 251, 0.96) !important;
	background: linear-gradient(180deg, #3f4c56 0%, #363f49 100%) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	box-shadow:
		0 1px 3px rgba(0, 0, 0, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.055);
	outline: none !important;
}

.form-control:focus,
.form-select:focus{
	border-color: rgba(120, 190, 255, 0.45) !important;
	box-shadow:
		0 0 0 3px rgba(26, 71, 139, 0.38),
		0 1px 3px rgba(0, 0, 0, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.claro .form-control,
.claro .form-select{
	color: #2f3640 !important;
	background:
		linear-gradient(180deg, #ffffff 0%, #fafbfc 100%) !important;
	border: 1px solid rgba(15, 23, 42, 0.125) !important;
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.05),
		inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.claro .form-control:focus,
.claro .form-select:focus{
	border-color: rgba(26, 71, 139, 0.5) !important;
	box-shadow:
		0 0 0 3px rgba(26, 71, 139, 0.16),
		0 1px 3px rgba(15, 23, 42, 0.07),
		inset 0 1px 0 #fff;
}

/* Opciones del <select> en modo oscuro (refuerzo donde el SO pinta lista clara con texto claro) */
.oscuro select option,
.oscuro .form-select option{
	background-color: #363f49;
	color: rgba(246, 248, 251, 0.98);
}

.oscuro select option:hover,
.oscuro select option:focus,
.oscuro select option:checked,
.oscuro .form-select option:hover,
.oscuro .form-select option:focus,
.oscuro .form-select option:checked{
	background-color: rgba(26, 71, 139, 0.92);
	color: #fff;
}

.input-group:not(.forma-servir-fila){
	flex-wrap: nowrap;
}

/* Por defecto el campo viene plano dentro del grupo; login mantiene sus estilos */
.input-group:not(.login-input-group) .form-control,
.input-group:not(.login-input-group) .form-select{
	border-radius: 0 !important;
}

.input-group .form-control:focus,
.input-group .form-select:focus{
	box-shadow:
		inset 0 0 0 1px rgba(120, 190, 255, 0.35),
		0 1px 2px rgba(0, 0, 0, 0.12);
	position: relative;
	z-index: 2;
}

.claro .input-group .form-control:focus,
.claro .input-group .form-select:focus{
	box-shadow:
		inset 0 0 0 1px rgba(26, 71, 139, 0.35),
		0 1px 2px rgba(15, 23, 42, 0.06);
}

/*
 * Esquinas segmentadas (.form-control dentro de .form-floating necesita estas reglas).
 * No aplicar en .login-input-group (index usa overflow + estilos propios).
 */
.input-group:not(.login-input-group) > *:not(.dropdown-menu){
	border-radius: 0 !important;
}

.input-group:not(.login-input-group) > .btn:first-child:not(:last-child),
.input-group:not(.login-input-group) > .input-group-text:first-child:not(:last-child){
	border-top-left-radius: var(--inp-r, 11px) !important;
	border-bottom-left-radius: var(--inp-r, 11px) !important;
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.input-group:not(.login-input-group) > .btn:last-child:not(:first-child),
.input-group:not(.login-input-group) > .input-group-text:last-child:not(:first-child){
	border-top-right-radius: var(--inp-r, 11px) !important;
	border-bottom-right-radius: var(--inp-r, 11px) !important;
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.input-group:not(.login-input-group) > .btn:only-child,
.input-group:not(.login-input-group) > .input-group-text:only-child{
	border-radius: var(--inp-r, 11px) !important;
}

.input-group:not(.login-input-group) > .form-control:first-child:not(:last-child),
.input-group:not(.login-input-group) > .form-select:first-child:not(:last-child){
	border-top-left-radius: var(--inp-r, 11px) !important;
	border-bottom-left-radius: var(--inp-r, 11px) !important;
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.input-group:not(.login-input-group) > .form-control:last-child:not(:first-child),
.input-group:not(.login-input-group) > .form-select:last-child:not(:first-child){
	border-top-right-radius: var(--inp-r, 11px) !important;
	border-bottom-right-radius: var(--inp-r, 11px) !important;
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.input-group:not(.login-input-group) > .form-control:only-child,
.input-group:not(.login-input-group) > .form-select:only-child{
	border-radius: var(--inp-r, 11px) !important;
}

.input-group:not(.login-input-group) > .form-floating:not(:first-child) .form-control,
.input-group:not(.login-input-group) > .form-floating:not(:first-child) .form-select{
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.input-group:not(.login-input-group) > .form-floating:not(:last-child) .form-control,
.input-group:not(.login-input-group) > .form-floating:not(:last-child) .form-select{
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.input-group:not(.login-input-group) > .form-floating:first-child .form-control,
.input-group:not(.login-input-group) > .form-floating:first-child .form-select{
	border-top-left-radius: var(--inp-r, 11px) !important;
	border-bottom-left-radius: var(--inp-r, 11px) !important;
}

.input-group:not(.login-input-group) > .form-floating:last-child .form-control,
.input-group:not(.login-input-group) > .form-floating:last-child .form-select{
	border-top-right-radius: var(--inp-r, 11px) !important;
	border-bottom-right-radius: var(--inp-r, 11px) !important;
}

.input-group:not(.login-input-group) > .form-floating:only-child .form-control,
.input-group:not(.login-input-group) > .form-floating:only-child .form-select{
	border-radius: var(--inp-r, 11px) !important;
}

.input-group-text{
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.3rem;
	font-size: 0.8125rem !important;
	font-weight: 600;
	line-height: 1.35;
	cursor: default;
	transition:
		filter 0.18s ease,
		box-shadow 0.18s ease,
		border-color 0.18s ease,
		transform 0.18s ease;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	background:
		linear-gradient(180deg, #4d5c6b 0%, #394652 100%) !important;
	color: rgba(253, 254, 255, 0.96) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 1px 2px rgba(0, 0, 0, 0.12);
	padding: 0.44rem 0.82rem !important;
	min-height: calc(2.25rem + 2px);
	min-width: 2.75rem;
}

.input-group-text[onclick],
.input-group-text.link,
.input-group-text.btn_buscar_grilla{
	cursor: pointer;
}

.input-group-text[onclick]:active,
.input-group-text.link:active,
.input-group-text.btn_buscar_grilla:active{
	transform: translateY(1px);
}

.claro .input-group-text{
	border: 1px solid rgba(15, 23, 42, 0.12) !important;
	background:
		linear-gradient(180deg, #f1f5f9 0%, #e8edf4 100%) !important;
	color: #394356 !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 1px 2px rgba(15, 23, 42, 0.04);
}

.claro .input-group-text.bg-success{
	color: #fff !important;
	background:
		linear-gradient(180deg, #ffa256 0%, var(--primary-color) 50%, #c95616 145%) !important;
	border-color: rgba(236, 92, 32, 0.48) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.25),
		0 1px 2px rgba(0, 0, 0, 0.08);
}

.claro .input-group-text.bg-primary{
	color: #fff !important;
	background:
		linear-gradient(180deg, #3873b8 0%, var(--secondary-color) 50%, #12355d 145%) !important;
	border-color: rgba(26, 71, 139, 0.45) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.2),
		0 1px 2px rgba(15, 23, 42, 0.08);
}

.oscuro .input-group-text.bg-success{
	color: #fff !important;
	background:
		linear-gradient(180deg, #e67535 0%, var(--primary-color) 50%, #8a3b0f 145%) !important;
	border-color: rgba(236, 92, 32, 0.35) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.16),
		0 1px 4px rgba(0, 0, 0, 0.22);
}

.oscuro .input-group-text.bg-primary{
	color: #fff !important;
	background:
		linear-gradient(180deg, #2a5fa0 0%, var(--secondary-color) 50%, #0d2647 145%) !important;
	border-color: rgba(46, 120, 200, 0.35) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.14),
		0 1px 4px rgba(0, 0, 0, 0.22);
}

.input-group-text.bg-success:hover,
.input-group-text.bg-primary:hover{
	filter: brightness(1.06);
}

.input-group > .btn{
	position: relative;
	z-index: 2;
	flex-shrink: 0;
	transition:
		transform 0.16s ease,
		filter 0.16s ease,
		box-shadow 0.16s ease;
}

.input-group > .btn:not(:disabled):hover{
	transform: translateY(-0.5px);
	z-index: 3;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.18),
		0 2px 8px rgba(0, 0, 0, 0.14) !important;
}

.input-group > .btn:not(:disabled):active{
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
	.form-control,
	.form-select,
	.input-group-text,
	.input-group > .btn{
		transition: none !important;
	}
	.input-group-text[onclick]:active,
	.input-group-text.link:active,
	.input-group-text.btn_buscar_grilla:active{
		transform: none;
	}
	.input-group > .btn:not(:disabled):hover{
		transform: none;
	}
}

/* Tarjetas claras aisladas (p. ej. solicitudes.php) sin .oscuro / .claro en body */
.form-xl .form-control,
.form-xl .form-select{
	color: #2f3640 !important;
	background:
		linear-gradient(180deg, #ffffff 0%, #fafbfc 100%) !important;
	border: 1px solid rgba(15, 23, 42, 0.125) !important;
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.05),
		inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.form-xl .form-control:focus,
.form-xl .form-select:focus{
	border-color: rgba(26, 71, 139, 0.5) !important;
	box-shadow:
		0 0 0 3px rgba(26, 71, 139, 0.14),
		0 1px 3px rgba(15, 23, 42, 0.07),
		inset 0 1px 0 #fff;
}

.form-xl .input-group .form-control:focus,
.form-xl .input-group .form-select:focus{
	box-shadow:
		inset 0 0 0 1px rgba(26, 71, 139, 0.32),
		0 1px 2px rgba(15, 23, 42, 0.06);
}

.form-xl .input-group-text{
	border: 1px solid rgba(15, 23, 42, 0.12) !important;
	background:
		linear-gradient(180deg, #f1f5f9 0%, #e8edf4 100%) !important;
	color: #394356 !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 1px 2px rgba(15, 23, 42, 0.04);
}

/* —— Botones —— */
.btn{
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.35;
	vertical-align: middle;
}

.btn:not(.btn-close):not(.btn-link){
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.38em;
	border-radius: 10px;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.18s ease,
		filter 0.18s ease;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.06),
		0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.btn:not(.btn-close):not(.btn-link):hover:not(:disabled):not(.disabled){
	transform: translateY(-1px);
	box-shadow:
		0 6px 16px rgba(0, 0, 0, 0.12),
		0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

.btn:not(.btn-close):not(.btn-link):active:not(:disabled):not(.disabled){
	transform: translateY(0);
	box-shadow:
		0 1px 4px rgba(0, 0, 0, 0.1),
		inset 0 1px 2px rgba(0, 0, 0, 0.12);
}

.btn:focus-visible{
	outline: 2px solid var(--primary-color);
	outline-offset: 3px;
}

.btn:disabled,
.btn.disabled{
	opacity: 0.55;
	cursor: not-allowed !important;
	pointer-events: none;
	box-shadow: none;
	transform: none !important;
}

.btn-xs{
	font-size: 0.8125rem;
	padding: 0.28rem 0.62rem !important;
	border-radius: 8px !important;
}

.link{
	color: #FFF;
	cursor: pointer;
}

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

.claro .link{
	color: var(--third-color);
}

.bg-grey{
	background-color: #EEE !important;
	font-weight: bold;
}

.btn-primary{
	color: #FFF !important;
	cursor: pointer;
	background: linear-gradient(180deg, #2f6cb0 0%, var(--secondary-color) 52%, #15355c 100%) !important;
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.btn-primary:hover,
.btn-primary:focus{
	background: linear-gradient(180deg, #3d7acb 0%, #1e5799 52%, #1a478b 100%) !important;
	border-color: rgba(255, 255, 255, 0.22) !important;
	color: #FFF !important;
}

.btn-secondary{
	color: #eceff4 !important;
	background: linear-gradient(180deg, #4b5566 0%, #393f4f 100%) !important;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-secondary:hover,
.btn-secondary:focus{
	color: #fff !important;
	background: linear-gradient(180deg, #596475 0%, #464d60 100%) !important;
	border-color: rgba(255, 255, 255, 0.16) !important;
}

.claro .btn-secondary{
	color: #fff !important;
	background: linear-gradient(180deg, #7a8495 0%, #5f6778 100%) !important;
	border: 1px solid rgba(0, 0, 0, 0.06);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.claro .btn-secondary:hover,
.claro .btn-secondary:focus{
	background: linear-gradient(180deg, #8b95a8 0%, #6c7586 100%) !important;
}

.btn-success{
	color:#FFF !important;
	cursor:pointer;
	background: linear-gradient(180deg, #ff7a38 0%, var(--primary-color) 48%, #c94a14 100%) !important;
	border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn-success:hover,
.btn-success:active,
.btn-success:focus{
	background: linear-gradient(180deg, #ff924d 0%, #ea6820 50%, var(--primary-color) 100%) !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	color: #FFF !important;
	filter: brightness(1.02);
}

.btn-outline-secondary{
	color: #f1f5f9 !important;
	background-color: rgba(35, 40, 46, 0.55) !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	box-shadow: none !important;
	transform: none;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-secondary:focus{
	background-color: #fff !important;
	border-color: #fff !important;
	color: var(--fourth-color) !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) !important;
}

.claro .btn-outline-secondary{
	color: var(--fourth-color) !important;
	background-color: transparent !important;
	border: 1px solid rgba(15, 23, 42, 0.18) !important;
}

.claro .btn-outline-secondary:hover,
.claro .btn-outline-secondary:active,
.claro .btn-outline-secondary:focus{
	background-color: var(--secondary-color) !important;
	border-color: var(--secondary-color) !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(26, 71, 139, 0.22) !important;
}

.btn-outline-primary{
	color: rgba(174, 210, 255, 0.95) !important;
	background-color: transparent !important;
	border: 1px solid rgba(174, 210, 255, 0.45) !important;
	box-shadow: none !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus{
	color: #fff !important;
	background-color: var(--secondary-color) !important;
	border-color: var(--secondary-color) !important;
	box-shadow: 0 6px 16px rgba(26, 71, 139, 0.35) !important;
	transform: translateY(-1px);
}

.claro .btn-outline-primary{
	color: var(--secondary-color) !important;
	border-color: var(--secondary-color) !important;
	background-color: transparent !important;
}

.claro .btn-outline-primary:hover,
.claro .btn-outline-primary:focus{
	color: #fff !important;
}

.btn-outline-danger{
	color: #ffc9cb !important;
	background-color: rgba(227, 0, 7, 0.12) !important;
	border: 1px solid rgba(255, 138, 145, 0.55) !important;
	box-shadow: none !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus{
	background-color: #dc2626 !important;
	border-color: #dc2626 !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(220, 38, 38, 0.28) !important;
}

.btn-outline-light{
	color: rgba(255, 255, 255, 0.9) !important;
	border: 1px solid rgba(255, 255, 255, 0.38) !important;
	background-color: transparent !important;
	box-shadow: none !important;
}

.btn-outline-light:hover,
.btn-outline-light:focus{
	background-color: rgba(255, 255, 255, 0.16) !important;
	border-color: rgba(255, 255, 255, 0.55) !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
}

.btn-danger{
	color:#FFF !important;
	cursor:pointer;
	background: linear-gradient(180deg, #f43c44 0%, #cf1720 100%) !important;
	border: 1px solid rgba(0, 0, 0, 0.12);
}

.btn-danger:hover,
.btn-danger:focus{
	filter: brightness(1.06);
	border-color: rgba(0, 0, 0, 0.16) !important;
	color: #fff !important;
}

.btn-warning{
	color:#252525 !important;
	cursor:pointer;
	background: linear-gradient(180deg, #ffd073 0%, #e9a045 100%) !important;
	border: 1px solid rgba(0, 0, 0, 0.06);
	font-weight: 600 !important;
}

.btn-warning:hover,
.btn-warning:focus{
	filter: brightness(1.04);
	color: #1a1a1a !important;
}

@media (prefers-reduced-motion: reduce){
	.btn:not(.btn-close):not(.btn-link),
	.btn:not(.btn-close):not(.btn-link):hover:not(:disabled):not(.disabled),
	.btn:not(.btn-close):not(.btn-link):active:not(:disabled):not(.disabled){
		transition: none;
		transform: none;
		box-shadow:
			0 1px 2px rgba(0, 0, 0, 0.06),
			0 1px 0 rgba(255, 255, 255, 0.05) inset;
	}
}

/* Badges de estatus — grillas, documentos */
.estatus{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 1.45rem;
	font-weight: 600;
	font-size: 0.8125rem;
	line-height: 1.28;
	text-align: center;
	letter-spacing: 0.01em;
	border-radius: 999px;
	padding: 0.26rem 0.62rem;
	border: 1px solid transparent;
	white-space: nowrap;
	vertical-align: middle;
	max-width: 100%;
	transition:
		box-shadow 0.18s ease,
		transform 0.18s ease;
}

.estatus-success,
.claro .estatus-success{
	color: #0f5132;
	background: linear-gradient(180deg, #d9f7e7 0%, #b9efce 100%);
	border-color: rgba(21, 128, 61, 0.22);
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.oscuro .estatus-success{
	color: #cbf7dc;
	background: linear-gradient(
		165deg,
		rgba(34, 197, 94, 0.38) 0%,
		rgba(34, 197, 94, 0.14) 100%
	);
	border-color: rgba(74, 222, 128, 0.38);
	box-shadow:
		0 1px 4px rgba(0, 0, 0, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.estatus-warning,
.claro .estatus-warning{
	color: #7a4b02;
	background: linear-gradient(180deg, #fff7d9 0%, #ffe89e 100%);
	border-color: rgba(180, 110, 0, 0.28);
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.oscuro .estatus-warning{
	color: #ffe7b3;
	background: linear-gradient(
		165deg,
		rgba(245, 158, 11, 0.42) 0%,
		rgba(245, 158, 11, 0.12) 100%
	);
	border-color: rgba(251, 191, 36, 0.4);
	box-shadow:
		0 1px 4px rgba(0, 0, 0, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.estatus-secondary,
.claro .estatus-secondary{
	color: #3d4451;
	background: linear-gradient(180deg, #f4f6f9 0%, #e7ebf3 100%);
	border-color: rgba(55, 65, 81, 0.2);
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.05),
		inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.oscuro .estatus-secondary{
	color: rgba(235, 240, 248, 0.92);
	background: linear-gradient(
		165deg,
		rgba(148, 163, 184, 0.32) 0%,
		rgba(148, 163, 184, 0.1) 100%
	);
	border-color: rgba(203, 213, 225, 0.22);
	box-shadow:
		0 1px 4px rgba(0, 0, 0, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.estatus-danger,
.claro .estatus-danger{
	color: #841018;
	background: linear-gradient(180deg, #fde3e7 0%, #f9bdc6 100%);
	border-color: rgba(190, 30, 45, 0.28);
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.oscuro .estatus-danger{
	color: #ffd1d6;
	background: linear-gradient(
		165deg,
		rgba(239, 68, 68, 0.45) 0%,
		rgba(239, 68, 68, 0.14) 100%
	);
	border-color: rgba(252, 165, 165, 0.38);
	box-shadow:
		0 1px 4px rgba(0, 0, 0, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

@media (prefers-reduced-motion: reduce){
	.estatus{
		transition: none;
	}
}

.thead-sticky{	
	overflow-y:auto;
}

.thead-sticky table{
	border-collapse: collapse;
}

.thead-sticky table thead{
	position: -webkit-sticky !important;
	position: sticky !important;
	top: 0;
	z-index: 2;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	background: linear-gradient(180deg, #255a94 0%, var(--secondary-color) 100%);
}

.oscuro .thead-sticky table thead{
	background: linear-gradient(180deg, #255a94 0%, var(--secondary-color) 100%);
	border-bottom-color: rgba(0, 0, 0, 0.2);
}

.claro .thead-sticky table thead{
	background: linear-gradient(180deg, #3a6fb0 0%, var(--secondary-color) 100%);
	border-bottom-color: rgba(0, 0, 0, 0.08);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.thead-sticky table thead th{
	border-top: 0 !important;
	border-left: 0 !important;
	border-right: 0 !important;
	color: #fff !important;
	background: transparent !important;
}

.grilla{
	margin-top:10px;
	min-height: 200px;
}

/* Cajas táctiles POS: tipos de pago, categorías y productos (touch) */
/* Grid 3 columnas (row-cols-3 en pagos.php); gutter vía .g-2 / .gy-3 */
#btn_tipos_pagos.row{
	margin-top: 0.25rem;
}

.touch-caja-card{
	--touch-caja-r: 14px;
	position: relative;
	border-radius: var(--touch-caja-r) !important;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	background:
		linear-gradient(165deg, #3f4b58 0%, #2e3640 48%, #262c34 100%) !important;
	box-shadow:
		0 6px 20px rgba(0, 0, 0, 0.32),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
	transition:
		transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.22s ease,
		border-color 0.18s ease;
}

.claro .touch-caja-card{
	border-color: rgba(15, 23, 42, 0.1) !important;
	background:
		linear-gradient(185deg, #ffffff 0%, #eef2f7 72%, #e4eaf2 100%) !important;
	box-shadow:
		0 4px 22px rgba(15, 23, 42, 0.08),
		0 0 0 1px rgba(15, 23, 42, 0.04),
		inset 0 1px 0 #fff;
}

.touch-caja-card:hover{
	transform: translateY(-4px);
	border-color: rgba(236, 92, 32, 0.42) !important;
	box-shadow:
		0 14px 36px rgba(0, 0, 0, 0.35),
		0 2px 0 rgba(236, 92, 32, 0.12) inset;
}

.claro .touch-caja-card:hover{
	border-color: rgba(26, 71, 139, 0.28) !important;
	box-shadow:
		0 12px 32px rgba(26, 71, 139, 0.12),
		0 8px 20px rgba(15, 23, 42, 0.06),
		inset 0 1px 0 #fff;
}

.touch-caja-card:active{
	transform: translateY(-1px);
}

.touch-caja-card.touch-caja-card--pago .card-body{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 1.1rem 0.95rem !important;
	min-height: 8.75rem;
}

.touch-caja-card__media img{
	max-width: 80px;
	width: min(76px, 45vw);
	height: auto;
	display: inline-block;
	object-fit: contain;
	filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.25));
	vertical-align: middle;
}

.touch-caja-card__title{
	font-size: clamp(0.9rem, 1.95vw, 1.02rem);
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
	color: rgba(250, 252, 255, 0.96);
	letter-spacing: 0.01em;
}

.claro .touch-caja-card__title{
	color: #1e2937;
}

.touch-caja-card__thumb{
	height: 104px;
	overflow: hidden;
	margin: 0;
	background: rgba(0, 0, 0, 0.12);
}

.claro .touch-caja-card__thumb{
	background: rgba(15, 23, 42, 0.04);
}

.touch-caja-card__thumb img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.touch-caja-card__swatch{
	height: 104px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-left: 0.5rem !important;
	padding-right: 0.5rem !important;
	overflow: hidden;
}

.touch-caja-card__label,
.touch-caja-card__label-swatch{
	padding: 0.45rem 0.58rem 0.65rem;
	font-size: 0.71875rem;
	line-height: 1.35;
	word-break: break-word;
	max-height: 3.6rem;
	overflow: hidden;
}

.touch-caja-card__label{
	color: rgba(246, 248, 251, 0.95);
	font-weight: 600;
	background: rgba(0, 0, 0, 0.12);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.claro .touch-caja-card__label{
	color: #233044;
	background: rgba(255, 255, 255, 0.92);
	border-top-color: rgba(15, 23, 42, 0.08);
}

.touch-caja-card__label-swatch .touch-caja-card__codigo,
.touch-caja-card__codigo{
	font-size: 0.665rem !important;
	font-weight: 700;
	opacity: 0.9;
	margin-bottom: 0.2rem;
}

.touch-caja-card__footer{
	margin: 0 !important;
	border: none !important;
	border-radius: 0 0 calc(var(--touch-caja-r) - 1px) calc(var(--touch-caja-r) - 1px) !important;
	padding: 0.55rem 0.6rem !important;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: rgba(238, 244, 255, 0.98) !important;
	background:
		linear-gradient(180deg, #2c4f7c 0%, var(--secondary-color) 52%, #102d52 138%) !important;
	border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.claro .touch-caja-card__footer{
	border-top-color: rgba(255, 255, 255, 0.2) !important;
	color: #fff !important;
}

.touch-caja-card__opts{
	z-index: 3;
	padding: 0.2rem !important;
}

.touch-caja-paginado{
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin-top: 0.85rem !important;
	padding-top: 0.35rem;
}

@media (prefers-reduced-motion: reduce){
	.touch-caja-card{
		transition: none;
	}
	.touch-caja-card:hover,
	.touch-caja-card:active{
		transform: none;
	}
}

.modal{
	overflow-y:scroll;
}

.modal-content{
	overflow: hidden;
	border-radius: 14px;
	border: none;
	box-shadow:
		0 24px 55px rgba(0, 0, 0, 0.4),
		0 6px 16px rgba(0, 0, 0, 0.22);
	outline: 1px solid rgba(255, 255, 255, 0.07);
	outline-offset: -1px;
}

.claro .modal-content{
	box-shadow:
		0 22px 48px rgba(15, 23, 42, 0.11),
		0 6px 16px rgba(15, 23, 42, 0.07);
	outline-color: rgba(15, 23, 42, 0.08);
}

.modal-header{
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.65rem;
	padding: 0.82rem 1rem 0.82rem 1.2rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	background:
		linear-gradient(138deg, #2a5588 0%, var(--secondary-color) 45%, #0f2d52 118%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.14),
		0 1px 0 rgba(0, 0, 0, 0.12);
	border-radius: 0;
	color: #fff;
}

.claro .modal-header{
	border-bottom-color: rgba(255, 255, 255, 0.18);
	background:
		linear-gradient(138deg, #4479bd 0%, var(--secondary-color) 48%, #15355e 118%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		0 1px 0 rgba(0, 0, 0, 0.06);
}

.modal-header .modal-title{
	margin-bottom: 0;
	flex: 1 1 auto;
	min-width: 0;
}

.modal-title{
	font-family: Anton, sans-serif;
	font-weight: 400;
	font-size: clamp(1rem, 1.05vw + 0.55rem, 1.2rem);
	letter-spacing: 0.04em;
	line-height: 1.25;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.modal-header .btn-close{
	flex-shrink: 0;
	margin: 0;
	padding: 0.45rem;
	border-radius: 10px;
	opacity: 0.88;
	transition:
		opacity 0.16s ease,
		background-color 0.16s ease,
		transform 0.16s ease;
}

.modal-header .btn-close:hover{
	opacity: 1;
	background-color: rgba(255, 255, 255, 0.12);
}

.modal-header .btn-close:focus-visible{
	outline: 2px solid rgba(255, 200, 150, 0.85);
	outline-offset: 2px;
	box-shadow: none;
}

.modal-header .btn-close:not(:has(i)){
	filter: invert(1) grayscale(88%) brightness(1.72);
	opacity: 0.9;
}

.modal-header .btn-close:not(:has(i)):hover{
	filter: invert(1) grayscale(96%) brightness(1.92);
	opacity: 1;
	background-color: rgba(255, 255, 255, 0.1);
}

@media (prefers-reduced-motion: reduce){
	.modal-header .btn-close{
		transition: none;
	}
}

.modal-body{
	color:#FFF;
	background-color: var(--fifth-color);
	margin:0px !important;
	/*border:0px !important;*/
}

.modal-footer{
	color:#FFF;
	margin:0px !important;
	background-color: var(--fifth-color);
	/*border:0px !important;*/
}

.claro .modal-body,
.claro .modal-footer{
	color: var(--fifth-color);
	background-color: #FFF;
}

/*
 * Bootstrap .text-muted usa --bs-secondary-color (gris oscuro para fondos claros).
 * En body.oscuro queda ilegible sobre modal/barra oscura (#formas-servir-tab-pane, etc.).
 */
body.oscuro .text-muted{
	color: rgba(230, 235, 242, 0.76) !important;
}

label{
	margin: 0px;
	padding: 0px;
	display: inline-block;
}

body.oscuro select{
	color: rgba(246, 248, 251, 0.96);
}

.claro select{
	color: #2f3640;
}

textarea{
	resize:none;
}

#contenedor{
	min-height:100%;
	margin-bottom: -80px;
}

#contenedor:after{
	content:'';
	display: block;
	height:80px;
}

footer{
	height:80px;
}

[placeholder]:focus::-webkit-input-placeholder{
    transition: text-indent 0.4s 0.4s ease; 
    text-indent: -100%;
    opacity: 1;
 }

.form-s{
	width:100%;
	max-width:400px;
}

.form-m{
	width:100%;
	max-width:600px;
}

.form-l{
	width:100%;
	max-width:800px;
}

.form-xl{
	width:100%;
	max-width:980px;
}

.modal-body{
	padding:15px 25px;
}

.titulos-form{
	padding:5px 10px;
	border-bottom:1px solid #CCC;
}

/* .titulos-form iba después en la hoja y pisaba el padding del header del modal */
.modal-header.titulos-form{
	padding: 0.82rem 1rem 0.82rem 1.2rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.claro .modal-header.titulos-form{
	border-bottom-color: rgba(255, 255, 255, 0.18);
}

.contenido-form{
	padding:5px 10px;	
}

.footer-form{
	margin-top:5px;
	padding:10px 10px;
	border-top:1px solid #CCC;
}

.dropdown ul.dropdown-menu{
	margin: 0;
}

/* Ítems planos (<li onclick>… sin .dropdown-item) — ej. menú usuario en panel */
.dropdown-menu > li:not(.dropdown-item):not(:has(> .dropdown-item)):not(:has(> .dropdown-header)):not(:has(> hr.dropdown-divider)){
	list-style: none;
	cursor: pointer;
	padding: 0.55rem 0.8rem !important;
	border-radius: 8px;
	font-weight: 500;
	line-height: 1.45;
	border-bottom: none !important;
	color: rgba(255, 255, 255, 0.92);
	transition:
		background-color 0.16s ease,
		color 0.16s ease;
}

.dropdown-menu > li:not(.dropdown-item):not(:has(> .dropdown-item)):not(:has(> .dropdown-header)):not(:has(> hr.dropdown-divider)) i{
	display: inline-block;
	min-width: 1.35em;
	margin-right: 0.45rem;
	vertical-align: -0.12em;
	opacity: 0.88;
	font-size: 1.05em;
}

.claro .dropdown-menu > li:not(.dropdown-item):not(:has(> .dropdown-item)):not(:has(> .dropdown-header)):not(:has(> hr.dropdown-divider)){
	color: #1e293b;
}

.dropdown-menu > li:not(.dropdown-item):not(:has(> .dropdown-item)):not(:has(> .dropdown-header)):not(:has(> hr.dropdown-divider)):hover{
	background: rgba(255, 255, 255, 0.11) !important;
	color: #fff !important;
}

.claro .dropdown-menu > li:not(.dropdown-item):not(:has(> .dropdown-item)):not(:has(> .dropdown-header)):not(:has(> hr.dropdown-divider)):hover{
	background: rgba(26, 71, 139, 0.1) !important;
	color: #0f172a !important;
}

@media (prefers-reduced-motion: reduce){
	.dropdown-menu > li:not(.dropdown-item):not(:has(> .dropdown-item)):not(:has(> .dropdown-header)):not(:has(> hr.dropdown-divider)){
		transition: none;
	}
}

.dropdown-title{
	text-align: center;
	padding: 0.5rem 0.65rem !important;
	margin: -0.15rem -0.2rem 0.3rem !important;
	border-radius: 9px 9px 6px 6px;
	font-family: Anton, sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: linear-gradient(180deg, #2d5fa0 0%, var(--secondary-color) 55%, #142d52 140%) !important;
	color: #fff !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.14),
		0 2px 10px rgba(0, 0, 0, 0.15);
	cursor: default;
	border-bottom: none !important;
}

.claro .dropdown-title{
	background: linear-gradient(180deg, #3f7bc9 0%, var(--secondary-color) 52%, #15355d 138%) !important;
}

.dropdown-title:hover{
	background: linear-gradient(180deg, #2d5fa0 0%, var(--secondary-color) 55%, #142d52 140%) !important;
	color: #fff !important;
}

.claro .dropdown-title:hover{
	background: linear-gradient(180deg, #3f7bc9 0%, var(--secondary-color) 52%, #15355d 138%) !important;
}

.inline-block{
	font-size:0px;
}

.inline-block > div,
.inline-block > li{
	font-size:13px;
	display: inline-block;
}

.vertical-align-top > div,
.vertical-align-top > li{
	vertical-align:top;
}

.vertical-align-middle > div,
.vertical-align-middle > li{
	vertical-align:middle;
}

.vertical-align-bottom > div,
.vertical-align-bottom > li{
	vertical-align:bottom;
}

.tr-td-1,
.tr-td-2,
.tr-td-3{
	padding:5px;
}

.tr-td-1{
	width:100%;
}

.tr-td-2{
	width:50%;
}

.tr-td-3{
	width:33.33%;
}

#msj_php{
	display: none;
	z-index: 99999;
	position: fixed;
	top:0px;right:0px;
	width: 300px;
	padding:8px 10px;
	box-shadow: 0px 0px 10px #666;
}

#msj_php i{
	margin-right:3px;
}

.success{
	border:1px solid #009E37;
	background-color:#009E37;
	color:#FFF;
}

.info{
	border:1px solid #00A8EF;
	background-color:#00A8EF;
	color:#FFF;
}

.error{
	border:1px solid #DD0024;
	background-color:#DD0024;
	color:#FFF;
}

#cargando{
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	width: 100%;
	height: 100%;
	min-height: 100%;
	background-color: rgba(0, 0, 0, 0.35);
}

#cargando .cargando-inner{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
	min-width: 200px;
	padding: 1.75rem 2.25rem;
	border-radius: 14px;
	background: rgba(30, 37, 48, 0.98);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow:
		0 16px 48px rgba(0, 0, 0, 0.35),
		0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

#cargando .cargando-spinner{
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, 0.12);
	border-top-color: var(--primary-color);
	border-right-color: rgba(236, 92, 32, 0.35);
	animation: cargando-spin 0.7s linear infinite;
	box-sizing: border-box;
}

#cargando .cargando-label{
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
}

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

@media (prefers-reduced-motion: reduce){
	#cargando .cargando-spinner{
		animation: none;
		border-color: rgba(255, 255, 255, 0.2);
		border-top-color: var(--primary-color);
		opacity: 0.95;
	}
}

.accordion,
.accordion-item,
.accordion-header{
	background-color: var(--fourth-color) !important;
	color:#FFF !important;
}

.paginado{
	display: block;
	width:100%;
	text-align: center;
}

.col-md-12,
.col-md-8,
.col-md-7,
.col-md-6,
.col-md-5,
.col-md-4,
.col-md-2,
.col-md-3{
	margin-bottom:10px;
	padding:0px 5px;
}

.ck-editor__editable {
    min-height: 300px;
}

/* Checkbox / radio Bootstrap (modernos — no aplicar a switches role="switch") */
.form-check-input[type="checkbox"]:not([role="switch"]){
	width: 1.15rem !important;
	height: 1.15rem !important;
	margin-top: 0.2em !important;
	vertical-align: top;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.07);
	border: 2px solid rgba(255, 255, 255, 0.35) !important;
	border-radius: 0.3rem !important;
	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.2) inset,
		0 1px 0 rgba(255, 255, 255, 0.06);
	transition:
		background-color 0.18s ease,
		border-color 0.18s ease,
		box-shadow 0.18s ease;
}

.claro .form-check-input[type="checkbox"]:not([role="switch"]){
	background-color: #fff !important;
	border-color: rgba(15, 23, 42, 0.2) !important;
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.06) inset,
		0 1px 0 #fff !important;
}

.form-check-input[type="checkbox"]:not([role="switch"]):checked{
	background-color: var(--secondary-color) !important;
	border-color: rgba(255, 255, 255, 0.22) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' d='M3.4 8.2l3.05 3.2 6.15-7'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: 50% 52% !important;
	background-size: 92% auto !important;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.22) inset,
		0 2px 8px rgba(4, 121, 181, 0.35);
}

.claro .form-check-input[type="checkbox"]:not([role="switch"]):checked{
	border-color: rgba(26, 71, 139, 0.55) !important;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.35) inset,
		0 2px 8px rgba(26, 71, 139, 0.2);
}

.form-check-input[type="checkbox"]:not([role="switch"]):focus{
	box-shadow:
		0 0 0 3px rgba(26, 71, 139, 0.38),
		0 2px 4px rgba(0, 0, 0, 0.2) inset !important;
}

.claro .form-check-input[type="checkbox"]:not([role="switch"]):focus{
	box-shadow:
		0 0 0 3px rgba(26, 71, 139, 0.2),
		0 1px 2px rgba(15, 23, 42, 0.06) inset !important;
}

.form-check-input[type="checkbox"]:not([role="switch"]):focus:checked{
	box-shadow:
		0 0 0 3px rgba(26, 71, 139, 0.35),
		0 1px 0 rgba(255, 255, 255, 0.22) inset,
		0 2px 8px rgba(4, 121, 181, 0.3) !important;
}

.form-check-input[type="radio"]{
	width: 1.15rem !important;
	height: 1.15rem !important;
	margin-top: 0.2em !important;
	vertical-align: top;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.07);
	border: 2px solid rgba(255, 255, 255, 0.35) !important;
	border-radius: 50% !important;
	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.2) inset,
		0 1px 0 rgba(255, 255, 255, 0.06);
	transition:
		background-color 0.18s ease,
		border-color 0.18s ease,
		box-shadow 0.18s ease,
		transform 0.15s ease;
}

.claro .form-check-input[type="radio"]{
	background-color: #fff !important;
	border-color: rgba(15, 23, 42, 0.2) !important;
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.06) inset,
		0 1px 0 #fff !important;
}

.form-check-input[type="radio"]:checked{
	background-color: var(--secondary-color) !important;
	border-color: rgba(255, 255, 255, 0.28) !important;
	box-shadow:
		inset 0 0 0 0.282rem rgba(255, 255, 255, 0.93),
		0 2px 8px rgba(4, 121, 181, 0.35) !important;
}

.claro .form-check-input[type="radio"]:checked{
	border-color: var(--secondary-color) !important;
	box-shadow:
		inset 0 0 0 0.28rem rgba(255, 255, 255, 0.98),
		0 2px 8px rgba(26, 71, 139, 0.2) !important;
}

.form-check-input[type="radio"]:focus{
	box-shadow:
		0 0 0 3px rgba(26, 71, 139, 0.38),
		0 2px 4px rgba(0, 0, 0, 0.2) inset !important;
}

.claro .form-check-input[type="radio"]:focus{
	box-shadow:
		0 0 0 3px rgba(26, 71, 139, 0.22),
		0 1px 2px rgba(15, 23, 42, 0.06) inset !important;
}

.form-check-input[type="radio"]:focus:checked{
	box-shadow:
		0 0 0 3px rgba(26, 71, 139, 0.35),
		inset 0 0 0 0.28rem rgba(255, 255, 255, 0.95),
		0 2px 8px rgba(4, 121, 181, 0.25) !important;
}

.form-check-input:disabled:not([role="switch"]){
	opacity: 0.5 !important;
	cursor: not-allowed !important;
	filter: grayscale(0.2);
	transform: none;
}

@media (prefers-reduced-motion: reduce){
	.form-check-input[type="checkbox"]:not([role="switch"]),
	.form-check-input[type="radio"]{
		transition: none;
	}
}

/* CHECKBOX */

 /* Customize the label (the container) */
.container_checkbox {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 15px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container_checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container_checkbox:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container_checkbox input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container_checkbox input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container_checkbox .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Modales selector de reportes (Form_ReportesVentas / Compras / Inv) */
#modal_reportes_ventas .reporte-modal-grid,
#modal_reportes_compras .reporte-modal-grid,
#modal_reportes_inventario .reporte-modal-grid{
	row-gap: 0.25rem;
}

#modal_reportes_ventas .reporte-opcion-card,
#modal_reportes_compras .reporte-opcion-card,
#modal_reportes_inventario .reporte-opcion-card{
	height: 100%;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 14px;
	overflow: hidden;
	cursor: pointer;
	background: linear-gradient(165deg, #232d38 0%, #1b232a 55%, #151c22 100%);
	box-shadow:
		0 2px 8px rgba(0, 0, 0, 0.22),
		0 1px 0 rgba(255, 255, 255, 0.04) inset;
	transition:
		transform 0.22s ease,
		box-shadow 0.22s ease,
		border-color 0.22s ease;
}

#modal_reportes_ventas .reporte-opcion-card:hover,
#modal_reportes_compras .reporte-opcion-card:hover,
#modal_reportes_inventario .reporte-opcion-card:hover{
	transform: translateY(-5px);
	border-color: rgba(236, 92, 32, 0.45);
	box-shadow:
		0 14px 32px rgba(0, 0, 0, 0.38),
		0 0 0 1px rgba(236, 92, 32, 0.25);
}

#modal_reportes_ventas .reporte-opcion-card:active,
#modal_reportes_compras .reporte-opcion-card:active,
#modal_reportes_inventario .reporte-opcion-card:active{
	transform: translateY(-2px);
}

#modal_reportes_ventas .reporte-opcion-card__title,
#modal_reportes_compras .reporte-opcion-card__title,
#modal_reportes_inventario .reporte-opcion-card__title{
	color: #fff;
	background: linear-gradient(90deg, var(--secondary-color) 0%, #1f4a8f 100%);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.55rem 0.65rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

#modal_reportes_ventas .reporte-opcion-card__body,
#modal_reportes_compras .reporte-opcion-card__body,
#modal_reportes_inventario .reporte-opcion-card__body{
	background: transparent;
	padding: 0.65rem 0.75rem 0.85rem;
}

#modal_reportes_ventas .reporte-opcion-card__img,
#modal_reportes_compras .reporte-opcion-card__img,
#modal_reportes_inventario .reporte-opcion-card__img{
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
	transition: transform 0.26s ease, opacity 0.2s ease;
}

#modal_reportes_ventas .reporte-opcion-card:hover .reporte-opcion-card__img,
#modal_reportes_compras .reporte-opcion-card:hover .reporte-opcion-card__img,
#modal_reportes_inventario .reporte-opcion-card:hover .reporte-opcion-card__img{
	transform: scale(1.04);
	opacity: 1;
}

@media (prefers-reduced-motion: reduce){
	#modal_reportes_ventas .reporte-opcion-card,
	#modal_reportes_compras .reporte-opcion-card,
	#modal_reportes_inventario .reporte-opcion-card,
	#modal_reportes_ventas .reporte-opcion-card__img,
	#modal_reportes_compras .reporte-opcion-card__img,
	#modal_reportes_inventario .reporte-opcion-card__img{
		transition: none;
	}
	#modal_reportes_ventas .reporte-opcion-card:hover,
	#modal_reportes_compras .reporte-opcion-card:hover,
	#modal_reportes_inventario .reporte-opcion-card:hover{
		transform: none;
	}
	#modal_reportes_ventas .reporte-opcion-card:hover .reporte-opcion-card__img,
	#modal_reportes_compras .reporte-opcion-card:hover .reporte-opcion-card__img,
	#modal_reportes_inventario .reporte-opcion-card:hover .reporte-opcion-card__img{
		transform: none;
	}
}

/* Form_ImportacionDatos — panel de tarjetas y modal */
.importacion-datos{
	max-width: 960px;
	margin: 0 auto;
	padding: 0 0.35rem 1.25rem;
}

.importacion-datos__titulo{
	font-family: Anton, sans-serif;
	font-size: clamp(1.08rem, 1.8vw, 1.38rem);
	font-weight: 400;
	letter-spacing: 0.045em;
	text-align: center;
	margin-bottom: 1.35rem !important;
	color: rgba(255, 255, 255, 0.94);
	line-height: 1.35;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.claro .importacion-datos__titulo{
	color: #1e293b;
	text-shadow: none;
}

.importacion-datos-card{
	height: 100%;
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	overflow: hidden;
	text-align: center;
	border: 1px solid rgba(255, 255, 255, 0.085);
	background: linear-gradient(165deg, #262f3c 0%, #1c242d 52%, #141a21 100%);
	box-shadow:
		0 4px 18px rgba(0, 0, 0, 0.26),
		inset 0 1px 0 rgba(255, 255, 255, 0.048);
	transition:
		transform 0.22s ease,
		box-shadow 0.22s ease,
		border-color 0.22s ease;
}

.importacion-datos-card:hover{
	transform: translateY(-4px);
	border-color: rgba(236, 92, 32, 0.38);
	box-shadow:
		0 14px 38px rgba(0, 0, 0, 0.34),
		0 0 0 1px rgba(236, 92, 32, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.claro .importacion-datos-card{
	background: linear-gradient(165deg, #ffffff 0%, #eef2f8 55%, #e5edf5 100%);
	border-color: rgba(15, 23, 42, 0.08);
	box-shadow:
		0 5px 16px rgba(15, 23, 42, 0.08),
		inset 0 1px 0 #fff;
}

.claro .importacion-datos-card:hover{
	border-color: rgba(26, 71, 139, 0.26);
	box-shadow:
		0 16px 36px rgba(15, 23, 42, 0.1),
		0 0 0 1px rgba(236, 92, 32, 0.16),
		inset 0 1px 0 #fff;
}

.importacion-datos-card__head{
	padding: 0.58rem 0.95rem;
	color: #fff;
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.065em;
	text-transform: uppercase;
	background:
		linear-gradient(138deg, #305f99 0%, var(--secondary-color) 50%, #12355d 115%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.13),
		0 1px 0 rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(0, 0, 0, 0.14);
}

.claro .importacion-datos-card__head{
	background:
		linear-gradient(138deg, #4579bf 0%, var(--secondary-color) 50%, #1a4070 118%);
	border-bottom-color: rgba(255, 255, 255, 0.1);
}

.importacion-datos-card__media{
	flex: 1 1 auto;
	padding: 0.88rem 1rem;
	min-height: 128px;
	background: rgba(0, 0, 0, 0.16);
	display: flex;
	align-items: center;
	justify-content: center;
}

.claro .importacion-datos-card__media{
	background: rgba(15, 23, 42, 0.04);
}

.importacion-datos-card__media img{
	width: 100%;
	max-width: 210px;
	height: auto;
	display: block;
	border-radius: 10px;
	transition: transform 0.24s ease, opacity 0.2s ease;
	opacity: 0.94;
}

.importacion-datos-card:hover .importacion-datos-card__media img{
	transform: scale(1.035);
	opacity: 1;
}

.importacion-datos-card__actions{
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	align-items: center;
	padding: 0.8rem 0.95rem !important;
	margin-top: auto;
	background: rgba(0, 0, 0, 0.22) !important;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.claro .importacion-datos-card__actions{
	background: rgba(255, 255, 255, 0.72) !important;
	border-top-color: rgba(15, 23, 42, 0.07);
}

.importacion-datos-btn{
	min-width: 6.75rem;
	font-weight: 600;
	border-radius: 10px !important;
}

.claro .importacion-datos-btn.btn-outline-light{
	color: var(--secondary-color) !important;
	border-color: rgba(26, 71, 139, 0.35) !important;
	background: rgba(255, 255, 255, 0.92) !important;
}

.claro .importacion-datos-btn.btn-outline-light:hover{
	color: #fff !important;
	background: var(--secondary-color) !important;
	border-color: var(--secondary-color) !important;
}

#modal_importar_datos .importacion-datos-modal-lead{
	font-size: 0.89rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: 0.75rem;
}

.claro #modal_importar_datos .importacion-datos-modal-lead{
	color: #475569;
}

#modal_importar_datos .importacion-datos-plantilla{
	border-radius: 10px;
	font-weight: 600;
}

#modal_importar_datos .importacion-datos-file-label{
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 0.35rem;
}

.claro #modal_importar_datos .importacion-datos-file-label{
	color: #334155;
}

@media (prefers-reduced-motion: reduce){
	.importacion-datos-card,
	.importacion-datos-card__media img{
		transition: none;
	}
	.importacion-datos-card:hover{
		transform: none;
	}
	.importacion-datos-card:hover .importacion-datos-card__media img{
		transform: none;
	}
}