/* ========================================================= */
/* RIEGO - HUMIDI-TEC                                       */
/* ========================================================= */

.riego-page {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    color: #153c2d;
}


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

.riego-header {
    margin-bottom: 18px;
}

.riego-label,
.riego-section-label {
    display: block;
    margin-bottom: 4px;
    color: #0b7748;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1.15px;
}

.riego-header h1 {
    margin: 0;
    color: #153c2d;
    font-size: 30px;
    font-weight: 850;
    line-height: 1.15;
}

.riego-header p {
    margin: 6px 0 0;
    max-width: 680px;
    color: #425b4f;
    font-size: 14px;
    font-weight: 550;
    line-height: 1.5;
}


/* ========================================================= */
/* ESTADO GENERAL                                            */
/* ========================================================= */

.riego-system-card {
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 18px;
    background: linear-gradient(
        135deg,
        #ffffff,
        #e8f2ed
    );
    border: 1px solid #9fbead;
    border-radius: 15px;
    box-shadow: 0 5px 16px rgba(28, 78, 55, 0.06);
}

.riego-system-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.riego-system-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #087344,
        #17995b
    );
    border-radius: 12px;
    box-shadow: 0 0 0 5px rgba(26, 139, 83, 0.09);
}

.riego-system-icon svg {
    width: 23px;
    height: 23px;
}

.riego-system-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.riego-system-copy > span {
    margin-bottom: 2px;
    color: #116f45;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1px;
}

.riego-system-copy strong {
    color: #103b2b;
    font-size: 18px;
    font-weight: 850;
}

.riego-system-copy p {
    margin: 4px 0 0;
    color: #425c4f;
    font-size: 12px;
    font-weight: 600;
}


/* ========================================================= */
/* ESTADOS DEL SISTEMA                                       */
/* ========================================================= */

.riego-system-states {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.riego-system-state {
    min-width: 145px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 16px;
    border-left: 1px solid #b1cabd;
}

.riego-system-state:first-child {
    border-left: none;
}

.system-state-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 9px;
}

.system-state-icon svg {
    width: 16px;
    height: 16px;
}

.system-state-icon.communication {
    color: #145b91;
    background: #d1e5f4;
}

.system-state-icon.pump {
    color: #0d663d;
    background: #d4e8dc;
}

.system-state-icon.automatic {
    color: #087174;
    background: #cee6e7;
}

.riego-system-state div {
    display: flex;
    flex-direction: column;
}

.riego-system-state small {
    color: #465f52;
    font-size: 10px;
    font-weight: 700;
}

.riego-system-state strong {
    margin-top: 2px;
    color: #103b2b;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}


/* ========================================================= */
/* SECCIONES                                                 */
/* ========================================================= */

.riego-section {
    margin-top: 25px;
}

.riego-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 12px;
}

.riego-section-header h2 {
    margin: 0;
    color: #153c2d;
    font-size: 22px;
    font-weight: 850;
}

.riego-section-header p {
    margin: 4px 0 0;
    color: #4d6558;
    font-size: 13px;
    font-weight: 600;
}


/* ========================================================= */
/* SELECTOR DE PLANTA                                        */
/* ========================================================= */

.riego-plant-top {
    display: grid;
    grid-template-columns:
        minmax(300px, 520px)
        minmax(170px, 1fr);
    align-items: end;
    gap: 20px;
    padding: 14px 17px;
    background: #ffffff;
    border: 1px solid #a6c2b3;
    border-radius: 13px 13px 0 0;
}

.riego-plant-selector {
    min-width: 0;
}

.riego-plant-selector label {
    display: block;
    margin-bottom: 7px;
    color: #254d3a;
    font-size: 12px;
    font-weight: 800;
}

.riego-select-wrap {
    position: relative;
    width: 100%;
}

.riego-select-wrap select {
    width: 100%;
    height: 42px;
    padding: 7px 46px 7px 13px;
    appearance: none;
    -webkit-appearance: none;
    color: #173f30;
    background: #f7faf8;
    border: 1px solid #7fa88f;
    border-radius: 9px;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    outline: none;
    cursor: pointer;
}

.riego-select-wrap select:hover {
    border-color: #4f8c6c;
}

.riego-select-wrap select:focus {
    border-color: #28734d;
    box-shadow: 0 0 0 3px rgba(32, 128, 79, 0.11);
}

.riego-select-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    color: #245b40;
    background: #d8e9df;
    border: 1px solid #b4cebf;
    border-radius: 7px;
    pointer-events: none;
}

.riego-select-icon svg {
    width: 14px;
    height: 14px;
}


/* ========================================================= */
/* ÚLTIMO RIEGO EN CABECERA DE PLANTA                        */
/* ========================================================= */

.riego-last-summary {
    min-height: 50px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding-left: 18px;

    border-left: 1px solid #b7cec1;
}

.riego-last-summary-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.riego-last-summary-copy > span {
    color: #4c6457;

    font-size: 10px;
    font-weight: 750;
}

.riego-last-summary-copy strong {
    margin-top: 2px;

    color: #103b2b;

    font-size: 14px;
    font-weight: 850;
}

.riego-last-summary-copy small {
    margin-top: 2px;

    color: #4c6457;

    font-size: 10px;
    font-weight: 650;
}

.riego-last-summary-link {
    min-height: 32px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    flex-shrink: 0;

    padding: 5px 10px;

    color: #075f38;
    background: #ffffff;

    border: 1px solid #91b7a2;
    border-radius: 8px;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}

.riego-last-summary-link:hover {
    color: #ffffff;
    background: #117647;
}


/* ========================================================= */
/* PLANTA                                                    */
/* ========================================================= */

.riego-plant-card {
    padding: 15px 17px 17px;
    background: #ffffff;
    border: 1px solid #a6c2b3;
    border-top: none;
    border-radius: 0 0 13px 13px;
    box-shadow: 0 5px 15px rgba(25, 70, 50, 0.05);
}

.riego-plant-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 13px;
}

.riego-plant-identity {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 14px;
}

.riego-plant-number {
    min-width: 76px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    padding: 0 12px;

    color: var(--green-900);
    background: var(--green-100);

    border: 1px solid var(--green-400);
    border-radius: 9px;

    font-size: 13px;
    font-weight: 800;

    white-space: nowrap;
}

.riego-plant-label {
    display: block;
    color: #456255;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.9px;
}

.riego-plant-identity h3 {
    margin: 2px 0 0;
    color: #103b2b;
    font-size: 19px;
    font-weight: 850;
}

.riego-plant-identity p {
    margin: 2px 0 0;
    color: #4b6256;
    font-size: 12px;
    font-weight: 600;
}


/* ========================================================= */
/* ESTADO DE PLANTA                                          */
/* ========================================================= */

.riego-plant-status {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 850;
}

.riego-status-dot {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 50%;
}

.riego-plant-status.good {
    color: #075f36;
    background: #d9ebdf;
    border: 1px solid #9fc9af;
}

.riego-plant-status.good .riego-status-dot {
    background: #0d9356;
}

.riego-plant-status.warning {
    color: #684900;
    background: #f4dda4;
    border: 1px solid #d0a439;
}

.riego-plant-status.warning .riego-status-dot {
    background: #d79c12;
}

.riego-plant-status.offline {
    color: #405249;
    background: #dce4e0;
    border: 1px solid #aebfb6;
}

.riego-plant-status.offline .riego-status-dot {
    background: #687b70;
}


/* ========================================================= */
/* MÉTRICAS                                                  */
/* ========================================================= */

.riego-plant-metrics {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.riego-metric {
    min-height: 94px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 14px;
    border: 1.5px solid;
    border-radius: 11px;
}

.riego-metric.humidity {
    background: #c7dfe8;
    border-color: #6497aa;
}

.riego-metric.start {
    background: #f0d38b;
    border-color: #c58d14;
}

.riego-metric.target {
    background: #cddfcd;
    border-color: #6e9875;
}

.riego-metric.battery {
    background: #d2dfd6;
    border-color: #799783;
}

.riego-metric span {
    color: #29483a;
    font-size: 11px;
    font-weight: 800;
}

.riego-metric strong {
    margin-top: 3px;
    color: #0e3929;
    font-size: 23px;
    font-weight: 850;
}

.riego-metric small {
    margin-top: 3px;
    color: #344f42;
    font-size: 10px;
    font-weight: 700;
}


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

.automatic-simple-card {
    padding: 16px 17px;
    background: #ffffff;
    border: 1px solid #9fbfac;
    border-radius: 13px;
    box-shadow: 0 5px 15px rgba(25, 70, 50, 0.05);
}

.automatic-simple-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.automatic-simple-copy {
    min-width: 0;
}

.automatic-simple-copy h2 {
    margin: 0;
    color: #153c2d;
    font-size: 22px;
    font-weight: 850;
}

.automatic-simple-copy p {
    margin: 4px 0 0;
    color: #465f52;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}


/* ========================================================= */
/* CONTROL AUTOMÁTICO                                        */
/* ========================================================= */

.automatic-simple-control {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 7px 10px;
    background: #e8f1ec;
    border: 1px solid #a7c2b3;
    border-radius: 10px;
}

.automatic-simple-control > span {
    min-width: 72px;
    color: #103b2b;
    font-size: 12px;
    font-weight: 850;
    text-align: right;
}


/* ========================================================= */
/* SWITCH                                                    */
/* ========================================================= */

.automatic-switch {
    position: relative;
    width: 48px;
    height: 27px;
    flex-shrink: 0;
    padding: 0;
    background: #87998f;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.automatic-switch.active {
    background: #12834f;
}

.automatic-switch-knob {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 19px;
    height: 19px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
    transition: transform 0.18s ease;
}

.automatic-switch.active .automatic-switch-knob {
    transform: translateX(21px);
}


/* ========================================================= */
/* MENSAJE AUTOMÁTICO                                        */
/* ========================================================= */

.automatic-simple-status {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 13px;
    padding: 10px 12px;
    border-radius: 9px;
}

.automatic-simple-icon {
    width: 29px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 900;
}

.automatic-simple-status strong {
    font-size: 12px;
    font-weight: 850;
    line-height: 1.4;
}

.automatic-simple-status.good {
    color: #075f36;
    background: #d7eadf;
    border: 1px solid #98c4aa;
}

.automatic-simple-status.good .automatic-simple-icon {
    color: #ffffff;
    background: #12834f;
}

.automatic-simple-status.warning {
    color: #644600;
    background: #f0d792;
    border: 1px solid #c89925;
}

.automatic-simple-status.warning .automatic-simple-icon {
    color: #4c3500;
    background: #dcaa2e;
}

.automatic-simple-status.disabled {
    color: #3f5147;
    background: #dce4df;
    border: 1px solid #9eafa6;
}

.automatic-simple-status.disabled .automatic-simple-icon {
    color: #ffffff;
    background: #687a70;
}


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

.manual-card {
    padding: 16px 17px;
    background: #ffffff;
    border: 1px solid #9fbfac;
    border-radius: 13px;
    box-shadow: 0 5px 15px rgba(25, 70, 50, 0.05);
}

.manual-main-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.manual-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.manual-info-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #066e72;
    background: #cce5e7;
    border: 1px solid #a4cdd0;
    border-radius: 10px;
}

.manual-info-icon svg {
    width: 20px;
    height: 20px;
}

.manual-info strong {
    color: #103b2b;
    font-size: 14px;
    font-weight: 850;
}

.manual-info p {
    margin: 3px 0 0;
    color: #465f52;
    font-size: 12px;
    font-weight: 600;
}


/* ========================================================= */
/* TIMER                                                     */
/* ========================================================= */

.manual-timer {
    min-width: 145px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    padding: 9px 12px;
    color: #634700;
    background: #f1d995;
    border: 1px solid #c99f31;
    border-radius: 9px;
}

.manual-timer[hidden] {
    display: none;
}

.manual-timer span {
    font-size: 10px;
    font-weight: 700;
}

.manual-timer strong {
    font-size: 22px;
    font-weight: 850;
}

.manual-timer small {
    font-size: 10px;
}


/* ========================================================= */
/* BOTONES MANUALES                                          */
/* ========================================================= */

.manual-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-iniciar-riego,
.btn-detener-riego {
    width: 100%;
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: 9px;
    font: inherit;
    font-size: 13px;
    font-weight: 850;
    line-height: 1;
    cursor: pointer;
    overflow: hidden;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}

.btn-iniciar-riego svg,
.btn-detener-riego svg {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px;
    min-height: 17px;
    max-width: 17px;
    max-height: 17px;
    flex: 0 0 17px;
    display: block;
}

.btn-iniciar-riego {
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #087344,
        #17995b
    );
    border: 1px solid #087344;
    box-shadow: 0 5px 12px rgba(13, 116, 69, 0.14);
}

.btn-iniciar-riego:hover:not(:disabled) {
    background: #08653d;
    border-color: #08653d;
    transform: translateY(-1px);
}

.btn-detener-riego {
    color: #ffffff;
    background: #a84036;
    border: 1px solid #96382f;
}

.btn-detener-riego:hover:not(:disabled) {
    background: #91352d;
    border-color: #91352d;
    transform: translateY(-1px);
}

.btn-iniciar-riego:disabled,
.btn-detener-riego:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-iniciar-riego[hidden],
.btn-detener-riego[hidden] {
    display: none !important;
}


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

.manual-safety {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 11px;
    padding: 9px 11px;
    color: #594400;
    background: #f5e8bb;
    border: 1px solid #ceb65d;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

.manual-safety svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}


/* ========================================================= */
/* MENSAJES                                                  */
/* ========================================================= */

.riego-message {
    display: none;
    margin-top: 11px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}

.riego-message.visible {
    display: block;
}

.riego-message.success {
    color: #075c35;
    background: #d9eadf;
    border: 1px solid #9fc5ae;
}

.riego-message.warning {
    color: #664900;
    background: #f2dda4;
    border: 1px solid #cba43f;
}

.riego-message.error {
    color: #842f29;
    background: #f4deda;
    border: 1px solid #c98f89;
}


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

.riego-last {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 25px;
    padding: 14px 17px;
    background: #e3eee8;
    border: 1px solid #a6c4b4;
    border-radius: 12px;
}

.riego-last > div {
    display: flex;
    flex-direction: column;
}

.riego-last strong {
    color: #103b2b;
    font-size: 14px;
    font-weight: 850;
}

.riego-last p {
    margin: 3px 0 0;
    color: #465e51;
    font-size: 11px;
    font-weight: 600;
}

.riego-history-link {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    color: #075f38;
    background: #ffffff;
    border: 1px solid #91b7a2;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.riego-history-link:hover {
    color: #ffffff;
    background: #117647;
}


/* ========================================================= */
/* DIALOG                                                    */
/* ========================================================= */

.automatic-confirm-dialog {
    width: min(
        450px,
        calc(100% - 32px)
    );
    padding: 0;
    color: #153c2d;
    background: #ffffff;
    border: 1px solid #aac3b6;
    border-radius: 14px;
    box-shadow:
        0 20px 60px rgba(15, 55, 38, 0.25);
}

.automatic-confirm-dialog::backdrop {
    background: rgba(16, 46, 33, 0.46);
}

.automatic-confirm-content {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 20px;
}

.automatic-confirm-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #6b4d00;
    background: #f2d58c;
    border-radius: 10px;
}

.automatic-confirm-icon svg {
    width: 21px;
    height: 21px;
}

.automatic-confirm-content h2 {
    margin: 0;
    color: #153c2d;
    font-size: 18px;
    font-weight: 850;
}

.automatic-confirm-content p {
    margin: 6px 0 0;
    color: #4b6256;
    font-size: 12px;
    line-height: 1.5;
}

.automatic-confirm-note {
    font-weight: 750;
}

.automatic-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 13px 20px;
    background: #f1f6f3;
    border-top: 1px solid #ccdcd3;
}

.btn-dialog-secondary,
.btn-dialog-danger {
    min-height: 38px;
    padding: 7px 13px;
    border-radius: 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.btn-dialog-secondary {
    color: #23513a;
    background: #ffffff;
    border: 1px solid #a7c2b3;
}

.btn-dialog-danger {
    color: #ffffff;
    background: #a84036;
    border: 1px solid #96382f;
}


/* ========================================================= */
/* ACCESIBILIDAD                                             */
/* ========================================================= */

.riego-page :focus-visible,
.automatic-confirm-dialog :focus-visible {
    outline: 3px solid #286fa9;
    outline-offset: 3px;
}


/* ========================================================= */
/* RESPONSIVE                                                */
/* ========================================================= */

@media (max-width: 1000px) {

    .riego-system-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .riego-system-states {
        width: 100%;
    }

    .riego-system-state {
        flex: 1;
    }

}


@media (max-width: 850px) {

    .riego-plant-top {
        grid-template-columns:
            minmax(280px, 1fr)
            minmax(160px, 0.55fr);
    }

    .riego-plant-metrics {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 700px) {

    .riego-header h1 {
        font-size: 27px;
    }

    .riego-system-states {
        align-items: stretch;
        flex-direction: column;
    }

    .riego-system-state {
        width: 100%;
        padding: 9px 0;
        border-left: none;
        border-top: 1px solid #b6cdbf;
    }

    .riego-system-state:first-child {
        border-top: none;
    }

    .riego-section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .riego-plant-top {
        grid-template-columns: 1fr;
    }

    .riego-selected-summary {
        padding: 10px 0 0;
        border-left: none;
        border-top: 1px solid #b7cec1;
    }

    .riego-plant-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .automatic-simple-main {
        align-items: flex-start;
        flex-direction: column;
    }

    .automatic-simple-control {
        width: 100%;
        justify-content: space-between;
    }

    .manual-main-row {
        align-items: flex-start;
        flex-direction: column;
    }

     .riego-last-summary {
        padding:
            10px 0 0;

        border-left: none;
        border-top: 1px solid #b7cec1;
    }

}


@media (max-width: 520px) {

    .riego-plant-metrics {
        grid-template-columns: 1fr;
    }

    .manual-actions {
        flex-direction: column;
    }

    .riego-last {
        align-items: flex-start;
        flex-direction: column;
    }

    .riego-history-link {
        width: 100%;
    }

    .automatic-confirm-actions {
        flex-direction: column-reverse;
    }

    .btn-dialog-secondary,
    .btn-dialog-danger {
        width: 100%;
    }

}