/* Datos del app.css que se modificaron pero no se debieron tocar y deben estar aca como css personalizado */

@media (max-width: 767px) {
    /* .pos-actions-mobile-fix {
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow-x: hidden;
    } */
}

div.pos-tab-menu div.list-group > a.active,
div.pos-tab-menu div.list-group > a.active .glyphicon,
div.pos-tab-menu div.list-group > a.active .fa {
  /* Modificado color del app.css original */
  background: linear-gradient(to right, #0A242C, #1d1d1b) !important;
}

.icon-link{
  text-align:relative !important;
}

.icon-link > a {
    display:inline-grid !important;
}

.btn-delete {
    position: absolute;
    top: -6px;
    right: 20px;
    background: transparent;
    color: #6b7280;
    width: auto;
    height: auto;
    padding: 2px;
    font-size: 10px;
    opacity: 0;
    transition: 0.15s ease;
}

.icon-link:hover .btn-delete {
    opacity: 1;
}

.btn-delete:hover {
    color: #ef4444;
    transform: scale(1.15);
}

/* Fin de personalizado que estaba en app.css */


/* Datos del tailwind/app.css que se modificaron pero no se debieron tocar y deben estar aca como css personalizado */

/* AL REALIZAR ACTUALIZACION REALIZAR ESTOS PASOS  */

/* 1. Cambiar el --fallback-p original*/
/* @supports not (color:oklch(0% 0 0)) {
    :root {
        /* --fallback-p: #491eff; */
        /* --fallback-p: hsl(195, 64%, 11%); */

        /* @media (prefers-color-scheme:dark) {
        :root {
            /* --fallback-p: #7582ff;  */
            /* --fallback-p: #878787;*/ 

        /* :root {
          --in: 72.06% 0.191 231.6;
          --su: 64.8% 0.150 160;
          --wa: 84.71% 0.199 83.87;
          --er: 71.76% 0.221 22.18;
          --pc: 89.824% 0.06192 275.75;
          --ac: 15.352% 0.0368 183.61;
          --inc: 0% 0 0;
          --suc: 0% 0 0;
          --wac: 0% 0 0;
          --erc: 0% 0 0;
          --rounded-box: 1rem;
          --rounded-btn: 0.5rem;
          --rounded-badge: 1.9rem;
          --animation-btn: 0.25s;
          --animation-input: .2s;
          --btn-focus-scale: 0.95;
          --border-btn: 1px;
          --tab-border: 1px;
          --tab-radius: 0.5rem;
          cambiar este --p: 49.12% 0.3096 275.75; 
          a este --p: 0.11 64% 195;
          --s: 69.71% 0.329 342.55;
          --sc: 98.71% 0.0106 342.55;
          --a: 76.76% 0.184 183.61;
          --n: 32.1785% 0.02476 255.701624;
          --nc: 89.4994% 0.011585 252.096176;
          --b1: 100% 0 0;
          --b2: 96.1151% 0 0;
          --b3: 92.4169% 0.00108 197.137559;
          --bc: 27.8078% 0.029596 256.847952;
          color-scheme: light
        } */
         

/* 2. agregar importar a background-color: rgb(6 89 134/var(--tw-bg-opacity))
.tw-bg-sky-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(6 89 134/var(--tw-bg-opacity)) !important
}
*/

/* Clases existentes en tailwind/app.css que se modificaron por !important pero se agregan aca para darle prioridad al cambio */
.tw-bg-sky-800 {
    background-color: rgb(6 89 134/var(--tw-bg-opacity)) !important
}

.tw-from-indigo-500 {
    /* --tw-gradient-from: #6366f1 var(--tw-gradient-from-position); */
    --tw-gradient-from: #0A242C var(--tw-gradient-from-position) !important;
}

.tw-from-indigo-600 {
    /* --tw-gradient-from: #4f46e5 var(--tw-gradient-from-position); */
    --tw-gradient-from: #1d1d1b var(--tw-gradient-from-position) !important;
}

.tw-to-blue-500 {
    /* --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position) */
    --tw-gradient-to: #0A242C var(--tw-gradient-to-position) !important;
}

.hover\:tw-from-indigo-600:hover {
    --tw-gradient-from: #1d1d1b var(--tw-gradient-from-position) !important;
}

.hover\:tw-to-blue-600:hover {
    /* --tw-gradient-to: #2563eb var(--tw-gradient-to-position) */
    --tw-gradient-to: #081e25 var(--tw-gradient-to-position) !important;
}


.active\:tw-from-indigo-700:active {
    /* --tw-gradient-from: #4338ca var(--tw-gradient-from-position); */
    --tw-gradient-from: #11110f var(--tw-gradient-from-position) !important;
}

.active\:tw-to-blue-700:active {
    /* --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position) */
    --tw-gradient-to: #041216 var(--tw-gradient-to-position) !important;
}

/* NUEVOS */

.tw-dw-btn-xl {
    font-size: 1.15rem;
    height: 4.5rem;
    min-height: 4.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

.tw-w-7\/10 {
    width: 70%
}

.tw-w-3\/10 {
    width: 30%
}

.tw-col-auto {
    grid-column: auto;
}

.tw-col-span-1 {
    grid-column: span 1/span 1
}

.tw-col-span-2 {
    grid-column: span 2/span 2
}

.tw-col-span-3 {
    grid-column: span 3/span 3
}

.tw-col-span-4{
    grid-column: span 4/span 4
}

.tw-col-span-5{
    grid-column: span 5/span 5
}

.tw-col-span-6{
    grid-column: span 6/span 6
}

.tw-col-span-7{
    grid-column: span 7/span 7
}

.tw-col-span-8{
    grid-column: span 8/span 8
}

.tw-col-span-9 {
    grid-column: span 9/span 9
}

.tw-col-span-10 {
    grid-column: span 10/span 10
}

.tw-col-span-11 {
    grid-column: span 11/span 11
}

.tw-col-span-12 {
    grid-column: span 12/span 12
}

.tw-col-span-full {
    grid-column: 1 / -1;
}

.tw-col-start-1 {
    grid-column-start: 1;
}

.tw-col-start-2 {
    grid-column-start: 2;
}

.tw-col-start-3 {
    grid-column-start: 3;
}

.tw-col-start-4 {
    grid-column-start: 4;
}

.tw-col-start-5 {
    grid-column-start: 5;
}

.tw-col-start-6 {
    grid-column-start: 6;
}

.tw-col-start-7 {
    grid-column-start: 7;
}

.tw-col-start-8 {
    grid-column-start: 8;
}

.tw-col-start-9 {
    grid-column-start: 9;
}

.tw-col-start-10 {
    grid-column-start: 10;
}

.tw-col-start-11 {
    grid-column-start: 11;
}

.tw-col-start-12 {
    grid-column-start: 12;
}

.tw-col-start-13 {
    grid-column-start: 13;
}

.tw-col-start-auto {
    grid-column-start: auto;
}

.tw-col-end-1 {
    grid-column-end: 1;
}

.tw-col-end-2 {
    grid-column-end: 2;
}

.tw-col-end-3 {
    grid-column-end: 3;
}

.tw-col-end-4 {
    grid-column-end: 4;
}

.tw-col-end-5 {
    grid-column-end: 5;
}

.tw-col-end-6 {
    grid-column-end: 6;
}

.tw-col-end-7 {
    grid-column-end: 7;
}

.tw-col-end-8 {
    grid-column-end: 8;
}

.tw-col-end-9 {
    grid-column-end: 9;
}

.tw-col-end-10 {
    grid-column-end: 10;
}

.tw-col-end-11 {
    grid-column-end: 11;
}

.tw-col-end-12 {
    grid-column-end: 12;
}

.tw-col-end-13 {
    grid-column-end: 13;
}

.tw-col-end-auto {
    grid-column-end: auto;
}


.tw-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.tw-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.tw-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.tw-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr))
}

.tw-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr))
}

.tw-grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr))
}

.tw-grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr))
}

.tw-grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr))
}

.tw-grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr))
}

.tw-grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr))
}

.tw-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr))
}

.tw-grid-cols-none {
    grid-template-columns: none;
}

.tw-grid-cols-subgrid {
    grid-template-columns: subgrid;
}

.tw-top-0 {
    top: 0;
}

.tw-overflow-x-hidden {
    overflow-x: hidden;
}

.tw-overflow-visible {
    overflow: visible;
}

.tw-sticky {
    position: sticky;
}


.tw-border-primary-500\/30 {
    border-color: rgba(41, 112, 255, .3)
}

.tw-border-roshpi-amarillo-500\/30 {
    border-color: rgba(232, 225, 0, .3)
}
 
.tw-border-roshpi-oscuro-500\/30 {
    border-color: rgba(10, 36, 44, .3)
}

.tw-border-blue-200 {
  border-color: #bfdbfe;
}

.tw-border-purple-200 {
  border-color: #e9d5ff;
}

.tw-border-red-200 {
  border-color: #fecaca;
}

.tw-border-yellow-200 {
  border-color: #fef08a;
}

.tw-border-gray-300 {
    border-color: #d1d5db;
}

.tw-bg-base-100 {
    --tw-bg-opacity: 1;
    background-color: var(--fallback-b1, oklch(var(--b1)/var(--tw-bg-opacity)))
}


.tw-bg-blue-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255/var(--tw-bg-opacity))
}

.tw-bg-yellow-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 252 232/var(--tw-bg-opacity))
}

.tw-bg-purple-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(250 245 255/var(--tw-bg-opacity))
}

.tw-bg-green-50 {
  background-color: rgb(240 253 244/var(--tw-bg-opacity));
}

.tw-bg-green-500 {
  background-color: rgb(34 197 94/var(--tw-bg-opacity));
}

.tw-bg-orange-400{
    --tw-bg-opacity: 1;
    background-color: rgb(243 135 68/var(--tw-bg-opacity))
}

.tw-bg-roshpi-amarillo-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(232 225 0/var(--tw-bg-opacity))
}

.tw-bg-roshpi-oscuro-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(10 36 44/var(--tw-bg-opacity))
}

.tw-bg-purple-500 {
  background-color: rgb(168 85 247/var(--tw-bg-opacity));
}

.tw-bg-red-50 {
  background-color: rgb(254 242 242/var(--tw-bg-opacity));
}

.tw-bg-red-500 {
  background-color: rgb(239 68 68/var(--tw-bg-opacity));
}

.tw-bg-blue-100 {
  background-color: #dbeafe;
}

.tw-bg-purple-100 {
  background-color: #f3e8ff;
}

.tw-bg-yellow-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(234 179 8 / var(--tw-bg-opacity));
}

.tw-bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops))
}

.tw-from-blue-50 {
    --tw-gradient-from: rgb(239, 246, 255) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.tw-from-purple-50 {
    --tw-gradient-from: rgb(250, 245, 255) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(250 245 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.tw-from-gray-100 {
    --tw-gradient-from: #f3f4f6 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(243 244 246 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.tw-from-yellow-50 {
  --tw-gradient-from: #fefce8 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(254 252 232 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.tw-from-yellow-100 {
  --tw-gradient-from: #fef9c3 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(254 249 195 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.tw-from-green-50 {
  --tw-gradient-from: #f0fdf4 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(240 253 244 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* Fondo degradado final - índigo muy claro */
.tw-to-indigo-50 {
  --tw-gradient-to: #eef2ff var(--tw-gradient-to-position);
}

/* Hover: color inicial verde claro */
.hover\:tw-from-green-100:hover {
  --tw-gradient-from: #dcfce7 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(220 252 231 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* Hover: color final índigo claro */
.hover\:tw-to-indigo-100:hover {
  --tw-gradient-to: #e0e7ff var(--tw-gradient-to-position);
}

/* Color inicial del degradado (verde medio vibrante) */
.tw-from-green-500 {
  --tw-gradient-from: #22c55e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* Color final del degradado (índigo medio brillante) */
.tw-to-indigo-500 {
  --tw-gradient-to: #6366f1 var(--tw-gradient-to-position);
}

.tw-from-blue-500 {
  --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.tw-from-purple-500 {
    --tw-gradient-from: #a855f7 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.tw-from-yellow-500 {
  --tw-gradient-from: #eab308 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.tw-from-blue-600 {
  --tw-gradient-from: rgb(37, 99, 235) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.tw-from-blue-400 {
    --tw-gradient-from: #60a5fa var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.tw-from-orange-50 {
    --tw-gradient-from: #FFF7ED var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.tw-from-orange-500 {
    --tw-gradient-from: #f97316 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.tw-from-roshpi-amarillo-800 {
    --tw-gradient-from: #E8E100 var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(232, 225, 0, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.tw-from-roshpi-oscuro-800 {
    --tw-gradient-from: #0A242C var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(10, 36, 44, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.tw-group:hover .group-hover\:tw-from-yellow-600 {
  --tw-gradient-from: #ca8a04 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(202 138 4 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.tw-group:hover .group-hover\:tw-to-orange-600 {
  --tw-gradient-to: #ea580c var(--tw-gradient-to-position);
}

.hover\:tw-border-yellow-300:hover {
  border-color: #fde047;
}

.tw-group:hover .group-hover\:tw-text-yellow-700 {
  color: #a16207; /* text-yellow-700 */
}

.hover\:tw-from-yellow-100:hover {
  --tw-gradient-from: #fef9c3 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(254 249 195 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* Color final del degradado (naranja claro) al hacer hover */
.hover\:tw-to-orange-100:hover {
  --tw-gradient-to: #ffedd5 var(--tw-gradient-to-position);
}

.hover\:tw-from-yellow-50 {
  --tw-gradient-from: #fefce8 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(254 252 232 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:tw-to-orange-50 {
  --tw-gradient-to: #fff7ed var(--tw-gradient-to-position);
}

.hover\:tw-from-purple-100:hover {
    --tw-gradient-from: #f3e8ff var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(243 232 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:tw-to-pink-100:hover {
    --tw-gradient-to: #fce7f3 var(--tw-gradient-to-position);
}

.hover\:tw-from-blue-100:hover {
  --tw-gradient-from: #dbeafe var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(219 234 254 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:tw-to-indigo-100:hover {
  --tw-gradient-to: #e0e7ff var(--tw-gradient-to-position);
}

.hover\:from-gray-200:hover {
    --tw-gradient-from: #e5e7eb var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(229 231 235 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:tw-to-gray-300:hover {
    --tw-gradient-to: #d1d5db var(--tw-gradient-to-position);
}

.hover\:tw-border-gray-400:hover {
    border-color: #9ca3af;
}

.group:hover .group-hover\:tw-text-purple-700 {
  color: #7e22ce;
}

.group:hover .group-hover\:tw-text-purple-500 {
  color: #a855f7;
}

.group:hover .group-hover\:tw-to-pink-600 {
  --tw-gradient-to: #db2777 var(--tw-gradient-to-position);
}


.tw-from-yellow-800 {
    --tw-gradient-from: #93370d var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(147, 55, 13, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.tw-to-gray-50 {
    --tw-gradient-to: #f9fafb var(--tw-gradient-to-position);
}

.tw-to-orange-50 {
  --tw-gradient-to: #fff7ed var(--tw-gradient-to-position);
}

.tw-to-indigo-50 {
    --tw-gradient-to: rgb(238, 242, 255) var(--tw-gradient-to-position);
}

.tw-to-pink-50 {
    --tw-gradient-to: rgb(253, 242, 248) var(--tw-gradient-to-position);
}

.tw-to-orange-100 {
  --tw-gradient-to: #ffedd5 var(--tw-gradient-to-position);
}

.tw-to-gray-200 {
    --tw-gradient-to: #e5e7eb var(--tw-gradient-to-position);
}

.tw-to-yellow-300 {
  --tw-gradient-to: #fde047;
}

.tw-to-purple-500 {
  --tw-gradient-to: #a855f7 var(--tw-gradient-to-position);
}

.tw-to-indigo-500 {
  --tw-gradient-to: #6366f1 var(--tw-gradient-to-position);
}

.tw-to-pink-500 {
    --tw-gradient-to: #ec4899 var(--tw-gradient-to-position);
}

.tw-to-orange-500 {
  --tw-gradient-to: #f97316 var(--tw-gradient-to-position);
}

.tw-to-blue-600 {
    --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
}

.tw-to-indigo-600 {
  --tw-gradient-to: rgb(79, 70, 229) var(--tw-gradient-to-position);
}

.tw-to-red-600 {
    --tw-gradient-to: #dc2626 var(--tw-gradient-to-position);
}

.tw-to-emerald-600 {
    --tw-gradient-to: #059669 var(--tw-gradient-to-position);
}

.tw-to-roshpi-amarillo-900 {
    --tw-gradient-to: #C2BD00 var(--tw-gradient-to-position)
}

.tw-to-roshpi-oscuro-900 {
    --tw-gradient-to: #071A23 var(--tw-gradient-to-position)
}


.tw-text-green-700 {
  color: rgb(21 128 61/var(--tw-text-opacity));
}

.tw-text-green-800 {
  color: #166534;
}

/* Texto púrpura oscuro (ideal para avisos o etiquetas) */
.tw-text-purple-800 {
  color: #6b21a8;
}

.tw-text-purple-600 {
  color: #9333ea;
}

.tw-text-blue-800 {
  color: #1e40af;
}

.tw-text-blue-600 {
  color: #2563eb;
}

.tw-text-yellow-800 {
  color: #854d0e;
}

.tw-text-yellow-600 {
  color: #ca8a04;
}

.tw-text-red-600 {
  color: #dc2626;
}

.tw-text-green-600 {
  color: #16a34a;
}

.tw-text-indigo-600 {
  color: #4f46e5;
}

.tw-text-roshpi-amarillo-700 {
    --tw-text-opacity: 1;
    color: rgb(232 225 0/var(--tw-text-opacity))
}

.tw-text-roshpi-oscuro-700 {
    --tw-text-opacity: 1;
    color: rgb(10 36 44/var(--tw-text-opacity))
}

.tw-text-primary-700 {
    --tw-text-opacity: 1;
    color: rgb(0 78 235/var(--tw-text-opacity))
}

.tw-text-roshpi-gris-700 {
    --tw-text-opacity: 1;
    color: rgb(218 218 218/var(--tw-text-opacity))
}

.tw-text-roshpi-naranja-700 {
  --tw-text-opacity: 1;
  color: rgb(247 169 65/var(--tw-text-opacity))
}

.tw-text-roshpi-gris-oscuro-700 {
  --tw-text-opacity: 1;
  color: rgb(0 0 0/var(--tw-text-opacity))
}

.tw-text-roshpi-amarillo-800 {
    --tw-text-opacity: 1;
    color: rgb(232 225 0/var(--tw-text-opacity))
}

.tw-text-roshpi-oscuro-800 {
    --tw-text-opacity: 1;
    color: rgb(10 36 44/var(--tw-text-opacity))
}

.tw-text-red-700 {
  color: rgb(185 28 28/var(--tw-text-opacity));
}

.tw-text-roshpi-amarillo {
    --tw-text-opacity: 1;
    color: rgb(232 225 0/var(--tw-text-opacity))
}

.tw-text-roshpi-oscuro {
    --tw-text-opacity: 1;
    color: rgb(10 36 44/var(--tw-text-opacity))
}

.tw-ring-roshpi-amarillo\/10 {
    --tw-ring-color: hsla(58, 100%, 44%, .1)
}

.tw-ring-roshpi-oscuro\/10 {
    --tw-ring-color: hsla(197, 70%, 11%, .1)
}

.hover\:tw-bg-green-100:hover {
  background-color: rgb(220 252 231/var(--tw-bg-opacity));
}

.hover\:tw-bg-green-200:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(171 239 198/var(--tw-bg-opacity))
}

/* .hover\:tw-bg-gray-100:hover {
  background-color: #d1d5db;
} */

.hover\:tw-bg-gray-50:hover {
  background-color: #f9fafb;
}

.hover\:tw-border-gray-100:hover {
  border-color: #f3f4f6;
}

.hover\:tw-bg-roshpi-amarillo-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 254 204/var(--tw-bg-opacity))
}

.hover\:tw-bg-roshpi-oscuro-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(216 225 229/var(--tw-bg-opacity))
}

.hover\:tw-bg-roshpi-amarillo-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(204 197 0/var(--tw-bg-opacity))
}

.hover\:tw-bg-roshpi-oscuro-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(7 26 35/var(--tw-bg-opacity))
}

.hover\:tw-bg-red-100:hover {
  background-color: rgb(254 226 226/var(--tw-bg-opacity));
}

.hover\:tw-bg-red-200:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(254 205 202/var(--tw-bg-opacity))
}

.hover\:tw-from-purple-50:hover {
    --tw-gradient-from: #faf5ff var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(250 245 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:tw-to-pink-50:hover {
    --tw-gradient-to: #fdf2f8 var(--tw-gradient-to-position);
}

.hover\:tw-border-purple-300:hover {
    border-color: #d8b4fe;
}

.hover\:tw-from-purple-600:hover {
    --tw-gradient-from: #9333ea var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:tw-text-roshpi-amarillo:hover {
    --tw-text-opacity: 1;
    color: rgb(232 225 0/var(--tw-text-opacity))
}

.hover\:tw-text-roshpi-oscuro:hover {
    --tw-text-opacity: 1;
    color: rgb(10 36 44/var(--tw-text-opacity))
}

.hover\:tw-text-blue-600:hover {
    color: #2563eb;
}

.hover\:tw-text-yellow-600:hover {
    color: #ca8a04;
}

.hover\:tw-text-purple-600:hover {
    color: #9333ea;
}

.hover\:tw-text-green-600:hover {
    color: #16a34a;
}

@media (max-width:482px) {

    .xs\:tw-col-auto {
        grid-column: auto;
    }

    .xs\:tw-col-span-1 {
        grid-column: span 1/span 1
    }

    .xs\:tw-col-span-2 {
        grid-column: span 2/span 2
    }

    .xs\:tw-col-span-3 {
        grid-column: span 3/span 3
    }

    .xs\:tw-col-span-4 {
        grid-column: span 4/span 4
    }

    .xs\:tw-col-span-5{
        grid-column: span 5/span 5
    }

    .xs\:tw-col-span-6{
        grid-column: span 6/span 6
    }

    .xs\:tw-col-span-7{
        grid-column: span 7/span 7
    }

    .xs\:tw-col-span-8 {
        grid-column: span 8/span 8
    }

    .xs\:tw-col-span-9 {
        grid-column: span 9/span 9
    }

    .xs\:tw-col-span-10 {
        grid-column: span 10/span 10
    }

    .xs\:tw-col-span-11 {
        grid-column: span 11/span 11
    }

    .xs\:tw-col-span-12 {
        grid-column: span 12/span 12
    }

    .xs\:tw-col-span-full {
        grid-column: 1 / -1;
    }

    .xs\:tw-col-start-1 {
        grid-column-start: 1;
    }

    .xs\:tw-col-start-2 {
        grid-column-start: 2;
    }

    .xs\:tw-col-start-3 {
        grid-column-start: 3;
    }

    .xs\:tw-col-start-4 {
        grid-column-start: 4;
    }

    .xs\:tw-col-start-5 {
        grid-column-start: 5;
    }

    .xs\:tw-col-start-6 {
        grid-column-start: 6;
    }

    .xs\:tw-col-start-7 {
        grid-column-start: 7;
    }

    .xs\:tw-col-start-8 {
        grid-column-start: 8;
    }

    .xs\:tw-col-start-9 {
        grid-column-start: 9;
    }

    .xs\:tw-col-start-10 {
        grid-column-start: 10;
    }

    .xs\:tw-col-start-11 {
        grid-column-start: 11;
    }

    .xs\:tw-col-start-12 {
        grid-column-start: 12;
    }

    .xs\:tw-col-start-13 {
        grid-column-start: 13;
    }

    .xs\:tw-col-start-auto {
        grid-column-start: auto;
    }

    .xs\:tw-col-end-1 {
        grid-column-end: 1;
    }

    .xs\:tw-col-end-2 {
        grid-column-end: 2;
    }

    .xs\:tw-col-end-3 {
        grid-column-end: 3;
    }

    .xs\:tw-col-end-4 {
        grid-column-end: 4;
    }

    .xs\:tw-col-end-5 {
        grid-column-end: 5;
    }

    .xs\:tw-col-end-6 {
        grid-column-end: 6;
    }

    .xs\:tw-col-end-7 {
        grid-column-end: 7;
    }

    .xs\:tw-col-end-8 {
        grid-column-end: 8;
    }

    .xs\:tw-col-end-9 {
        grid-column-end: 9;
    }

    .xs\:tw-col-end-10 {
        grid-column-end: 10;
    }

    .xs\:tw-col-end-11 {
        grid-column-end: 11;
    }

    .xs\:tw-col-end-12 {
        grid-column-end: 12;
    }

    .xs\:tw-col-end-13 {
        grid-column-end: 13;
    }

    .xs\:tw-col-end-auto {
        grid-column-end: auto;
    }
    
    .xs\:tw-grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr))
    }

    .xs\:tw-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .xs\:tw-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .xs\:tw-grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .xs\:tw-grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }

    .xs\:tw-grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr))
    }

    .xs\:tw-grid-cols-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr))
    }

    .xs\:tw-grid-cols-8 {
        grid-template-columns: repeat(8, minmax(0, 1fr))
    }

    .xs\:tw-grid-cols-9 {
        grid-template-columns: repeat(9, minmax(0, 1fr))
    }

    .xs\:tw-grid-cols-10 {
        grid-template-columns: repeat(10, minmax(0, 1fr))
    }

    .xs\:tw-grid-cols-11 {
        grid-template-columns: repeat(11, minmax(0, 1fr))
    }

    .xs\:tw-grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr))
    }

    .xs\:tw-grid-cols-none {
        grid-template-columns: none;
    }

    .xs\:tw-grid-cols-subgrid {
        grid-template-columns: subgrid;
    }

    .xs\:tw-w-7\/10 {
        width: 70%
    }

    .xs\:tw-w-full{
        width: 100%;
    }
}


@media (min-width:640px) {

    .sm\:tw-col-auto {
        grid-column: auto;
    }

    .sm\:tw-col-span-1 {
        grid-column: span 1/span 1
    }

    .sm\:tw-col-span-2 {
        grid-column: span 2/span 2
    }

    .sm\:tw-col-span-3 {
        grid-column: span 3/span 3
    }

    .sm\:tw-col-span-4 {
        grid-column: span 4/span 4
    }

    .sm\:tw-col-span-5{
        grid-column: span 5/span 5
    }

    .sm\:tw-col-span-6{
        grid-column: span 6/span 6
    }

    .sm\:tw-col-span-7{
        grid-column: span 7/span 7
    }

    .sm\:tw-col-span-8 {
        grid-column: span 8/span 8
    }

    .sm\:tw-col-span-9 {
        grid-column: span 9/span 9
    }

    .sm\:tw-col-span-10 {
        grid-column: span 10/span 10
    }

    .sm\:tw-col-span-11 {
        grid-column: span 11/span 11
    }

    .sm\:tw-col-span-12 {
        grid-column: span 12/span 12
    }

    .sm\:tw-col-span-full {
        grid-column: 1 / -1;
    }

    .sm\:tw-col-start-1 {
        grid-column-start: 1;
    }

    .sm\:tw-col-start-2 {
        grid-column-start: 2;
    }

    .sm\:tw-col-start-3 {
        grid-column-start: 3;
    }

    .sm\:tw-col-start-4 {
        grid-column-start: 4;
    }

    .sm\:tw-col-start-5 {
        grid-column-start: 5;
    }

    .sm\:tw-col-start-6 {
        grid-column-start: 6;
    }

    .sm\:tw-col-start-7 {
        grid-column-start: 7;
    }

    .sm\:tw-col-start-8 {
        grid-column-start: 8;
    }

    .sm\:tw-col-start-9 {
        grid-column-start: 9;
    }

    .sm\:tw-col-start-10 {
        grid-column-start: 10;
    }

    .sm\:tw-col-start-11 {
        grid-column-start: 11;
    }

    .sm\:tw-col-start-12 {
        grid-column-start: 12;
    }

    .sm\:tw-col-start-13 {
        grid-column-start: 13;
    }

    .sm\:tw-col-start-auto {
        grid-column-start: auto;
    }

    .sm\:tw-col-end-1 {
        grid-column-end: 1;
    }

    .sm\:tw-col-end-2 {
        grid-column-end: 2;
    }

    .sm\:tw-col-end-3 {
        grid-column-end: 3;
    }

    .sm\:tw-col-end-4 {
        grid-column-end: 4;
    }

    .sm\:tw-col-end-5 {
        grid-column-end: 5;
    }

    .sm\:tw-col-end-6 {
        grid-column-end: 6;
    }

    .sm\:tw-col-end-7 {
        grid-column-end: 7;
    }

    .sm\:tw-col-end-8 {
        grid-column-end: 8;
    }

    .sm\:tw-col-end-9 {
        grid-column-end: 9;
    }

    .sm\:tw-col-end-10 {
        grid-column-end: 10;
    }

    .sm\:tw-col-end-11 {
        grid-column-end: 11;
    }

    .sm\:tw-col-end-12 {
        grid-column-end: 12;
    }

    .sm\:tw-col-end-13 {
        grid-column-end: 13;
    }

    .sm\:tw-col-end-auto {
        grid-column-end: auto;
    }
    
    .sm\:tw-grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr))
    }

    .sm\:tw-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .sm\:tw-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .sm\:tw-grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .sm\:tw-grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }

    .sm\:tw-grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr))
    }

    .sm\:tw-grid-cols-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr))
    }

    .sm\:tw-grid-cols-8 {
        grid-template-columns: repeat(8, minmax(0, 1fr))
    }

    .sm\:tw-grid-cols-9 {
        grid-template-columns: repeat(9, minmax(0, 1fr))
    }

    .sm\:tw-grid-cols-10 {
        grid-template-columns: repeat(10, minmax(0, 1fr))
    }

    .sm\:tw-grid-cols-11 {
        grid-template-columns: repeat(11, minmax(0, 1fr))
    }

    .sm\:tw-grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr))
    }

    .sm\:tw-grid-cols-none {
        grid-template-columns: none;
    }

    .sm\:tw-grid-cols-subgrid {
        grid-template-columns: subgrid;
    }

    .sm\:tw-w-7\/10 {
        width: 70%
    }

    .sm\:tw-w-8\/10 {
        width: 70%
    }

    .sm\:tw-w-full{
        width: 100%;
    }

    .sm\:tw-grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

}

@media (min-width:768px) {

    .md\:tw-col-auto {
        grid-column: auto;
    }

    .md\:tw-col-span-1 {
        grid-column: span 1/span 1
    }

    .md\:tw-col-span-2 {
        grid-column: span 2/span 2
    }

    .md\:tw-col-span-3 {
        grid-column: span 3/span 3
    }

    .md\:tw-col-span-4 {
        grid-column: span 4/span 4
    }

    .md\:tw-col-span-5{
        grid-column: span 5/span 5
    }

    .md\:tw-col-span-6{
        grid-column: span 6/span 6
    }

    .md\:tw-col-span-7{
        grid-column: span 7/span 7
    }

    .md\:tw-col-span-8 {
        grid-column: span 8/span 8
    }

    .md\:tw-col-span-9 {
        grid-column: span 9/span 9
    }

    .md\:tw-col-span-10 {
        grid-column: span 10/span 10
    }

    .md\:tw-col-span-11 {
        grid-column: span 11/span 11
    }

    .md\:tw-col-span-12 {
        grid-column: span 12/span 12
    }

    .md\:tw-col-span-full {
        grid-column: 1 / -1;
    }

    .md\:tw-col-start-1 {
        grid-column-start: 1;
    }

    .md\:tw-col-start-2 {
        grid-column-start: 2;
    }

    .md\:tw-col-start-3 {
        grid-column-start: 3;
    }

    .md\:tw-col-start-4 {
        grid-column-start: 4;
    }

    .md\:tw-col-start-5 {
        grid-column-start: 5;
    }

    .md\:tw-col-start-6 {
        grid-column-start: 6;
    }

    .md\:tw-col-start-7 {
        grid-column-start: 7;
    }

    .md\:tw-col-start-8 {
        grid-column-start: 8;
    }

    .md\:tw-col-start-9 {
        grid-column-start: 9;
    }

    .md\:tw-col-start-10 {
        grid-column-start: 10;
    }

    .md\:tw-col-start-11 {
        grid-column-start: 11;
    }

    .md\:tw-col-start-12 {
        grid-column-start: 12;
    }

    .md\:tw-col-start-13 {
        grid-column-start: 13;
    }

    .md\:tw-col-start-auto {
        grid-column-start: auto;
    }

    .md\:tw-col-end-1 {
        grid-column-end: 1;
    }

    .md\:tw-col-end-2 {
        grid-column-end: 2;
    }

    .md\:tw-col-end-3 {
        grid-column-end: 3;
    }

    .md\:tw-col-end-4 {
        grid-column-end: 4;
    }

    .md\:tw-col-end-5 {
        grid-column-end: 5;
    }

    .md\:tw-col-end-6 {
        grid-column-end: 6;
    }

    .md\:tw-col-end-7 {
        grid-column-end: 7;
    }

    .md\:tw-col-end-8 {
        grid-column-end: 8;
    }

    .md\:tw-col-end-9 {
        grid-column-end: 9;
    }

    .md\:tw-col-end-10 {
        grid-column-end: 10;
    }

    .md\:tw-col-end-11 {
        grid-column-end: 11;
    }

    .md\:tw-col-end-12 {
        grid-column-end: 12;
    }

    .md\:tw-col-end-13 {
        grid-column-end: 13;
    }

    .md\:tw-col-end-auto {
        grid-column-end: auto;
    }
    
    .md\:tw-grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr))
    }

    .md\:tw-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .md\:tw-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .md\:tw-grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .md\:tw-grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }

    .md\:tw-grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr))
    }

    .md\:tw-grid-cols-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr))
    }

    .md\:tw-grid-cols-8 {
        grid-template-columns: repeat(8, minmax(0, 1fr))
    }

    .md\:tw-grid-cols-9 {
        grid-template-columns: repeat(9, minmax(0, 1fr))
    }

    .md\:tw-grid-cols-10 {
        grid-template-columns: repeat(10, minmax(0, 1fr))
    }

    .md\:tw-grid-cols-11 {
        grid-template-columns: repeat(11, minmax(0, 1fr))
    }

    .md\:tw-grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr))
    }

    .md\:tw-grid-cols-none {
        grid-template-columns: none;
    }

    .md\:tw-grid-cols-subgrid {
        grid-template-columns: subgrid;
    }

    .md\:tw-w-full {
        width: 100%
    }

    .md\:tw-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .md\:tw-w-7\/10 {
        width: 70%
    }

    .md\:tw-w-3\/10 {
        width: 30%
    }
}

@media (min-width:1024px) {
    .lg\:tw-col-auto {
        grid-column: auto;
    }

    .lg\:tw-col-span-3 {
        grid-column: span 3/span 3
    }

    .lg\:tw-col-span-4 {
        grid-column: span 4/span 4
    }

    .lg\:tw-col-span-5{
        grid-column: span 5/span 5
    }

    .lg\:tw-col-span-6{
        grid-column: span 6/span 6
    }

    .lg\:tw-col-span-7{
        grid-column: span 7/span 7
    }

    .lg\:tw-col-span-8 {
        grid-column: span 8/span 8
    }

    .lg\:tw-col-span-9 {
        grid-column: span 9/span 9
    }

    .lg\:tw-col-span-10 {
        grid-column: span 10/span 10
    }

    .lg\:tw-col-span-11 {
        grid-column: span 11/span 11
    }

    .lg\:tw-col-span-12 {
        grid-column: span 12/span 12
    }

    .lg\:tw-col-span-full {
        grid-column: 1 / -1;
    }

    .lg\:tw-col-start-1 {
        grid-column-start: 1;
    }

    .lg\:tw-col-start-2 {
        grid-column-start: 2;
    }

    .lg\:tw-col-start-3 {
        grid-column-start: 3;
    }

    .lg\:tw-col-start-4 {
        grid-column-start: 4;
    }

    .lg\:tw-col-start-5 {
        grid-column-start: 5;
    }

    .lg\:tw-col-start-6 {
        grid-column-start: 6;
    }

    .lg\:tw-col-start-7 {
        grid-column-start: 7;
    }

    .lg\:tw-col-start-8 {
        grid-column-start: 8;
    }

    .lg\:tw-col-start-9 {
        grid-column-start: 9;
    }

    .lg\:tw-col-start-10 {
        grid-column-start: 10;
    }

    .lg\:tw-col-start-11 {
        grid-column-start: 11;
    }

    .lg\:tw-col-start-12 {
        grid-column-start: 12;
    }

    .lg\:tw-col-start-13 {
        grid-column-start: 13;
    }

    .lg\:tw-col-start-auto {
        grid-column-start: auto;
    }

    .lg\:tw-col-end-1 {
        grid-column-end: 1;
    }

    .lg\:tw-col-end-2 {
        grid-column-end: 2;
    }

    .lg\:tw-col-end-3 {
        grid-column-end: 3;
    }

    .lg\:tw-col-end-4 {
        grid-column-end: 4;
    }

    .lg\:tw-col-end-5 {
        grid-column-end: 5;
    }

    .lg\:tw-col-end-6 {
        grid-column-end: 6;
    }

    .lg\:tw-col-end-7 {
        grid-column-end: 7;
    }

    .lg\:tw-col-end-8 {
        grid-column-end: 8;
    }

    .lg\:tw-col-end-9 {
        grid-column-end: 9;
    }

    .lg\:tw-col-end-10 {
        grid-column-end: 10;
    }

    .lg\:tw-col-end-11 {
        grid-column-end: 11;
    }

    .lg\:tw-col-end-12 {
        grid-column-end: 12;
    }

    .lg\:tw-col-end-13 {
        grid-column-end: 13;
    }

    .lg\:tw-col-end-auto {
        grid-column-end: auto;
    }

    .lg\:tw-w-full {
        width: 100%
    }

    .lg\:tw-grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr))
    }

    .lg\:tw-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .lg\:tw-grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .lg\:tw-grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }

    .lg\:tw-grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr))
    }

    .lg\:tw-grid-cols-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr))
    }

    .lg\:tw-grid-cols-8 {
        grid-template-columns: repeat(8, minmax(0, 1fr))
    }

    .lg\:tw-grid-cols-9 {
        grid-template-columns: repeat(9, minmax(0, 1fr))
    }

    .lg\:tw-grid-cols-10 {
        grid-template-columns: repeat(10, minmax(0, 1fr))
    }

    .lg\:tw-grid-cols-11 {
        grid-template-columns: repeat(11, minmax(0, 1fr))
    }

    .lg\:tw-grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr))
    }

    .lg\:tw-grid-cols-none {
        grid-template-columns: none;
    }

    .lg\:tw-grid-cols-subgrid {
        grid-template-columns: subgrid;
    }

    .lg\:tw-w-7\/10 {
        width: 70%
    }

    .lg\:tw-w-3\/10 {
        width: 30%
    }
}

@media (min-width:1280px) {
    .xl\:tw-col-auto {
        grid-column: auto;
    }

    .xl\:tw-col-span-3 {
        grid-column: span 3/span 3
    }

    .xl\:tw-col-span-4{
        grid-column: span 4/span 4
    }

    .xl\:tw-col-span-5{
        grid-column: span 5/span 5
    }

    .xl\:tw-col-span-6{
        grid-column: span 6/span 6
    }

    .xl\:tw-col-span-7{
        grid-column: span 7/span 7
    }

    .xl\:tw-col-span-8{
        grid-column: span 8/span 8
    }
    
    .xl\:tw-col-span-9 {
        grid-column: span 9/span 9
    }

    .xl\:tw-col-span-10 {
        grid-column: span 10/span 10
    }

    .xl\:tw-col-span-11 {
        grid-column: span 11/span 11
    }

    .xl\:tw-col-span-12 {
        grid-column: span 12/span 12
    }

    .xl\:tw-col-span-full {
        grid-column: 1 / -1;
    }

    .xl\:tw-col-start-1 {
        grid-column-start: 1;
    }

    .xl\:tw-col-start-2 {
        grid-column-start: 2;
    }

    .xl\:tw-col-start-3 {
        grid-column-start: 3;
    }

    .xl\:tw-col-start-4 {
        grid-column-start: 4;
    }

    .xl\:tw-col-start-5 {
        grid-column-start: 5;
    }

    .xl\:tw-col-start-6 {
        grid-column-start: 6;
    }

    .xl\:tw-col-start-7 {
        grid-column-start: 7;
    }

    .xl\:tw-col-start-8 {
        grid-column-start: 8;
    }

    .xl\:tw-col-start-9 {
        grid-column-start: 9;
    }

    .xl\:tw-col-start-10 {
        grid-column-start: 10;
    }

    .xl\:tw-col-start-11 {
        grid-column-start: 11;
    }

    .xl\:tw-col-start-12 {
        grid-column-start: 12;
    }

    .xl\:tw-col-start-13 {
        grid-column-start: 13;
    }

    .xl\:tw-col-start-auto {
        grid-column-start: auto;
    }

    .xl\:tw-col-end-1 {
        grid-column-end: 1;
    }

    .xl\:tw-col-end-2 {
        grid-column-end: 2;
    }

    .xl\:tw-col-end-3 {
        grid-column-end: 3;
    }

    .xl\:tw-col-end-4 {
        grid-column-end: 4;
    }

    .xl\:tw-col-end-5 {
        grid-column-end: 5;
    }

    .xl\:tw-col-end-6 {
        grid-column-end: 6;
    }

    .xl\:tw-col-end-7 {
        grid-column-end: 7;
    }

    .xl\:tw-col-end-8 {
        grid-column-end: 8;
    }

    .xl\:tw-col-end-9 {
        grid-column-end: 9;
    }

    .xl\:tw-col-end-10 {
        grid-column-end: 10;
    }

    .xl\:tw-col-end-11 {
        grid-column-end: 11;
    }

    .xl\:tw-col-end-12 {
        grid-column-end: 12;
    }

    .xl\:tw-col-end-13 {
        grid-column-end: 13;
    }

    .xl\:tw-col-end-auto {
        grid-column-end: auto;
    }

    .xl\:tw-grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr))
    }

    .xl\:tw-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .xl\:tw-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .xl\:tw-grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }

    .xl\:tw-grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr))
    }

    .xl\:tw-grid-cols-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr))
    }

    .xl\:tw-grid-cols-8 {
        grid-template-columns: repeat(8, minmax(0, 1fr))
    }

    .xl\:tw-grid-cols-9 {
        grid-template-columns: repeat(9, minmax(0, 1fr))
    }

    .xl\:tw-grid-cols-10 {
        grid-template-columns: repeat(10, minmax(0, 1fr))
    }

    .xl\:tw-grid-cols-11 {
        grid-template-columns: repeat(11, minmax(0, 1fr))
    }

    .xl\:tw-grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr))
    }

    .xl\:tw-grid-cols-none {
        grid-template-columns: none;
    }

    .xl\:tw-grid-cols-subgrid {
        grid-template-columns: subgrid;
    }
}


/* Nuevos CSS */

/* Para el cuadro combinado */
/* .select2-container--default .select2-selection--single{
    background-color: #00f;
} */

/* Para el cuadro de búsqueda de opciones */
/* .select2-search--dropdown{
    background-color: #00f;
} */

.select2-search__field, .monthselect, .yearselect{
    background-color: #fff;
}

/* y para la lista de opciones */
/* .select2-results { 
    background-color: #00f;
} */

.tw-pr-2{
    padding-right: 0.5rem; /* 8px */
}

.tw-opacity-0{
    opacity: 0;
}

.tw-translate-y-4{
    transform: translateY(1rem);
}

.tw-duration-500{
    transition-duration: 500ms;
}

.tw-ease-out{
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.tw-mb-3{
    margin-bottom: 0.75rem; /* 12px */
}

.tw-h-px{
    height: 1px;
}

.tw-bg-gradient-to-l{
    background-image: linear-gradient(to left, var(--tw-gradient-stops));
}

.tw-bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
	
.tw-from-indigo-600\/30 {
    --tw-gradient-from: rgba(29, 29, 27, 0.3) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(79, 70, 229, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.tw-to-transparent{
    --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.tw-space-y-4{
    margin-top: 1rem; /* 16px */
}

.tw-border-slate-200{
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}

.tw-ease-in-out{
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.tw-translate-y-2{
    transform: translateY(0.5rem);
}

.tw-px-2\.5{
    padding-left: 0.625rem; /* 10px */
    padding-right: 0.625rem; /* 10px */
}

.tw-bg-emerald-100{
    background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}

.tw-text-emerald-800{
    color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}

.tw-text-sky-800{
    color: rgb(7 89 133 / var(--tw-text-opacity, 1));
}

.tw-bg-amber-100{
    background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}

.tw-text-amber-800{
    color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}

.tw-bg-rose-100{
    background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
}

.tw-text-rose-800{
    color: rgb(159 18 57 / var(--tw-text-opacity, 1));
}

.tw-bg-slate-100{
   background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1)); 
}

.tw-text-slate-800{
    color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}

.tw-text-slate-900{
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}

.tw-min-w-6{
    min-width: 1.5rem; /* 24px */
}

.tw-bg-indigo-100{
    background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}

.tw-text-indigo-800{
    color: rgb(55 48 163 / var(--tw-text-opacity, 1));
}

.tw-text-slate-600{
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.tw-leading-relaxed{
    line-height: 1.625;
}

.tw-text-slate-500{
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.tw-h-4{
    height: 1rem; /* 16px */
}

.tw-w-4 {
    width: 1rem; /* 16px */
}

.tw-mr-1 {
    margin-right: 0.25rem; /* 4px */
}

.tw-h-1 {
    height: 0.25rem; /* 4px */
}

.tw-to-purple-600 {
    --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
}

.tw-py-16 {
    padding-top: 4rem; /* 64px */
    padding-bottom: 4rem; /* 64px */
}

.tw-h-16 {
    height: 4rem; /* 64px */
}

.tw-w-16 {
    width: 4rem; /* 64px */
}

.tw-text-slate-300 {
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}

.tw-mt-1 {
    margin-top: 0.25rem; /* 4px */
}

.tw-whitespace-pre-line {
    white-space: pre-line;
}

.tw-h-32 {
    height: 8rem; /* 128px */
}

.tw-h-32 {
    border-width: 4px;
}

.tw-border-indigo-200 {
    border-color: rgb(199 210 254 / var(--tw-border-opacity, 1));
}

.tw-border-orange-200 {
  border-color: #fed7aa;
}

.tw-border-red-300 {
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}

.tw-border-green-200 {
  border-color: #bbf7d0;
}

.tw-border-green-300 {
  border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
}

.border-t-indigo-600 {
    border-top-color: rgb(79 70 229 / var(--tw-border-opacity, 1));
}

/* Clase para los botones de mesa con animación */
.tw-animate-btn-pop {
    animation: button-pop 0.25s ease-out;
    transition-duration: 0.2s;
    transition-property: color, background-color, border-color, opacity, box-shadow, transform;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    cursor: pointer;
}

.tw-animate-btn-pop:active {
    animation: button-pop 0s ease-out;
    transform: scale(0.97);
}

/* Ensure proper width for Select2 in drawer */
.tw-dw-menu .select2-container {
  width: 100% !important;
}

.tw-dw-menu .select2-dropdown {
  width: auto !important;
  margin-left: -40%;
}
/* .tw-animate-spin {
    animation: spin 1s linear infinite;

    @keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
    }
} */





/* Fin de personalizado que estaba en tailwind/app.css */

/* ===== SISTEMA COMPLETO DE FORMULARIOS PARA MODALES ===== */

/* === ESTRUCTURA BÁSICA DEL MODAL === */
.modal-dialog .modal-content {
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: none;
    overflow: hidden;
}

.modal-dialog .modal-content .modal-header {
    background-color: #f5f5f5;
    color: #333;
    border-radius: 12px 12px 0 0;
    padding: 20px 25px;
    border: none;
    border-bottom: 1px solid #ddd;
}

.modal-dialog .modal-content .modal-header .modal-title {
    font-size: 18px;
    font-weight: 600;
}

.modal-dialog .modal-content .modal-header .close {
    color: #333;
    opacity: 0.6;
    font-size: 24px;
    text-shadow: none;
}

.modal-dialog .modal-content .modal-header .close:hover {
    opacity: 0.8;
}

.modal-dialog .modal-content .modal-body {
    padding: 25px;
    max-height: 70vh;
    overflow-y: auto;
}

.modal-dialog .modal-content .modal-footer {
    padding: 20px 25px;
    background-color: #f8f9fa;
    border-radius: 0 0 12px 12px;
    text-align: right;
    border-top: 1px solid #e9ecef;
}

/* === PANELES === */
.modal-dialog .modal-content .panel {
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
}

.modal-dialog .modal-content .panel:last-child {
    margin-bottom: 0;
}

.modal-dialog .modal-content .panel-heading {
    background-color: #f5f5f5;
    color: #333;
    border-radius: 10px 10px 0 0;
    padding: 15px 20px;
    border-bottom: 1px solid #ddd;
}

.modal-dialog .modal-content .panel-body {
    padding: 20px;
    border-radius: 0 0 10px 10px;
}

.modal-dialog .modal-content .panel-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.modal-dialog .modal-content .panel-title i {
    margin-right: 8px;
}

/* === FORMULARIOS BÁSICOS === */
.modal-dialog .modal-content .form-group {
    margin-bottom: 20px;
    overflow: hidden;
}

.modal-dialog .modal-content .form-group:last-child {
    margin-bottom: 0;
}

.modal-dialog .modal-content .control-label {
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    display: block;
    font-size: 12px;
    text-align: left;
}

/* === INPUTS BÁSICOS === */
.modal-dialog .modal-content .form-control:not(.select2-hidden-accessible) {
    border-radius: 6px;
    border: 1px solid #ddd;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 400;
    color: #333;
    background-color: #fff;
    transition: all 0.3s ease;
    height: 34px;
    line-height: 1.2;
    font-family: inherit;
    box-sizing: border-box;
}

.modal-dialog .modal-content .form-control:not(.select2-hidden-accessible):focus {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
    outline: none;
    background-color: #fff;
}

.modal-dialog .modal-content .form-control:not(.select2-hidden-accessible):hover {
    border-color: #bbb;
}

/* === TEXTAREA ESPECÍFICO === */
.modal-dialog .modal-content textarea.form-control {
    height: auto !important;
    min-height: 80px !important;
    max-height: 200px !important;
    padding: 10px 12px !important;
    line-height: 1.5 !important;
    resize: vertical !important;
    overflow-y: auto !important;
}

.modal-dialog .modal-content textarea.form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
    outline: none;
}

.modal-dialog .modal-content textarea.form-control:hover {
    border-color: #bbb;
}

/* === SELECTS NORMALES (IGUALES A SELECT2) === */
.modal-dialog .modal-content select.form-control {
    border-radius: 6px;
    border: 1px solid #ddd;
    padding: 8px 30px 8px 12px;
    font-size: 13px;
    font-weight: 400;
    color: #333;
    background-color: #fff;
    transition: all 0.3s ease;
    height: 34px;
    line-height: 1.2;
    font-family: inherit;
    appearance: none;
    cursor: pointer;
    
    /* Flecha personalizada igual a Select2 */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23666' d='M4.427 6.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 6H4.604a.25.25 0 00-.177.427z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
}

.modal-dialog .modal-content select.form-control:hover {
    border-color: #007bff;
    background-color: #f8f9fa;
}

.modal-dialog .modal-content select.form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
    outline: none;
    background-color: #fff;
    /* Flecha hacia arriba cuando está enfocado */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23666' d='M11.573 9.573l-3.396-3.396a.25.25 0 00-.354 0L4.427 9.573A.25.25 0 004.604 10h6.792a.25.25 0 00.177-.427z'/%3e%3c/svg%3e");
}

/* === SELECT2 STYLING === */
.modal-dialog .modal-content .select2-container, .tw-dw-menu .select2-container {
    width: 100% !important;
    font-size: 13px;
    box-sizing: border-box;
}

.modal-dialog .modal-content .select2-container .select2-selection--single,
.tw-dw-menu .select2-container .select2-selection--single
{
    height: 34px !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    background-color: #fff !important;
    transition: all 0.3s ease !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
}

.modal-dialog .modal-content .select2-container .select2-selection--single .select2-selection__rendered,
.tw-dw-menu .select2-container .select2-selection--single .select2-selection__rendered
{
    line-height: 32px !important;
    padding-left: 12px !important;
    padding-right: 30px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #333 !important;
    font-family: inherit !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.modal-dialog .modal-content .select2-container .select2-selection--single .select2-selection__placeholder,
.tw-dw-menu .select2-container .select2-selection--single .select2-selection__placeholder
{
    color: #999 !important;
    font-style: normal !important;
    font-weight: 400 !important;
}

.modal-dialog .modal-content .select2-container .select2-selection--single .select2-selection__arrow,
.tw-dw-menu .select2-container .select2-selection--single .select2-selection__arrow 
{
    height: 32px !important;
    right: 8px !important;
    width: 20px !important;
    position: absolute !important;
    top: 1px !important;
}

.modal-dialog .modal-content .select2-container .select2-selection--single .select2-selection__arrow b,
.tw-dw-menu .select2-container .select2-selection--single .select2-selection__arrow b
{
    border-color: #666 transparent transparent transparent !important;
    border-style: solid !important;
    border-width: 5px 4px 0 4px !important;
    height: 0 !important;
    left: 50% !important;
    margin-left: -4px !important;
    margin-top: -2px !important;
    position: absolute !important;
    top: 50% !important;
    width: 0 !important;
}

.modal-dialog .modal-content .select2-container .select2-selection--single:hover,
.tw-dw-menu .select2-container .select2-selection--single:hover 
{
    border-color: #007bff !important;
    background-color: #f8f9fa !important;
}

.modal-dialog .modal-content .select2-container.select2-container--focus .select2-selection--single,
.modal-dialog .modal-content .select2-container.select2-container--open .select2-selection--single,
.tw-dw-menu .select2-container.select2-container--focus .select2-selection--single,
.tw-dw-menu .select2-container.select2-container--open .select2-selection--single
{
    border-color: #007bff !important;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1) !important;
    background-color: #fff !important;
    outline: none !important;
}

.modal-dialog .modal-content .select2-container.select2-container--open .select2-selection--single .select2-selection__arrow b,
.tw-dw-menu .select2-container.select2-container--open .select2-selection--single .select2-selection__arrow b
{
    border-color: transparent transparent #666 transparent !important;
    border-width: 0 4px 5px 4px !important;
}

/* === DROPDOWN SELECT2 === */
.modal-dialog .modal-content .select2-dropdown,
.tw-dw-menu .select2-dropdown
{
    border: 1px solid #007bff !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    z-index: 9999 !important;
    margin-top: 2px !important;
    font-family: inherit !important;
    background-color: #fff !important;
    min-width: 200px !important;
    max-width: 400px !important;
}

.modal-dialog .modal-content .select2-results,
.tw-dw-menu .select2-results
{
    max-height: 200px !important;
    overflow-y: auto !important;
}

.modal-dialog .modal-content .select2-results__option,
.tw-dw-menu .select2-results__option {
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #333 !important;
    background-color: #fff !important;
    border-bottom: 1px solid #f0f0f0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: inherit !important;
    word-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.4 !important;
    min-height: 32px !important;
}

.modal-dialog .modal-content .select2-results__option:last-child,
.tw-dw-menu .select2-results__option:last-child
{
    border-bottom: none !important;
}

.modal-dialog .modal-content .select2-results__option--highlighted,
.tw-dw-menu .select2-results__option--highlighted
{
    background-color: #007bff !important;
    color: #fff !important;
}

.modal-dialog .modal-content .select2-results__option[aria-selected="true"],
.tw-dw-menu .select2-results__option[aria-selected="true"]
{
    background-color: #0056b3 !important;
    color: #fff !important;
    font-weight: 500 !important;
}

.modal-dialog .modal-content .select2-search--dropdown,
.tw-dw-menu .select2-search--dropdown
{
    padding: 8px !important;
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #e9ecef !important;
}

.modal-dialog .modal-content .select2-search--dropdown .select2-search__field,
.tw-dw-menu .select2-search--dropdown .select2-search__field
{
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
}

.modal-dialog .modal-content .select2-search--dropdown .select2-search__field:focus,
.tw-dw-menu .select2-search--dropdown .select2-search__field:focus
{
    border-color: #007bff !important;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1) !important;
    outline: none !important;
}

/* === INPUT GROUPS === */
.modal-dialog .modal-content .input-group {
    display: flex !important;
    width: 100% !important;
    margin-bottom: 6px;
    box-sizing: border-box !important;
}

.modal-dialog .modal-content .input-group-addon {
    background-color: #f8f9fa !important;
    border: 1px solid #ddd !important;
    color: #666 !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    min-width: 40px !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    height: 34px !important;
    box-sizing: border-box !important;
}

/* Input-group-addon a la izquierda */
.modal-dialog .modal-content .input-group-addon:first-child {
    border-radius: 6px 0 0 6px !important;
    border-right: none !important;
}

/* Input-group-addon a la derecha */
.modal-dialog .modal-content .input-group-addon:last-child {
    border-radius: 0 6px 6px 0 !important;
    border-left: none !important;
}

/* Input-group-addon en el medio */
.modal-dialog .modal-content .input-group-addon:not(:first-child):not(:last-child) {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
}

.modal-dialog .modal-content .input-group-addon i {
    font-size: 13px !important;
    color: #666 !important;
    width: 14px !important;
    text-align: center !important;
}

/* Form controls en input-group */
.modal-dialog .modal-content .input-group .form-control:not(.select2-hidden-accessible) {
    flex: 1 !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
}

.modal-dialog .modal-content .input-group .form-control:not(.select2-hidden-accessible):first-child {
    border-radius: 6px 0 0 6px !important;
    border-right: none !important;
}

.modal-dialog .modal-content .input-group .form-control:not(.select2-hidden-accessible):last-child {
    border-radius: 0 6px 6px 0 !important;
    border-left: none !important;
}

.modal-dialog .modal-content .input-group .form-control:not(.select2-hidden-accessible):not(:first-child):not(:last-child) {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
}

/* Select normal en input-group */
.modal-dialog .modal-content .input-group select.form-control {
    flex: 1 !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
}

.modal-dialog .modal-content .input-group select.form-control:first-child {
    border-radius: 6px 0 0 6px !important;
    border-right: none !important;
}

.modal-dialog .modal-content .input-group select.form-control:last-child {
    border-radius: 0 6px 6px 0 !important;
    border-left: none !important;
}

.modal-dialog .modal-content .input-group select.form-control:not(:first-child):not(:last-child) {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
}

/* Select2 en input-group */
.modal-dialog .modal-content .input-group .select2-container,
.tw-dw-menu .input-group .select2-container
{
    flex: 1 !important;
    width: auto !important;
    min-width: 0 !important;
}

.modal-dialog .modal-content .input-group .select2-container .select2-selection--single,
.tw-dw-menu .input-group .select2-container .select2-selection--single
{
    border-radius: 0 !important;
    margin-bottom: 0 !important;
}

.modal-dialog .modal-content .input-group .select2-container:first-child .select2-selection--single,
.tw-dw-menu .input-group .select2-container:first-child .select2-selection--single
{
    border-radius: 6px 0 0 6px !important;
    border-right: none !important;
}

.modal-dialog .modal-content .input-group .select2-container:last-child .select2-selection--single,
.tw-dw-menu .input-group .select2-container:last-child .select2-selection--single
{
    border-radius: 0 6px 6px 0 !important;
    border-left: none !important;
}

.modal-dialog .modal-content .input-group .select2-container:not(:first-child):not(:last-child) .select2-selection--single,
.tw-dw-menu .input-group .select2-container:not(:first-child):not(:last-child) .select2-selection--single
{
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
}

/* Estados de focus para input-groups */
.modal-dialog .modal-content .input-group:focus-within .input-group-addon {
    border-color: #007bff !important;
    background-color: #e3f2fd !important;
}

.modal-dialog .modal-content .input-group:focus-within .form-control,
.modal-dialog .modal-content .input-group:focus-within .select2-selection--single,
.tw-dw-menu .input-group:focus-within .select2-selection--single
{
    border-color: #007bff !important;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1) !important;
}

/* === MULTI-INPUT === */
.modal-dialog .modal-content .multi-input {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    align-items: flex-end !important;
}

.modal-dialog .modal-content .multi-input .form-control {
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
}

.modal-dialog .modal-content .multi-input .width-40 {
    flex: 0 0 calc(40% - 4px) !important;
    width: calc(40% - 4px) !important;
}

.modal-dialog .modal-content .multi-input .width-60 {
    flex: 0 0 calc(60% - 4px) !important;
    width: calc(60% - 4px) !important;
}

.modal-dialog .modal-content .multi-input .pull-left {
    float: none !important;
}

/* === ESTADOS DE VALIDACIÓN === */
.modal-dialog .modal-content .has-error .form-control:not(.select2-hidden-accessible),
.modal-dialog .modal-content .has-error select.form-control,
.modal-dialog .modal-content .has-error .select2-container .select2-selection--single,

.tw-dw-menu .has-error .form-control:not(.select2-hidden-accessible),
.tw-dw-menu .has-error select.form-control,
.tw-dw-menu .has-error .select2-container .select2-selection--single
{
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.1) !important;
}

.modal-dialog .modal-content .has-success .form-control:not(.select2-hidden-accessible),
.modal-dialog .modal-content .has-success select.form-control,
.modal-dialog .modal-content .has-success .select2-container .select2-selection--single,
.tw-dw-menu .has-success .form-control:not(.select2-hidden-accessible),
.tw-dw-menu .has-success select.form-control,
.tw-dw-menu .has-success .select2-container .select2-selection--single
{
    border-color: #28a745 !important;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.1) !important;
}

.modal-dialog .modal-content .error-message {
    color: #dc3545;
    font-size: 11px;
    margin-top: 4px;
    display: block;
    padding-left: 2px;
}

/* === HELP BLOCKS === */
.modal-dialog .modal-content .help-block {
    margin-top: 5px;
    margin-bottom: 0;
    padding-left: 2px;
}

.modal-dialog .modal-content .help-block small {
    font-style: italic;
    color: #6c757d;
    font-size: 11px;
}

/* === CHECKBOXES === */
.modal-dialog .modal-content .checkbox-wrapper {
    margin-bottom: 12px;
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    min-height: 50px;
    display: flex;
    align-items: center;
}

.modal-dialog .modal-content .checkbox-wrapper:hover {
    background-color: #e9ecef;
    border-color: #dee2e6;
    transform: translateY(-1px);
}

.modal-dialog .modal-content .checkbox {
    margin: 0;
    width: 100%;
}

.modal-dialog .modal-content .checkbox-label {
    display: flex;
    align-items: flex-start;
    margin: 0;
    cursor: pointer;
    font-weight: normal;
    width: 100%;
    min-height: 20px;
}

.modal-dialog .modal-content .checkbox-text {
    margin-left: 10px;
    font-size: 12px;
    line-height: 1.4;
    flex: 1;
    word-wrap: break-word;
    word-break: break-word;
}

.modal-dialog .modal-content .icheckbox_square-blue {
    margin-right: 0 !important;
    flex-shrink: 0;
}

/* === LOADING STATES === */
.modal-dialog .modal-content .btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.modal-dialog .modal-content .loading {
    position: relative;
}

.modal-dialog .modal-content .loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid transparent;
    border-top: 2px solid #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* === SCROLLBARS === */
.modal-dialog .modal-content .modal-body::-webkit-scrollbar,
.modal-dialog .modal-content .select2-results__options::-webkit-scrollbar,
.tw-dw-menu .select2-results__options::-webkit-scrollbar
{
    width: 6px;
}

.modal-dialog .modal-content .modal-body::-webkit-scrollbar-track,
.modal-dialog .modal-content .select2-results__options::-webkit-scrollbar-track,
.tw-dw-menu .select2-results__options::-webkit-scrollbar-track
{
    background: #f1f1f1;
    border-radius: 3px;
}

.modal-dialog .modal-content .modal-body::-webkit-scrollbar-thumb,
.modal-dialog .modal-content .select2-results__options::-webkit-scrollbar-thumb,
.tw-dw-menu .select2-results__options::-webkit-scrollbar-thumb
{
    background: #c1c1c1;
    border-radius: 3px;
}

.modal-dialog .modal-content .modal-body::-webkit-scrollbar-thumb:hover,
.modal-dialog .modal-content .select2-results__options::-webkit-scrollbar-thumb:hover,
.tw-dw-menu .select2-results__options::-webkit-scrollbar-thumb:hover
{
    background: #a8a8a8;
}

/* === RESPONSIVE === */
@media (min-width: 576px) and (max-width: 991px) {
    .modal-dialog .modal-content .input-group .input-group-addon {
        min-width: 35px !important;
        padding: 8px 8px !important;
        font-size: 12px !important;
    }
    
    .modal-dialog .modal-content .form-control,
    .modal-dialog .modal-content select.form-control,
    .modal-dialog .modal-content .select2-selection--single,
    .tw-dw-menu .select2-selection--single
    {
        font-size: 12px !important;
    }
}

@media (max-width: 575px) {
    .modal-dialog .modal-content .modal-body {
        padding: 15px;
    }
    
    .modal-dialog .modal-content .panel-body {
        padding: 15px;
    }
    
    .modal-dialog .modal-content .form-control,
    .modal-dialog .modal-content select.form-control {
        height: 38px !important;
        font-size: 14px !important;
        padding: 10px 12px !important;
    }
    
    .modal-dialog .modal-content select.form-control {
        padding-right: 35px !important;
    }
    
    .modal-dialog .modal-content .select2-selection--single,
    .tw-dw-menu .select2-selection--single
    {
        height: 38px !important;
    }
    
    .modal-dialog .modal-content .select2-selection--single .select2-selection__rendered,
    .tw-dw-menu .select2-selection--single .select2-selection__rendered
    {
        line-height: 36px !important;
        font-size: 14px !important;
    }
    
    .modal-dialog .modal-content .input-group-addon {
        height: 38px !important;
        font-size: 12px !important;
    }
    
    .modal-dialog .modal-content .multi-input {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .modal-dialog .modal-content .multi-input .width-40,
    .modal-dialog .modal-content .multi-input .width-60 {
        flex: 1 !important;
        width: 100% !important;
    }
    
    .modal-dialog .modal-content .checkbox-wrapper {
        margin-bottom: 10px;
        padding: 10px;
    }
}

/* === COLUMNAS BOOTSTRAP === */
.modal-dialog .modal-content .col-xs-2,
.modal-dialog .modal-content .col-xs-3,
.modal-dialog .modal-content .col-xs-4,
.modal-dialog .modal-content .col-xs-6,
.modal-dialog .modal-content .col-xs-8,
.modal-dialog .modal-content .col-xs-10,
.modal-dialog .modal-content .col-xs-12,
.modal-dialog .modal-content .col-sm-2,
.modal-dialog .modal-content .col-sm-3,
.modal-dialog .modal-content .col-sm-4,
.modal-dialog .modal-content .col-sm-6,
.modal-dialog .modal-content .col-sm-8,
.modal-dialog .modal-content .col-sm-10,
.modal-dialog .modal-content .col-sm-12,
.modal-dialog .modal-content .col-md-2,
.modal-dialog .modal-content .col-md-3,
.modal-dialog .modal-content .col-md-4,
.modal-dialog .modal-content .col-md-6,
.modal-dialog .modal-content .col-md-8,
.modal-dialog .modal-content .col-md-10,
.modal-dialog .modal-content .col-md-12,
.modal-dialog .modal-content .col-lg-2,
.modal-dialog .modal-content .col-lg-3,
.modal-dialog .modal-content .col-lg-4,
.modal-dialog .modal-content .col-lg-6,
.modal-dialog .modal-content .col-lg-8,
.modal-dialog .modal-content .col-lg-10,
.modal-dialog .modal-content .col-lg-12 {
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .modal-dialog .modal-content [class*="col-"] {
        margin-bottom: 15px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ===== CORRECCIONES ESPECÍFICAS ===== */

/* === CORRECCIÓN 1: SELECT2 RESPONSIVE EN MÓVIL === */
@media (max-width: 575px) {
    /* Select2 debe crecer igual que los otros inputs en móvil */
    .modal-dialog .modal-content .select2-container .select2-selection--single,
    .tw-dw-menu .select2-container .select2-selection--single
    {
        height: 38px !important;
        font-size: 14px !important;
        padding: 0 !important; /* Reset padding para que funcione con line-height */
    }
    
    .modal-dialog .modal-content .select2-container .select2-selection--single .select2-selection__rendered,
    .tw-dw-menu .select2-container .select2-selection--single .select2-selection__rendered
    {
        line-height: 36px !important; /* 38px - 2px de border */
        padding-left: 12px !important;
        padding-right: 35px !important;
        font-size: 14px !important;
        font-weight: 400 !important;
    }
    
    .modal-dialog .modal-content .select2-container .select2-selection--single .select2-selection__arrow,
    .tw-dw-menu .select2-container .select2-selection--single .select2-selection__arrow
    {
        height: 36px !important;
        right: 10px !important;
        width: 24px !important;
    }
    
    .modal-dialog .modal-content .select2-container .select2-selection--single .select2-selection__arrow b,
    .tw-dw-menu .select2-container .select2-selection--single .select2-selection__arrow b
    {
        border-width: 6px 5px 0 5px !important;
        margin-left: -5px !important;
        margin-top: -3px !important;
    }
    
    /* Input-group-addon también debe crecer */
    .modal-dialog .modal-content .input-group-addon {
        height: 38px !important;
        font-size: 14px !important;
        padding: 10px 12px !important;
        min-width: 45px !important;
    }
    
    .modal-dialog .modal-content .input-group-addon i {
        font-size: 16px !important;
        width: 16px !important;
    }
    
    /* Select2 en input-group también debe crecer */
    .modal-dialog .modal-content .input-group .select2-container .select2-selection--single,
    .tw-dw-menu .input-group .select2-container .select2-selection--single
    {
        height: 38px !important;
    }
    
    .modal-dialog .modal-content .input-group .select2-container .select2-selection--single .select2-selection__rendered,
    .tw-dw-menu .input-group .select2-container .select2-selection--single .select2-selection__rendered
    {
        line-height: 36px !important;
        font-size: 14px !important;
    }
}

/* === CORRECCIÓN 2: MULTI-INPUT MEJORADO === */
.modal-dialog .modal-content .multi-input {
    display: flex !important;
    flex-wrap: nowrap !important; /* No wrap para mantener en línea */
    gap: 0 !important; /* Sin gap para que se peguen */
    width: 100% !important;
    align-items: stretch !important; /* Estirar para misma altura */
    margin-bottom: 0 !important;
}

.modal-dialog .modal-content .multi-input .form-control {
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
    height: 34px !important;
    border-radius: 0 !important; /* Sin redondeo para que se peguen */
    border-right: none !important; /* Sin borde derecho para el primero */
}

/* Primer elemento del multi-input */
.modal-dialog .modal-content .multi-input .form-control:first-child,
.modal-dialog .modal-content .multi-input .width-40 {
    border-radius: 6px 0 0 6px !important;
    border-right: none !important;
}

/* Último elemento del multi-input */
.modal-dialog .modal-content .multi-input .form-control:last-child,
.modal-dialog .modal-content .multi-input .width-60 {
    border-radius: 0 6px 6px 0 !important;
    border-left: 1px solid #ddd !important;
}

/* Clases width específicas */
.modal-dialog .modal-content .multi-input .width-40 {
    flex: 0 0 40% !important;
    width: 40% !important;
    max-width: 40% !important;
}

.modal-dialog .modal-content .multi-input .width-60 {
    flex: 0 0 60% !important;
    width: 60% !important;
    max-width: 60% !important;
}

/* Select en multi-input */
.modal-dialog .modal-content .multi-input select.form-control {
    background-position: right 8px center !important;
    padding-right: 25px !important;
}

/* Select2 en multi-input */
.modal-dialog .modal-content .multi-input .select2-container,
.tw-dw-menu .multi-input .select2-container
{
    flex: 0 0 60% !important;
    width: 60% !important;
    max-width: 60% !important;
}

.modal-dialog .modal-content .multi-input .select2-container .select2-selection--single,
.tw-dw-menu .multi-input .select2-container .select2-selection--single
{
    border-radius: 0 6px 6px 0 !important;
    border-left: 1px solid #ddd !important;
    height: 34px !important;
}

/* Estados focus para multi-input */
.modal-dialog .modal-content .multi-input .form-control:focus,
.modal-dialog .modal-content .multi-input .select2-container.select2-container--focus .select2-selection--single,
.tw-dw-menu .multi-input .select2-container.select2-container--focus .select2-selection--single
{
    border-color: #007bff !important;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1) !important;
    z-index: 2 !important;
    position: relative !important;
}

/* Hover para multi-input */
.modal-dialog .modal-content .multi-input .form-control:hover,
.modal-dialog .modal-content .multi-input .select2-container .select2-selection--single:hover,
.tw-dw-menu .select2-container .select2-selection--single:hover
{
    border-color: #007bff !important;
    z-index: 1 !important;
    position: relative !important;
}

/* CORRECCIÓN: Eliminar float que puede causar problemas */
.modal-dialog .modal-content .multi-input .pull-left {
    float: none !important;
}

/* === CORRECCIÓN 3: RESPONSIVE PARA MULTI-INPUT === */
@media (max-width: 767px) {
    .modal-dialog .modal-content .multi-input {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .modal-dialog .modal-content .multi-input .form-control,
    .modal-dialog .modal-content .multi-input .width-40,
    .modal-dialog .modal-content .multi-input .width-60 {
        flex: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 6px !important;
        border: 1px solid #ddd !important;
        height: 38px !important;
        font-size: 14px !important;
    }
    
    .modal-dialog .modal-content .multi-input select.form-control {
        padding-right: 35px !important;
    }
    
    .modal-dialog .modal-content .multi-input .select2-container,
    .tw-dw-menu .multi-input .select2-container
    {
        flex: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .modal-dialog .modal-content .multi-input .select2-container .select2-selection--single,
    .tw-dw-menu .multi-input .select2-container .select2-selection--single
    {
        border-radius: 6px !important;
        border: 1px solid #ddd !important;
        height: 38px !important;
    }
    
    .modal-dialog .modal-content .multi-input .select2-container .select2-selection--single .select2-selection__rendered,
    .tw-dw-menu .multi-input .select2-container .select2-selection--single .select2-selection__rendered
    {
        line-height: 36px !important;
        font-size: 14px !important;
    }
}

/* === CORRECCIÓN 4: ASEGURAR CONSISTENCIA EN TAMAÑOS === */
.modal-dialog .modal-content .form-control,
.modal-dialog .modal-content select.form-control,
.modal-dialog .modal-content .select2-container .select2-selection--single,
.modal-dialog .modal-content .input-group-addon {
    height: 34px !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
}

.tw-dw-menu .select2-container .select2-selection--single{
    height: 40px !important;
    padding-bottom: .75rem !important;
    padding-top: .55rem !important;
}

.tw-dw-menu .select2-container .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
}

/* En móvil todos deben ser 38px */
@media (max-width: 575px) {
    .modal-dialog .modal-content .form-control,
    .modal-dialog .modal-content select.form-control,
    .modal-dialog .modal-content .select2-container .select2-selection--single,
    .modal-dialog .modal-content .input-group-addon {
        height: 38px !important;
        font-size: 14px !important;
    }
}

/* === CORRECCIÓN 5: DROPDOWN SELECT2 RESPONSIVE === */
@media (max-width: 575px) {
    .modal-dialog .modal-content .select2-dropdown,
    .tw-dw-menu .select2-dropdown
    {
        font-size: 14px !important;
        min-width: 250px !important;
    }
    
    .modal-dialog .modal-content .select2-results__option,
    .tw-dw-menu .select2-results__option
    {
        padding: 10px 12px !important;
        font-size: 14px !important;
        min-height: 36px !important;
    }
    
    .modal-dialog .modal-content .select2-search--dropdown .select2-search__field,
    .tw-dw-menu .select2-search--dropdown .select2-search__field
    {
        height: 36px !important;
        font-size: 14px !important;
        padding: 8px 12px !important;
    }
}


/* Asegurar que el modal tenga posición relativa */
.modal-dialog .modal-content {
    position: relative !important;
}

/* Configuración específica para Eonasdan Datetimepicker */
.bootstrap-datetimepicker-widget.dropdown-menu {
    z-index: 9999 !important;
    position: absolute !important;
}

.modal-open .bootstrap-datetimepicker-widget {
    z-index: 9999 !important;
}

/* Additional Tailwind-like classes for the accounting system */

/* Alert Components */
.tw-alert {
  padding: 12px 16px;
  margin-bottom: 16px;
  border: 1px solid transparent;
  border-radius: 4px;
  position: relative;
}

.tw-alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.tw-alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.tw-alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}

.tw-alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

/* Card Components */
.tw-card {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  margin-bottom: 20px;
  overflow: hidden;
}

.tw-card-header {
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
  padding: 15px 20px;
  font-weight: 600;
}

.tw-card-body {
  padding: 0 13px 13px 13px;
  scrollbar-width: thin;
}

.tw-card-body::-webkit-scrollbar {
  width: 6px;
  background: #f3f3f3;
}

.tw-card-body::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.tw-card-success .tw-card-header {
  background-color: #dff0d8;
  border-bottom-color: #d6e9c6;
  color: #3c763d;
}

.tw-card-warning .tw-card-header {
  background-color: #fcf8e3;
  border-bottom-color: #faebcc;
  color: #8a6d3b;
}

.tw-card-info .tw-card-header {
  background-color: #d9edf7;
  border-bottom-color: #bce8f1;
  color: #31708f;
}

/* Button Enhancements */
.tw-btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.tw-btn-xs {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

.tw-btn-outline {
  background-color: transparent;
}

.tw-btn-info {
  color: #31708f;
  border-color: #31708f;
}

.tw-btn-info:hover {
  background-color: #31708f;
  color: white;
}

/* Utility Classes */

.tw-rounded {
  border-radius: 0.25rem;
}

/* Responsive helpers */
@media (max-width: 768px) {
  .tw-card-body {
    padding: 15px;
  }

  .tw-alert {
    padding: 10px 12px;
  }
}

/* Loading states */
.tw-loading {
  opacity: 0.6;
  pointer-events: none;
}

.tw-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
}

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

/* estilos para la vista de remision */
@keyframes counterPulse {
    0%, 100% {
        transform: translateX(30%) translateY(-30%) scale(1);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }
    50% {
        transform: translateX(30%) translateY(-30%) scale(1.15);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
    }
}

#selectedCount {
    transform: translateX(30%) translateY(-30%);
}

.tw-counter-pulse {
    animation: counterPulse 0.5s ease-in-out;
    will-change: transform;
}

.tw-fade-in {
    opacity: 0;
    transform: translateY(4px);
    transition: all 0.3s ease;
}

.tw-fade-in.show {
    opacity: 1;
    transform: translateY(0);
}

.hidden-banner {
    opacity: 0;
    transform: translateY(40px) scaleY(0.95);
    max-height: 0;
    transition: all 0.5s ease-in-out;
    overflow: hidden;
    margin-bottom: 0 !important;
    padding-top: 0 !important;    /* opcional: para colapso completo */
    padding-bottom: 0 !important; /* opcional: para colapso completo */
}

.show-banner {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    max-height: 500px;
    margin-bottom: 1rem;
}

/* Tamaño consistente para todos los badges usando clases nativas de AdminLTE */
.label-consistent {
    padding: 4px 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    min-width: 60px !important;
    text-align: center !important;
    display: inline-block !important;
}

/* Estilización del checkbox indeterminado */
/* Agrega una línea horizontal como indicador visual del estado indeterminado */
.icheckbox_square-blue.indeterminate::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 2px;
    background-color: #2184be;
    display: block;
}

.icheckbox_square-blue.indeterminate {
    background-position: 0 0 !important;
}

/* Temporizador circular */
.otp-timer {
    --p: 0; /* porcentaje 0-100 del tiempo restante */
    position: relative;
    display: inline-flex;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: conic-gradient(#f59e0b calc(var(--p) * 1%), #e5e7eb 0);
    flex-shrink: 0;
}

.otp-timer::after {
    content: "";
    position: absolute;
    inset: 3px;
    background: #fff;
    border-radius: 50%;
    z-index: 1;
}

.otp-timer .timer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    color: #92400e;
    white-space: nowrap;
}


/* Estilos para hacer el contenido flotante */
.dynamic-key-card {
    position: relative;
}

.floating-content {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #d1d5db;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
}

/* Asegurar que el contenedor padre tenga posición relativa */
/* .col-sm-4 {
    position: relative;
} */

/* Estilos específicos para el módulo de sector salud */
.health-sector-enabled {
  border-left: 4px solid #00a65a !important;
}

.health-sector-button.active {
  background-color: #00a65a !important;
  border-color: #008d4c !important;
}

#health_sector_modal .modal-header {
  background-color: #3c8dbc;
  color: white;
}

#health_sector_modal .modal-header .close {
  color: white;
  opacity: 0.8;
}

#health_sector_modal .modal-header .close:hover {
  opacity: 1;
}

#health_sector_modal h5 {
  color: #3c8dbc;
  margin-top: 20px;
  margin-bottom: 10px;
}

#health_sector_modal hr {
  border-top: 1px solid #3c8dbc;
  margin-top: 5px;
  margin-bottom: 15px;
}

.text-red {
  color: #dd4b39 !important;
}

#person_data_section {
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 5px;
  margin-top: 15px;
}

.form-group.has-error .form-control {
  border-color: #dd4b39;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
}

.help-block {
  color: #dd4b39;
  font-size: 12px;
  margin-top: 5px;
}

/* Animaciones suaves */
#person_data_section {
  transition: all 0.3s ease-in-out;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #health_sector_modal .modal-dialog {
    margin: 10px;
  }

  #health_sector_modal .col-md-3,
  #health_sector_modal .col-md-4,
  #health_sector_modal .col-md-6 {
    margin-bottom: 10px;
  }
}

/* ============================================
   ESTILOS PARA MÓDULO DE RESTAURANTE
   ============================================ */

:root {
  /* Cambio de colores de restaurante a paleta profesional corporativa */
  /* Colores base profesionales */
  --restaurant-primary: #2563EB;        /* Azul corporativo principal */
  --restaurant-primary-light: #3B82F6;  /* Azul corporativo claro / hover */
  --restaurant-accent: #0891B2;         /* Cyan profesional / acento */
  --restaurant-accent-light: rgb(38, 180, 216);         /* Cyan / hover */
  --restaurant-dark: #1F2937;           /* Gris oscuro profesional / fondo principal */
  --restaurant-gray: #6B7280;           /* Gris medio / iconos, bordes */
  --restaurant-light: #F3F4F6;          /* Gris claro / fondo secundario */
  --restaurant-text: #111827;           /* Gris muy oscuro / texto principal */
  /* Agregando verde esmeralda profesional para botones de acción */
  --restaurant-success: #10B981;        /* Verde esmeralda profesional / acciones positivas */
  --restaurant-success-light: #34D399;  /* Verde esmeralda claro / hover */
  --restaurant-success-dark: #059669;
  --restaurant-success-darker: #2e8b57;
  /* Agregando naranja profesional para estado "En Proceso" */
  --restaurant-warning: #F97316;        /* Naranja profesional / en proceso */
  --restaurant-warning-light: #FB923C;  /* Naranja claro / hover */
  --restaurant-warning-dark: #EA580C;
  --restaurant-wood-light: #6b4423;
  --restaurant-wood-dark: #4a2f1a;
  --restaurant-wood-darker: #3a2515;
  --restaurant-wood-border: #8a5a2f;
  --restaurant-wood-paper-text: #f3e9d2;
  --restaurant-wood-paper-light: #f9f3e4;
  --restaurant-wood-paper-light-2: #fffdf7;
  --restaurant-wood-icon-bg: #3a2c1c;
  --restaurant-red-darker: #b03222;
  --restaurant-red-dark: #c0392b;
  --restaurant-red-3: #b91c1c;
}

/* ============================================
   COLORES DE FONDO
   ============================================ */
.restaurant-bg-primary {
  background-color: var(--restaurant-primary) !important;
}

.restaurant-bg-primary-light {
  background-color: var(--restaurant-primary-light) !important;
}

.restaurant-bg-accent {
  background-color: var(--restaurant-accent) !important;
}

.restaurant-bg-dark {
  background-color: var(--restaurant-dark) !important;
}

.restaurant-bg-light {
  background-color: var(--restaurant-light) !important;
}

/* Agregando clases para el nuevo color verde */
.restaurant-bg-success {
  background-color: var(--restaurant-success) !important;
}

.restaurant-bg-success-light {
  background-color: var(--restaurant-success-light) !important;
}

/* Agregando clases para el color naranja "En Proceso" */
.restaurant-bg-warning {
  background-color: var(--restaurant-warning) !important;
}

.restaurant-bg-warning-light {
  background-color: var(--restaurant-warning-light) !important;
}

.restaurant-bg-head {
  background-color: var(--restaurant-wood-light) !important;
}

.restaurant-bg-paper {
  background-color: var(--restaurant-wood-paper-text) !important;
}

.restaurant-bg-paper-light {
  background-color: var(--restaurant-wood-paper-light) !important;
}

.restaurant-bg-paper-light-2 {
  background-color: var(--restaurant-wood-paper-light-2) !important;
}

.restaurant-bg-wood-dark {
  background-color: var(--restaurant-wood-dark) !important;
}

.restaurant-bg-wood-light {
  background-color: var(--restaurant-wood-light) !important;
}

.restaurant-bg-green-dark {
  background: var(--restaurant-success-darker) !important;
}

/* ============================================
   COLORES DE TEXTO
   ============================================ */
.restaurant-text-primary {
  color: var(--restaurant-primary) !important;
}

.restaurant-text-accent {
  color: var(--restaurant-accent) !important;
}

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

.restaurant-text-gray {
  color: var(--restaurant-gray) !important;
}

.restaurant-text-light {
  color: var(--restaurant-light) !important;
}

.restaurant-text-main {
  color: var(--restaurant-text) !important;
}

/* Agregando texto verde */
.restaurant-text-success {
  color: var(--restaurant-success) !important;
}

/* Agregando texto naranja */
.restaurant-text-warning {
  color: var(--restaurant-warning) !important;
}

.restaurant-text-header-icon {
  color: var(--restaurant-wood-icon-bg) !important;
}

.restaurant-text-header-icon-paper {
  color: var(--restaurant-wood-paper-text) !important;
}

/* ============================================
   COLORES DE BORDE
   ============================================ */
.restaurant-border-primary {
  border-color: var(--restaurant-primary) !important;
}

.restaurant-border-primary-light {
  border-color: var(--restaurant-primary-light) !important;
}

.restaurant-border-accent {
  border-color: var(--restaurant-accent) !important;
}

.restaurant-border-gray {
  border-color: var(--restaurant-gray) !important;
}

.restaurant-border-dark {
  border-color: var(--restaurant-dark) !important;
}

.restaurant-border-main {
  border-color: var(--restaurant-text) !important;
}

/* Agregando borde verde */
.restaurant-border-success {
  border-color: var(--restaurant-success) !important;
}

.restaurant-border-success-light {
  border-color: var(--restaurant-success-light) !important;
}

/* Agregando borde naranja */
.restaurant-border-warning {
  border-color: var(--restaurant-warning) !important;
}

.restaurant-border-warning-light {
  border-color: var(--restaurant-warning-light) !important;
}

.restaurant-border-wood {
  border-color: var(--restaurant-wood-border) !important;
}

/* ============================================
   SOBRESCRIBIR HOVER DE tw-dw-btn
   ============================================ */
/* Botones con colores de restaurante */
.tw-dw-btn.restaurant-bg-primary {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--restaurant-primary) 90%, white),
    var(--restaurant-primary)
  ) !important;
  color: var(--restaurant-light);
  border-color: var(--restaurant-primary) !important;
}

.tw-dw-btn.restaurant-bg-primary:hover,
.tw-dw-btn.restaurant-bg-primary:focus {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--restaurant-primary-light) 80%, white),
    var(--restaurant-primary-light)
  ) !important;
  color: var(--restaurant-light) !important;
  border-color: var(--restaurant-primary-light) !important;
}

.tw-dw-btn.restaurant-bg-accent:hover,
.tw-dw-btn.restaurant-bg-accent:focus {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--restaurant-accent) 80%, white),
    var(--restaurant-accent)
  ) !important;
  background-color: var(--restaurant-accent) !important;
  color: var(--restaurant-light) !important;
  border-color: var(--restaurant-accent) !important;
}

.tw-dw-btn.restaurant-bg-dark {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--restaurant-dark) 90%, white),
    var(--restaurant-dark)
  ) !important;
  color: white !important;
  border-color: var(--restaurant-dark) !important;
}

.tw-dw-btn.restaurant-bg-dark:hover,
.tw-dw-btn.restaurant-bg-dark:focus {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--restaurant-dark) 80%, white),
    var(--restaurant-dark)
  ) !important;
  color: white !important;
  border-color: var(--restaurant-dark) !important;
}

/* Asegurar que el texto se mantenga con los colores correctos */
.tw-dw-btn.restaurant-text-main:hover,
.tw-dw-btn.restaurant-text-main:focus {
  color: var(--restaurant-text) !important;
}

/* Agregando estilos de botón verde para acciones positivas */
.tw-dw-btn.restaurant-bg-success {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--restaurant-success) 90%, white),
    var(--restaurant-success)
  ) !important;
  color: white !important;
  border-color: var(--restaurant-success) !important;
}

.tw-dw-btn.restaurant-bg-success:hover,
.tw-dw-btn.restaurant-bg-success:focus {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--restaurant-success-light) 80%, white),
    var(--restaurant-success-light)
  ) !important;
  color: white !important;
  border-color: var(--restaurant-success-light) !important;
}

/* Agregando estilos de botón naranja para estado "En Proceso" */
.tw-dw-btn.restaurant-bg-warning {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--restaurant-warning) 90%, white),
    var(--restaurant-warning)
  ) !important;
  color: white !important;
  border-color: var(--restaurant-warning) !important;
}

.tw-dw-btn.restaurant-bg-warning:hover,
.tw-dw-btn.restaurant-bg-warning:focus {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--restaurant-warning-light) 80%, white),
    var(--restaurant-warning-light)
  ) !important;
  color: white !important;
  border-color: var(--restaurant-warning-light) !important;
}

/* ============================================
   TARJETAS DE ÓRDENES
   ============================================ */
.restaurant-card {
  background-color: white;
  border: 1px solid var(--restaurant-gray);
  transition: all 0.3s ease;
}

.restaurant-card:hover {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.restaurant-card-footer {
  background-color: var(--restaurant-light);
  border-color: var(--restaurant-gray);
}

/* ============================================
   TABLA DE INFORMACIÓN
   ============================================ */
.restaurant-table-row {
  border-bottom: 1px solid var(--restaurant-light);
}

/* ============================================
   ICONOS
   ============================================ */
.restaurant-icon-primary {
  color: var(--restaurant-primary);
}

/* ============================================
   HOVER STATES (para usar con clases de Tailwind)
   ============================================ */
.hover\:restaurant-bg-primary-light:hover {
  background-color: var(--restaurant-primary-light) !important;
}

/* Clases hover adicionales para los botones */
.hover\:restaurant-bg-primary:hover {
  background-color: var(--restaurant-primary) !important;
}

.hover\:restaurant-bg-accent:hover {
  background-color: var(--restaurant-accent) !important;
}

/* Agregando hover verde */
.hover\:restaurant-bg-success:hover {
  background-color: var(--restaurant-success) !important;
}

.hover\:restaurant-bg-success-light:hover {
  background-color: var(--restaurant-success-light) !important;
}

.hover\:restaurant-bg-success-dark:hover {
  background-color: var(--restaurant-success-dark) !important;
}

/* Agregando hover naranja */
.hover\:restaurant-bg-warning:hover {
  background-color: var(--restaurant-warning) !important;
}

.hover\:restaurant-bg-warning-light:hover {
  background-color: var(--restaurant-warning-light) !important;
}

.hover\:restaurant-bg-warning-dark:hover {
  background-color: var(--restaurant-warning-dark) !important;
}

.hover\:restaurant-bg-paper:hover {
  background-color: var(--restaurant-wood-paper-text) !important;
}

.hover\:restaurant-bg-wood-dark:hover {
  background-color: var(--restaurant-wood-dark) !important;
  color: white !important;
}

.hover\:restaurant-bg-wood-darker:hover {
  background-color: var(--restaurant-wood-darker) !important;
  color: white !important;
}

.hover\:restaurant-bg-wood-light:hover {
  background-color: var(--restaurant-wood-light) !important;
}

.pos-restaurant .print-invoice {
    color: white !important;
    text-decoration: none !important;
}

.restaurant-checkbox {
  accent-color: var(--restaurant-primary) !important;
}

/* ============================================
   FILTROS DE COCINA
   ============================================ */
/* Botones de filtro - Estado activo */
.tab-filter.active[data-color="blue"],
.tab-filter.active:not([data-color]) {
  background-color: var(--restaurant-primary) !important;
  border-color: var(--restaurant-primary) !important;
  color: white !important;
}

.tab-filter.active[data-color="orange"] {
  /* Cambiando de cyan a naranja profesional para "En Proceso" */
  background-color: var(--restaurant-warning) !important;
  border-color: var(--restaurant-warning) !important;
  color: white !important;
}

.tab-filter.active[data-color="green"] {
  background-color: var(--restaurant-dark) !important;
  border-color: var(--restaurant-dark) !important;
  color: white !important;
}

/* Botones de filtro - Estado inactivo */
.tab-filter:not(.active) {
  background-color: var(--restaurant-dark) !important;
  border-color: var(--restaurant-border-light) !important;
  color: var(--restaurant-light) !important;
}

.tab-filter:not(.active):hover {
  background-color: var(--restaurant-primary-light) !important;
  border-color: var(--restaurant-primary-light) !important;
  color: white !important;
}

.tab-filter[data-filter="processing"]:hover {
  background-color:var(--restaurant-warning-light) !important;
  border-color: var(--restaurant-warning-light) !important;
  color: white !important;
}


/* === FIX PARA NAVBAR-FIXED-TOP DENTRO DE MODALES === */
/* En el modal, el header debe quedar fijo dentro del scroll del modal */
.modal-body .navbar-fixed-top {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1052 !important; /* above modal body content */
  /* conservar el fondo del header (tw-bg-green-800) sin sobreescribirlo */
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; /* sutil separación */
}

/* Ocultar botón de volver cuando está dentro del modal */
.modal-body .no-return {
  display: none !important;
}

/* Ocultar botón de pantalla completa en el modal */
.modal-body .no-fullscreen {
  display: none !important;
}

/* === MODAL FULLSCREEN COCINA === */
.modal-dialog.modal-fullscreen .modal-content {
  height: 100vh;
  display: flex;
  flex-direction: column;
  border-radius: 0 !important;
  padding: 0 !important;
}

.modal-dialog.modal-fullscreen .modal-body {
  flex: 1 1 auto;
  padding: 0 !important;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Quitar padding a modal-body en cualquier modal de cocina */
#kitchen-modal-body.modal-body {
  padding: 0 !important;
}

.restaurant-floating-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.25;
    z-index: 0;
}

.restaurant-float-item {
    position: absolute;
    bottom: -50px;
    font-size: 28px;
    animation: restaurantFloatUp linear infinite;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

@keyframes restaurantFloatUp {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% {
        transform: translateY(-120vh) rotate(360deg);
        opacity: 0;
    }
}

/* === HOVER VERDE PARA BOTÓN REFRESCAR === */
#refresh_orders:hover {
  background-color: var(--restaurant-accent-light) !important;
  border-color: var(--restaurant-accent-light) !important;
  color: white !important;
}

.restaurant-textarea textarea {
    min-height: 60px;
    max-height: 200px;
    overflow-y: auto;
    resize: none;
    transition: height 0.15s ease-out;
    box-sizing: border-box;
}

/* Grid de cards fluidas para cocina */
.tw-grid-cards-fluid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 280px));
    gap: 1.5rem;
    justify-content: center;
}

.tw-grid-mesas-fluid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: start;
    align-content: start;
}

@media (min-width: 640px) {
    .tw-grid-mesas-fluid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        justify-content: start;
    }
}

/* Indicador visual de urgencia para pedidos */
.order-timer-urgent {
  animation: pulseUrgent 1s infinite;
}
@keyframes pulseUrgent {
  0% { box-shadow: 0 0 0 0 rgba(255,0,0,0.3); }
  70% { box-shadow: 0 0 0 8px rgba(255,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,0,0,0); }
}

.note-text {
    white-space: normal !important;
    word-break: break-word !important;
    display: block !important;
    text-align: left !important;
}

.tw-max-h-orders-list {
    max-height: calc(100vh - 160px) !important;
}

.table_mesas {
    scrollbar-width: thin !important;
    scrollbar-color: #8a5a2f transparent !important;
    -ms-overflow-style: auto;
    -webkit-overflow-scrolling: touch;
}
.table_mesas::-webkit-scrollbar {
    width: 4px !important;
    height: 4px !important;
}
.table_mesas::-webkit-scrollbar-track {
    background: transparent !important;
}
.table_mesas::-webkit-scrollbar-thumb {
    background: #8a5a2f !important;
    border-radius: 4px !important;
}

.table-grid-wrapper {
    scrollbar-width: thin !important;
    scrollbar-color: #8a5a2f transparent !important;
    -ms-overflow-style: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0 !important;
}
.table-grid-wrapper::-webkit-scrollbar {
    width: 4px !important;
    height: 4px !important;
}
.table-grid-wrapper::-webkit-scrollbar-track {
    background: transparent !important;
}
.table-grid-wrapper::-webkit-scrollbar-thumb {
    background: #8a5a2f !important;
    border-radius: 4px !important;
}

.contenido_without_table_ {
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.orders-list-scroll {
    scrollbar-width: thin !important;
    scrollbar-color: #8a5a2f transparent !important;
    -ms-overflow-style: auto;
}
.orders-list-scroll::-webkit-scrollbar {
    width: 4px !important;
    height: 4px !important;
}
.orders-list-scroll::-webkit-scrollbar-track {
    background: transparent !important;
}
.orders-list-scroll::-webkit-scrollbar-thumb {
    background: #8a5a2f !important;
    border-radius: 4px !important;
}

@media (min-width: 1024px) {
    .pos-restaurant-main-row {
        height: calc(100vh - 85px);
    }
}

@media (max-width: 1023px) {
    .pos-restaurant .contenido_without_table_ {
        max-height: 60dvh;
    }
}

.pos-restaurant {
    min-height: calc(100vh - 54px - 20px);
}

section.pos-restaurant #posShippingModal {
    z-index: 5000 !important;
    position: fixed !important;
}
section.pos-restaurant .modal-backdrop {
    z-index: 4999 !important;
}

/* === CLASE RESPONSIVE PERSONALIZADA PARA LOS BOTONES DE FACTURAS SIN MESA ASIGNADA === */
@media (max-width: 1669px) {
  .hide-on-small {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .hide-on-small {
    display: block !important;
  }
}

@media (max-width: 555px) {
  .hide-on-small {
    display: none !important;
  }
}

.mesa-item {
    position: relative !important;
    width: 100% !important;
    height: 200px !important;
    min-height: 200px !important;
    perspective: 600px !important;
    perspective-origin: center center !important;
    cursor: pointer !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.mesa-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/img/restaurant/mesa-redonda--removebg-preview.png');
    background-size: 85%;
    background-position: center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.15));
    /* transform: rotateX(20deg); */
    transform-style: preserve-3d;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.mesa-item:hover {
    transform: scale(1.05) !important;
}

.mesa-item:hover::before {
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.2));
}

.mesa-item:active {
    transform: scale(1.02) !important;
}

.mesa-item > div:not(.tw-absolute) {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    gap: 6px !important;
    opacity: 0 !important;
    transition: opacity 0.7s ease !important;
}

.mesa-item > div:not(.tw-absolute) > *:not(:has(.text-invoice)) {
    opacity: 0 !important;
    transition: opacity 1s ease !important;
}

.mesa-item > div:not(.tw-absolute) > *:has(.text-invoice) {
    opacity: 1 !important;
}

.mesa-item > div:not(.tw-absolute) {
    opacity: 1 !important;
}

.mesa-item > div:not(.tw-absolute) .tw-rounded-full.tw-p-4 {
    padding: 8px !important;
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 0 !important;
}

.mesa-item > div:not(.tw-absolute) .tw-rounded-full.tw-p-4 i {
    font-size: 16px !important;
}

.mesa-item > div:not(.tw-absolute) .tw-text-3xl {
    font-size: 20px !important;
    margin-bottom: 0 !important;
}

.mesa-item > div:not(.tw-absolute) .tw-px-3 {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.mesa-item > div:not(.tw-absolute) .tw-px-4 {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.mesa-item > div:not(.tw-absolute) .tw-text-xs {
    font-size: 10px !important;
}

.mesa-item > div:not(.tw-absolute) .tw-text-sm {
    font-size: 11px !important;
}

.mesa-item .tw-absolute.tw-top-2 {
    top: 0.5rem !important;
    left: 0.5rem !important;
    right: auto !important;
    z-index: 10 !important;
}

/* Badges modernos para estados de mesa */
.mesa-badge-ocupada,
.mesa-badge-libre {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    border-radius: 9999px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    transition: all 0.2s ease !important;
}

.mesa-badge-ocupada {
    background-color: #FEE2E2 !important;
    color: #B91C1C !important;
}

.mesa-badge-libre {
    background-color: #DCFCE7 !important;
    color: #15803D !important;
}

.mesa-badge-icon {
    font-size: 8px !important;
    line-height: 1 !important;
}

.mesa-badge-text {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

/* Transición suave para waiter_name */
.mesa-item .waiter_name {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 1.5s ease, visibility 1.5s ease !important;
}

/* Ocultar waiter_name en hover con la misma velocidad */
.mesa-item:hover .waiter_name {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.5s ease, visibility 0.5s ease !important;
}

.mesa-item:hover > div:not(.tw-absolute) > * {
    opacity: 1 !important;
}

.mesa-item:hover::before {
    background-image: url('/img/restaurant/mesa-redonda-vista-por-arriba-removebg-preview.png');
    background-size: contain;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.15));
    transform: rotateX(0deg) translateY(-4px);
}

/* ============================================
   FONDO CÁLIDO PARA ÁREA DE MESAS
   ============================================ */
.tw-bg-warm-light {
    background: linear-gradient(135deg, #F8F6F3 0%, #FAF8F5 100%) !important;
}

/* Override del fondo gris para área de restaurante */
.pos-restaurant .tw-bg-gray-50 {
    background: linear-gradient(135deg, #F8F6F3 0%, #FAF8F5 100%) !important;
}

/* Estilos para banners de headers - Sobrescribir tw-bg-gray-200 */
.pos-restaurant .tw-bg-gray-200 {
    background-color: #4B5563 !important; /* gray-600 - Tono gris fuerte */
}

.pos-restaurant .tw-bg-gray-200 h2 {
    color: white !important;
}

@media (max-width: 767.98px) {
  .pos-header {
    --pos-mobile-float-top: 72px;
    --pos-mobile-float-side-gap: 12px;
  }

  /* .pos-header #pos_header_more_options:not(.tw-hidden) {
    display: flex !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    margin-top: 0.75rem;
    max-height: 176px;
    overflow-y: auto;
  }

  .pos-header #pos_header_more_options:not(.tw-hidden) > * {
    margin: 0 !important;
  }

  .pos-header #pos_header_more_options:not(.tw-hidden) .md\:tw-hidden {
    display: none !important;
  } */

  .pos-header #dynamicKeyContainer,
  .pos-header .notifications-menu.open > .dropdown-menu {
    position: fixed !important;
    top: var(--pos-mobile-float-top) !important;
    left: var(--pos-mobile-float-side-gap) !important;
    right: var(--pos-mobile-float-side-gap) !important;
    transform: none !important;
    width: auto !important;
    max-width: calc(100vw - (var(--pos-mobile-float-side-gap) * 2)) !important;
    max-height: calc(100dvh - 100px) !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
    margin-top: 0 !important;
  }
}

.pos-restaurant .tw-bg-gray-200 .fa-table,
.pos-restaurant .tw-bg-gray-200 .fa-compass {
    color: white !important;
}

.pos-restaurant .tw-bg-gray-200 .tw-bg-white {
    background-color: #6B7280 !important; /* gray-500 para el contenedor del icono */
}

.pos-restaurant .tw-border-gray-200 {
    border-color: #6B7280 !important;
}

.mesa-position {
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-2deg);
}

.mesa-shadow {
    box-shadow: 
        0 6px 16px -4px rgba(0, 0, 0, 0.2),
        0 2px 4px -1px rgba(0, 0, 0, 0.1);
}

.mesa-rotate-left {
    transform: rotate(-3deg);
    transform-origin: center;
}

/* Fix para transparencia del botón Ver Órdenes en POS/RESTAURANTE */
.btn_view-div > div {
  background: linear-gradient(to bottom right, rgba(255, 237, 213, 0.5), rgba(254, 215, 170, 0.6)) !important;
}

.btn_view-div > div:hover {
  background: linear-gradient(to bottom right, rgba(254, 215, 170, 0.6), rgba(253, 186, 116, 0.7)) !important;
}

/* Asegurar que todos los botones del drawer tengan la misma transparencia */
.btn_add-div > div {
  background: linear-gradient(to bottom right, rgba(239, 246, 255, 0.5), rgba(219, 234, 254, 0.6)) !important;
}

.btn_add-div > div:hover {
  background: linear-gradient(to bottom right, rgba(219, 234, 254, 0.6), rgba(191, 219, 254, 0.7)) !important;
}

.btn_pay-div > div {
  background: linear-gradient(to bottom right, rgba(240, 253, 244, 0.5), rgba(220, 252, 231, 0.6)) !important;
}

.btn_pay-div > div:hover {
  background: linear-gradient(to bottom right, rgba(220, 252, 231, 0.6), rgba(187, 247, 208, 0.7)) !important;
}

.suspended-sales-modal-body {
  max-height: 75vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.suspended-sales-scroll-container {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.suspended-sales-modal .modal-content {
    max-height: calc(100vh - 30px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.suspended-sales-modal .modal-header,
.suspended-sales-modal .modal-footer {
    flex-shrink: 0;
}

.suspended-sales-modal .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 10px;
}

.accordion-toggle[aria-expanded="true"] .accordion-icon {
    transform: rotate(180deg);
}
.timeline-accordion-item .panel:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* === Clases tw- usadas en resources/views/notification/wa_direct.blade.php === */
.tw-border-0 {
    border-width: 0px;
}

.tw-border-b-0 {
    border-bottom-width: 0px;
}

.tw-border-t {
    border-top-width: 1px;
}

.tw-shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
}

.tw-py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.tw-px-1\.5 {
    padding-left: .375rem;
    padding-right: .375rem;
}

.tw-py-0\.5 {
    padding-top: .125rem;
    padding-bottom: .125rem;
}

.tw-mx-1 {
    margin-left: .25rem;
    margin-right: .25rem;
}

.tw-ml-1 {
    margin-left: .25rem;
}

.tw-mt-1\.5 {
    margin-top: .375rem;
}

.tw-gap-1\.5 {
    gap: .375rem;
}

.tw-leading-tight {
    line-height: 1.25;
}

.tw-leading-none {
    line-height: 1;
}

.tw-resize-none {
    resize: none;
}

.tw-transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

.tw-bg-gray-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(18 25 38/var(--tw-bg-opacity));
}

.modal-dialog .modal-content .modal-header.tw-bg-gray-900 {
    background-color: rgb(18 25 38/var(--tw-bg-opacity, 1));
    border-bottom: none;
}

.tw-border-gray-100 {
    --tw-border-opacity: 1;
    border-color: rgb(238 242 246/var(--tw-border-opacity));
}

.tw-bg-emerald-50 {
    background-color: #ecfdf5;
}

.tw-border-emerald-200 {
    border-color: #a7f3d0;
}

.tw-text-emerald-700 {
    color: #047857;
}

.tw-text-blue-700 {
    color: #1d4ed8;
}

.tw-dw-btn-ghost {
    background-color: rgba(0, 0, 0, .04);
    border-color: rgba(0, 0, 0, .1);
    box-shadow: none;
}

.tw-dw-btn-ghost:hover {
    background-color: rgba(0, 0, 0, .08);
    border-color: rgba(0, 0, 0, .15);
}

.modal-dialog .modal-content .modal-footer.tw-bg-gray-50 {
    background-color: rgb(248 250 252/var(--tw-bg-opacity, 1));
}

.modal-dialog .modal-content .modal-footer.tw-border-t.tw-border-gray-100 {
    border-top: 1px solid rgb(238 242 246/var(--tw-border-opacity, 1));
}

.tw-space-y-2>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.5rem*(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.5rem*var(--tw-space-y-reverse));
}

.tw-space-y-1\.5>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.375rem*(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.375rem*var(--tw-space-y-reverse));
}

/* Desplegables de variables/tags en wa_direct.blade.php */
.wa-tag-group-chevron {
    transition: transform .15s ease;
    flex-shrink: 0;
}

.wa-tag-group-chevron.is-open {
    transform: rotate(180deg);
}

/* El selector legado ".modal-header .modal-title"/".modal-header .close" (custom.css:23-36)
   tiene mayor especificidad que las utilidades tw- puestas en esos mismos elementos
   y las pisaba (titulo forzado a 18px, "x" forzada a color #333/opacity .6 sobre fondo oscuro). */
.modal-dialog .modal-content .modal-header.tw-bg-gray-900 .modal-title {
    font-size: .875rem;
    line-height: 1.25;
}

.modal-dialog .modal-content .modal-header.tw-bg-gray-900 .close {
    position: static;
    float: none;
    color: rgb(154 164 178/1);
    opacity: 1;
}

/* tw-space-y-4 (app.css:6124) está mal definida: pone margin-top en el propio contenedor
   en vez de entre sus hijos directos, por eso no separaba los bloques del modal-body. */
.tw-space-y-4 {
    margin-top: 0;
}

.tw-space-y-4>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem*(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem*var(--tw-space-y-reverse));
}

.modal-dialog .modal-content .modal-header.tw-bg-gray-900 .close:hover {
    color: #fff;
    opacity: 1;
}

/* === Utilidades tw-max-w-* faltantes (escala Tailwind) === */
.tw-max-w-0 {
    max-width: 0px;
}

.tw-max-w-px {
    max-width: 1px;
}

.tw-max-w-0\.5 {
    max-width: .125rem;
}

.tw-max-w-1 {
    max-width: .25rem;
}

.tw-max-w-1\.5 {
    max-width: .375rem;
}

.tw-max-w-2 {
    max-width: .5rem;
}

.tw-max-w-2\.5 {
    max-width: .625rem;
}

.tw-max-w-3 {
    max-width: .75rem;
}

.tw-max-w-3\.5 {
    max-width: .875rem;
}

.tw-max-w-4 {
    max-width: 1rem;
}

.tw-max-w-5 {
    max-width: 1.25rem;
}

.tw-max-w-6 {
    max-width: 1.5rem;
}

.tw-max-w-7 {
    max-width: 1.75rem;
}

.tw-max-w-8 {
    max-width: 2rem;
}

.tw-max-w-9 {
    max-width: 2.25rem;
}

.tw-max-w-10 {
    max-width: 2.5rem;
}

.tw-max-w-11 {
    max-width: 2.75rem;
}

.tw-max-w-12 {
    max-width: 3rem;
}

.tw-max-w-14 {
    max-width: 3.5rem;
}

.tw-max-w-16 {
    max-width: 4rem;
}

.tw-max-w-20 {
    max-width: 5rem;
}

.tw-max-w-24 {
    max-width: 6rem;
}

.tw-max-w-28 {
    max-width: 7rem;
}

.tw-max-w-32 {
    max-width: 8rem;
}

.tw-max-w-36 {
    max-width: 9rem;
}

.tw-max-w-40 {
    max-width: 10rem;
}

.tw-max-w-44 {
    max-width: 11rem;
}

.tw-max-w-48 {
    max-width: 12rem;
}

.tw-max-w-52 {
    max-width: 13rem;
}

.tw-max-w-56 {
    max-width: 14rem;
}

.tw-max-w-60 {
    max-width: 15rem;
}

.tw-max-w-64 {
    max-width: 16rem;
}

.tw-max-w-72 {
    max-width: 18rem;
}

.tw-max-w-80 {
    max-width: 20rem;
}

.tw-max-w-96 {
    max-width: 24rem;
}

.tw-max-w-none {
    max-width: none;
}

.tw-max-w-xs {
    max-width: 20rem;
}

.tw-max-w-sm {
    max-width: 24rem;
}

.tw-max-w-md {
    max-width: 28rem;
}

.tw-max-w-lg {
    max-width: 32rem;
}

.tw-max-w-xl {
    max-width: 36rem;
}

.tw-max-w-2xl {
    max-width: 42rem;
}

.tw-max-w-3xl {
    max-width: 48rem;
}

.tw-max-w-4xl {
    max-width: 56rem;
}

.tw-max-w-5xl {
    max-width: 64rem;
}

.tw-max-w-6xl {
    max-width: 72rem;
}

.tw-max-w-7xl {
    max-width: 80rem;
}

.tw-max-w-min {
    max-width: min-content;
}

.tw-max-w-max {
    max-width: max-content;
}

.tw-max-w-fit {
    max-width: fit-content;
}

.tw-max-w-prose {
    max-width: 65ch;
}

.tw-max-w-screen-sm {
    max-width: 640px;
}

.tw-max-w-screen-md {
    max-width: 768px;
}

.tw-max-w-screen-lg {
    max-width: 1024px;
}

.tw-max-w-screen-xl {
    max-width: 1280px;
}

.tw-max-w-screen-2xl {
    max-width: 1536px;
}

li.tw-more-action-item,
li.tw-collapsed,
div.tw-more-action-item,
div.tw-collapsed 
{
    overflow: hidden !important;
    max-height: 0;
    opacity: 0;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none;
    visibility: hidden;
    transition: max-height 0.5s ease, opacity 0.45s ease, visibility 0s 0.5s, padding 0.4s ease;
}

/* Cuando se expanden */
li.tw-more-action-item.tw-show,
div.tw-more-action-item.tw-show
{
    max-height: 50px;
    opacity: 1;
    padding: 0 !important;
    pointer-events: auto;
    visibility: visible;
    transition: max-height 0.5s ease, opacity 0.45s ease, visibility 0s 0s, padding 0.4s ease;
}

.tw-from-red-50 {
    --tw-gradient-from: #fef2f2 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(254 242 242 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.tw-from-red-100 {
    --tw-gradient-from: #fee2e2 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(254 226 226 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.tw-from-red-500 {
    --tw-gradient-from: #ef4444 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:tw-from-red-50:hover {
    --tw-gradient-from: #fff1f2 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 241 242 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:tw-from-red-100:hover {
    --tw-gradient-from: #fecaca var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(254 202 202 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:tw-from-red-500:hover {
    --tw-gradient-from: #db3636 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(220 38 38 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.tw-to-red-100 {
    --tw-gradient-to: #fee2e2 var(--tw-gradient-to-position);
}

.tw-to-red-200 {
    --tw-gradient-to: #fecaca var(--tw-gradient-to-position);
}

.tw-to-red-700 {
    --tw-gradient-to: #b91c1c var(--tw-gradient-to-position);
}

.hover\:tw-to-red-100:hover {
    --tw-gradient-to: #fee2e2 var(--tw-gradient-to-position);
}

.hover\:tw-to-red-200:hover {
    --tw-gradient-to: #fecaca var(--tw-gradient-to-position);
}

.hover\:tw-to-red-700:hover {
    --tw-gradient-to: #b91c1c var(--tw-gradient-to-position);
}

/* ============================================================
   ESTILO "PLACA VINTAGE" PARA LAS TARJETAS DE MESAS
   ============================================================ */

.mesa-vintage {
    --wood-dark: #4a2f1a;
    --wood: #6b4423;
    --wood-light: #8a5a2f;

    --paper: #f3e9d2;
    --paper-edge: #e4d4b0;
    --paper-line: #c9b48a;

    --ink: #3a2c1c;
    --ink-soft: #7a6647;

    position: relative;
    display: block;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 14px;
    background:
        linear-gradient(160deg, var(--wood-light), var(--wood) 40%, var(--wood-dark));
    box-shadow:
        0 10px 22px rgba(74, 47, 26, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -2px 4px rgba(0, 0, 0, 0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    overflow: visible;
    height: 100%;
    box-sizing: border-box;
}

.mesa-vintage:hover {
    transform: translateY(-4px);
    box-shadow:
        0 16px 30px rgba(74, 47, 26, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -2px 4px rgba(0, 0, 0, 0.35);
}

.mesa-vintage::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background-image: repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0px,
        rgba(255, 255, 255, 0.04) 1px,
        rgba(0, 0, 0, 0.05) 2px,
        rgba(0, 0, 0, 0.05) 3px
    );
    opacity: 0.5;
    pointer-events: none;
}

.mesa-vintage__paper {
    position: relative;
    z-index: 1;
    min-height: 200px;
    padding: 25px 18px 14px;
    border-radius: 8px;
    background:
        radial-gradient(120% 90% at 50% 0%, var(--paper) 0%, var(--paper-edge) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(180, 150, 100, 0.45),
        inset 0 0 22px rgba(150, 110, 60, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    height: 100%;
    min-height: 200px;
}

.mesa-vintage__paper::after {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(150, 110, 60, 0.45);
    border-radius: 6px;
    pointer-events: none;
}

.mesa-status-pill {
    position: absolute;
    top: -6px;
    left: 0px;
    z-index: 2;
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
    width: max-content;
    padding: 4px 12px 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
    white-space: nowrap;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.25);
}

.mesa-vintage--ocupada .mesa-status-pill { background: var(--restaurant-red-dark); }
.mesa-vintage--libre   .mesa-status-pill { background: var(--restaurant-success-darker); }

.mesa-status-pill .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
}

.mesa-title {
    margin: 0px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 27px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.5px;
}

.mesa-vintage--ocupada .mesa-title { color: var(--restaurant-red-darker); }
.mesa-vintage--libre   .mesa-title { color: #2e7d4f; }

.mesa-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    gap: 8px;
    color: var(--ink-soft);
}

.mesa-divider::before,
.mesa-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(120, 90, 50, 0.55),
        transparent
    );
}

.mesa-divider .diamond {
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    background: rgba(120, 90, 50, 0.7);
}

.mesa-info {
    text-align: center;
    line-height: 1.25;
}

.mesa-info__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink);
}

.mesa-info__label i { color: var(--restaurant-red-dark); }
.mesa-vintage--libre .mesa-info__label i { color: var(--restaurant-success-darker); }

.mesa-info__value {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-soft);
}

.mesa-invoice {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid rgba(150, 110, 60, 0.55);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.35);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    font-weight: 700;
}

.mesa-invoice i { color: var(--ink-soft); font-size: 13px; }
.mesa-vintage--ocupada .mesa-invoice { color: var(--restaurant-red-darker); }
.mesa-vintage--libre   .mesa-invoice { color: #2e7d4f; }

@media (max-width: 640px) {
    .mesa-vintage__paper { min-height: 170px; padding: 52px 12px 14px; }
    .mesa-title { font-size: 24px; }
}

.tw-dw-menu .select2-dropdown {
    border-color: var(--restaurant-wood-border) !important;
}

#drawer_order_filter select.form-control:focus {
    border-color: var(--restaurant-wood-border);
    box-shadow: 0 0 0 2px rgba(138, 90, 47, 0.15);
    outline: none;
}

#drawer_order_filter .input-group input.form-control:focus {
    border-color: var(--restaurant-wood-border);
    box-shadow: none;
    outline: none;
}

.restaurant-shadow-wood {
    box-shadow: var(--restaurant-wood-light) 0px 4px 6px -1px, var(--restaurant-wood-dark) 0px 2px 4px -1px !important;
}

.restaurant-shadow-wood-bottom {
    box-shadow: 0 6px 8px -6px var(--restaurant-wood-dark) !important;
}

main:has(.pos-restaurant) .tw-bg-\[\#646EE4\] {
    background-color: var(--restaurant-wood-light) !important;
}
main:has(.pos-restaurant) .hover\:tw-bg-\[\#414aac\]:hover {
    background-color: var(--restaurant-wood-dark) !important;
}

.pos-restaurant .tw-dw-menu {
    flex-wrap: nowrap !important;
}

#pos_cm_table_wrapper {
    max-height: calc(100vh - 480px);
    min-height: 150px;
    overflow-y: auto;
}

@media (max-width: 1023px) {
    body.lockscreen:has(.pos-restaurant) {
        overflow: auto !important;
    }

    body.lockscreen:has(.pos-restaurant) #scrollable-container {
        overflow-y: auto !important;
    }
}

@media(max-width: 1023px) {
    .pos-restaurant .table-grid-wrapper {
        max-height: 80dvh;
        overflow-y: auto;
    }
}

.tw-bg-blue-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246/var(--tw-bg-opacity))
}

/* ── ColVis Button – Minimalist Clean ── */
.colvis-clean-btn {
    background: transparent !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}
.colvis-clean-btn:hover {
    background: #f3f4f6 !important;
    border-color: #9ca3af !important;
    color: #374151 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
}
.colvis-clean-btn:active {
    background: #e5e7eb !important;
    transform: scale(0.98);
}
.colvis-clean-btn i {
    font-size: 13px !important;
    vertical-align: -1px !important;
    margin-right: 1px !important;
}

/* ── ColVis Lock – Dropdown + Modal global ── */

/* ── Panel del dropdown ColVis ── */
.dt-button-collection {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.1) !important;
    padding: 6px 0 !important;
    max-height: 360px !important;
    overflow-y: auto !important;
    min-width: 220px !important;
}

/* ── Cada columna (item) ── */
.dt-button-collection .dt-button,
.dt-button-collection .dt-button:not(.active),
.dt-button-collection a.dt-button,
.dt-button-collection a.dt-button:not(.active),
.dt-button-collection .dt-button.buttons-columnVisibility,
.dt-button-collection li a,
.dt-button-collection li button,
.dt-button-collection li a:not(.active),
.dt-button-collection li button:not(.active) {
    display: block !important;
    position: relative !important;
    padding: 7px 44px 7px 32px !important;
    margin: 0 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    user-select: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #374151 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: left !important;
    transition: background .15s ease !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
.dt-button-collection li {
    background: transparent !important;
    background-color: transparent !important;
}
.dt-button-collection .dt-button:hover,
.dt-button-collection a.dt-button:hover,
.dt-button-collection li a:hover,
.dt-button-collection li button:hover {
    background: #f3f4f6 !important;
    background-color: #f3f4f6 !important;
    color: #374151 !important;
}
.dt-button-collection .dt-button:active,
.dt-button-collection a.dt-button:active,
.dt-button-collection li a:active {
    background: #e5e7eb !important;
    background-color: #e5e7eb !important;
    color: #374151 !important;
}
.dt-button-collection .dt-button:focus,
.dt-button-collection .dt-button:focus-visible,
.dt-button-collection .dt-button.active,
.dt-button-collection .dt-button:not(.active),
.dt-button-collection a.dt-button:focus,
.dt-button-collection a.dt-button.active,
.dt-button-collection li a:focus {
    color: #374151 !important;
    background: transparent !important;
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ── Toggle switch: track ── */
.dt-button-collection .dt-button::after {
    content: '' !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 34px !important;
    height: 18px !important;
    border-radius: 9px !important;
    background: #d1d5db !important;
    transition: background .2s ease !important;
    pointer-events: none !important;
    flex-shrink: 0 !important;
}

/* ── Toggle switch: knob ── */
.dt-button-collection .dt-button::before {
    content: '' !important;
    position: absolute !important;
    right: 28px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.2) !important;
    transition: right .2s ease, background .2s ease !important;
    pointer-events: none !important;
    z-index: 1 !important;
    flex-shrink: 0 !important;
}

/* ── Estado ON (columna visible) ── */
.dt-button-collection .dt-button.active::after {
    background: #22c55e !important;
}
.dt-button-collection .dt-button.active::before {
    right: 12px !important;
}

/* ── Botón "Configuración de columnas" ── */
.colvis-config-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 6px 0;
}
.colvis-config-trigger {
    display: block !important;
    width: 100% !important;
    padding: 8px 16px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: #fdfde7 !important;
    color: #9e9a00 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: background .15s ease !important;
}
.colvis-config-trigger:hover {
    background: #fcfcd8 !important;
    color: #858000 !important;
}
.colvis-config-trigger::before,
.colvis-config-trigger::after {
    display: none !important;
}

/* ── Scroll sutil ── */
.dt-button-collection::-webkit-scrollbar {
    width: 5px !important;
}
.dt-button-collection::-webkit-scrollbar-thumb {
    background: #c5c8cc !important;
    border-radius: 4px !important;
}
.dt-button-collection::-webkit-scrollbar-track {
    background: transparent !important;
}

/* ── Modal configuración de columnas ── */
#colvis-config-modal .modal-content {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,.08);
}
#colvis-config-modal .modal-header {
    background: #fff;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
    border-radius: 12px 12px 0 0;
    padding: 1rem 1.25rem;
}
#colvis-config-modal .modal-header .modal-title {
    font-size: .95rem;
    font-weight: 600;
    color: #1e293b;
}
#colvis-config-modal .modal-header .modal-title i {
    color: #CCC500;
}
#colvis-config-modal .modal-header .close {
    color: #94a3b8;
    opacity: 1;
    transition: color .15s;
}
#colvis-config-modal .modal-header .close:hover {
    color: #475569;
}
#colvis-config-modal .modal-body {
    padding: .75rem 1.25rem;
}
#colvis-config-modal .colvis-config-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 16px;
    max-height: 340px;
    overflow-y: auto;
    padding: 4px 0;
}
#colvis-config-modal .colvis-config-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    margin: 0;
    cursor: pointer;
    border-radius: 6px;
    transition: background .15s ease;
    font-size: 13px;
    font-weight: 400;
    color: #475569;
}
#colvis-config-modal .colvis-config-item:hover {
    background: #f8fafc;
    color: #1e293b;
}
#colvis-config-modal .colvis-config-cb {
    width: 15px;
    height: 15px;
    accent-color: #CCC500;
    cursor: pointer;
    flex-shrink: 0;
}
#colvis-config-modal .colvis-config-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#colvis-config-modal .modal-footer {
    border-top: 1px solid #f1f5f9;
    padding: .75rem 1.25rem;
}
#colvis-config-modal .modal-footer .btn {
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 16px;
    transition: all .15s ease;
}
#colvis-config-modal #colvis-reset-btn {
    color: #ef4444;
    border: 1px solid #fecaca;
    background: transparent;
}
#colvis-config-modal #colvis-reset-btn:hover {
    background: #fef2f2;
    border-color: #fca5a5;
}

#colvis-config-modal .modal-footer .btn-default {
    color: #64748b;
    border: 1px solid #e2e8f0;
    background: #fff;
}
#colvis-config-modal .modal-footer .btn-default:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}
#colvis-config-modal .modal-footer .btn-primary {
    background: #CCC500;
    border: 1px solid #CCC500;
    color: #fff;
}
#colvis-config-modal .modal-footer .btn-primary:hover {
    background: #b0aa00;
    border-color: #b0aa00;
}

.sku-builder-collapse {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .35s ease, opacity .25s ease;
}
.sku-builder-collapse.is-expanded {
    grid-template-rows: 1fr;
    opacity: 1;
}
.sku-builder-collapse .sku-builder-collapse-inner {
    overflow: hidden;
    min-height: 0;
}

/* Ocultar y mostrar botón menos (quantity-down) de POS dependiendo del tamaño */
@media (max-width: 1250px) {
    .input-group-btn:has(.quantity-down){
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .input-group-btn:has(.quantity-down){
        display: table-cell !important;
    }
}

@media (max-width: 767px) {
    .input-group-btn:has(.quantity-down){
        display: none !important;
    }
}

.tw-border-blue-600 {
    border-color: #2563eb;
}

.tw-dw-btn-xxs {
    font-size: .65rem;
    height: 1.25rem;
    min-height: 1.25rem;
    padding-left: .25rem;
    padding-right: .25rem
}

/* Etiqueta "Producto regalo" en la fila del POS: mismo fondo que el boton .tw-dw-btn-warning, pero como chip plano (no boton). */
.gift_product {
    display: inline-block;
    background-color: var(--fallback-wa, #ffc22d);   /* navegadores sin oklch */
    background-color: oklch(var(--wa) / 1);          /* mismo tono que el boton */
    color: var(--fallback-wac, #000);
    color: oklch(var(--wac) / 1);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    padding: 1px 6px;
    border-radius: 4px;
    margin-top: 4px;
}