/* OmniMigrate - Admin Styles */

/* =====================================================================
   PALETA

   Todos los colores de esta hoja salen de aqui. Es lo que permite que el
   modo oscuro sea una sola lista de valores y no una copia de la hoja
   entera: cambiando estas variables cambia la pantalla completa, sin
   islas claras dentro de una pagina oscura.

   El blanco de los botones de color (color: #fff) NO esta aqui a
   proposito: texto blanco sobre azul o rojo sigue siendo blanco en los
   dos temas.
   ===================================================================== */

:root {
    --omni-superficie:   #ffffff;
    --omni-fondo:        #f0f0f1;
    --omni-suave:        #f6f7f7;

    --omni-texto:        #1d2327;
    --omni-texto-medio:  #50575e;
    --omni-texto-suave:  #646970;
    --omni-texto-tenue:  #a7aaad;

    --omni-borde:        #c3c4c7;
    --omni-borde-suave:  #e0e0e0;

    --omni-azul:         #2271b1;
    --omni-azul-fuerte:  #135e96;
    --omni-azul-suave:   #f0f6fc;
    --omni-azul-borde:   #c3d5e8;
    --omni-azul-claro:   #4dabf7;

    --omni-verde:        #00a32a;
    --omni-verde-fuerte: #008a20;
    --omni-verde-suave:  #edfaef;
    --omni-verde-borde:  #c6e8cb;
    --omni-verde-texto:  #1e4620;

    --omni-rojo:         #d63638;
    --omni-rojo-fuerte:  #b32d2e;
    --omni-rojo-claro:   #f86368;
    --omni-rojo-suave:   #fcf0f1;

    --omni-ambar-suave:  #fff8e5;
    --omni-ambar-borde:  #f0d78c;
    --omni-ambar-texto:  #8a6d00;

    /* Multiplicador de las sombras: en oscuro hay que apretarlas o no se
       distingue el relieve de las tarjetas sobre el fondo. */
    --omni-sombra: 1;
}

/* =====================================================================
   MODO OSCURO

   La clase la pone un guion minusculo en la cabecera, antes de que se
   pinte nada (ver Omni_Tema::script_previo()): si se esperara al guion
   principal habria un fogonazo blanco al entrar.

   Se oscurece TODA el area de contenido, no solo las tarjetas. Una isla
   oscura dentro de una pagina clara se ve peor que no tener modo oscuro.
   Esta hoja solo se carga en la pantalla del plugin, asi que tocar
   #wpcontent aqui no afecta a ninguna otra.
   ===================================================================== */

html.omni-oscuro {
    --omni-superficie:   #1e2430;
    --omni-fondo:        #15191f;
    --omni-suave:        #252b36;

    --omni-texto:        #e3e6ea;
    --omni-texto-medio:  #c0c6ce;
    --omni-texto-suave:  #9ba2ac;
    --omni-texto-tenue:  #7c838d;

    --omni-borde:        #3a4150;
    --omni-borde-suave:  #2f3542;

    --omni-azul:         #5aa7e8;
    --omni-azul-fuerte:  #83c0f2;
    --omni-azul-suave:   #1b2a3a;
    --omni-azul-borde:   #2f4a66;
    --omni-azul-claro:   #74b9f7;

    --omni-verde:        #3f9a55;
    --omni-verde-fuerte: #35824a;
    --omni-verde-suave:  #16291c;
    --omni-verde-borde:  #2c5035;
    --omni-verde-texto:  #9fd9ae;

    --omni-rojo:         #c0484b;
    --omni-rojo-fuerte:  #a73c3f;
    --omni-rojo-claro:   #ef8084;
    --omni-rojo-suave:   #351e20;

    --omni-ambar-suave:  #332a15;
    --omni-ambar-borde:  #5c4a20;
    --omni-ambar-texto:  #dcbb58;

    --omni-sombra: 2.6;

    /* Que el navegador pinte en oscuro lo que dibuja el: casillas, barras de
       desplazamiento y el desplegable abierto de un <select>. Sin esto las
       casillas salen blancas sobre fondo oscuro. */
    color-scheme: dark;
}

/* El azul de los textos y los bordes tiene que ser claro para leerse sobre
   el fondo; el de los botones, al reves: lleva texto blanco encima y
   necesita ser mas fuerte o el blanco no contrasta. */
html.omni-oscuro .omni-btn-primary,
html.omni-oscuro .omni-version,
html.omni-oscuro .omni-progress-fill {
    background: #2b7fc4;
}

html.omni-oscuro .omni-btn-primary:hover {
    background: #3a8fd4;
}

html.omni-oscuro #wpcontent,
html.omni-oscuro #wpbody,
html.omni-oscuro #wpbody-content,
html.omni-oscuro #wpfooter {
    background: var(--omni-fondo);
}

/* Los avisos propios de WordPress (notice-warning, notice-error) traen su
   fondo blanco de serie. */
html.omni-oscuro .omni-wrap .notice {
    background: var(--omni-superficie);
    color: var(--omni-texto);
}

html.omni-oscuro .omni-wrap .notice code,
html.omni-oscuro .omni-wrap code {
    background: var(--omni-suave);
    color: var(--omni-texto-medio);
}

/* =====================================================================
   LAYOUT
   ===================================================================== */

.omni-wrap {
    max-width: 1100px;
    margin: 20px auto 40px;
    padding: 0 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.omni-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.omni-header h1 {
    font-size: 28px;
    font-weight: 600;
    margin: 0;
    color: var(--omni-texto);
}

.omni-version {
    display: inline-block;
    background: var(--omni-azul);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
    line-height: 1.6;
}

.omni-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

@media (max-width: 782px) {
    .omni-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   CARDS
   ===================================================================== */

.omni-card {
    background: var(--omni-superficie);
    border: 1px solid var(--omni-borde-suave);
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, calc(0.04 * var(--omni-sombra)));
}

.omni-card h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--omni-texto);
}

/* =====================================================================
   BUTTONS
   ===================================================================== */

.omni-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}

.omni-btn:hover {
    opacity: 0.9;
}

.omni-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.omni-btn-primary {
    background: var(--omni-azul);
    color: #fff;
}

.omni-btn-primary:hover {
    background: var(--omni-azul-fuerte);
    color: #fff;
}

.omni-btn-danger {
    background: var(--omni-rojo);
    color: #fff;
}

.omni-btn-danger:hover {
    background: var(--omni-rojo-fuerte);
    color: #fff;
}

.omni-btn-success {
    background: var(--omni-verde);
    color: #fff;
}

.omni-btn-success:hover {
    background: var(--omni-verde-fuerte);
    color: #fff;
}

.omni-btn-sm {
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 4px;
}

.omni-btn-secondary {
    background: var(--omni-suave);
    color: var(--omni-texto);
    box-shadow: inset 0 0 0 1px var(--omni-borde);
}

.omni-btn-secondary:hover {
    background: var(--omni-fondo);
    color: var(--omni-texto);
    box-shadow: inset 0 0 0 1px var(--omni-borde);
}

.omni-btn:focus {
    outline: none;
}

.omni-btn:focus-visible,
.omni-upload-area:focus-visible,
.omni-log-toggle:focus-visible {
    outline: 2px solid var(--omni-azul);
    outline-offset: 2px;
}

.omni-btn-danger:focus-visible {
    outline-color: var(--omni-rojo);
}

/* =====================================================================
   EXPORT OPTIONS (checkboxes)
   ===================================================================== */

.omni-export-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.omni-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--omni-texto-medio);
    cursor: pointer;
}

.omni-checkbox input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* =====================================================================
   SETTINGS
   ===================================================================== */

.omni-settings-card {
    margin-bottom: 24px;
}

/* Rejilla de campos: etiqueta a la izquierda, control a la derecha, todas alineadas.
   Antes cada fila era un flex suelto y las etiquetas bailaban segun lo que midiera cada
   control. */
.omni-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.omni-field {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 4px 16px;
    align-items: start;
}

.omni-field-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--omni-texto);
    /* Alineada con la primera linea del control, no con el centro de todo el bloque. */
    padding-top: 6px;
}

.omni-field-control {
    min-width: 0;
}

.omni-field-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.omni-field-between,
.omni-field-suffix {
    font-size: 13px;
    color: var(--omni-texto-suave);
}

.omni-field-help {
    font-size: 12px;
    color: var(--omni-texto-suave);
    line-height: 1.5;
    margin: 6px 0 0;
}

/* Controles. El ancho lo pide el contenido: con los 70px fijos de antes, «Every week» salia
   cortado a «Every…» en el desplegable de frecuencia. */
/* Altura, radio y foco iguales para todo: un numero, un correo y un
   desplegable puestos en la misma linea tienen que medir lo mismo.

   Cuelgan de .omni-wrap a proposito: el panel trae
   input[type=number]{background-color:#fff} y sin esa clase de mas ganaba
   WordPress, con lo que en modo oscuro el campo salia blanco. */
.omni-wrap .omni-input,
.omni-wrap .omni-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    height: 40px;
    min-height: 40px;
    font-size: 13.5px;
    line-height: 1.4;
    font-family: inherit;
    font-weight: 500;
    color: var(--omni-texto);
    border: 1px solid var(--omni-borde);
    border-radius: 10px;
    background-color: var(--omni-superficie);
    padding: 0 14px;
    margin: 0;
    max-width: 100%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, calc(0.04 * var(--omni-sombra)));
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

.omni-wrap .omni-input::placeholder {
    color: var(--omni-texto-tenue);
    font-weight: 400;
}

/* El numerito de un input[type=number] con sus flechas queda apretado y
   cada navegador las dibuja distinto. */
.omni-wrap .omni-input-num::-webkit-outer-spin-button,
.omni-wrap .omni-input-num::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.omni-wrap .omni-input-num {
    -moz-appearance: textfield;
}

/* La flecha, dibujada aqui: la de serie cambia de un navegador a otro y en
   oscuro algunas salen negras sobre negro. El gris funciona en los dos
   temas, asi que no hace falta una version por tema. */
.omni-wrap .omni-select {
    padding-right: 36px;
    min-width: 150px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238b9198' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    cursor: pointer;
}

/* Los anchos concretos tambien cuelgan de .omni-wrap: si no, la regla
   general de arriba (que lleva esa clase de mas para ganarle al panel)
   les ganaria a ellos y los tres desplegables medirian 150 px, con lo que
   la hora se salia de la tarjeta. */
.omni-wrap .omni-select-corto {
    min-width: 100px;
}

.omni-wrap .omni-select-day {
    min-width: 124px;
}

.omni-wrap .omni-select-hour {
    min-width: 112px;
}

.omni-wrap .omni-input-num {
    width: 88px;
    text-align: center;
}

.omni-wrap .omni-input-wide {
    width: 100%;
    max-width: 320px;
}

/* El color va declarado a proposito: el panel trae
   .wp-core-ui select:hover{color:#1e1e1e} y, al no decir nosotros nada del
   color en :hover, el texto se volvia casi negro sobre el fondo oscuro. */
.omni-wrap .omni-input:hover,
.omni-wrap .omni-select:hover {
    border-color: var(--omni-texto-tenue);
    color: var(--omni-texto);
}

/* Anillo en vez de borde grueso: no mueve nada de sitio al enfocar. El
   panel pone aqui su propio box-shadow de 1.5 px, de ahi la especificidad. */
.omni-wrap .omni-input:focus,
.omni-wrap .omni-select:focus {
    border-color: var(--omni-azul);
    outline: 2px solid transparent;
    box-shadow: 0 0 0 3px var(--omni-azul-suave);
}

/* =====================================================================
   CASILLAS

   Dibujadas aqui y no las del navegador: las de serie son diminutas, cada
   navegador las pinta distinto y en oscuro dependian de color-scheme.
   ===================================================================== */

/* Cuadradas. El alto y el ancho van fijados por arriba y por abajo porque
   el panel les pone height:1rem / width:1rem / min-width:1rem y, dentro de
   un contenedor flex, cualquiera de esas puede deformarlas. */
.omni-wrap input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    flex: 0 0 18px;
    width: 18px;
    min-width: 18px;
    max-width: 18px;
    height: 18px;
    min-height: 18px;
    max-height: 18px;
    line-height: 1;
    margin: 0;
    padding: 0;
    border: 1px solid var(--omni-borde);
    border-radius: 4px;
    background-color: var(--omni-superficie);
    background-image: none;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    transition: background-color .15s, border-color .15s;
}

/* LA MARCA DE WORDPRESS, FUERA. El panel pinta la suya en ::before con un
   SVG; con la nuestra en ::after, la casilla salia con dos marcas. */
.omni-wrap input[type="checkbox"]::before,
.omni-wrap input[type="checkbox"]:checked::before {
    content: none;
    display: none;
}

.omni-wrap input[type="checkbox"]:hover:not(:disabled) {
    border-color: var(--omni-azul);
}

/* La marca es un dibujo centrado, no dos bordes girados: asi no se recorta
   por mucho que cambie el tamaño de la casilla o el grosor del borde. En
   blanco, que va encima del azul en los dos temas. */
.omni-wrap input[type="checkbox"]:checked {
    background-color: var(--omni-azul);
    border-color: var(--omni-azul);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3.1 3.1L12.8 5' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px 13px;
}

.omni-wrap input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--omni-azul-suave);
}

.omni-wrap input[type="checkbox"]:disabled {
    opacity: .5;
    cursor: default;
}


.omni-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--omni-texto-medio);
    background: var(--omni-superficie);
    border: 1px solid var(--omni-borde);
    border-radius: 999px;
    padding: 5px 12px 5px 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s, opacity .15s;
}

.omni-chip:hover {
    border-color: var(--omni-azul);
    color: var(--omni-texto);
}

.omni-chip input[type="checkbox"] {
    margin: 0;
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.omni-chip:has(input:checked) {
    border-color: var(--omni-azul);
    background: var(--omni-azul-suave);
    color: var(--omni-texto);
}

.omni-chip.is-off {
    opacity: .45;
    cursor: default;
}





/* Frecuencia en «Nunca»: lo de debajo no hace nada, y se nota. El desplegable se queda
   entero, que es lo que hay que poder cambiar para volver a encenderlo. */

/* Cuando toca la proxima copia. */
.omni-next {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--omni-verde-suave);
    border: 1px solid var(--omni-verde-borde);
    font-size: 12.5px;
    color: var(--omni-verde-texto);
}

.omni-next[hidden] {
    display: none;
}

.omni-next-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--omni-verde);
    flex: 0 0 auto;
}

/* La explicacion larga del cron, plegada: estaba ocupando media tarjeta para algo que se lee
   una vez. */
.omni-help {
    margin-top: 16px;
    font-size: 12px;
}

.omni-help > summary {
    cursor: pointer;
    color: var(--omni-azul);
    font-weight: 500;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.omni-help > summary::-webkit-details-marker {
    display: none;
}

.omni-help > summary::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform .15s;
}

.omni-help[open] > summary::before {
    transform: rotate(90deg);
}

.omni-help p {
    margin: 8px 0 0;
    color: var(--omni-texto-suave);
    line-height: 1.6;
}

.omni-help code {
    font-size: 11px;
    background: var(--omni-fondo);
    padding: 1px 5px;
    border-radius: 3px;
    word-break: break-all;
}

/* Guardar, separado de los campos. */
.omni-settings-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--omni-fondo);
}

/* Movil y pantallas estrechas: la etiqueta encima del control. */
@media (max-width: 782px) {
    .omni-field {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .omni-field-label {
        padding-top: 0;
    }

    .omni-input-wide {
        width: 100%;
    }
}

.omni-settings-feedback {
    font-size: 12px;
    color: var(--omni-verde);
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s;
}

.omni-settings-feedback.visible {
    opacity: 1;
}

/* =====================================================================
   UPLOAD AREA
   ===================================================================== */

.omni-upload-area {
    border: 2px dashed var(--omni-borde);
    border-radius: 8px;
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    color: var(--omni-texto-suave);
}

.omni-upload-area:hover,
.omni-upload-area.dragover {
    border-color: var(--omni-azul);
    background: var(--omni-azul-suave);
}

.omni-upload-area svg {
    color: var(--omni-borde);
    margin-bottom: 8px;
}

.omni-upload-area p {
    margin: 4px 0;
    font-size: 13px;
}

.omni-upload-area p strong {
    color: var(--omni-texto);
}

/* =====================================================================
   FILE INFO
   ===================================================================== */

.omni-file-info {
    display: none;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--omni-azul-suave);
    border: 1px solid var(--omni-azul-borde);
    border-radius: 6px;
}

.omni-file-info.visible {
    display: flex;
}

.omni-file-info .name {
    font-weight: 600;
    font-size: 13px;
    color: var(--omni-texto);
    word-break: break-all;
}

.omni-file-info .size {
    font-size: 12px;
    color: var(--omni-texto-suave);
}

/* =====================================================================
   TABLE
   ===================================================================== */

.omni-table-wrap {
    background: var(--omni-superficie);
    border: 1px solid var(--omni-borde-suave);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, calc(0.04 * var(--omni-sombra)));
    /* En pantallas estrechas la tabla se desplaza dentro de la tarjeta en vez de ensanchar
       toda la pagina (eso descentraba los modales en el movil). */
    overflow-x: auto;
}

@media (max-width: 600px) {
    .omni-table-wrap {
        padding: 16px;
    }

    .omni-table td:first-child {
        min-width: 180px;
        overflow-wrap: anywhere;
    }
}

.omni-table-header {
    margin-bottom: 16px;
}

.omni-table-header h2 {
    display: flex;
    align-items: center;
    /* Sin esto el icono quedaba pegado al texto, al reves que en las otras tarjetas. */
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--omni-texto);
}

.omni-badge {
    display: inline-block;
    background: var(--omni-fondo);
    color: var(--omni-texto-medio);
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
    margin-left: 8px;
}

.omni-badge-size {
    background: var(--omni-azul-suave);
    color: var(--omni-azul);
}

.omni-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.omni-table thead th {
    text-align: left;
    padding: 10px 12px;
    font-weight: 600;
    color: var(--omni-texto);
    border-bottom: 2px solid var(--omni-borde-suave);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.omni-table tbody td {
    padding: 12px;
    border-bottom: 1px solid var(--omni-fondo);
    color: var(--omni-texto-medio);
    vertical-align: middle;
}

/* El reparto del ancho: el nombre se lleva todo lo que sobre y las otras tres se encogen
   a lo que miden, sin romperse de linea. El 100% / 1% es el truco de siempre, y solo
   funciona si las celdas son celdas: los botones van dentro de un div porque una celda
   con display:flex se sale del reparto de la tabla y cada fila la medía por su cuenta. De
   ahi venia que los botones de una fila no cayeran a plomo con los de las otras. */
.omni-table .omni-col-file {
    width: 100%;
}

.omni-table .omni-col-size,
.omni-table .omni-col-date,
.omni-table .omni-col-actions {
    width: 1%;
    white-space: nowrap;
}

/* El tamano va dentro de una pastilla con su propio relleno. La cabecera SIZE llevaba
   el relleno de la celda y nada mas, asi que quedaba a la izquierda del numero en vez
   de encima: se le suma el de la pastilla. */
.omni-table td .omni-badge {
    margin-left: 0;
}

.omni-table thead th.omni-col-size {
    padding-left: 22px;
}

.omni-table tbody tr:last-child td {
    border-bottom: none;
}

.omni-table tbody tr:hover {
    background: var(--omni-suave);
}

.omni-table .actions {
    display: flex;
    gap: 6px;
    align-items: center;
    /* Sin romper de linea: es lo que permite que la columna se ajuste a los botones en
       vez de apilarlos. En pantalla estrecha la tarjeta ya se desplaza de lado. */
    flex-wrap: nowrap;
}

/* Etiqueta junto al nombre del archivo: dice de un vistazo que esa copia es solo de la
   base de datos, lo mismo que marca el "-db-" del nombre. */
.omni-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    /* Sin esto la etiqueta mide 22 px dentro de una linea de 18 y estira la fila. */
    line-height: 1;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
    cursor: help;
}

.omni-tag-db {
    background: var(--omni-ambar-suave);
    color: var(--omni-ambar-texto);
    border: 1px solid var(--omni-ambar-borde);
}

.omni-empty {
    text-align: center;
    color: var(--omni-texto-tenue);
    padding: 24px 12px !important;
    font-style: italic;
}

/* =====================================================================
   LOG SECTION
   ===================================================================== */

.omni-log-section {
    margin-bottom: 24px;
}

.omni-log-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    color: var(--omni-azul);
    background: var(--omni-superficie);
    border: 1px solid var(--omni-borde);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.omni-log-toggle:hover {
    border-color: var(--omni-azul);
    color: var(--omni-azul-fuerte);
}

.omni-log-content {
    display: none;
    margin-top: 12px;
    background: var(--omni-superficie);
    border: 1px solid var(--omni-borde-suave);
    border-radius: 8px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, calc(0.04 * var(--omni-sombra)));
}

.omni-log-content.visible {
    display: block;
}

.omni-log-content h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 20px 0 8px;
    color: var(--omni-texto);
}

.omni-log-content h3:first-child {
    margin-top: 0;
}

.omni-log-content pre {
    background: var(--omni-suave);
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.6;
    overflow-x: auto;
    max-height: 200px;
    overflow-y: auto;
    margin: 0;
    color: var(--omni-texto-medio);
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* =====================================================================
   PROGRESS OVERLAY
   ===================================================================== */

.omni-progress-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, calc(0.5 * var(--omni-sombra)));
    z-index: 100000;
    /* La caja se centra con margin:auto: si no cabe (movil en horizontal con un mensaje de
       error largo) la ventana se desplaza en vez de cortarla por arriba y por abajo. */
    overflow-y: auto;
    padding: 16px;
    box-sizing: border-box;
}

.omni-progress-overlay.visible {
    display: flex;
}

.omni-progress-box {
    margin: auto;
    background: var(--omni-superficie);
    border-radius: 12px;
    padding: 40px 48px;
    text-align: center;
    min-width: 380px;
    max-width: 500px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, calc(0.15 * var(--omni-sombra)));
}

@media (max-width: 600px) {
    .omni-progress-box {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
        padding: 32px 20px;
    }
}

/* Pantallas bajas (movil en horizontal): menos relleno para que quepan los botones. */
@media (max-height: 480px) {
    .omni-progress-box {
        padding: 20px 24px;
    }
}

/* =====================================================================
   SPINNER
   ===================================================================== */

.omni-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--omni-borde-suave);
    border-top-color: var(--omni-azul);
    border-radius: 50%;
    animation: omni-spin 0.8s linear infinite;
    margin: 0 auto 20px;
}

@keyframes omni-spin {
    to { transform: rotate(360deg); }
}

.omni-spinner-done {
    border-color: var(--omni-verde) !important;
    border-top-color: var(--omni-verde) !important;
    animation: none !important;
    position: relative;
}

.omni-spinner-done::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: var(--omni-verde);
    font-weight: bold;
}

.omni-spinner-error {
    border-color: var(--omni-rojo) !important;
    border-top-color: var(--omni-rojo) !important;
    animation: none !important;
    position: relative;
}

.omni-spinner-error::after {
    content: '\2717';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: var(--omni-rojo);
    font-weight: bold;
}

/* =====================================================================
   PROGRESS BAR
   ===================================================================== */

.omni-progress-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--omni-texto);
    margin-bottom: 8px;
}

.omni-progress-detail {
    font-size: 13px;
    color: var(--omni-texto-suave);
    margin-bottom: 16px;
    min-height: 20px;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.omni-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--omni-borde-suave);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.omni-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--omni-azul), var(--omni-azul-claro));
    border-radius: 4px;
    transition: width 0.3s ease;
    width: 0%;
}

.omni-progress-percent {
    font-size: 14px;
    font-weight: 600;
    color: var(--omni-texto-medio);
}

/* =====================================================================
   ANIMATIONS
   ===================================================================== */

@keyframes fadeIn {
    from { opacity: 0; background: var(--omni-azul-suave); }
    to { opacity: 1; background: transparent; }
}

/* =====================================================================
   MODALES (confirmaciones y avisos propios del plugin)
   ===================================================================== */

body.omni-modal-open {
    overflow: hidden;
}

.omni-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    /* Ancho de la pantalla visible, aunque algun contenido ensanche la pagina. */
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    z-index: 100050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(29, 35, 39, 0.55);
    opacity: 0;
    transition: opacity 0.18s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.omni-modal-backdrop.is-open {
    opacity: 1;
}

.omni-modal {
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: var(--omni-superficie);
    border-radius: 12px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, calc(0.22 * var(--omni-sombra))), 0 2px 6px rgba(0, 0, 0, calc(0.08 * var(--omni-sombra)));
    transform: translateY(10px) scale(0.98);
    transition: transform 0.18s ease;
}

.omni-modal-backdrop.is-open .omni-modal {
    transform: none;
}

.omni-modal::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--omni-azul), var(--omni-azul-claro));
}

.omni-modal--danger::before {
    background: linear-gradient(90deg, var(--omni-rojo), var(--omni-rojo-claro));
}

.omni-modal-body {
    display: flex;
    gap: 16px;
    padding: 24px 28px 8px;
}

.omni-modal-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--omni-azul-suave);
    color: var(--omni-azul);
}

.omni-modal--danger .omni-modal-icon {
    background: var(--omni-rojo-suave);
    color: var(--omni-rojo);
}

.omni-modal--success .omni-modal-icon {
    background: var(--omni-verde-suave);
    color: var(--omni-verde);
}

.omni-modal-content {
    flex: 1;
    min-width: 0;
}

.omni-modal-title {
    margin: 2px 0 10px;
    padding: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--omni-texto);
}

.omni-modal-text p {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--omni-texto-medio);
}

.omni-modal-file {
    display: inline-block;
    max-width: 100%;
    padding: 1px 6px;
    font-family: Consolas, Monaco, monospace;
    font-size: 12px;
    color: var(--omni-texto);
    background: var(--omni-suave);
    border: 1px solid var(--omni-borde-suave);
    border-radius: 4px;
    overflow-wrap: anywhere;
    vertical-align: baseline;
}

.omni-modal-warning {
    margin: 4px 0 6px;
    padding: 8px 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--omni-ambar-texto);
    background: var(--omni-ambar-suave);
    border: 1px solid var(--omni-ambar-borde);
    border-radius: 6px;
}

.omni-modal-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0 4px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--omni-texto);
    background: var(--omni-suave);
    border-radius: 6px;
    cursor: pointer;
}

.omni-modal-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
    cursor: pointer;
}

.omni-modal-choice {
    margin: 12px 0 4px;
    padding: 0;
    border: 0;
    min-width: 0;
}

.omni-modal-choice legend {
    margin: 0 0 6px;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--omni-texto);
}

.omni-modal-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 6px;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--omni-texto);
    border: 1px solid var(--omni-borde);
    border-radius: 6px;
    cursor: pointer;
}

.omni-modal-option:has(input:checked) {
    border-color: var(--omni-azul);
    background: var(--omni-azul-suave);
}

.omni-modal-option input[type="radio"] {
    flex: 0 0 auto;
    margin: 2px 0 0;
    cursor: pointer;
}

.omni-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 28px 22px;
}

.omni-modal-actions .omni-btn {
    min-width: 96px;
    justify-content: center;
}

@media (max-width: 600px) {
    .omni-modal-body {
        flex-direction: column;
        gap: 12px;
        padding: 20px 20px 4px;
    }

    .omni-modal-actions {
        flex-direction: column-reverse;
        padding: 14px 20px 20px;
    }

    .omni-modal-actions .omni-btn {
        width: 100%;
    }
}

/* =====================================================================
   AVISO FLOTANTE (toast)
   ===================================================================== */

.omni-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 100060;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 48px);
    padding: 12px 18px 12px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    background: var(--omni-texto);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, calc(0.2 * var(--omni-sombra)));
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.omni-toast.is-visible {
    opacity: 1;
    transform: none;
}

.omni-toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--omni-verde);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .omni-modal-backdrop,
    .omni-modal,
    .omni-toast,
    .omni-progress-fill {
        transition: none;
    }
}

/* =====================================================================
   AJUSTES 2.2.0 (revision)
   ===================================================================== */

/* La ventana de progreso cuelga de <body> (fuera de .omni-wrap): misma tipografia. */
.omni-progress-overlay {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Recibe el foco al abrirse (para lectores de pantalla y teclado), sin marco. */
.omni-progress-box:focus {
    outline: none;
}

/* Usuario que puede exportar pero no restaurar. */
.omni-no-import {
    margin: 0;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--omni-texto-medio);
    background: var(--omni-suave);
    border: 1px dashed var(--omni-borde);
    border-radius: 6px;
}

/* Reintentar deshacer (tras un fallo al revertir una importacion), junto a Cerrar. */
#omni-progress-retry {
    margin: 20px 8px 0 0;
}

/* Aviso de que los registros van siempre en ingles. */
.omni-log-note {
	margin: 0 0 14px;
	font-size: 12px;
	color: var(--omni-texto-suave);
	font-style: italic;
}
.omni-settings-note {
	font-size: 12px;
	color: var(--omni-texto-suave);
	line-height: 1.6;
	margin: 6px 0 0;
}
.omni-settings-note code {
	font-size: 11px;
	background: var(--omni-fondo);
	padding: 1px 5px;
	border-radius: 3px;
}

/* Solo la base de datos: se destaca porque cambia lo que hace la copia */
.omni-checkbox-destacado {
	margin-top: 4px;
	padding-top: 10px;
	border-top: 1px solid var(--omni-borde-suave);
}

/* =====================================================================
   CABECERA: titulo a la izquierda, tema a la derecha
   ===================================================================== */

.omni-header-logo {
    /* El icono lleva sus propios colores, no hereda ninguno: aqui solo se evita que el
       flex de la cabecera lo encoja. */
    flex: 0 0 auto;
}

/* Empuja el selector de tema al extremo derecho. */
.omni-version {
    margin-right: auto;
}

/* Los tres botones del tema, pegados en un grupo, como en un sistema
   operativo: se ven los tres y el elegido queda marcado. */
.omni-tema {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--omni-suave);
    border: 1px solid var(--omni-borde);
    border-radius: 999px;
}

.omni-tema-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--omni-texto-suave);
    cursor: pointer;
    transition: background .15s, color .15s;
}

.omni-tema-boton:hover {
    color: var(--omni-texto);
}

.omni-tema-boton[aria-pressed="true"] {
    background: var(--omni-superficie);
    color: var(--omni-azul);
    box-shadow: 0 1px 2px rgba(0, 0, 0, calc(0.12 * var(--omni-sombra)));
}

.omni-tema-boton:focus-visible {
    outline: 2px solid var(--omni-azul);
    outline-offset: 1px;
}

/* =====================================================================
   AJUSTES A DOS COLUMNAS
   ===================================================================== */

.omni-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 32px;
}

/* La programacion lleva linea a la izquierda para que se vea que es otro
   bloque, no la continuacion del de al lado. */
.omni-col-sched {
    border-left: 1px solid var(--omni-borde-suave);
    padding-left: 32px;
}

.omni-col-title {
    margin: 0 0 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--omni-texto-suave);
}

.omni-col .omni-field + .omni-field {
    margin-top: 18px;
}

/* En dos columnas hay menos sitio: la etiqueta se estrecha para que al
   control y a su explicacion les quede ancho de sobra. */
.omni-col .omni-field {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 4px 14px;
}


.omni-sched-fields {
    margin-top: 18px;
    transition: opacity .15s;
}

/* Apagadas: los campos siguen ahi (para no perder lo que haya puesto)
   pero se ve que no van a usarse. */
.omni-col-sched.is-off .omni-sched-fields,
.omni-col-sched.is-off .omni-help {
    opacity: .45;
    pointer-events: none;
}

@media (max-width: 960px) {
    .omni-cols {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .omni-col-sched {
        border-left: 0;
        border-top: 1px solid var(--omni-borde-suave);
        padding-left: 0;
        padding-top: 26px;
    }
}

/* =====================================================================
   INTERRUPTOR
   ===================================================================== */

.omni-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.omni-switch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.omni-switch-track {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: var(--omni-borde);
    transition: background .18s;
    flex: 0 0 auto;
}

.omni-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--omni-superficie);
    box-shadow: 0 1px 2px rgba(0, 0, 0, calc(0.25 * var(--omni-sombra)));
    transition: transform .18s;
}

.omni-switch input:checked + .omni-switch-track {
    background: var(--omni-verde);
}

.omni-switch input:checked + .omni-switch-track .omni-switch-thumb {
    transform: translateX(16px);
}

.omni-switch input:focus-visible + .omni-switch-track {
    outline: 2px solid var(--omni-azul);
    outline-offset: 2px;
}

.omni-switch-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--omni-texto);
}

/* =====================================================================
   DETALLES DE LAS TARJETAS
   ===================================================================== */

.omni-card-sub {
    color: var(--omni-texto-suave);
    font-size: 13px;
    margin: 0 0 16px;
}

.omni-notice {
    margin: 0 0 16px;
}

.omni-kept-list {
    margin: 0 0 10px 18px;
    list-style: disc;
}

.omni-kept-list li {
    margin: 4px 0;
}

.omni-kept-list .omni-btn {
    margin-left: 8px;
}

.omni-import-note {
    color: var(--omni-ambar-texto);
    background: var(--omni-ambar-suave);
    border: 1px solid var(--omni-ambar-borde);
    border-radius: 6px;
    font-size: 12.5px;
    padding: 8px 10px;
    margin: -8px 0 16px;
}

.omni-only-db-nota {
    margin: -8px 0 12px;
}

/* «Solo la base de datos» cambia lo que es la copia: se marca mas. */
.omni-chip-fuerte {
    font-weight: 600;
    color: var(--omni-texto);
}

/* El pie de los ajustes: Guardar a la izquierda, la proxima copia a la
   derecha, que es donde se mira despues de guardar. */
.omni-settings-footer {
    justify-content: flex-start;
}

.omni-settings-footer .omni-next {
    margin: 0 0 0 auto;
}

[hidden] {
    display: none !important;
}

/* =====================================================================
   AJUSTES: retoques del bloque a dos columnas
   ===================================================================== */

/* El titulo de la columna y su interruptor, en la misma linea. */
.omni-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    min-height: 24px;
}

.omni-col-head .omni-col-title {
    margin: 0;
}

/* «Every [Week] [Friday] at [5:00 am]» en una sola linea. */
.omni-sched-cuando {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

/* Las exclusiones son cuatro: de dos en dos, en dos lineas. */
.omni-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.omni-chip {
    border-radius: 8px;
    padding: 7px 12px;
}

/* Las casillas de Exportar, con el aire que piden al ser mayores. */
.omni-export-options {
    gap: 11px;
}

/* Mismo radio que los campos. */
.omni-btn {
    border-radius: 8px;
}

@media (max-width: 1200px) {
    /* Sin sitio para los tres desplegables seguidos, la hora salta sola. */
    .omni-sched-cuando {
        flex-wrap: wrap;
    }
}

@media (max-width: 600px) {
    .omni-chips {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* =====================================================================
   POR ENCIMA DEL PANEL

   Reglas que existen solo para ganarle a las del propio WordPress, que
   son mas especificas de lo que parece. Sin ellas, esta pantalla se ve
   bien en una prueba suelta y mal dentro del panel.
   ===================================================================== */

/* El texto de un boton de color es blanco SIEMPRE. El panel pone color
   azul en a:focus y a:active, y al pulsar «Eliminar» y cancelar el boton
   se quedaba con el texto azul sobre el rojo. */
.omni-wrap .omni-btn-primary,
.omni-wrap .omni-btn-primary:hover,
.omni-wrap .omni-btn-primary:focus,
.omni-wrap .omni-btn-primary:active,
.omni-wrap .omni-btn-primary:visited,
.omni-wrap .omni-btn-success,
.omni-wrap .omni-btn-success:hover,
.omni-wrap .omni-btn-success:focus,
.omni-wrap .omni-btn-success:active,
.omni-wrap .omni-btn-success:visited,
.omni-wrap .omni-btn-danger,
.omni-wrap .omni-btn-danger:hover,
.omni-wrap .omni-btn-danger:focus,
.omni-wrap .omni-btn-danger:active,
.omni-wrap .omni-btn-danger:visited,
.omni-modal .omni-btn-primary,
.omni-modal .omni-btn-primary:hover,
.omni-modal .omni-btn-primary:focus,
.omni-modal .omni-btn-primary:active,
.omni-modal .omni-btn-success,
.omni-modal .omni-btn-success:hover,
.omni-modal .omni-btn-success:focus,
.omni-modal .omni-btn-success:active,
.omni-modal .omni-btn-danger,
.omni-modal .omni-btn-danger:hover,
.omni-modal .omni-btn-danger:focus,
.omni-modal .omni-btn-danger:active {
    color: #fff;
}

/* Y el foco, el nuestro: un anillo del color del propio boton, no el azul
   del panel sobre un boton rojo. */
.omni-wrap .omni-btn:focus,
.omni-modal .omni-btn:focus {
    outline: 2px solid transparent;
    outline-offset: 0;
    box-shadow: 0 0 0 3px var(--omni-azul-suave);
}

.omni-wrap .omni-btn-danger:focus,
.omni-modal .omni-btn-danger:focus {
    box-shadow: 0 0 0 3px var(--omni-rojo-suave);
}

.omni-wrap .omni-btn-success:focus,
.omni-modal .omni-btn-success:focus {
    box-shadow: 0 0 0 3px var(--omni-verde-suave);
}

/* El secundario lleva texto oscuro: ahi el blanco no valdria. */
.omni-modal .omni-btn-secondary,
.omni-modal .omni-btn-secondary:hover,
.omni-modal .omni-btn-secondary:focus,
.omni-modal .omni-btn-secondary:active {
    color: var(--omni-texto);
}

/* Las casillas del panel traen margenes negativos para encajar en sus
   propias listas. */
.omni-wrap .omni-checkbox input[type="checkbox"],
.omni-wrap .omni-chip input[type="checkbox"],
.omni-wrap .omni-modal-check input[type="checkbox"] {
    margin: 0;
}

/* Y un hueco mas visible entre los campos de una misma columna. */
.omni-col .omni-field + .omni-field {
    margin-top: 22px;
}

/* Los avisos del panel: el color lo pone .notice p, no .notice, asi que
   ponerlo en el contenedor no bastaba y el aviso de nginx salia en negro
   sobre fondo oscuro. */
html.omni-oscuro .omni-wrap .notice p,
html.omni-oscuro .omni-wrap .notice li,
html.omni-oscuro .omni-wrap .notice .notice-title,
html.omni-oscuro .omni-wrap div.error p,
html.omni-oscuro .omni-wrap div.updated p {
    color: var(--omni-texto);
}

/* El aviso de importar lleva su propio color ambar, que si se lee. */
html.omni-oscuro .omni-wrap .omni-import-note,
html.omni-oscuro .omni-wrap .omni-import-note strong {
    color: var(--omni-ambar-texto);
}

/* =====================================================================
   EL COLOR DE LOS CAMPOS, EN TODOS LOS ESTADOS

   El panel repite color:#1e1e1e en cada estado del <select> (normal, hover
   y focus). Declararlo solo en uno deja los demas en manos de WordPress, y
   el texto se volvia negro sobre fondo oscuro al enfocar, o al desplegar la
   lista y sacar el raton fuera.
   ===================================================================== */

.omni-wrap .omni-input,
.omni-wrap .omni-input:hover,
.omni-wrap .omni-input:focus,
.omni-wrap .omni-input:active,
.omni-wrap .omni-input:focus:hover,
.omni-wrap .omni-input:active:hover,
.omni-wrap .omni-select,
.omni-wrap .omni-select:hover,
.omni-wrap .omni-select:focus,
.omni-wrap .omni-select:active,
.omni-wrap .omni-select:focus:hover,
.omni-wrap .omni-select:active:hover,
.omni-wrap .omni-select:focus-visible {
    color: var(--omni-texto);
}

/* Lo mismo con el borde: el panel lo oscurece en :hover y lo devuelve a su
   gris en :active, y se veia el salto. */
.omni-wrap .omni-select:active,
.omni-wrap .omni-select:focus:hover,
.omni-wrap .omni-select:active:hover {
    border-color: var(--omni-azul);
    box-shadow: 0 0 0 3px var(--omni-azul-suave);
}

/* La lista desplegada la dibuja el sistema operativo, no el navegador: lo
   unico que se puede pedir es que use los colores que toquen. */
.omni-wrap .omni-select option {
    color: var(--omni-texto);
    background-color: var(--omni-superficie);
}