/*@import "flatpickr/dist/flatpickr.css";*/

@font-face {
    font-family: 'Anton';
    /* Nombre de la fuente */
    src: url('../fonts/Anton/Anton-Regular.ttf') format('truetype');
    /* Cambia a 'truetype' */
    font-weight: normal;
    /* Peso de la fuente */
    font-style: normal;
    /* Estilo de la fuente */
}

@font-face {
    font-family: 'Roboto';
    /* Nombre de la fuente */
    src: url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype');
    /* Cambia a 'truetype' */
    font-weight: normal;
    /* Peso de la fuente */
    font-style: normal;
    /* Estilo de la fuente */
}

:root {
    /* #45A041 color green1 */
    --color-green-one: rgb(69, 160, 65);
    --color-green-one-rgb: 69, 160, 65;

    /* #006937 in decimal RGB */
    --color-two: rgb(0, 105, 55);
    --color-two-rgb: 0, 105, 55;

    /* #014023 in decimal RGB */
    --main-color: rgb(1, 64, 35);
    --main-color-rgb: 1, 64, 35;

    --font-family-Roboto: 'Roboto', sans-serif;
    --font-family-Poppins: 'Poppins', sans-serif;
    --font-family-BeVietnam: 'Be Vietnam Pro', sans-serif;
    --font-family-Inter: 'Inter', sans-serif;
    --font-family-anton: 'Anton', sans-serif;

    /* Links y color primary de marca (verde) en vez del morado de Vuexy.
       Cubre <a> sin clase (ej. "Back to login"), .btn-link y focus rings. */
    --bs-primary: #014023;
    --bs-primary-rgb: 1, 64, 35;
    --bs-link-color: #014023;
    --bs-link-color-rgb: 1, 64, 35;
    --bs-link-hover-color: #006937;
    --bs-link-hover-color-rgb: 0, 105, 55;
}

body {
    font-family: var(--font-family-Roboto);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-anton);
}


.bg-green-primary {
    background: var(--main-color) !important;
}

.bg-green-secondary {
    background: var(--color-two) !important;
}

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

.c-green-primary {
    color: var(--main-color) !important;
}

.c-green-secondary {
    color: var(--color-two) !important;
}

.c-green-light {
    color: var(--color-green-one) !important;
}

/* powergird */
.dt--top-section {
    margin-bottom: 20px;
}

.dropdown .btn-secondary {
    background-color: var(--main-color);
    color: #ffffff;
}

.dropdown .btn-secondary:hover {
    background-color: var(--color-two) !important;
    color: #ffffff;
}

.btn-secondary.show.dropdown-toggle {
    background-color: var(--color-two) !important;
    color: #ffffff;
}

/* form */
.shadow-sm {
    box-shadow: none !important;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
}

/* button primary */
.btn-primary {
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
    color: #ffffff !important;
    /* Anillo de focus verde (Vuexy trae el rgb morado por defecto) */
    --bs-btn-focus-shadow-rgb: var(--main-color-rgb) !important;
}

/* Focus/focus-visible del botón: sombra verde en vez de la morada de Vuexy */
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary.focus {
    box-shadow: 0 0 0 0.15rem rgba(var(--main-color-rgb), 0.4) !important;
}

.btn-primary:hover {
    background-color: var(--color-two) !important;
    border-color: var(--color-two) !important;
    color: #ffffff !important;
}

.btn-primary:active,
.btn-primary.active {
    background-color: var(--color-green-one) !important;
    border-color: var(--color-green-one) !important;
    color: #ffffff !important;
}

.table td {
    min-width: 80px;
    max-width: 200px;
    white-space: normal;
}

.table td:has(.badge),
.table td:has(input[type="select"]),
.table td:has(button) {
    max-width: unset !important;
    white-space: nowrap !important;
}

/* Color flatpickr */

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day:hover,
.flatpickr-day:focus {
    background: var(--color-green-one);
    /* tu color primario */
    border-color: var(--color-green-one);
    color: white;
}

/* Hover */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: var(--color-green-one);
    border-color: var(--color-green-one);
    color: white;
}



/* Custon scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 10px;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #374151;
}

.ql-toolbar.ql-snow {
    border-radius: 1rem 1rem 0 0;
    border-color: #f3f4f6;
    background: #f9fafb;
    padding: 12px;
}

.ql-container.ql-snow {
    border-radius: 0 0 1rem 1rem;
    border-color: #f3f4f6;
    font-family: inherit;
    font-size: 0.875rem;
}

.dark .ql-toolbar.ql-snow {
    border-color: #374151;
    background: #111827;
}

.dark .ql-container.ql-snow {
    border-color: #374151;
    background: #1f2937;
    color: white;
}



/* Quill */
.ql-toolbar.ql-snow {
    border-radius: 0.5rem 0.5rem 0 0;
    border-color: #e5e7eb;
    background: #f9fafb;
}

.ql-container.ql-snow {
    border-radius: 0 0 0.5rem 0.5rem;
    border-color: #e5e7eb;
}

.dark .ql-toolbar.ql-snow,
.dark .ql-container.ql-snow {
    border-color: #374151;
    background: #1f2937;
    color: white;
}

/* === Secciones dinámicas dentro del wizard de edit: misma card que en el create ===
   El wizard used-machine (edit staff/customer + draft) envuelve todo en
   `.um-form-card`, que aplana las cards de sección con
   `border:0; background:transparent; margin:0` + card-body sin padding lateral
   (admin.css) para que se lean como una sola tarjeta maestra. Eso también borraba
   el diseño de las secciones por tipo de movimiento (CAM / Dobby / Jacquard) y las
   custom, que en el CREATE se ven como una card completa con borde verde de 3px.
   Aquí les devolvemos ese mismo diseño SOLO a esas cards (.border-primary), con un
   selector más específico (0,3,0) que le gana a `.um-form-card .card`. `border:0`
   también resetea el color a currentColor, por eso fijamos el verde explícito. */
.um-form-card .card.border-primary {
    border: 3px solid var(--main-color) !important;
    background-color: var(--bs-card-bg) !important;
    margin-bottom: 1.5rem !important;
}
.um-form-card .card.border-primary > .card-body {
    padding-left: var(--bs-card-spacer-x, 1.5rem) !important;
    padding-right: var(--bs-card-spacer-x, 1.5rem) !important;
}