@import "tailwindcss";
@plugin "daisyui";
@plugin "@iconify/tailwind4";

@plugin "daisyui/theme" {
  name: "light";
  default: true;
  prefersdark: false;
  color-scheme: "light";
  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(98% 0 0);
  --color-base-300: oklch(92% 0 0);
  --color-base-content: oklch(25% 0.006 285);
  --color-primary: oklch(25% 0.006 285);
  --color-primary-content: oklch(98% 0 0);
  --color-secondary: oklch(55% 0.046 257.417);
  --color-secondary-content: oklch(98% 0 0);
  --color-accent: oklch(96% 0 0);
  --color-accent-content: oklch(25% 0.006 285);
  --color-neutral: oklch(14% 0.005 285.823);
  --color-neutral-content: oklch(92% 0.004 286.32);
  --color-info: oklch(74% 0.16 232);
  --color-success: oklch(62% 0.17 163);
  --color-warning: oklch(82% 0.18 84);
  --color-error: oklch(60% 0.25 27);
  --radius-selector: 0.5rem;
  --radius-field: 0.4rem;
  --radius-box: 0.5rem;
  --border: 1px;
}

@plugin "daisyui/theme" {
  name: "dark";
  default: false;
  prefersdark: true;
  color-scheme: "dark";
  --color-base-100: oklch(15% 0.005 285.823);
  --color-base-200: oklch(20% 0.005 285.823);
  --color-base-300: oklch(30% 0.005 285.823);
  --color-base-content: oklch(92% 0.004 286.32);
  --color-primary: oklch(98% 0 0);
  --color-primary-content: oklch(15% 0 0);
  --color-secondary: oklch(65% 0.046 257.417);
  --color-secondary-content: oklch(15% 0.005 285.823);
  --color-accent: oklch(25% 0 0);
  --color-accent-content: oklch(98% 0 0);
  --color-neutral: oklch(92% 0.004 286.32);
  --color-neutral-content: oklch(14% 0.005 285.823);
  --color-info: oklch(70% 0.1 230);
  --color-success: oklch(65% 0.15 160);
  --color-warning: oklch(85% 0.15 90);
  --color-error: oklch(55% 0.2 27);
  --radius-selector: 0.5rem;
  --radius-field: 0.4rem;
  --radius-box: 0.5rem;
  --border: 1px;
}

:root {
  font-size: 14px;
}

.input,
.label,
.select,
.textarea {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  &:focus,
  &:focus-within {
    outline: none !important;
    box-shadow: 0 0 4px 0px;
  }

  &:hover:not(:focus) {
    background-color: oklch(from var(--color-base-100) calc(l - 0.03) c h);
  }

}

.floating-label span {
  color: oklch(30% 0.01 260);
  font-size: 1.1rem;
  transition: all 0.2s ease;
}

.floating-label:focus-within span {
  color: oklch(25% 0.02 260);
  font-size: 1.1rem;
}

.floating-label:has(input:not(:placeholder-shown)) span {
  color: oklch(28% 0.01 260);
  font-size: 1.1rem;
}

.tab-content-inner {
  animation: tabFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: top;
}

/* 1. El contenedor manda */
.input-container {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* 2. El label de DaisyUI debe ocupar todo el ancho */
.input-container .input {
  width: 100%;
  display: flex;
  align-items: center;
}

/* 3. El panel flotante */
.input-content {
  position: absolute;
  top: 100%;    /* Justo debajo */
  left: 0;
  right: 0;     /* Esto lo obliga a estirarse de izquierda a derecha */
  z-index: 50;
  background: oklch(var(--b1)); /* Fondo del tema */
  border: 1px solid oklch(var(--bc) / 0.2);
  border-radius: var(--rounded-box, 1rem);
  margin-top: 0.25rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* Para que el 'menu' no se salga de los bordes redondeados */
}

/* 4. La lista interna */
.input-content .menu {
  width: 100%;
}

@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: scaleY(0.95);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@layer utilities {
  @keyframes fade-in {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fade-out {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(-8px);
    }
  }

  .animate-fade-in {
    animation: fade-in 0.15s ease-out forwards;
  }
}



/* sigpro-ui daisyUI classes - extracted from components */

/* join join-vertical lg:join-horizontal divider divider-horizontal validator validator-hint glass */

/* Accordion */
/* .input, .input-bordered, .input-ghost, .input-primary, .input-secondary, .input-accent, .input-info, .input-success, .input-warning, .input-error, .input-xs, .input-sm, .input-md, .input-lg, .floating-label, */

/* Alert */
/* .alert, .alert-info, .alert-success, .alert-warning, .alert-error, .alert-soft, .alert-outline, .alert-dash, */
/* .icon-[lucide--info], .icon-[lucide--check-circle], .icon-[lucide--alert-triangle], .icon-[lucide--alert-circle], */

/* Autocomplete */
/* .menu, .menu-dropdown, .menu-dropdown-show, */

/* Badge */
/* .badge, .badge-primary, .badge-secondary, .badge-accent, .badge-info, .badge-success, .badge-warning, .badge-error, .badge-outline, .badge-soft, .badge-dash, .badge-xs, .badge-sm, .badge-md, .badge-lg, */

/* Button */
/* .btn, .btn-primary, .btn-secondary, .btn-accent, .btn-ghost, .btn-info, .btn-success, .btn-warning, .btn-error, .btn-neutral, .btn-xs, .btn-sm, .btn-md, .btn-lg, .btn-xl, .btn-outline, .btn-soft, .btn-dash, .btn-link, .btn-circle, .btn-square, .btn-wide, .btn-block, .btn-active, .btn-disabled, */

/* Checkbox & Toggle */
/* .checkbox, .checkbox-primary, .checkbox-secondary, .checkbox-accent, .checkbox-info, .checkbox-success, .checkbox-warning, .checkbox-error, .checkbox-xs, .checkbox-sm, .checkbox-md, .checkbox-lg, .toggle, .toggle-primary, .toggle-secondary, .toggle-accent, .toggle-xs, .toggle-sm, .toggle-md, .toggle-lg, */

/* Chat */
/* .chat .chat-end .chat-start .chat.image .chat-header .chat-footer . chat-bubble */

/* Colorpicker */

/* Datepicker */
/* .icon-[lucide--calendar], .icon-[lucide--chevrons-left], .icon-[lucide--chevron-left], .icon-[lucide--chevron-right], .icon-[lucide--chevrons-right], */

/* Drawer */
/* .drawer, .drawer-end .drawer-toggle, .drawer-content, .drawer-side, .drawer-overlay, */

/* Dropdown */
/* .dropdown, .dropdown-content, .dropdown-end, .dropdown-top, .dropdown-bottom, */

/* Fab */
/* .fab, */

/* Fieldset */
/* .fieldset, .fieldset-legend, */

/* Fileinput */
/* .icon-[lucide--upload], .icon-[lucide--x], */

/* Indicator */
/* .indicator, .indicator-item, */

/* Input */
/* .input, .input-bordered, .input-ghost, .input-primary, .input-secondary, .input-accent, .input-info, .input-success, .input-warning, .input-error, .input-xs, .input-sm, .input-md, .input-lg, .floating-label, */
/* .icon-[lucide--text], .icon-[lucide--lock], .icon-[lucide--calendar], .icon-[lucide--hash], .icon-[lucide--mail], .icon-[lucide--search], .icon-[lucide--phone], .icon-[lucide--link], .icon-[lucide--eye-off], .icon-[lucide--eye], */

/* List */
/* .list, .list-row, .list-bullet, .list-image, .list-none, */

/* Mask */
/* .mask, .mask-star, .mask-star-2, .mask-heart, .mask-circle, */

/* Menu */
/* .menu, .menu-dropdown, .menu-dropdown-show, */

/* Modal */
/* .modal, .modal-box, .modal-action, .modal-backdrop, .modal-open, .modal-middle, .modal-top, .modal-bottom, */

/* Navbar */
/* .navbar, .navbar-start, .navbar-center, .navbar-end, */

/* Radio */
/* .radio, .radio-primary, .radio-secondary, .radio-accent, .radio-info, .radio-success, .radio-warning, .radio-error, .radio-xs, .radio-sm, .radio-md, .radio-lg, */

/* Range */
/* .range, .range-primary, .range-secondary, .range-accent, .range-info, .range-success, .range-warning, .range-error, .range-xs, .range-sm, .range-md, .range-lg, */

/* Rating */
/* .rating, .rating-half, .rating-hidden, */

/* Select */
/* .select, .select-bordered, .select-primary, .select-secondary, .select-accent, .select-info, .select-success, .select-warning, .select-error, .select-xs, .select-sm, .select-md, .select-lg, */

/* Stack */
/* .stack, .stack-top, .stack-bottom, .stack-start, .stack-end, */

/* Stat */
/* .stat, .stat-figure, .stat-title, .stat-value, .stat-desc, */

/* Swap */
/* .swap, .swap-on, .swap-off, .swap-active, .swap-rotate, .swap-flip, .swap-indeterminate, */

/* Table */
/* .table, .table-zebra, .table-pin-rows, .table-pin-cols, .table-xs, .table-sm, .table-md, .table-lg, */

/* Tabs */
/* .tabs, .tabs-box, .tabs-lift, .tabs-border, .tab, .tab-content, */
/* .icon-[lucide--x], */

/* Timeline */
/* .timeline, .timeline-vertical, .timeline-horizontal, .timeline-compact, .timeline-start, .timeline-middle, .timeline-end, .timeline-box, */
/* .icon-[lucide--info], .icon-[lucide--check-circle], .icon-[lucide--alert-triangle], .icon-[lucide--alert-circle], */

/* Toast */
/* .icon-[lucide--x], */

/* Tooltip */
/* .tooltip, .tooltip-top, .tooltip-bottom, .tooltip-left, .tooltip-right, .tooltip-primary, .tooltip-secondary, .tooltip-accent, .tooltip-info, .tooltip-success, .tooltip-warning, .tooltip-error, .tooltip-open, */

/* ===== Tailwind ===== */

/* Background */
/* .bg-base-100, .bg-base-200, .bg-base-content, .bg-primary, .bg-primary/10, .bg-secondary, */

/* Border */
/* .border, .border-2, .border-base-300, .border-base-content/20, .border-dashed, .border-primary, */

/* Bottom */
/* .bottom-6, */

/* Cursor */
/* .cursor-pointer, */

/* Duration */
/* .duration-200, .duration-300, */

/* Flex */
/* .flex, .flex-1, .flex-col, .flex-col-reverse, */

/* Font */
/* .font-black, .font-bold, .font-medium, */

/* Grid */
/* .grid, .grid-cols-7, .grid-cols-8, */

/* Height */
/* .h-12, .min-h-full, */

/* Inset */
/* .inset-0, */

/* Items */
/* .items-center, .items-end, */

/* Justify */
/* .justify-between, .justify-start, */

/* Left */
/* .left-0, */

/* Loading */
/* .loading, .loading-spinner, */

/* Max Height */
/* .max-h-60, */

/* Opacity */
/* .opacity-0, .opacity-40, .opacity-50, .opacity-60, .opacity-70, */

/* Overflow */
/* .overflow-x-auto, .overflow-y-auto, */

/* Padding */
/* .p-2, .p-3, .p-4, .p-6, */

/* Pointer events */
/* .pointer-events-auto, .pointer-events-none, */

/* Position */
/* .absolute, .fixed, .relative, */

/* Right */
/* .right-0, */

/* Rounded */
/* .rounded-box, .rounded-lg, */

/* Shadow */
/* .shadow-2xl, .shadow-lg, .shadow-sm, .shadow-xl, */

/* Shrink */
/* .shrink-0, */

/* Space */
/* .space-y-1, */

/* Spacing */
/* .gap-1, .gap-2, .gap-3, */

/* Text */
/* .text-center, .text-error, .text-left, .text-lg, .text-primary-content, .text-right, .text-secondary, .text-sm, .text-xl, .text-xs, */

/* Text custom */
/* .text-[10px], */

/* Top */
/* .top-0, */

/* Transform */
/* .translate-x-10, */

/* Transition */
/* .transition-all, */

/* Truncate */
/* .truncate, */

/* Width */
/* .w-full, .w-52, .w-64, .w-80, */

/* Z-index */
/* .z-100, .z-50, .z-90, .z-[100], .z-[9999], */

/* Tailwind variants */
/* .hover:bg-base-200, */

/* Misc */
/* .active, .hr, .label, .label-text, */

/* Icons */
/* .icon-[lucide--heart] */