/* ========================================================= */
/* HUMIDI-TEC - TEMA GLOBAL                                  */
/* ========================================================= */

/*
    Este archivo SIEMPRE debe cargarse después de:
    - site.css
    - CSS de cada página

    Así puede corregir colores específicos cuando
    HUMIDI-TEC utiliza modo oscuro.
*/


/* ========================================================= */
/* MODO CLARO                                                */
/* ========================================================= */

html[data-theme="light"] {
    color-scheme: light;
}


/* ========================================================= */
/* MODO OSCURO - PALETA                                      */
/* ========================================================= */

html[data-theme="dark"] {
    color-scheme: dark;

    /*
        Fondos
    */

    --background: #081d16;

    --surface: #102a20;

    --surface-soft: #143429;

    --surface-hover: #193e31;

    --surface-elevated: #18392d;


    /*
        Textos
    */

    --text-primary: #f2fbf6;

    --text-secondary: #c7ddd2;

    --text-muted: #9eb9ac;


    /*
        Bordes
    */

    --border: #2a5846;

    --border-soft: #214536;


    /*
        Verdes adaptados
        para fondo oscuro
    */

    --green-950: #f2fbf6;

    --green-900: #d8f1e3;

    --green-800: #9bdfb9;

    --green-700: #64d894;

    --green-600: #3bc979;

    --green-500: #28b96b;

    --green-400: #68daa0;

    --green-100: #234b39;

    --green-50: #173528;


    /*
        Azules
    */

    --blue-600: #78b9ee;

    --blue-500: #69ace5;

    --blue-100: #244c67;

    --blue-50: #19394d;


    /*
        Teal
    */

    --teal-600: #64cbc5;

    --teal-50: #173f3b;


    /*
        Sombras
    */

    --shadow-small:
        0 5px 16px rgba(0, 0, 0, .24);

    --shadow-medium:
        0 12px 32px rgba(0, 0, 0, .32);
}


/* ========================================================= */
/* FONDO GENERAL                                             */
/* ========================================================= */

html[data-theme="dark"],
html[data-theme="dark"] body {
    background: var(--background);

    color: var(--text-primary);
}


html[data-theme="dark"] :is(
    .system-shell,
    .system-layout,
    .main-content,
    .content-wrapper
) {
    background: var(--background);

    color: var(--text-primary);
}


/* ========================================================= */
/* HEADER                                                    */
/* ========================================================= */

html[data-theme="dark"] .system-header {
    background:
        linear-gradient(
            135deg,
            #043d27 0%,
            #075333 62%,
            #08653d 100%
        );

    border-bottom-color:
        rgba(255, 255, 255, .08);
}


html[data-theme="dark"] .brand-information strong {
    color: #ffffff;
}


html[data-theme="dark"] .brand-subtitle {
    color: #d8eee2;
}


/* ========================================================= */
/* SIDEBAR                                                   */
/* ========================================================= */

html[data-theme="dark"] .sidebar {
    background: #0d271d;

    border-right-color: var(--border);
}


html[data-theme="dark"] .sidebar-inner {
    background: transparent;
}


html[data-theme="dark"] .sidebar-heading,
html[data-theme="dark"] .sidebar-heading span {
    color: #91b3a2;
}


html[data-theme="dark"] .sidebar-item {
    color: #c5d9cf;
}


html[data-theme="dark"] .sidebar-item:not(.active):hover {
    color: #ffffff;

    background: #183a2d;
}


html[data-theme="dark"] .sidebar-item.active {
    color: #ffffff;

    background: #087443;
}


html[data-theme="dark"] .sidebar-item-icon {
    color: inherit;
}


/* ========================================================= */
/* ENCABEZADOS DE PÁGINA                                     */
/* ========================================================= */

html[data-theme="dark"] :is(
    .home-header h1,
    .plants-heading h1,
    .plantas-header h1,
    .riego-header h1,
    .historial-header h1,
    .devices-header h1,
    .config-page-header h1
) {
    color: #ffffff;
}


html[data-theme="dark"] :is(
    .home-header p,
    .plants-heading p,
    .plantas-header p,
    .riego-header p,
    .historial-header p,
    .devices-header p,
    .config-page-header p
) {
    color: var(--text-secondary);

    opacity: 1;
}


/* ========================================================= */
/* ETIQUETAS VERDES                                          */
/* ========================================================= */

html[data-theme="dark"] :is(
    .home-section-label,
    .plantas-section-label,
    .plants-section-label,
    .riego-label,
    .riego-section-label,
    .devices-label,
    .config-page-label,
    .config-content-header > span,
    .history-detail-label,
    .plants-dialog-label,
    .wizard-step-name
) {
    color: #48ce82;
}


/* ========================================================= */
/* TEXTOS GENERALES                                          */
/* ========================================================= */

html[data-theme="dark"] :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6
) {
    color: #ffffff;
}


html[data-theme="dark"] strong {
    color: var(--text-primary);
}


html[data-theme="dark"] p {
    color: var(--text-secondary);
}


html[data-theme="dark"] small {
    color: var(--text-muted);
}


html[data-theme="dark"] label {
    color: var(--text-secondary);
}


/* ========================================================= */
/* TARJETAS GENERALES                                        */
/* ========================================================= */

html[data-theme="dark"] :is(
    .home-status,
    .plants-card,
    .plantas-status,
    .riego-system-card,
    .riego-plant-top,
    .riego-plant-card,
    .automatic-simple-card,
    .manual-card,
    .historial-card,
    .overview-card,
    .system-status-card,
    .devices-table-wrapper,
    .config-shell,
    .config-content,
    .config-option-list
) {
    color: var(--text-primary);

    background: var(--surface);

    border-color: var(--border);

    box-shadow: var(--shadow-small);
}


/* ========================================================= */
/* INICIO                                                    */
/* ========================================================= */

html[data-theme="dark"] .home-status {
    background:
        linear-gradient(
            135deg,
            #123326,
            #102b21
        );
}


html[data-theme="dark"] .home-status-text span {
    color: #44cd80;
}


html[data-theme="dark"] .home-status-text strong {
    color: #ffffff;
}


html[data-theme="dark"] .home-status-text p {
    color: #d5e9df;
}


html[data-theme="dark"] .status-mini {
    border-color: var(--border);
}


html[data-theme="dark"] .status-mini small {
    color: #c8ded3;
}


html[data-theme="dark"] .status-mini strong {
    color: #ffffff;
}


/* ========================================================= */
/* INICIO - TABLA PLANTAS                                    */
/* ========================================================= */

html[data-theme="dark"] .plants-card {
    background: #102a20;
}


html[data-theme="dark"] .plants-table-header {
    color: #abc8ba;

    background: #0e271e;

    border-color: var(--border);
}


html[data-theme="dark"] .plants-table-header span {
    color: #abc8ba;
}


html[data-theme="dark"] .plants-empty-state {
    color: var(--text-secondary);
}


html[data-theme="dark"] .plants-empty-state strong {
    color: #ffffff;
}


html[data-theme="dark"] .plants-empty-state span {
    color: #adc6ba;

    opacity: 1;
}


/* ========================================================= */
/* INICIO - SISTEMA DE RIEGO                                 */
/* ========================================================= */

html[data-theme="dark"] .irrigation-card {
    background: #102a20;

    border-color: var(--border);
}


html[data-theme="dark"] .irrigation-item {
    border-color: var(--border);
}


html[data-theme="dark"] .irrigation-item span,
html[data-theme="dark"] .irrigation-state span {
    color: var(--text-secondary);
}


html[data-theme="dark"] .irrigation-item strong,
html[data-theme="dark"] .irrigation-state strong {
    color: #ffffff;
}


/* ========================================================= */
/* BOTONES CLAROS                                            */
/* ========================================================= */

html[data-theme="dark"] :is(
    .section-link,
    .riego-last-summary-link,
    .plants-guide-button
) {
    color: #63d996;

    background: #17392d;

    border-color: #346850;
}


html[data-theme="dark"] :is(
    .section-link,
    .riego-last-summary-link,
    .plants-guide-button
):hover {
    color: #ffffff;

    background: #1e4938;

    border-color: #4b8668;
}


/* ========================================================= */
/* PLANTAS                                                   */
/* ========================================================= */

html[data-theme="dark"] .plantas-status {
    background:
        linear-gradient(
            135deg,
            #123326,
            #102a20
        );
}


html[data-theme="dark"] .plant-summary-row {
    background: var(--surface);

    border-color: var(--border-soft);
}


html[data-theme="dark"] .plant-summary-row:hover {
    background: var(--surface-hover);
}


html[data-theme="dark"] .plants-toolbar {
    background: var(--surface);

    border-color: var(--border);
}


html[data-theme="dark"] .plants-empty {
    color: var(--text-secondary);

    background: #0e271e;
}


/* ========================================================= */
/* RIEGO - CONTENEDORES                                      */
/* ========================================================= */

html[data-theme="dark"] .riego-system-card {
    background:
        linear-gradient(
            135deg,
            #123426,
            #102b21
        );
}


html[data-theme="dark"] .riego-plant-top {
    background: #102a20;
}


html[data-theme="dark"] .riego-plant-card {
    background: #102a20;
}


html[data-theme="dark"] .automatic-simple-card {
    background: #102a20;
}


html[data-theme="dark"] .manual-card {
    background: #102a20;
}


/* ========================================================= */
/* RIEGO - SELECTOR                                          */
/* ========================================================= */

html[data-theme="dark"] .riego-plant-selector {
    color: var(--text-primary);
}


html[data-theme="dark"] .riego-select-wrap select {
    color: #eaf7f0;

    background: #143428;

    border-color: #315e4a;
}


html[data-theme="dark"] .riego-select-wrap select:disabled {
    color: #a5bdb1;

    background: #123026;
}


html[data-theme="dark"] .riego-select-icon {
    color: #16412f;

    background: #d4eee1;
}


/* ========================================================= */
/* RIEGO - ÚLTIMO RIEGO                                      */
/* ========================================================= */

html[data-theme="dark"] .riego-last-summary {
    border-color: var(--border);
}


html[data-theme="dark"] .riego-last-summary-copy span {
    color: #9fb9ad;
}


html[data-theme="dark"] .riego-last-summary-copy strong {
    color: #ffffff;
}


html[data-theme="dark"] .riego-last-summary-copy small {
    color: #c4d9cf;
}


/* ========================================================= */
/* RIEGO - PLANTA SELECCIONADA                               */
/* ========================================================= */

html[data-theme="dark"] .riego-plant-label {
    color: #77b394;
}


html[data-theme="dark"] #selectedPlantName {
    color: #ffffff;
}


html[data-theme="dark"] #selectedPlantMeta {
    color: #c3d9ce;
}


/* ========================================================= */
/* RIEGO - MÉTRICAS                                          */
/* ========================================================= */

/*
    En modo claro estas tarjetas son pastel.
    En oscuro usamos versiones oscuras de esos colores.
*/

html[data-theme="dark"] .riego-metric {
    border: 1px solid var(--border);
}


/* HUMEDAD */

html[data-theme="dark"] .riego-metric.humidity {
    background: #173847;

    border-color: #2c6075;
}

html[data-theme="dark"] .riego-metric.humidity span,
html[data-theme="dark"] .riego-metric.humidity strong {
    color: #e6f7ff;
}

html[data-theme="dark"] .riego-metric.humidity small {
    color: #afd0df;
}


/* INICIO DE RIEGO */

html[data-theme="dark"] .riego-metric.start {
    background: #40351a;

    border-color: #756029;
}

html[data-theme="dark"] .riego-metric.start span,
html[data-theme="dark"] .riego-metric.start strong {
    color: #fff3c7;
}

html[data-theme="dark"] .riego-metric.start small {
    color: #d9c887;
}


/* OBJETIVO */

html[data-theme="dark"] .riego-metric.target {
    background: #203b2c;

    border-color: #3d6a4d;
}

html[data-theme="dark"] .riego-metric.target span,
html[data-theme="dark"] .riego-metric.target strong {
    color: #e9f8ee;
}

html[data-theme="dark"] .riego-metric.target small {
    color: #b3d2be;
}


/* BATERÍA */

html[data-theme="dark"] .riego-metric.battery {
    background: #263933;

    border-color: #49635a;
}

html[data-theme="dark"] .riego-metric.battery span,
html[data-theme="dark"] .riego-metric.battery strong {
    color: #edf7f2;
}

html[data-theme="dark"] .riego-metric.battery small {
    color: #b9ccc3;
}


/* ========================================================= */
/* RIEGO - ESTADO PLANTA                                     */
/* ========================================================= */

html[data-theme="dark"] .riego-plant-status {
    color: #dcebe4;

    background: #1b382d;

    border-color: #3b6553;
}


html[data-theme="dark"] .riego-plant-status strong {
    color: #eaf5ef;
}


/* ========================================================= */
/* RIEGO AUTOMÁTICO                                          */
/* ========================================================= */

html[data-theme="dark"] .automatic-simple-copy p {
    color: #c7ddd2;
}


html[data-theme="dark"] .automatic-simple-control {
    background: #17392d;

    border-color: #315f4b;
}


html[data-theme="dark"] #automaticSwitchLabel {
    color: #c0d7cb;
}


/* Estado grande inferior */

html[data-theme="dark"] .automatic-simple-status {
    color: #dcebe4;

    background: #1a392e;

    border: 1px solid #345f4d;
}


html[data-theme="dark"] .automatic-simple-status strong {
    color: #e8f6ef;
}


/* Antes era casi blanco */

html[data-theme="dark"] .automatic-simple-status.disabled {
    color: #b5cabf;

    background: #183229;

    border-color: #304f43;
}


html[data-theme="dark"] .automatic-simple-status.disabled strong {
    color: #c8dcd1;
}


/* ========================================================= */
/* SWITCH AUTOMÁTICO                                         */
/* ========================================================= */

html[data-theme="dark"] .automatic-switch {
    background: #6f8e81;

    border-color: #7fa093;
}


html[data-theme="dark"] .automatic-switch.active {
    background: #24ad69;

    border-color: #4ac486;
}


html[data-theme="dark"] .automatic-switch:disabled {
    opacity: .75;
}


/* ========================================================= */
/* RIEGO MANUAL                                              */
/* ========================================================= */

html[data-theme="dark"] .manual-info {
    color: var(--text-primary);
}


html[data-theme="dark"] .manual-info strong {
    color: #ffffff;
}


html[data-theme="dark"] .manual-info p {
    color: #c3d8ce;
}


html[data-theme="dark"] .manual-info-icon {
    color: #7bd3dc;

    background: #183e43;
}


/* BOTÓN MANUAL */

html[data-theme="dark"] .btn-iniciar-riego {
    color: #ffffff;

    background: #087443;

    border-color: #129056;
}


html[data-theme="dark"] .btn-iniciar-riego:hover:not(:disabled) {
    background: #129056;
}


html[data-theme="dark"] .btn-iniciar-riego:disabled {
    color: #9ec8b2;

    background: #17583e;

    border-color: #286c50;

    opacity: .72;
}


/* ========================================================= */
/* AVISO SEGURIDAD                                           */
/* ========================================================= */

html[data-theme="dark"] .manual-safety {
    color: #f6dfa1;

    background: #40351b;

    border-color: #715d2b;
}


html[data-theme="dark"] .manual-safety span {
    color: #f6dfa1;
}


html[data-theme="dark"] .manual-safety svg {
    color: #e4bc51;
}


/* ========================================================= */
/* HISTORIAL                                                 */
/* ========================================================= */

html[data-theme="dark"] .overview-card,
html[data-theme="dark"] .historial-card {
    background: var(--surface);

    border-color: var(--border);
}


html[data-theme="dark"] .overview-card strong {
    color: #ffffff;
}


html[data-theme="dark"] .overview-stat {
    border-color: var(--border);
}


html[data-theme="dark"] .overview-stat strong {
    color: #e9f6ef;
}


html[data-theme="dark"] .latest-content strong {
    color: #ffffff;
}


html[data-theme="dark"] .latest-content p {
    color: #c5d9cf;
}


html[data-theme="dark"] .historial-empty {
    background: #0f291f;
}


html[data-theme="dark"] .historial-empty strong {
    color: #ffffff;
}


html[data-theme="dark"] .historial-empty p {
    color: #abc4b8;
}


html[data-theme="dark"] .historial-footer {
    color: #9fb8ac;

    border-color: var(--border);
}


/* ========================================================= */
/* DISPOSITIVOS                                              */
/* ========================================================= */

html[data-theme="dark"] .system-status-card {
    background:
        linear-gradient(
            135deg,
            #123426,
            #102b21
        );
}


html[data-theme="dark"] .system-status-copy h2 {
    color: #ffffff;
}


html[data-theme="dark"] .system-status-copy p {
    color: #c8ddd3;
}


html[data-theme="dark"] .system-summary-item span {
    color: #9fb9ac;
}


html[data-theme="dark"] .system-summary-item strong {
    color: #ffffff;
}


html[data-theme="dark"] .devices-overview {
    color: var(--text-primary);

    background: #102a20;

    border-color: var(--border);
}


html[data-theme="dark"] .devices-overview-item span {
    color: #b7cec2;
}


html[data-theme="dark"] .devices-overview-item strong {
    color: #ffffff;
}


html[data-theme="dark"] .devices-toolbar {
    background: var(--surface);

    border-color: var(--border);
}


html[data-theme="dark"] .devices-table-wrapper {
    background: var(--surface);

    border-color: var(--border);
}


html[data-theme="dark"] .devices-empty {
    color: var(--text-secondary);

    background: #0f291f;
}


html[data-theme="dark"] .devices-empty strong {
    color: #ffffff;
}


/* ========================================================= */
/* TABLAS                                                    */
/* ========================================================= */

html[data-theme="dark"] table {
    color: var(--text-primary);

    background: var(--surface);
}


html[data-theme="dark"] thead {
    background: #0f281f;
}


html[data-theme="dark"] th {
    color: #a8c4b6;

    background: #0f281f;

    border-color: var(--border);
}


html[data-theme="dark"] td {
    color: #e8f4ee;

    background: var(--surface);

    border-color: var(--border-soft);
}


html[data-theme="dark"] tbody tr:hover td {
    background: var(--surface-hover);
}


/* ========================================================= */
/* INPUTS                                                    */
/* ========================================================= */

html[data-theme="dark"] :is(
    input,
    select,
    textarea
) {
    color: #edf8f2;

    background: #123127;

    border-color: #315f4b;
}


html[data-theme="dark"] :is(
    input,
    textarea
)::placeholder {
    color: #8eaa9c;

    opacity: 1;
}


html[data-theme="dark"] select option {
    color: #edf8f2;

    background: #123127;
}


html[data-theme="dark"] :is(
    input,
    select,
    textarea
):focus {
    border-color: #51ca88;

    box-shadow:
        0 0 0 3px rgba(81, 202, 136, .15);
}


html[data-theme="dark"] :is(
    input,
    select,
    textarea
):disabled {
    color: #a1b9ad;

    background: #10281f;

    border-color: #294c3e;

    opacity: 1;
}


/* ========================================================= */
/* CONFIGURACIÓN                                             */
/* ========================================================= */

html[data-theme="dark"] .config-shell {
    background: var(--surface);
}


html[data-theme="dark"] .config-navigation {
    background: #0f291f;

    border-color: var(--border);
}


html[data-theme="dark"] .config-content {
    background: var(--surface);
}


html[data-theme="dark"] .config-nav-item {
    color: #bfd4c9;
}


html[data-theme="dark"] .config-nav-item:hover {
    color: #ffffff;

    background: #193b2e;
}


html[data-theme="dark"] .config-nav-item.active {
    color: #ffffff;

    background: #087443;
}


html[data-theme="dark"] .config-nav-icon {
    color: #64d894;

    background: #18382c;
}


html[data-theme="dark"] .config-nav-item.active
.config-nav-icon {
    color: #087443;

    background: #ffffff;
}


html[data-theme="dark"] .config-content-header h2 {
    color: #ffffff;
}


html[data-theme="dark"] .config-content-header p {
    color: #c6dbd0;

    opacity: 1;
}


html[data-theme="dark"] .config-option-list {
    background: #102a20;

    border-color: var(--border);
}


html[data-theme="dark"] .config-option-row {
    background: #102a20;

    border-color: var(--border-soft);
}


html[data-theme="dark"] .config-option-row:hover {
    background: #17382c;
}


html[data-theme="dark"] .config-option-copy strong {
    color: #ffffff;
}


html[data-theme="dark"] .config-option-copy span {
    color: #bed4c9;

    opacity: 1;
}


html[data-theme="dark"] .config-content-footer {
    border-color: var(--border);
}


/* ========================================================= */
/* SWITCH CONFIGURACIÓN                                      */
/* ========================================================= */

html[data-theme="dark"] .config-switch-slider {
    background: #527064;

    border-color: #708d81;
}


html[data-theme="dark"]
.config-switch input:checked +
.config-switch-slider {
    background: #24ad69;

    border-color: #54ca8d;
}


/* ========================================================= */
/* BOTÓN GUARDAR                                             */
/* ========================================================= */

html[data-theme="dark"] .config-save-button {
    color: #ffffff;

    background: #129056;

    border-color: #24ad69;
}


html[data-theme="dark"]
.config-save-button:hover:not(:disabled) {
    background: #24ad69;

    border-color: #54ca8d;
}


html[data-theme="dark"]
.config-save-button:disabled {
    color: #a9c9b8;

    background: #285442;

    border-color: #386b55;

    opacity: .72;
}


/* ========================================================= */
/* MENSAJE CONFIGURACIÓN                                     */
/* ========================================================= */

html[data-theme="dark"] .config-message {
    color: #dbf3e5;

    background: #17412f;

    border-color: #32795a;
}


/* ========================================================= */
/* DIÁLOGOS                                                  */
/* ========================================================= */

html[data-theme="dark"] dialog {
    color: var(--text-primary);

    background: #102a20;

    border-color: var(--border);
}


html[data-theme="dark"] dialog::backdrop {
    background:
        rgba(2, 12, 8, .76);
}


html[data-theme="dark"] :is(
    .plants-dialog-header,
    .device-dialog-header,
    .history-detail-header
) {
    background: #102a20;

    border-color: var(--border);
}


/* ========================================================= */
/* ESTADOS VACÍOS                                            */
/* ========================================================= */

html[data-theme="dark"] :is(
    .plants-empty,
    .historial-empty,
    .devices-empty
) {
    color: var(--text-secondary);

    background: #0f291f;
}


/* ========================================================= */
/* ICONOS CON FONDO CLARO                                    */
/* ========================================================= */

html[data-theme="dark"] :is(
    .plants-empty-icon,
    .historial-empty-icon,
    .devices-empty-icon
) {
    color: #63d996;

    background: #173a2c;
}


/* ========================================================= */
/* SCROLLBAR                                                 */
/* ========================================================= */

html[data-theme="dark"] {
    scrollbar-color:
        #416b58
        #0b2118;
}


/* ========================================================= */
/* TRANSICIÓN                                                */
/* ========================================================= */

body,
.main-content,
.sidebar,
.config-shell,
.config-content,
.config-navigation,
.config-option-list,
.config-option-row,
.home-status,
.plants-card,
.riego-system-card,
.riego-plant-card,
.automatic-simple-card,
.manual-card,
.historial-card,
.overview-card,
.system-status-card {
    transition:
        background-color .18s ease,
        color .18s ease,
        border-color .18s ease;
}

/* ========================================================= */
/* CATÁLOGO / GUÍA DE PERFILES - MODO OSCURO                 */
/* ========================================================= */


/* ========================================================= */
/* PÁGINA                                                     */
/* ========================================================= */

html[data-theme="dark"] .profile-guide-page {
    color: var(--text-primary);
}


/* ========================================================= */
/* VOLVER                                                     */
/* ========================================================= */

html[data-theme="dark"] .profile-back-link {
    color: #63d996;
}

html[data-theme="dark"] .profile-back-link:hover {
    color: #8ee8b4;
}


/* ========================================================= */
/* ENCABEZADO                                                 */
/* ========================================================= */

html[data-theme="dark"] .profile-guide-label {
    color: #4fd486;
}

html[data-theme="dark"] .profile-guide-header h1 {
    color: #ffffff;
}

html[data-theme="dark"] .profile-guide-header p {
    color: #c5d9cf;
}


/* ========================================================= */
/* EXPLICACIÓN SUPERIOR                                       */
/* ========================================================= */

html[data-theme="dark"] .profile-explanation {
    background:
        linear-gradient(
            135deg,
            #15382b,
            #102e24
        );

    border-color: #315f4b;
}

html[data-theme="dark"] .profile-explanation-icon {
    color: #ffffff;

    background: #129056;
}

html[data-theme="dark"] .profile-explanation strong {
    color: #ffffff;
}

html[data-theme="dark"] .profile-explanation p {
    color: #bcd5c9;
}


/* ========================================================= */
/* TARJETAS BASE                                              */
/* ========================================================= */

html[data-theme="dark"] .profile-guide-card {
    background: #102a20;

    border-color: #315746;

    box-shadow:
        0 7px 20px rgba(0, 0, 0, .24);
}


/* ========================================================= */
/* TARJETA DESÉRTICA                                         */
/* ========================================================= */

html[data-theme="dark"]
.profile-guide-card.desertica {
    background:
        linear-gradient(
            180deg,
            #2e2819 0%,
            #17281f 100%
        );

    border-color: #755f29;
}

html[data-theme="dark"]
.profile-guide-card.desertica::before {
    background: #d2a329;
}

html[data-theme="dark"]
.desertica .profile-number {
    color: #ffe9a7;

    background: #4b3b18;

    border-color: #8d702d;
}


/* ========================================================= */
/* TARJETA NORMAL                                            */
/* ========================================================= */

html[data-theme="dark"]
.profile-guide-card.normal {
    background:
        linear-gradient(
            180deg,
            #14372a 0%,
            #102a20 100%
        );

    border-color: #337455;
}

html[data-theme="dark"]
.profile-guide-card.normal::before {
    background: #2ab673;
}

html[data-theme="dark"]
.normal .profile-number {
    color: #dcf7e8;

    background: #1b5038;

    border-color: #3f8b63;
}


/* ========================================================= */
/* TARJETA TROPICAL                                          */
/* ========================================================= */

html[data-theme="dark"]
.profile-guide-card.tropical {
    background:
        linear-gradient(
            180deg,
            #123a39 0%,
            #102a25 100%
        );

    border-color: #297b79;
}

html[data-theme="dark"]
.profile-guide-card.tropical::before {
    background: #2aa8a3;
}

html[data-theme="dark"]
.tropical .profile-number {
    color: #dff9f6;

    background: #195754;

    border-color: #388985;
}


/* ========================================================= */
/* PARTE SUPERIOR DE TARJETAS                                */
/* ========================================================= */

html[data-theme="dark"] .profile-water-level {
    color: #c3d8ce;
}

html[data-theme="dark"] .profile-card-top h2 {
    color: #ffffff;
}


/* ========================================================= */
/* DESCRIPCIÓN                                                */
/* ========================================================= */

html[data-theme="dark"] .profile-description {
    color: #b9d0c4;
}


/* ========================================================= */
/* ESCALA DE HUMEDAD                                          */
/* ========================================================= */

html[data-theme="dark"] .profile-scale-track {
    background: #29473b;
}

html[data-theme="dark"] .scale-label {
    color: #a9c2b6;
}


/* DESÉRTICA */

html[data-theme="dark"]
.desertica .profile-scale-fill {
    background: #d2a329;
}


/* NORMAL */

html[data-theme="dark"]
.normal .profile-scale-fill {
    background: #2ab673;
}


/* TROPICAL */

html[data-theme="dark"]
.tropical .profile-scale-fill {
    background: #2aa8a3;
}


/* ========================================================= */
/* VALORES                                                    */
/* ========================================================= */

html[data-theme="dark"] .profile-values {
    border-top-color: #315244;
}

html[data-theme="dark"] .profile-value {
    border-bottom-color: #315244;
}

html[data-theme="dark"] .profile-value span {
    color: #c4d8ce;
}

html[data-theme="dark"] .profile-value strong {
    color: #ffffff;
}


/* ========================================================= */
/* RECOMENDACIÓN                                              */
/* ========================================================= */

html[data-theme="dark"] .profile-recommendation {
    color: #d3e6dc;
}

html[data-theme="dark"] .profile-recommendation svg {
    color: #5ed892;
}

html[data-theme="dark"] .profile-recommendation span {
    color: #d3e6dc;
}


/* ========================================================= */
/* AYUDA FINAL                                                */
/* ========================================================= */

html[data-theme="dark"] .profile-help-card {
    background:
        linear-gradient(
            135deg,
            #15382b,
            #102e24
        );

    border-color: #315f4b;
}

html[data-theme="dark"] .profile-help-icon {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #087443,
            #129056
        );
}

html[data-theme="dark"] .profile-help-main strong {
    color: #ffffff;
}

html[data-theme="dark"] .profile-help-main p {
    color: #bfd7cb;
}


/* ========================================================= */
/* BOTÓN PRINCIPAL                                            */
/* ========================================================= */

html[data-theme="dark"] .profile-main-action {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #087443,
            #129056
        );

    border: 1px solid #24ad69;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, .22);
}

html[data-theme="dark"] .profile-main-action:hover {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #129056,
            #24ad69
        );
}


/* ========================================================= */
/* FOCUS                                                      */
/* ========================================================= */

html[data-theme="dark"]
.profile-guide-page :focus-visible {
    outline-color: #78b9ee;
}

/* =========================================================
   HUMIDI-TEC
   DROPDOWNS PERSONALIZADOS - MODO OSCURO
========================================================= */


/* =========================================================
   BOTÓN / CAMPO CERRADO
========================================================= */

html[data-theme="dark"]
.ht-select-trigger {
    color:
        var(--text-primary);

    background:
        #123127;

    border-color:
        #315f4b;

    box-shadow:
        none;
}


/* HOVER */

html[data-theme="dark"]
.ht-select-trigger:hover {
    color:
        #ffffff;

    background:
        #17382c;

    border-color:
        #4b8668;
}


/* ABIERTO */

html[data-theme="dark"]
.ht-select.is-open
.ht-select-trigger {
    color:
        #ffffff;

    background:
        #17382c;

    border-color:
        #51ca88;

    box-shadow:
        0 0 0 3px
        rgba(81, 202, 136, 0.14);
}


/* =========================================================
   TEXTO DEL VALOR
========================================================= */

html[data-theme="dark"]
.ht-select-value {
    color:
        inherit;
}


/* =========================================================
   FLECHA
========================================================= */

html[data-theme="dark"]
.ht-select-arrow {
    color:
        #64d894;

    background:
        transparent;
}


html[data-theme="dark"]
.ht-select-trigger:hover
.ht-select-arrow {
    color:
        #7be2a6;
}


html[data-theme="dark"]
.ht-select.is-open
.ht-select-arrow {
    color:
        #7be2a6;

    background:
        rgba(100, 216, 148, 0.10);
}


/* =========================================================
   MENÚ DESPLEGADO
========================================================= */

html[data-theme="dark"]
.ht-select-menu {
    color:
        var(--text-primary);

    background:
        #102a20;

    border-color:
        #315f4b;

    box-shadow:
        0 14px 34px
        rgba(0, 0, 0, 0.34);
}


/* =========================================================
   OPCIONES
========================================================= */

html[data-theme="dark"]
.ht-select-option {
    color:
        #d8ebe1;

    background:
        transparent;
}


/* HOVER DE OPCIÓN */

html[data-theme="dark"]
.ht-select-option:hover,
html[data-theme="dark"]
.ht-select-option:focus-visible {
    color:
        #ffffff;

    background:
        #193e31;
}


/* OPCIÓN ACTUAL */

html[data-theme="dark"]
.ht-select-option.is-selected {
    color:
        #ffffff;

    background:
        #087443;

    font-weight:
        800;
}


html[data-theme="dark"]
.ht-select-option.is-selected:hover {
    color:
        #ffffff;

    background:
        #129056;
}


/* =========================================================
   SELECT DESHABILITADO
========================================================= */

html[data-theme="dark"]
.ht-select.is-disabled
.ht-select-trigger {
    color:
        #91aa9e;

    background:
        #10281f;

    border-color:
        #294c3e;

    opacity:
        1;
}


/* =========================================================
   SCROLL DEL MENÚ
========================================================= */

html[data-theme="dark"]
.ht-select-menu::-webkit-scrollbar-track {
    background:
        #102a20;
}


html[data-theme="dark"]
.ht-select-menu::-webkit-scrollbar-thumb {
    background:
        #416b58;

    border-radius:
        10px;
}


html[data-theme="dark"]
.ht-select-menu::-webkit-scrollbar-thumb:hover {
    background:
        #56836f;
}

/* =========================================================
   PLANTAS - ESTADOS EN MODO OSCURO
========================================================= */

/* NECESITA RIEGO */

html[data-theme="dark"]
.plant-summary-row.warning
.plant-summary-condition strong {
    color: #f0c94d !important;
}

html[data-theme="dark"]
.plant-summary-row.warning
.condition-dot {
    background: #e0b514 !important;

    box-shadow:
        0 0 0 4px
        rgba(224, 181, 20, 0.16) !important;
}


/* HUMEDAD ADECUADA */

html[data-theme="dark"]
.plant-summary-row.good
.plant-summary-condition strong {
    color: #64d894 !important;
}

html[data-theme="dark"]
.plant-summary-row.good
.condition-dot {
    background: #3bc979 !important;

    box-shadow:
        0 0 0 4px
        rgba(59, 201, 121, 0.14) !important;
}


/* SIN LECTURA */

html[data-theme="dark"]
.plant-summary-row.offline
.plant-summary-condition strong {
    color: #b2c9bd !important;
}

html[data-theme="dark"]
.plant-summary-row.offline
.condition-dot {
    background: #789488 !important;

    box-shadow:
        0 0 0 4px
        rgba(120, 148, 136, 0.14) !important;
}

/* =========================================================
   INICIO - ESTADO DE PLANTAS EN MODO OSCURO
========================================================= */

/* NECESITA RIEGO */

html[data-theme="dark"]
.home-plant-status.needs-water {
    color: #f0c94d !important;

    background: #3b3217 !important;

    border: 1px solid #6f5d24 !important;
}

html[data-theme="dark"]
.home-plant-status.needs-water
.home-plant-status-dot {
    background: #e0b514 !important;
}


/* HUMEDAD ADECUADA */

html[data-theme="dark"]
.home-plant-status.good {
    color: #64d894 !important;

    background: #17392d !important;

    border: 1px solid #346850 !important;
}

html[data-theme="dark"]
.home-plant-status.good
.home-plant-status-dot {
    background: #3bc979 !important;
}


/* SIN LECTURA / SIN PERFIL */

html[data-theme="dark"]
.home-plant-status.no-reading,
html[data-theme="dark"]
.home-plant-status.no-profile {
    color: #b7cec2 !important;

    background: #183229 !important;

    border: 1px solid #304f43 !important;
}

html[data-theme="dark"]
.home-plant-status.no-reading
.home-plant-status-dot,
html[data-theme="dark"]
.home-plant-status.no-profile
.home-plant-status-dot {
    background: #789488 !important;
}



/* =========================================================
   INICIO - SISTEMA DE RIEGO - MODO OSCURO
========================================================= */

html[data-theme="dark"]
.irrigation-item-icon {
    color: #64d894 !important;

    background: #17392d !important;

    border: 1px solid #346850 !important;
}


/* MODO */

html[data-theme="dark"]
.irrigation-item-icon.mode {
    color: #7bd3dc !important;

    background: #183e43 !important;

    border-color: #2f6870 !important;
}


/* BOMBA */

html[data-theme="dark"]
.irrigation-item-icon.pump {
    color: #64d894 !important;

    background: #17392d !important;

    border-color: #346850 !important;
}


/* TEXTOS */

html[data-theme="dark"]
.irrigation-item small {
    color: #b7cec2 !important;
}

html[data-theme="dark"]
.irrigation-item strong {
    color: #ffffff !important;
}

/* =========================================================
   PLANTAS - PIE / PAGINACIÓN - MODO OSCURO
========================================================= */

html[data-theme="dark"]
.plants-pagination {
    color: #c7ddd2 !important;

    background: #102a20 !important;

    border-top-color: #2a5846 !important;
}

html[data-theme="dark"]
.plants-pagination nav > span {
    color: #d8f1e3 !important;
}

html[data-theme="dark"]
.plants-pagination button {
    color: #64d894 !important;

    background: #17392d !important;

    border-color: #346850 !important;
}

html[data-theme="dark"]
.plants-pagination button:hover:not(:disabled) {
    color: #ffffff !important;

    background: #087443 !important;

    border-color: #129056 !important;
}

html[data-theme="dark"]
.plants-pagination button:disabled {
    color: #789488 !important;

    background: #10281f !important;

    border-color: #294c3e !important;
}

/* =========================================================
   DISPOSITIVOS - ASISTENTE - BOTONES MODO OSCURO
========================================================= */

/* BOTÓN CERRAR */

html[data-theme="dark"]
.device-dialog-close {
    color: #b7cec2 !important;

    background: #17392d !important;

    border: 1px solid #346850 !important;
}

html[data-theme="dark"]
.device-dialog-close:hover {
    color: #ffffff !important;

    background: #1e4938 !important;

    border-color: #4b8668 !important;
}


/* BOTÓN / ICONO GRANDE DE BÚSQUEDA */

html[data-theme="dark"]
.device-search-icon,
html[data-theme="dark"]
.device-search-button {
    color: #dff9f6 !important;

    background: #195754 !important;

    border-color: #388985 !important;
}


/* BOTÓN "BUSCAR DE NUEVO" */

html[data-theme="dark"]
.search-device-button,
html[data-theme="dark"]
.device-retry-button,
html[data-theme="dark"]
#searchDeviceButton {
    color: #ffffff !important;

    background: #087443 !important;

    border-color: #129056 !important;

    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, 0.18) !important;
}

html[data-theme="dark"]
.search-device-button:hover,
html[data-theme="dark"]
.device-retry-button:hover,
html[data-theme="dark"]
#searchDeviceButton:hover {
    background: #129056 !important;

    border-color: #24ad69 !important;
}

/* =========================================================
   DISPOSITIVOS - WIZARD - BOTONES MODO OSCURO
========================================================= */

html[data-theme="dark"]
.wizard-primary-button {
    color: #ffffff !important;

    background: #087443 !important;

    border: 1px solid #129056 !important;

    box-shadow:
        0 5px 14px
        rgba(0, 0, 0, 0.22) !important;
}

html[data-theme="dark"]
.wizard-primary-button:hover:not(:disabled) {
    background: #129056 !important;

    border-color: #24ad69 !important;
}

html[data-theme="dark"]
.wizard-primary-button:active:not(:disabled) {
    background: #075f39 !important;

    transform: translateY(1px);
}

html[data-theme="dark"]
.wizard-primary-button:disabled {
    color: #9fc3b1 !important;

    background: #234b39 !important;

    border-color: #315f4b !important;

    opacity: 0.75 !important;

    cursor: not-allowed;
}


/* BOTÓN SECUNDARIO "ATRÁS" */

html[data-theme="dark"]
.wizard-secondary-button {
    color: #c7ddd2 !important;

    background: #17392d !important;

    border: 1px solid #346850 !important;
}

html[data-theme="dark"]
.wizard-secondary-button:hover:not(:disabled) {
    color: #ffffff !important;

    background: #1e4938 !important;

    border-color: #4b8668 !important;
}

/* =========================================================
   DISPOSITIVOS - BOTONES Y CONTADOR - MODO OSCURO
========================================================= */


/* AGREGAR DISPOSITIVO */

html[data-theme="dark"]
#openAddDevice {
    color: #ffffff !important;

    background: #087443 !important;

    border-color: #129056 !important;

    box-shadow:
        0 5px 14px
        rgba(0, 0, 0, 0.20) !important;
}

html[data-theme="dark"]
#openAddDevice:hover {
    background: #129056 !important;

    border-color: #24ad69 !important;
}


/* ACTUALIZAR ESTADO */

html[data-theme="dark"]
#refreshSystemStatus {
    color: #64d894 !important;

    background: #17392d !important;

    border-color: #346850 !important;
}

html[data-theme="dark"]
#refreshSystemStatus:hover:not(:disabled) {
    color: #ffffff !important;

    background: #1e4938 !important;

    border-color: #4b8668 !important;
}


/* CONTADOR "1 DISPOSITIVO" */

html[data-theme="dark"]
#devicesCounter {
    color: #d8f1e3 !important;

    background: #17392d !important;

    border: 1px solid #346850 !important;
}

/* =========================================================
   HISTORIAL - CONTADOR DE RESULTADOS - MODO OSCURO
========================================================= */

html[data-theme="dark"]
.historial-results {
    color: #d8f1e3 !important;

    background: #17392d !important;

    border: 1px solid #346850 !important;

    box-shadow: none !important;
}


/* =========================================================
   SUSCRIPCIÓN - MODO OSCURO
========================================================= */


/* =========================================================
   TARJETA PLAN ACTUAL
========================================================= */

html[data-theme="dark"]
.current-plan-card {
    color: var(--text-primary) !important;

    background: #102a20 !important;

    border-color: #315f4b !important;
}


html[data-theme="dark"]
.current-plan-icon {
    color: #64d894 !important;

    background: #17392d !important;

    border-color: #346850 !important;
}


html[data-theme="dark"]
.current-plan-copy > span {
    color: #64d894 !important;
}


html[data-theme="dark"]
.current-plan-copy h2 {
    color: #ffffff !important;
}


html[data-theme="dark"]
.current-plan-copy p {
    color: #c7ddd2 !important;
}


/* ACTIVO */

html[data-theme="dark"]
.subscription-active {
    color: #64d894 !important;

    background: #17392d !important;

    border-color: #346850 !important;
}


/* COMPARAR PLANES */

html[data-theme="dark"]
.subscription-secondary-button {
    color: #64d894 !important;

    background: #17392d !important;

    border-color: #346850 !important;
}


html[data-theme="dark"]
.subscription-secondary-button:hover {
    color: #ffffff !important;

    background: #1e4938 !important;

    border-color: #4b8668 !important;
}


/* =========================================================
   TARJETAS DE PLANES
========================================================= */

html[data-theme="dark"]
.plan-card {
    color: var(--text-primary) !important;

    background: #102a20 !important;

    border-color: #315f4b !important;

    box-shadow:
        0 8px 24px
        rgba(0, 0, 0, 0.24) !important;
}


html[data-theme="dark"]
.plan-card h3,
html[data-theme="dark"]
.plan-price strong {
    color: #ffffff !important;
}


html[data-theme="dark"]
.plan-card p,
html[data-theme="dark"]
.plan-price > span {
    color: #c7ddd2 !important;
}


html[data-theme="dark"]
.plan-type {
    color: #64d894 !important;
}


html[data-theme="dark"]
.plan-divider {
    background: #315f4b !important;
}


/* =========================================================
   PLAN NORMAL
========================================================= */

html[data-theme="dark"]
.normal-plan {
    background: #102a20 !important;

    border-color: #315f4b !important;
}


html[data-theme="dark"]
.current-plan-badge {
    color: #d8f1e3 !important;

    background: #17392d !important;

    border: 1px solid #346850 !important;
}


/* BOTÓN PLAN ACTUAL */

html[data-theme="dark"]
.plan-button.current {
    color: #b7cec2 !important;

    background: #17392d !important;

    border: 1px solid #346850 !important;

    opacity: 1 !important;
}


/* =========================================================
   PREMIUM
========================================================= */

html[data-theme="dark"]
.premium-plan {
    background:
        linear-gradient(
            180deg,
            #12382b 0%,
            #102a20 100%
        ) !important;

    border-color: #24ad69 !important;
}


html[data-theme="dark"]
.premium-highlight {
    color: #dff7e9 !important;

    background: #087443 !important;
}


html[data-theme="dark"]
.premium-price .currency,
html[data-theme="dark"]
.premium-price .currency-code {
    color: #64d894 !important;
}


/* =========================================================
   CHECKS
========================================================= */

html[data-theme="dark"]
.feature-check {
    color: #64d894 !important;

    background: #17392d !important;
}


html[data-theme="dark"]
.plan-feature > span:last-child {
    color: #e8f4ee !important;
}


/* =========================================================
   BOTÓN OBTENER PREMIUM
========================================================= */

html[data-theme="dark"]
.plan-button.premium {
    color: #ffffff !important;

    background: #087443 !important;

    border: 1px solid #129056 !important;

    box-shadow:
        0 5px 14px
        rgba(0, 0, 0, 0.22) !important;
}


html[data-theme="dark"]
.plan-button.premium:hover {
    background: #129056 !important;

    border-color: #24ad69 !important;
}


/* =========================================================
   INFORMACIÓN INFERIOR
========================================================= */

html[data-theme="dark"]
.subscription-information {
    color: var(--text-primary) !important;

    background: #123127 !important;

    border-color: #315f4b !important;
}


html[data-theme="dark"]
.subscription-information-icon {
    color: #78b9ee !important;

    background: #19394d !important;

    border-color: #315d78 !important;
}


html[data-theme="dark"]
.subscription-information strong {
    color: #ffffff !important;
}


html[data-theme="dark"]
.subscription-information p {
    color: #b7cec2 !important;
}


/* =========================================================
   MODAL PREMIUM
========================================================= */

html[data-theme="dark"]
.subscription-modal-dialog {
    color: var(--text-primary) !important;

    background: #102a20 !important;

    border-color: #315f4b !important;
}


html[data-theme="dark"]
.subscription-modal-close {
    color: #b7cec2 !important;

    background: #17392d !important;

    border-color: #346850 !important;
}


html[data-theme="dark"]
.subscription-modal-close:hover {
    color: #ffffff !important;

    background: #1e4938 !important;
}


html[data-theme="dark"]
.subscription-modal-icon {
    color: #64d894 !important;

    background: #17392d !important;
}


html[data-theme="dark"]
.subscription-modal-label {
    color: #64d894 !important;
}


html[data-theme="dark"]
.subscription-modal-dialog h2 {
    color: #ffffff !important;
}


html[data-theme="dark"]
.subscription-modal-dialog p {
    color: #c7ddd2 !important;
}


html[data-theme="dark"]
.subscription-modal-price {
    color: #ffffff !important;
}


html[data-theme="dark"]
.subscription-modal-note {
    color: #c7ddd2 !important;

    background: #17392d !important;

    border-color: #346850 !important;
}


/* ENTENDIDO */

html[data-theme="dark"]
.subscription-primary-button {
    color: #ffffff !important;

    background: #087443 !important;

    border: 1px solid #129056 !important;
}


html[data-theme="dark"]
.subscription-primary-button:hover {
    background: #129056 !important;

    border-color: #24ad69 !important;
}