:root {
      --bg: #ffffff;
      --text: #000000;
    }

    [data-theme="dark"] {
      --bg: #121212;
      --text: #ffffff;
    }

    @font-face {
      font-family: myFirstFont;
      src: url(assets/fonts/semear.ttf);
    }

    @font-face {
      font-family: myFirstFont2;
      src: url(assets/fonts/semmod.ttf);
    }

    @font-face {
      font-family: 'AtCorfu';
      /* Asigna un nombre a tu fuente */
      src: url('noto-sans.regular.ttf') format('truetype');
      font-weight: normal;
      /* Define el peso de la fuente (normal, bold, 400, 700, etc.) */
      font-style: normal;
      /* Define el estilo de la fuente (normal, italic, oblique) */
      font-display: swap;
      /* Estrategia de carga de la fuente (opcional, pero recomendada) */
    }

    .semear {
      font-family: myFirstFont !important;
    }

    .semmod {
      font-family: myFirstFont2 !important;
    }

    body {
      background-color: var(--bg);
      color: var(--text);
      font-family: AtCorfu !important;
      font-size: 18px;
    }

    .navbar {
      background-color: var(--bg) !important;
    }

    .offcanvas {
      background-color: var(--bg);
      color: var(--text);
    }

    .modal-content {
      background-color: var(--bg);
      color: var(--text);
    }

    .navbar.fixed-bottom {
      background-color: rgba(255, 255, 255, 0.7) !important;
      /* claro */
      backdrop-filter: blur(10px);
    }

    [data-theme="dark"] .navbar.fixed-bottom {
      background-color: rgba(18, 18, 18, 0.7) !important;
    }

    #searchSidebar {
      background-color: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(10px);
    }

    [data-theme="dark"] #searchSidebar {
      background-color: rgba(18, 18, 18, 0.7);
    }

    .modal-content {
      background-color: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(10px);
      border: none;
    }

    [data-theme="dark"] .modal-content {
      background-color: rgba(18, 18, 18, 0.7);
    }

    .modal-backdrop.show {
      background-color: rgba(0, 0, 0, 0.4);
    }

    #referenceRow .col-2:has(input:placeholder-shown) {
      display: none !important;
    }

    .btn-plain {
      background-color: var(--bs-body-bg) !important;
      color: var(--bs-body-color) !important;
      --bs-btn-hover-bg: var(--bs-body-bg);
      --bs-btn-active-bg: var(--bs-body-bg);
      --bs-btn-hover-color: var(--bs-body-color);
      --bs-btn-active-color: var(--bs-body-color);
      --bs-btn-hover-border-color: transparent;
      --bs-btn-active-border-color: transparent;
      box-shadow: none !important;
    }

    .select-no-arrow {
      appearance: none;
      background-image: none;
    }

    /* ESTILOS ADICIONALES */
    /* El bloque de cada palabra (el contenido entre 「 」) */
    /* Nota: Si puedes envolver cada grupo en un <span> o <div>, sería mejor. 
   Si no, este CSS trata las etiquetas personalizadas: */

    mn,
    wn,
    ko,
    tf,
    lx,
    es,
    it,
    lt,
    st,
    nt,
    ln,
    gn,
    mou,
    og {
      _display: block;
      /* Apila cada etiqueta una debajo de otra */
      font-style: normal;
    }

    /* Estilos específicos para cada nivel */
    mn {
      font-size: 1.4em;
      color: #2c3e50;
      font-weight: bold;
      order: 1;
    }

    /* Griego */
    tf {
      font-size: 0.9em;
      color: #7f8c8d;
      order: 2;
    }

    /* Transliteración */
    es {
      font-size: 1em;
      color: #2980b9;
      font-weight: 500;
      order: 3;
    }

    /* Español */
    it {
      font-size: 0.85em;
      color: #16a085;
      order: 4;
    }

    /* Inglés u otros */

    /* Ocultar metadatos técnicos (opcional) */
    wn,
    ko,
    lx,
    gn,
    ln,
    mou,
    og,
    [class^="wg"],
    [class^="wt"] {
      display: none;
    }

    /* Estilo para los corchetes de adorno si se mantienen */
    span.word-wrapper {
      border-bottom: 1px solid #ddd;
      padding-bottom: 5px;
      margin-bottom: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }