@import "tailwindcss";


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

.tox-promotion {
  display: none !important;
}

input[type="submit"], button {
  @apply cursor-pointer;
}


.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  display: inline-block;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;

  --fill: 0;
  --wght: 400;
  --grad: 0;
  --opsz: 24;

  font-variation-settings:
    "FILL" var(--fill),
    "wght" var(--wght),
    "GRAD" var(--grad),
    "opsz" var(--opsz);
}

.ms-fill-1  { --fill: 1; }
.ms-wght-300{ --wght: 300; }
.ms-wght-400{ --wght: 400; }
.ms-wght-500{ --wght: 500; }
.ms-opsz-20 { --opsz: 20; }
.ms-opsz-24 { --opsz: 24; }


/* Aplica un “mask-image” para simular el fade al final cuando está colapsado */
.collapsed-mask {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
}

@layer components {
  /* Botones de ícono reutilizables */
  .btn-icon {
    @apply inline-flex items-center justify-center rounded-md p-1 text-sm gap-1
           text-gray-600 hover:bg-gray-100 hover:text-gray-700
           focus:outline-none focus:ring-2 focus:ring-gray-500
           dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white;
    &.blue {
      @apply text-blue-600 hover:bg-blue-100 hover:text-blue-700
             focus:ring-blue-500
             dark:text-blue-400 dark:hover:bg-blue-700 dark:hover:text-white;
    }
    &.red {

      @apply text-red-500 hover:bg-red-100 hover:text-red-700
             focus:ring-red-500
             dark:text-red-400 dark:hover:bg-red-700 dark:hover:text-white;
    }
  }

  .datetime-input {
    @apply w-full rounded-md border border-gray-300 bg-gray-50 px-3 py-2 text-sm text-gray-900 shadow-sm
           transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:ring-offset-0
           dark:border-gray-600 dark:bg-gray-700 dark:text-white;
  }
}



/* Contenedor base */
  .tinymce-content {
    @apply leading-relaxed text-gray-900 dark:text-gray-100;
  }

  /* Espaciados verticales razonables entre elementos de bloque */
  .tinymce-content > * + * {
    @apply mt-4;
  }

  /* Párrafos */
  .tinymce-content p {
    @apply my-3;
  }

  /* Enlaces */
  .tinymce-content a {
    @apply underline text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300;
  }

  /* Listas: bullets y numeración restaurados + sangría */
  .tinymce-content ul,
  .tinymce-content ol {
    @apply my-4 ps-5;         /* padding-inline-start */
    list-style-position: outside;
  }
  .tinymce-content ul { @apply list-disc; }
  .tinymce-content ol { @apply list-decimal; }
  .tinymce-content li { @apply my-1; }

  /* Listas anidadas: estilos visuales distintos */
  .tinymce-content ul ul { list-style-type: circle; }
  .tinymce-content ul ul ul { list-style-type: square; }
  .tinymce-content ol ol { list-style-type: lower-alpha; }
  .tinymce-content ol ol ol { list-style-type: lower-roman; }

  /* Encabezados (tu set, con variantes dark y micro-ajustes) */
  .tinymce-content h1 {
    @apply mt-10 mb-6 text-3xl md:text-4xl font-extrabold leading-tight tracking-tight text-gray-900 dark:text-gray-100;
  }
  .tinymce-content h2 {
    @apply mt-2  mb-4 text-2xl md:text-3xl font-bold     leading-snug  tracking-tight text-gray-900 dark:text-gray-100;
  }
  .tinymce-content h3 {
    @apply mt-6  mb-3 text-xl  md:text-2xl font-semibold leading-snug               text-gray-900 dark:text-gray-100;
  }
  .tinymce-content h4 {
    @apply mt-5  mb-2 text-lg  md:text-xl  font-semibold                            text-gray-900 dark:text-gray-100;
  }
  .tinymce-content h5 {
    @apply mt-4  mb-2 text-base md:text-lg  font-semibold                            text-gray-900 dark:text-gray-100;
  }
  .tinymce-content h6 {
    @apply mt-4  mb-2 text-sm  md:text-base font-semibold uppercase tracking-wider   text-gray-700 dark:text-gray-300;
  }

  /* Evita margen superior extra si el primer hijo es heading */
  .tinymce-content > :first-child { @apply mt-0; }

  /* Mejor scroll a anclas en headers dentro de layouts con navbar fija */
  .tinymce-content h1,
  .tinymce-content h2,
  .tinymce-content h3,
  .tinymce-content h4,
  .tinymce-content h5,
  .tinymce-content h6 { @apply scroll-mt-24; }

  /* Citas */
  .tinymce-content blockquote {
    @apply my-4 ps-4 italic text-gray-700 dark:text-gray-300 border-l-4 border-gray-200 dark:border-gray-700;
  }

  /* Reglas horizontales */
  .tinymce-content hr {
    @apply my-6 border-0 h-px bg-gray-200 dark:bg-gray-700;
  }

  /* Imágenes y multimedia responsivas */
  .tinymce-content img,
  .tinymce-content video,
  .tinymce-content iframe {
    max-width: 100%;
    height: auto;
  }
  .tinymce-content figure { @apply my-4; }
  .tinymce-content figcaption { @apply mt-2 text-sm text-gray-500 dark:text-gray-400 text-center; }

  /* Código inline y bloques */
  .tinymce-content :not(pre) > code {
    @apply rounded bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 text-[0.95em] font-mono;
  }
  .tinymce-content pre {
    @apply my-4 overflow-x-auto rounded bg-gray-900 text-gray-100 p-4 text-sm;
  }
  .tinymce-content pre code {
    background: transparent;
    padding: 0;
  }

  /* Tablas básicas */
  .tinymce-content table { @apply w-full border-collapse my-4 text-sm; }
  .tinymce-content thead th {
    @apply bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200 font-semibold;
  }
  .tinymce-content th,
  .tinymce-content td {
    @apply border border-gray-200 dark:border-gray-700 px-3 py-2 align-top;
  }

  /* Super/subíndices */
  .tinymce-content sup { vertical-align: super; font-size: 0.75em; }
  .tinymce-content sub { vertical-align: sub;   font-size: 0.75em; }

  /* Alineaciones que TinyMCE suele aplicar vía style="text-align:..." */
  .tinymce-content [style*="text-align:center"]  { @apply text-center; }
  .tinymce-content [style*="text-align:right"]   { @apply text-right; }
  .tinymce-content [style*="text-align:justify"] { text-align: justify; text-justify: inter-word; }

  /* Imágenes alineadas (si usas clases de TinyMCE) */
  .tinymce-content .align-left   { @apply float-left me-4 mb-2; }
  .tinymce-content .align-right  { @apply float-right ms-4 mb-2; }
  .tinymce-content .align-center { @apply mx-auto block; }

  /* Checklists (por si activas el plugin correspondiente) */
  .tinymce-content ul.tox-checklist { @apply list-none ps-0 my-4; }
  .tinymce-content ul.tox-checklist li { @apply flex items-start gap-2 my-2; }
  .tinymce-content ul.tox-checklist input[type="checkbox"] { @apply mt-1; }

  /* Último hijo sin margen inferior extra */
  .tinymce-content > :last-child { @apply mb-0; }

  /* Degradado cuando usas el colapsable (si lo aplicas en el contenedor) */
  .collapsed-mask {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
  }