@import "components/sidebar.css";
@import "pagy.tailwind.css";
@import "components/square_buttons.css";
@import "components/form_formats.css";
@import "components/tables.css";

@tailwind base;
@tailwind components;
@tailwind utilities;
.links {
  @apply text-white mr-5 hover:text-yellow-500
}

.tab_link {
  @apply flex items-center space-x-1 rounded-md px-2 py-3 hover:bg-gray-100 hover:text-orange-600
}

.btn {
  @apply bg-orange-500 hover:bg-orange-600 text-white font-semibold rounded-md py-2 px-4 my-4
}

.btn-red {
  @apply bg-red-500 hover:bg-red-600 text-white font-semibold rounded-md py-2 px-4 w-full my-4
}

.btn-gray {
  @apply bg-gray-500 hover:bg-gray-600 text-white font-semibold rounded-md py-2 px-4 w-full my-4
}

.input {
  @apply appearance-none block w-full text-gray-800 border border-neutral-400 rounded-md h-10 px-4 focus:border-orange-500 focus:outline-none
}

.label {
  @apply font-semibold text-gray-600 py-2
}
/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

/* capa para detener los logos */
/* @layer utilities {
  .paused {
    animation-play-state: paused;
  }
} */



@layer components {
  .link-parent {
    @apply grid grid-rows-[max-content_0fr] overflow-hidden transition-[grid-template-rows] cursor-pointer data-[toggle]:grid-rows-[max-content_1fr]
  }

  [data-toggle] [data-row] {
    @apply rotate-90;
  }

  .link-child {
    @apply overflow-hidden ml-4;
  }
}

.side {
  @apply flex w-72 flex-col space-y-2 border-r-2 border-gray-200 bg-white p-2 h-full;
  /* Mobile responsive behavior */
  @apply md:relative md:translate-x-0;
  /* On mobile, position absolute and handle overflow */
  @apply absolute top-0 left-0 z-50 transform transition-transform duration-300 ease-in-out;
  /* When hidden on mobile, slide out of view */
  @apply -translate-x-full;
}

.side:not(.hidden) {
  @apply translate-x-0;
}

/* Ensure sidebar doesn't cause horizontal scroll on mobile */
@media (max-width: 768px) {
  .side {
    max-width: 80vw;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  }
}
/* app/assets/stylesheets/components/square_buttons.css */
.sqr-btn {
  @apply text-white bg-orange-500 hover:bg-orange-600 font-bold m-1 rounded flex items-center justify-center p-4 w-[60px] h-[60px];
}

.sqr-btn-red { 
  @apply text-white bg-red-500 hover:bg-red-600 font-bold m-1 rounded flex items-center justify-center p-4 w-[60px] h-[60px];
}

.sqr-btn-gray { 
  @apply text-white bg-gray-500 hover:bg-gray-600 font-bold m-1 rounded flex items-center justify-center p-4 w-[60px] h-[60px];
}

.sqr-btn-black { 
  @apply text-white bg-black hover:bg-gray-700 font-bold m-1 rounded flex items-center justify-center p-4 w-[60px] h-[60px];
}
.t_header {
  @apply px-5 py-3 border-b-2 border-gray-200 bg-gray-800 text-left text-xs font-semibold uppercase tracking-wider text-white
}
.pagy {
  @apply flex space-x-1 font-semibold text-sm text-gray-500;

  a:not(.gap) {
    @apply block rounded-lg px-3 py-1 bg-gray-200;

    &:hover {
      @apply bg-gray-300;
    }

    &:not([href]) {
      /* disabled links */
      @apply text-gray-300 bg-gray-100 cursor-default;
    }

    &.current {
      @apply text-white bg-gray-400;
    }
  }

  label {
    @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;

    input {
      @apply bg-gray-100 border-none rounded-md;
    }
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
.w-200 {
  width: 200px;
}

.w-300{
  width: 300px;
}

.h-300 {
  height: 300px;
}

.scrolling {
  overflow-y: scroll;
}
