@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
   --bodyColor: rgba(248, 248, 248, 0.5);
   --blackFont: rgba(0, 0, 0, 0.75);
   --gris: #999;
   --azul: #0588fa;
   --blanco: #fff;
   --negro: #000;
   --grisBlanco: #d9d9d9;
   --azulPastel: #569ddb;
   --accent-gradient: linear-gradient(45deg, #23ff77, #ff9b54 30%, #dfdfdf 60%);
   --grisCoco: #c0c0c0;

   --verdeAlto: #097b29;
   --verdeBajo: #1acb4c;
   --rojoAlto: #b71717;
   --rojoBajo: #ff7272;
   --azulAlto: #0a4a8a;
   --azulBajo: #4d9ded;
   --amarilloAlto: #b79217;
   --amarilloBajo: #eebd1b;
   --naranjaAlto: #df6711;
   --naranjaBajo: #ffa667;
   --grisAlto: #4d4d4d;
   --grisBajo: #a2a2a2;
   --cafeAlto: #a76d2a;
   --cafeBajo: #c9a377;

   /** Colores Bootstrap **/
   --primary: #188ae2;
   --danger: #f34943;
   --info: #35b8e0;
   --warning: #fdc644;
   --success: #31ce77;
   --purple: #6b5eae;
   --pink: #ff679b;
   --ash: #3b3e47;

   --primary-color: #4f46e5;
   --primary-hover: #4338ca;
   --text-primary: #111827;
   --text-secondary: #6b7280;
   --bg-primary: #ffffff;
   --bg-secondary: #f9fafb;
   --border-light: #e5e7eb;
   --border-focus: #4f46e5;
   --error-bg: #fef2f2;
   --error-border: #f87171;
   --error-text: #dc2626;
   --success-bg: #f0fdf4;
   --success-border: #22c55e;
   --success-text: #059669;
   --warning-bg: #fffbeb;
   --warning-border: #f59e0b;
   --warning-text: #d97706;
   --info-bg: #eff6ff;
   --info-border: #3b82f6;
   --info-text: #2563eb;
   --shadow-subtle: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
   --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

body {
   font-family: 'PT Sans', sans-serif !important;
}

*::-webkit-scrollbar {
   width: 7px;
}

*::-webkit-scrollbar-thumb {
   background: var(--info);
   border-radius: 4px;
}

*::-webkit-scrollbar-thumb:active {
   background-color: var(--color-negro);
}

*::-webkit-scrollbar-thumb:hover {
   background: var(--success);
   box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}

/* *Estilos track de scroll */
*::-webkit-scrollbar-track {
   background: var(--bodyColor);
   border-radius: 4px;
}

*::-webkit-scrollbar-track:hover,
*::-webkit-scrollbar-track:active {
   background: var(--blanco);
}

*::-webkit-scrollbar:horizontal {
   height: 4px;
}

label.required::after {
   content: " *";
   color: #ff0000;
}

.containerColors {
   display: flex;
   min-height: 100%;
   border-radius: .375rem;
}

:is(.palletColors, .palletLamina) {
   border-radius: .375rem;
   width: max-content;
   min-height: 100%;
   /* max-height: 80px; */
   display: flex;
   overflow: hidden;
   transform: translate3d(0, 0, 0);
   transition: .5s;
   /* box-shadow: 3px 3px rgba(0, 0, 0, .15); */
}

:is(.palletColors, .palletLamina) .commandColor {
   display: flex;
   align-items: end;
   justify-content: start;
   width: 95px;
   transition: .5s;
   cursor: pointer;
   border: 1px solid #f7f7f7;
   height: 35px;
}

:is(.palletColors, .palletLamina) .commandColor span {
   width: 60px;
   font-size: .535rem;
   font-weight: 700;
   background-color: #fff;
   margin-bottom: 4px;
   border-radius: 0 15px 15px 0;
   text-align: center;
   letter-spacing: .5;
}

.estadoVer {
   font-style: italic;
   font-size: .9rem;
   letter-spacing: 0.8px;
   padding: 1px 8px;
   margin: auto 2px;
   color: var(--blanco) !important;
}

.estadoVer.vertical {
   writing-mode: sideways-lr;
   text-orientation: upright;
   white-space: nowrap;
   line-height: 1;
   display: inline-flex;
   /* opcional: centrar si das alto fijo */
   align-items: center;
   justify-content: center;
   padding: 3px 7px !important;
   border-radius: 4px;
   min-height: 95px;
   unicode-bidi: bidi-override;
}

.estadoVer.rotado {
   display: inline-block;
   /* necesario para transform */
   transform: rotate(270deg);
   transform-origin: left top;
   line-height: 1;
}

.letterTitle {
   font-size: 2rem;
   font-weight: 600;
}

.btnSim {
   width: 100% !important;
}

/* Flash Messages - Bootstrap Overrides */
.alert {
   padding: 0.75rem 1rem !important;
   margin-bottom: 1.5rem !important;
   border: 1px solid transparent !important;
   border-radius: 8px !important;
   font-size: 0.875rem !important;
   line-height: 1.4 !important;
   position: relative !important;
}

.alert strong {
   font-weight: 600 !important;
   margin-right: 0.5rem;
}

.alert p {
   margin: 0 !important;
   font-size: 0.875rem !important;
   color: inherit !important;
   font-weight: 400 !important;
   font-style: normal !important;
}

.alert-success {
   background-color: var(--success-bg) !important;
   border-color: var(--success-border) !important;
   color: var(--success-text) !important;
   border-left: 4px solid var(--success-border) !important;
}

.alert-danger {
   background-color: var(--error-bg) !important;
   border-color: var(--error-border) !important;
   color: var(--error-text) !important;
   border-left: 4px solid var(--error-border) !important;
}

.alert-warning {
   background-color: var(--warning-bg) !important;
   border-color: var(--warning-border) !important;
   color: var(--warning-text) !important;
   border-left: 4px solid var(--warning-border) !important;
}

.alert-info {
   background-color: var(--info-bg) !important;
   border-color: var(--info-border) !important;
   color: var(--info-text) !important;
   border-left: 4px solid var(--info-border) !important;
}