@import 'tailwindcss';

@source '../views';
@source '../../vendor/robsontenorio/mary/src/View/Components/**/*.php';

/* Theme toggle */
@custom-variant dark (&:where(.dark, .dark *));

/* Auth background */
.auth-bg-login {
    background-image: url('../../public/images/auth/login-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #F1F2F4;
}

/* Avatar container positioning */
.avatar-container-mobile {
    padding-top: 7px;
}

/** daisyUI */
@plugin "daisyui" {
    themes: 
        "mar-k",
        "light", 
        "dark", 
        "cupcake", 
        "bumblebee", 
        "emerald", 
        "corporate", 
        "synthwave", 
        "retro", 
        "cyberpunk", 
        "valen", 
        "halloween", 
        "garden", 
        "forest", 
        "aqua", 
        "lofi", 
        "pastel", 
        "fantasy", 
        "wireframe", 
        "black", 
        "luxury", 
        "dracula", 
        "cmyk", 
        "autumn", 
        "business", 
        "acid", 
        "lemonade", 
        "night", 
        "coffee", 
        "winter", 
        "dim", 
        "nord", 
        "sunset",
        "caramell",
        "farpie",
        "mint",
        "zen",
        "cosmic"
    ;
}


@plugin "daisyui/theme" {
  name: "caramell";
  default: false;
  prefersdark: false;
  color-scheme: "light";
  --color-base-100: oklch(98% 0.016 73.684);
  --color-base-200: oklch(95% 0.038 75.164);
  --color-base-300: oklch(90% 0.076 70.697);
  --color-base-content: oklch(40% 0.123 38.172);
  --color-primary: oklch(0% 0 0);
  --color-primary-content: oklch(100% 0 0);
  --color-secondary: oklch(22.45% 0.075 37.85);
  --color-secondary-content: oklch(90% 0.076 70.697);
  --color-accent: oklch(46.44% 0.111 37.85);
  --color-accent-content: oklch(90% 0.076 70.697);
  --color-neutral: oklch(55% 0.195 38.402);
  --color-neutral-content: oklch(98% 0.016 73.684);
  --color-info: oklch(42% 0.199 265.638);
  --color-info-content: oklch(90% 0.076 70.697);
  --color-success: oklch(43% 0.095 166.913);
  --color-success-content: oklch(90% 0.076 70.697);
  --color-warning: oklch(82% 0.189 84.429);
  --color-warning-content: oklch(41% 0.112 45.904);
  --color-error: oklch(70% 0.191 22.216);
  --color-error-content: oklch(39% 0.141 25.723);
  --radius-selector: 2rem;
  --radius-field: 0.5rem;
  --radius-box: 1rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 3px;
  --depth: 1;
  --noise: 1;
}


@plugin "daisyui/theme" {
  name: "valen";
  default: false;
  prefersdark: false;
  color-scheme: "light";
  --color-base-100: oklch(97% 0.014 343.198);
  --color-base-200: oklch(94% 0.028 342.258);
  --color-base-300: oklch(89% 0.061 343.231);
  --color-base-content: oklch(52% 0.223 3.958);
  --color-primary: oklch(65% 0.241 354.308);
  --color-primary-content: oklch(100% 0 0);
  --color-secondary: oklch(62% 0.265 303.9);
  --color-secondary-content: oklch(97% 0.014 308.299);
  --color-accent: oklch(82% 0.111 230.318);
  --color-accent-content: oklch(39% 0.09 240.876);
  --color-neutral: oklch(40% 0.153 2.432);
  --color-neutral-content: oklch(89% 0.061 343.231);
  --color-info: oklch(86% 0.127 207.078);
  --color-info-content: oklch(44% 0.11 240.79);
  --color-success: oklch(84% 0.143 164.978);
  --color-success-content: oklch(43% 0.095 166.913);
  --color-warning: oklch(75% 0.183 55.934);
  --color-warning-content: oklch(26% 0.079 36.259);
  --color-error: oklch(63% 0.237 25.331);
  --color-error-content: oklch(97% 0.013 17.38);
  --radius-selector: 1rem;
  --radius-field: 2rem;
  --radius-box: 1rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 2px;
  --depth: 0;
  --noise: 0;
}





@plugin "daisyui/theme" {
  name: "mar-k";
  default: true;
  prefersdark: false;
  color-scheme: "light";
  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(96% 0.003 264.542);
  --color-base-300: oklch(87% 0.01 258.338);
  --color-base-content: oklch(27% 0.033 256.848);
  --color-primary: oklch(57% 0.245 27.325);
  --color-primary-content: oklch(100% 0 0);
  --color-secondary: oklch(76% 0.188 70.08);
  --color-secondary-content: oklch(100% 0 0);
  --color-accent: oklch(57% 0.245 27.325);
  --color-accent-content: oklch(100% 0 0);
  --color-neutral: oklch(57% 0.245 27.325);
  --color-neutral-content: oklch(100% 0 0);
  --color-info: oklch(68% 0.169 237.323);
  --color-info-content: oklch(100% 0 0);
  --color-success: oklch(69% 0.17 162.48);
  --color-success-content: oklch(100% 0 0);
  --color-warning: oklch(82% 0.189 84.429);
  --color-warning-content: oklch(14.016% 0.032 56.844);
  --color-error: oklch(57% 0.245 27.325);
  --color-error-content: oklch(100% 0 0);
  --radius-selector: 1rem;
  --radius-field: 1rem;
  --radius-box: 1rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1.5px;
  --depth: 1;
  --noise: 0;
}


@plugin "daisyui/theme" {
  name: "mar-k-oscuro";
  default: false;
  prefersdark: false;
  color-scheme: "dark";
  --color-base-100: oklch(25.33% 0.016 252.42);
  --color-base-200: oklch(23.26% 0.014 253.1);
  --color-base-300: oklch(21.15% 0.012 254.09);
  --color-base-content: oklch(97.807% 0.029 256.847);
  --color-primary: oklch(57% 0.245 27.325);
  --color-primary-content: oklch(96% 0.018 272.314);
  --color-secondary: oklch(76% 0.188 70.08);
  --color-secondary-content: oklch(94% 0.028 342.258);
 --color-accent: oklch(57% 0.245 27.325);
  --color-accent-content: oklch(38% 0.063 188.416);
  --color-neutral: oklch(14% 0.005 285.823);
  --color-neutral-content: oklch(92% 0.004 286.32);
  --color-info: oklch(74% 0.16 232.661);
  --color-info-content: oklch(29% 0.066 243.157);
  --color-success: oklch(76% 0.177 163.223);
  --color-success-content: oklch(37% 0.077 168.94);
  --color-warning: oklch(82% 0.189 84.429);
  --color-warning-content: oklch(41% 0.112 45.904);
  --color-error: oklch(71% 0.194 13.428);
  --color-error-content: oklch(27% 0.105 12.094);
  --radius-selector: 0.5rem;
  --radius-field: 0.25rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}




@plugin "daisyui/theme" {
  name: "farpie";
  default: false;
  prefersdark: false;
  color-scheme: "light";
  --color-base-100: oklch(97% 0.017 320.058);
  --color-base-200: oklch(95% 0.037 318.852);
  --color-base-300: oklch(90% 0.076 319.62);
  --color-base-content: oklch(40% 0.17 325.612);
  --color-primary: oklch(54% 0.245 262.881);
  --color-primary-content: oklch(97% 0.014 254.604);
  --color-secondary: oklch(62% 0.194 149.214);
  --color-secondary-content: oklch(98% 0.018 155.826);
  --color-accent: oklch(64% 0.2 131.684);
  --color-accent-content: oklch(98% 0.031 120.757);
  --color-neutral: oklch(40% 0.17 325.612);
  --color-neutral-content: oklch(97% 0.017 320.058);
  --color-info: oklch(71% 0.143 215.221);
  --color-info-content: oklch(98% 0.019 200.873);
  --color-success: oklch(70% 0.14 182.503);
  --color-success-content: oklch(98% 0.014 180.72);
  --color-warning: oklch(76% 0.188 70.08);
  --color-warning-content: oklch(98% 0.022 95.277);
  --color-error: oklch(64% 0.246 16.439);
  --color-error-content: oklch(96% 0.015 12.422);
  --radius-selector: 0.25rem;
  --radius-field: 1rem;
  --radius-box: 0.25rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 1;
}


@plugin "daisyui/theme" {
  name: "mint";
  default: false;
  prefersdark: false;
  color-scheme: "light";
  --color-base-100: oklch(98% 0.018 155.826);
  --color-base-200: oklch(96% 0.044 156.743);
  --color-base-300: oklch(92% 0.084 155.995);
  --color-base-content: oklch(39% 0.095 152.535);
  --color-primary: oklch(90% 0.182 98.111);
  --color-primary-content: oklch(28% 0.066 53.813);
  --color-secondary: oklch(85% 0.138 181.071);
  --color-secondary-content: oklch(27% 0.046 192.524);
  --color-accent: oklch(81% 0.111 293.571);
  --color-accent-content: oklch(28% 0.141 291.089);
  --color-neutral: oklch(52% 0.154 150.069);
  --color-neutral-content: oklch(98% 0.018 155.826);
  --color-info: oklch(68% 0.169 237.323);
  --color-info-content: oklch(97% 0.013 236.62);
  --color-success: oklch(72% 0.219 149.579);
  --color-success-content: oklch(98% 0.018 155.826);
  --color-warning: oklch(79% 0.184 86.047);
  --color-warning-content: oklch(98% 0.026 102.212);
  --color-error: oklch(64% 0.246 16.439);
  --color-error-content: oklch(96% 0.015 12.422);
  --radius-selector: 2rem;
  --radius-field: 0.25rem;
  --radius-box: 0rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 1;
}


@plugin "daisyui/theme" {
  name: "zen";
  default: false;
  prefersdark: false;
  color-scheme: "light";
  --color-base-100: oklch(97% 0.014 254.604);
  --color-base-200: oklch(93% 0.032 255.585);
  --color-base-300: oklch(88% 0.059 254.128);
  --color-base-content: oklch(37% 0.146 265.522);
  --color-primary: oklch(58% 0.158 241.966);
  --color-primary-content: oklch(97% 0.013 236.62);
  --color-secondary: oklch(59% 0.145 163.225);
  --color-secondary-content: oklch(97% 0.021 166.113);
  --color-accent: oklch(57% 0.245 27.325);
  --color-accent-content: oklch(97% 0.013 17.38);
  --color-neutral: oklch(54% 0.245 262.881);
  --color-neutral-content: oklch(97% 0.014 254.604);
  --color-info: oklch(68% 0.169 237.323);
  --color-info-content: oklch(97% 0.013 236.62);
  --color-success: oklch(72% 0.219 149.579);
  --color-success-content: oklch(98% 0.018 155.826);
  --color-warning: oklch(76% 0.188 70.08);
  --color-warning-content: oklch(98% 0.022 95.277);
  --color-error: oklch(64% 0.246 16.439);
  --color-error-content: oklch(96% 0.015 12.422);
  --radius-selector: 0rem;
  --radius-field: 2rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}


@plugin "daisyui/theme" {
  name: "cosmic";
  default: false;
  prefersdark: false;
  color-scheme: "light";
  --color-base-100: oklch(98% 0.022 95.277);
  --color-base-200: oklch(96% 0.059 95.617);
  --color-base-300: oklch(92% 0.12 95.746);
  --color-base-content: oklch(41% 0.112 45.904);
  --color-primary: oklch(70% 0.01 56.259);
  --color-primary-content: oklch(14% 0.004 49.25);
  --color-secondary: oklch(67% 0.182 276.935);
  --color-secondary-content: oklch(25% 0.09 281.288);
  --color-accent: oklch(0% 0 0);
  --color-accent-content: oklch(100% 0 0);
  --color-neutral: oklch(66% 0.179 58.318);
  --color-neutral-content: oklch(98% 0.022 95.277);
  --color-info: oklch(70% 0.165 254.624);
  --color-info-content: oklch(28% 0.091 267.935);
  --color-success: oklch(79% 0.209 151.711);
  --color-success-content: oklch(26% 0.065 152.934);
  --color-warning: oklch(85% 0.199 91.936);
  --color-warning-content: oklch(28% 0.066 53.813);
  --color-error: oklch(71% 0.202 349.761);
  --color-error-content: oklch(28% 0.109 3.907);
  --radius-selector: 1rem;
  --radius-field: 0rem;
  --radius-box: 0rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 1;
}


/* Custom padding utilities */
.pt-2\.5 { padding-top: 0.7rem; }

/* Cropper.js - mantener aspecto cuadrado simple (solo lo esencial) */
.cropper-crop-box .cropper-point.point-n,
.cropper-crop-box .cropper-point.point-s,
.cropper-crop-box .cropper-point.point-e,
.cropper-crop-box .cropper-point.point-w {
    display: none !important;
}


/* Ocultar botón "Volver a Usuarios" en móvil */
@media (max-width: 639px) {
    .btn-back-to-users-mobile-hidden {
        display: none !important;
    }
}

/* En desktop mostrar el botón normalmente */
@media (min-width: 640px) {
    .btn-back-to-users-mobile-hidden {
        display: inline-flex !important;
    }
}


/* Avatar-movil: 300% más grande y centrado en móvil */
.avatar-movil {
    /* No afecta en desktop */
}

@media (max-width: 639px) {
    /* Solo aplicar avatar-movil cuando NO hay cropper activo */
    body:not(:has(.cropper-hidden)) .avatar-movil {
        min-width: 14.25rem !important;
        max-width: 14.25rem !important;
        width: 14.25rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
        align-self: center !important;
        display: flex !important;
        justify-content: center !important;
        margin-bottom: 0.5rem !important;
    }
    
    body:not(:has(.cropper-hidden)) .avatar-movil img {
        width: 14.25rem !important;
        height: 14.25rem !important;
        min-width: 14.25rem !important;
        min-height: 14.25rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }
    
    /* Asegurar que el cropper no se ve afectado */
    .cropper-hidden,
    .cropper-hidden img {
        width: auto !important;
        height: auto !important;
        min-width: auto !important;
        min-height: auto !important;
        max-width: none !important;
        max-height: none !important;
    }
}

/* Clases por defecto para Mary UI Cards */
.card:not(.card-border) {
    @apply border border-base-300;
}

/* Header subtitle padding management */
.header-subtitle {
    @apply pl-[52px]; /* Por defecto en desktop */
}

/* Ocultar spinners de inputs type=number (ahorra espacio en celdas estrechas) */
/* Chrome, Safari, Edge (Webkit) */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield; /* Estándar */
}

/* Tabla productos: centrar headers y contenido específico */
.productos-table thead th { 
    @apply text-center; 
}
.productos-table tbody td { 
    @apply align-middle; 
}

@media (max-width: 1023px) {
    .header-subtitle {
        @apply pl-0; /* Sin padding en móvil */
    }
}

.dropdown-content, .menu {
    z-index: 99999 !important;
}

html body div.tox.tox-tinymce div.tox-toolbar.tox-toolbar__primary,
html body .tox-tinymce .tox-toolbar__primary,
html body .tox .tox-toolbar__primary,
div.tox-toolbar__primary,
.tox-toolbar__primary,
[class*="tox-toolbar__primary"] {
    background-color: var(--color-base-200) !important;
    background: var(--color-base-200) !important;
}


* [class*="tox-editor-header"] {
    background-color: var(--color-base-200) !important;
}

* [class*="tox-toolbar__overflow"] {
    background-color: var(--color-base-200) !important;
}

[class*="tox-tinymce"] {
    border: 1px solid var(--color-base-300) !important;
    border-color: var(--color-base-300) !important;
}

html body .tox .tox-tbtn:hover,
.tox .tox-tbtn:hover {
    background-color: var(--color-base-300) !important;
    background: var(--color-base-300) !important;
}

html body .tox .tox-tbtn,
.tox .tox-tbtn {
    background-color: var(--color-base-100) !important;
    background: var(--color-base-100) !important;
}

html body .tox .tox-tbtn--enabled, .tox .tox-tbtn--enabled
 {
    background-color: var(--color-base-300) !important;
    background: var(--color-base-300) !important;
}

.tox .tox-edit-area::before {
    border: 2px solid var(--color-base-content) !important;
}

.tox .tox-split-button__chevron
 {
    border-left: 1px solid var(--color-base-300) !important;
}

.tox .tox-menu
 {
    background-color: var(--color-base-100) !important;
    border: 1px solid var(--color-base-100) !important;
}

.tox .tox-collection--toolbar .tox-collection__item--active:not(.tox-collection__item--state-disabled)
 {
    background-color: var(--color-base-100) !important;
}

.tox .tox-collection--toolbar .tox-collection__item--enabled:not(.tox-collection__item--state-disabled) {
    background-color: var(--color-base-200) !important;
}

/* Centrar radial-progress independientemente del tamaño del contenedor */
.radial-progress-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.radial-progress {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Toggle activado (checked) - Verde */
.toggle[type="checkbox"]:checked {
    background-color: #22c55e !important; /* Verde cuando está activado */
    border-color: #22c55e !important;
}

/* Toggle desactivado (unchecked) - Rojo */
.toggle[type="checkbox"]:not(:checked) {
    background-color: #ef4444 !important; /* Rojo cuando está desactivado */
    border-color: #ef4444 !important;
}

/* Hover estados */
.toggle[type="checkbox"]:checked:hover {
    background-color: #16a34a !important; /* Verde más oscuro al hover */
    border-color: #16a34a !important;
}

.toggle[type="checkbox"]:not(:checked):hover {
    background-color: #dc2626 !important; /* Rojo más oscuro al hover */
    border-color: #dc2626 !important;
}

/* Esfera interior siempre blanca */
.toggle[type="checkbox"]:checked:before,
.toggle[type="checkbox"]:not(:checked):before {
    background-color: var(--color-base-100) !important; /* Esfera siempre blanca */
}

    &:last-child {
        margin-inline-start: 1px !important;
}

&:last-child {
    margin-inline-start: calc(0.25rem * 3);
        /* margin-inline-end: calc(0.25rem * -3); */
    border-inline-start: var(--border) solid currentColor;
}

    .label {
    &:is(.input > *, .select > *) {
        &:last-child {
            margin-inline-start: 1px !important;
        }
    }
}

.menu {
    font-size: 1rem;
}