/* ========================================================= */
/* MIS PLANTAS - HUMIDI-TEC                                  */
/* ========================================================= */

.plantas-page {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;

    color: #153c2d;
}


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

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

.plants-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;
}

.plants-heading-copy {
    min-width: 0;
}

.plantas-header h1 {
    margin: 0;

    font-size: 30px;
    font-weight: 850;
    line-height: 1.15;

    color: #153c2d;
}

.plantas-header p {
    margin: 6px 0 0;

    max-width: 650px;

    font-size: 14px;
    font-weight: 550;
    line-height: 1.5;

    color: #4d6358;
}


/* ========================================================= */
/* ETIQUETAS DE SECCIÓN                                      */
/* ========================================================= */

.plantas-section-label,
.plants-dialog-label {
    display: block;

    margin-bottom: 3px;

    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1.15px;

    color: #0b7748;
}


/* ========================================================= */
/* ACCIONES DEL ENCABEZADO                                   */
/* ========================================================= */

.plants-heading-actions {
    display: flex;
    align-items: center;

    gap: 10px;

    flex-shrink: 0;
}


/* ========================================================= */
/* BOTÓN GUÍA                                                */
/* ========================================================= */

.plants-guide-button {
    min-height: 42px;

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

    gap: 7px;

    padding: 0 14px;

    color: #0b633d;
    background: #e1efe7;

    border: 1px solid #abcdb9;
    border-radius: 10px;

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

    text-decoration: none;

    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}

.plants-guide-button svg {
    width: 17px;
    height: 17px;

    flex-shrink: 0;
}

.plants-guide-button:hover {
    color: #ffffff;

    background: #107447;
    border-color: #107447;

    transform: translateY(-1px);
}


/* ========================================================= */
/* BOTONES GENERALES                                         */
/* ========================================================= */

.plants-primary,
.plants-secondary,
.plants-edit {
    min-height: 42px;

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

    gap: 7px;

    padding: 9px 15px;

    border: 1px solid #aac9b7;
    border-radius: 10px;

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

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}


/* PRIMARIO */

.plants-primary {
    flex-shrink: 0;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #087344,
            #17995b
        );

    border-color: #087344;

    box-shadow:
        0 5px 12px rgba(13, 116, 69, 0.14);
}

.plants-primary:hover {
    color: #ffffff;

    background: #08653d;

    transform: translateY(-1px);
}


/* SECUNDARIO */

.plants-secondary,
.plants-edit {
    color: #08653d;
    background: #edf5f0;
}

.plants-secondary:hover,
.plants-edit:hover {
    color: #ffffff;

    background: #117647;
    border-color: #117647;
}


/* ICONO + */

.plants-add-icon {
    width: 22px;
    height: 22px;

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

    color: #ffffff;

    background: rgba(255, 255, 255, 0.16);

    border-radius: 7px;

    font-size: 16px;
    font-weight: 700;
}


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

.plantas-status {
    min-height: 90px;

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

    gap: 25px;

    padding: 16px 18px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #eef6f2 100%
        );

    border: 1px solid #b8d0c3;
    border-radius: 15px;

    box-shadow:
        0 5px 16px rgba(28, 78, 55, 0.055);
}


/* ========================================================= */
/* BLOQUE PRINCIPAL DE ESTADO                                */
/* ========================================================= */

.plantas-status-main {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 14px;
}

.plantas-status-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);
}

.plantas-status-icon svg {
    width: 24px;
    height: 24px;
}

.plantas-status-text {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.plantas-status-text > span {
    margin-bottom: 2px;

    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.9px;

    color: #116f45;
}

.plantas-status-text strong {
    font-size: 18px;
    font-weight: 850;
    line-height: 1.25;

    color: #143c2d;
}

.plantas-status-text p {
    margin: 4px 0 0;

    font-size: 13px;
    font-weight: 550;
    line-height: 1.45;

    color: #52675c;
}


/* ========================================================= */
/* RESUMEN DERECHO                                           */
/* ========================================================= */

.plantas-status-summary {
    display: flex;
    align-items: center;

    flex-shrink: 0;
}

.status-mini {
    min-width: 145px;

    display: flex;
    align-items: center;

    padding: 5px 16px;

    border-left: 1px solid #c6d9cf;
}

.status-mini:first-child {
    border-left: none;
}

.status-mini > div {
    display: flex;
    flex-direction: column;
}

.status-mini small {
    font-size: 11px;
    font-weight: 700;

    color: #4d6358;
}

.status-mini strong {
    margin-top: 3px;

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

    color: #1d4835;

    white-space: nowrap;
}


/* ========================================================= */
/* SECCIÓN DE MONITOREO                                      */
/* ========================================================= */

.plantas-section {
    margin-top: 24px;
}

.plantas-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 12px;
}

.plantas-section-heading {
    min-width: 0;
}

.plantas-section-header h2 {
    margin: 0;

    font-size: 22px;
    font-weight: 850;

    color: #153b2c;
}

.plantas-section-header p {
    margin: 4px 0 0;

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

    color: #566d61;
}


/* ========================================================= */
/* TARJETA PRINCIPAL                                         */
/* ========================================================= */

.plants-card {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #afcbbd;
    border-radius: 14px;

    box-shadow:
        0 5px 15px rgba(25, 70, 50, 0.06);
}


/* ========================================================= */
/* TOOLBAR                                                   */
/* ========================================================= */

.plants-toolbar {
    display: flex;
    align-items: flex-end;

    gap: 14px;

    padding: 16px 17px;

    background: #ffffff;

    border-bottom: 1px solid #bfd3c8;
}

.plants-toolbar > div {
    min-width: 0;
}

.plants-search {
    flex: 1;
}

.plants-filter {
    width: 165px;
}

.plants-sort {
    width: 150px;
}

.plants-toolbar label {
    display: block;

    margin-bottom: 6px;

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

    color: #315442;
}

.plants-toolbar input,
.plants-toolbar select {
    width: 100%;
    min-height: 43px;

    padding: 9px 12px;

    color: #244b39;
    background: #ffffff;

    border: 1px solid #9fbdad;
    border-radius: 8px;

    font: inherit;
    font-size: 13px;

    outline: none;
}

.plants-toolbar input::placeholder {
    color: #7a8e84;
}

.plants-toolbar input:focus,
.plants-toolbar select:focus {
    border-color: #4b9b72;

    box-shadow:
        0 0 0 3px rgba(26, 139, 83, 0.10);
}


/* ========================================================= */
/* ENCABEZADO DE TABLA                                       */
/* ========================================================= */

.plants-table-header {
    min-height: 48px;

    display: grid;

    grid-template-columns:
        minmax(230px, 1.55fr)
        125px
        115px
        minmax(190px, 1fr)
        170px;

    align-items: center;

    gap: 14px;

    padding: 0 18px;

    background:
        linear-gradient(
            90deg,
            #c7e2d3 0%,
            #c8e4dc 52%,
            #c9dfe8 100%
        );

    border-bottom: 1px solid #8fb6a3;
}

.plants-table-header span {
    font-size: 12px;
    font-weight: 850;

    color: #133b2b;
}

.plants-table-header span:not(:first-child) {
    text-align: center;
}


/* ========================================================= */
/* FILAS                                                     */
/* ========================================================= */

.plant-summary-row {
    position: relative;

    min-height: 78px;

    display: grid;

    grid-template-columns:
        minmax(230px, 1.55fr)
        125px
        115px
        minmax(190px, 1fr)
        170px;

    align-items: center;

    gap: 14px;

    padding:
        13px
        18px
        13px
        20px;

    background: #ffffff;

    border-bottom: 1px solid #cadbd2;

    transition:
        background-color 0.15s ease;
}

.plant-summary-row:last-child {
    border-bottom: none;
}

.plant-summary-row:hover {
    background: #f3f8f5;
}


/* ========================================================= */
/* INDICADOR IZQUIERDO                                       */
/* ========================================================= */

.plant-summary-row::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 4px;
    height: 100%;
}

.plant-summary-row.good::before {
    background: #11915a;
}

.plant-summary-row.warning::before {
    background: #d8a31b;
}

.plant-summary-row.offline::before {
    background: #7b8f84;
}


/* ========================================================= */
/* IDENTIDAD                                                 */
/* ========================================================= */

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

    display: flex;
    align-items: center;

    gap: 11px;
}

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

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

    padding: 0 6px;

    flex-shrink: 0;

    color: #086e40;
    background: #dcefe3;

    border: 1px solid #b4d2c0;
    border-radius: 9px;

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

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

    display: flex;
    flex-direction: column;
}

.plant-identity-text > strong {
    overflow: hidden;

    font-size: 15px;
    font-weight: 850;

    color: #103b2b;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.plant-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 5px;

    margin-top: 4px;

    font-size: 12px;
    font-weight: 600;

    color: #40594c;
}

.plant-meta > span:first-child {
    color: #176744;
    font-weight: 750;
}


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

.plant-summary-value {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;
}

.metric-icon {
    width: 34px;
    height: 34px;

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

    flex-shrink: 0;

    border-radius: 8px;
}

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

.plant-summary-value > strong,
.plant-summary-value strong {
    font-size: 19px;
    font-weight: 850;
    line-height: 1;

    color: #153f30;
}


/* OCULTAR ETIQUETAS REPETIDAS */

.plant-summary-value small {
    display: none;
}


/* ========================================================= */
/* HUMEDAD                                                   */
/* ========================================================= */

.plant-summary-value.humidity .metric-icon {
    color: #086c79;
    background: #d2e8ec;

    border: 1px solid #afd1d7;
}

.plant-summary-value.humidity strong {
    color: #075b65;
}


/* ========================================================= */
/* BATERÍA                                                   */
/* ========================================================= */

.plant-summary-value.battery .metric-icon {
    color: #176d45;
    background: #d8eadf;

    border: 1px solid #b3d2bf;
}

.plant-summary-value.battery strong {
    color: #175737;
}


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

.plant-summary-condition {
    min-width: 0;

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

    gap: 9px;
}

.condition-dot {
    width: 11px;
    height: 11px;

    flex-shrink: 0;

    border-radius: 50%;
}


/*
    El JavaScript todavía crea un div interno.
    display:contents permite conservar compatibilidad
    sin agregar carga visual.
*/

.plant-summary-condition > div {
    display: contents;
}

.plant-summary-condition small {
    display: none;
}

.plant-summary-condition strong {
    font-size: 12px;
    font-weight: 850;
    line-height: 1.3;
}


/* CORRECTO */

.plant-summary-row.good .condition-dot {
    background: #11915a;

    box-shadow:
        0 0 0 4px rgba(17, 145, 90, 0.13);
}

.plant-summary-row.good
.plant-summary-condition strong {
    color: #08653a;
}


/* ATENCIÓN */

.plant-summary-row.warning .condition-dot {
    background: #d9a51f;

    box-shadow:
        0 0 0 4px rgba(217, 165, 31, 0.16);
}

.plant-summary-row.warning
.plant-summary-condition strong {
    color: #725000;
}


/* SIN LECTURA */

.plant-summary-row.offline .condition-dot {
    background: #7b8f84;

    box-shadow:
        0 0 0 4px rgba(123, 143, 132, 0.13);
}

.plant-summary-row.offline
.plant-summary-condition strong {
    color: #4f6258;
}

.plant-summary-row.offline
.plant-summary-value strong {
    color: #687a70;
}


/* ========================================================= */
/* BOTÓN EDITAR                                              */
/* ========================================================= */

.plants-edit {
    min-width: 72px;
    min-height: 38px;

    justify-self: center;

    padding:
        7px
        11px;

    font-size: 12px;
}



/* ========================================================= */
/* ACCIONES DE FILA                                          */
/* ========================================================= */

.plant-row-actions {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;
}

.plants-edit,
.plants-delete {
    min-height: 38px;

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

    padding: 7px 11px;

    border-radius: 9px;

    font: inherit;
    font-size: 12px;
    font-weight: 800;

    cursor: pointer;

    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.plants-edit {
    min-width: 68px;

    color: #08653d;
    background: #edf5f0;

    border: 1px solid #a9c9b7;
}

.plants-edit:hover {
    color: #ffffff;
    background: #117647;
    border-color: #117647;
}

.plants-delete {
    min-width: 72px;

    color: #98382f;
    background: #fff8f7;

    border: 1px solid #d9b2ad;
}

.plants-delete:hover {
    color: #ffffff;
    background: #ad4138;
    border-color: #ad4138;
}


/* ========================================================= */
/* CONFIRMACIÓN DE ELIMINACIÓN                              */
/* ========================================================= */

.plants-delete-dialog {
    width: min(470px, calc(100% - 32px));

    padding: 0;

    color: #244b39;
    background: #ffffff;

    border: 1px solid #d5b1ac;
    border-radius: 15px;

    box-shadow:
        0 20px 60px rgba(50, 32, 29, 0.24);
}

.plants-delete-dialog::backdrop {
    background: rgba(21, 48, 37, 0.45);
}

.plants-delete-dialog-content {
    display: flex;
    align-items: flex-start;

    gap: 14px;

    padding: 22px 22px 18px;
}

.plants-delete-dialog-icon {
    width: 45px;
    height: 45px;

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

    flex-shrink: 0;

    color: #9a382f;
    background: #fae8e5;

    border: 1px solid #e4c0bb;
    border-radius: 11px;
}

.plants-delete-dialog-icon svg {
    width: 21px;
    height: 21px;
}

.plants-delete-dialog-copy {
    min-width: 0;
}

.plants-delete-dialog-label {
    display: block;

    margin-bottom: 3px;

    color: #96382f;

    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1px;
}

.plants-delete-dialog h2 {
    margin: 0;

    color: #3e2926;

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

.plants-delete-dialog p {
    margin: 6px 0 0;

    color: #665552;

    font-size: 13px;
    line-height: 1.5;
}

.plants-delete-device-note {
    margin-top: 14px;
    padding: 11px 12px;

    background: #eef6f1;

    border: 1px solid #bfd6c8;
    border-radius: 9px;
}

.plants-delete-device-note strong,
.plants-delete-device-note span {
    display: block;
}

.plants-delete-device-note strong {
    color: #155f3d;

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

.plants-delete-device-note span {
    margin-top: 3px;

    color: #52685c;

    font-size: 11px;
    line-height: 1.4;
}

.plants-delete-dialog-actions {
    display: flex;
    justify-content: flex-end;

    gap: 9px;

    padding: 15px 22px 20px;

    border-top: 1px solid #e6d5d2;
}

.plants-delete-confirm {
    min-height: 40px;

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

    padding: 8px 14px;

    color: #ffffff;
    background: #a83e35;

    border: 1px solid #a83e35;
    border-radius: 9px;

    font: inherit;
    font-size: 12px;
    font-weight: 850;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.plants-delete-confirm:hover {
    background: #8f3129;
    border-color: #8f3129;
}

/* ========================================================= */
/* ESTADO VACÍO                                              */
/* ========================================================= */

.plants-empty {
    padding:
        40px
        20px;

    text-align: center;

    color: #244b39;
}

.plants-empty[hidden] {
    display: none;
}

.plants-empty strong {
    display: block;

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

.plants-empty p {
    margin:
        5px
        0
        14px;

    font-size: 13px;
    line-height: 1.5;

    color: #52675d;
}


/* ========================================================= */
/* PAGINACIÓN                                                */
/* ========================================================= */

.plants-pagination {
    min-height: 48px;

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

    gap: 16px;

    padding:
        9px
        16px;

    background: #f2f7f4;

    border-top: 1px solid #bfd2c7;

    color: #475f52;

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

.plants-pagination nav {
    display: flex;
    align-items: center;

    gap: 11px;
}

.plants-pagination nav > span {
    min-width: 36px;

    text-align: center;

    font-weight: 750;

    color: #294f3c;
}

.plants-pagination button {
    width: 34px;
    height: 34px;

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

    border: 1px solid #a9c3b4;
    border-radius: 8px;

    color: #08653d;
    background: #ffffff;

    font-size: 13px;

    cursor: pointer;
}

.plants-pagination button:hover:not(:disabled) {
    color: #ffffff;

    background: #117647;
    border-color: #117647;
}

.plants-pagination button:disabled {
    opacity: 0.38;

    cursor: default;
}


/* ========================================================= */
/* NOTA DE DEMOSTRACIÓN                                      */
/* ========================================================= */

.plants-demo-note {
    margin:
        10px
        2px
        0;

    font-size: 11px;
    font-weight: 550;
    line-height: 1.5;

    color: #5e7268;
}


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

.plants-workspace #plantDialog {
    width: min(500px, calc(100% - 32px));
    max-height: 90vh;

    padding: 0;

    overflow-y: auto;

    color: #244b39;
    background: #ffffff;

    border: 1px solid #aecabc;
    border-radius: 15px;

    box-shadow:
        0 18px 60px rgba(21, 60, 45, 0.24);
}

.plants-workspace #plantDialog::backdrop {
    background: rgba(21, 60, 45, 0.42);
}

.plants-workspace #plantDialog form {
    padding: 25px;
}


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

.plants-dialog-header {
    margin-bottom: 8px;
}

.plants-workspace #plantDialog h2 {
    margin: 0;

    font-size: 24px;
    font-weight: 850;

    color: #153c2d;
}

.plants-workspace #plantDialog p {
    margin: 6px 0 0;

    font-size: 13px;
    line-height: 1.5;

    color: #53685d;
}


/* ========================================================= */
/* CAMPOS MODAL                                              */
/* ========================================================= */

.plants-workspace #plantDialog label {
    display: block;

    margin-top: 18px;
    margin-bottom: 7px;

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

    color: #315442;
}

.plants-workspace #plantDialog input,
.plants-workspace #plantDialog select {
    width: 100%;
    min-height: 43px;

    padding:
        9px
        12px;

    color: #244b39;
    background: #ffffff;

    border: 1px solid #9fbdad;
    border-radius: 8px;

    font: inherit;
    font-size: 13px;

    outline: none;
}

.plants-workspace #plantDialog input:focus,
.plants-workspace #plantDialog select:focus {
    border-color: #4b9b72;

    box-shadow:
        0 0 0 3px rgba(26, 139, 83, 0.10);
}

.plants-workspace #plantDialog small {
    display: block;

    margin-top: 6px;

    font-size: 11px;
    font-weight: 550;
    line-height: 1.5;

    color: #5b7065;
}


/* ========================================================= */
/* AYUDA DEL PERFIL                                          */
/* ========================================================= */

.plants-profile-help {
    margin-top: 10px !important;

    padding:
        11px
        12px;

    color: #285441 !important;
    background: #e6f2eb;

    border: 1px solid #bfd7c9;
    border-radius: 8px;

    font-size: 12px !important;
    font-weight: 650;
}


/* ========================================================= */
/* ENLACE GUÍA DENTRO DEL MODAL                              */
/* ========================================================= */

.profile-guide-link {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    margin-top: 10px;

    color: #0b6f43;

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

    text-decoration: none;
}

.profile-guide-link svg {
    width: 15px;
    height: 15px;

    flex-shrink: 0;
}

.profile-guide-link:hover {
    color: #075b36;

    text-decoration: underline;
}


/* ========================================================= */
/* MENSAJE DE FORMULARIO                                     */
/* ========================================================= */

.plants-form-message,
#formMessage {
    min-height: 18px;

    margin-top: 10px !important;

    color: #9d3f29 !important;

    font-size: 12px !important;
    font-weight: 700;
}


/* ========================================================= */
/* ACCIONES MODAL                                            */
/* ========================================================= */

.plants-dialog-actions {
    display: flex;
    justify-content: flex-end;

    gap: 10px;

    margin-top: 22px;

    padding-top: 16px;

    border-top: 1px solid #d5e2db;
}


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

.plants-workspace :focus-visible {
    outline: 3px solid #307cc2;
    outline-offset: 3px;
}


/* ========================================================= */
/* LAPTOP                                                    */
/* ========================================================= */

@media (max-width: 1000px) {

    .plants-table-header,
    .plant-summary-row {
        grid-template-columns:
            minmax(190px, 1.4fr)
            110px
            100px
            minmax(160px, 1fr)
            150px;

        gap: 9px;
    }

    .plants-toolbar {
        flex-wrap: wrap;
    }

    .plants-search {
        flex-basis: 100%;
    }

    .plants-toolbar > div:not(.plants-search) {
        flex: 1;

        width: auto;
    }

}


/* ========================================================= */
/* TABLET                                                    */
/* ========================================================= */

@media (max-width: 760px) {

    .plants-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .plants-heading-actions {
        width: 100%;
    }

    .plants-guide-button,
    .plants-primary {
        flex: 1;
    }

    .plantas-status {
        align-items: flex-start;
        flex-direction: column;

        gap: 14px;
    }

    .plantas-status-summary {
        width: 100%;
    }

    .status-mini {
        flex: 1;
    }

    .plants-table-header {
        display: none;
    }

    .plant-summary-row {
        grid-template-columns:
            1fr
            1fr;

        gap: 15px;

        min-height: auto;

        padding:
            16px
            18px
            16px
            21px;
    }

    .plant-summary-identity {
        grid-column:
            1 / -1;
    }

    .plant-summary-value {
        justify-content: flex-start;
    }

    .plant-summary-condition {
        justify-content: flex-start;
    }

    .plants-edit {
        justify-self: end;
    }

    .plants-pagination {
        flex-wrap: wrap;
    }

}


/* ========================================================= */
/* MÓVIL                                                     */
/* ========================================================= */

@media (max-width: 600px) {

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

    .plants-heading-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .plants-guide-button,
    .plants-primary {
        width: 100%;
    }

    .plantas-status-summary {
        flex-wrap: wrap;

        gap: 8px;
    }

    .status-mini {
        min-width: 130px;

        padding:
            7px
            0;

        border-left: none;
    }

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

    .plants-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .plants-toolbar > div {
        width: 100% !important;
    }

    .plant-summary-row {
        grid-template-columns: 1fr;
    }

    .plant-summary-identity {
        grid-column: auto;
    }

    .plants-edit {
        width: 100%;

        justify-self: stretch;
    }

    .plants-dialog-actions {
        flex-direction: column-reverse;
    }

    .plants-dialog-actions button {
        width: 100%;
    }

}


/* ========================================================= */
/* MOVIMIENTO REDUCIDO                                       */
/* ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .plants-guide-button,
    .plants-primary,
    .plants-secondary,
    .plants-edit,
    .plant-summary-row {
        transition: none;
    }

    .plants-guide-button:hover,
    .plants-primary:hover {
        transform: none;
    }

}


/* ========================================================= */
/* NUEVO FLUJO - AGREGAR / EDITAR PLANTA                    */
/* ========================================================= */


/* ========================================================= */
/* SECCIONES DEL FORMULARIO                                  */
/* ========================================================= */

.plant-form-section {
    margin-top: 18px;
    padding-top: 17px;

    border-top: 1px solid #d5e2db;
}

.plant-form-section:first-of-type {
    margin-top: 14px;
}


/* ========================================================= */
/* PASOS                                                     */
/* ========================================================= */

.plant-form-step {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 13px;
}

.plant-form-step > span {
    width: 31px;
    height: 31px;

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

    flex-shrink: 0;

    color: #ffffff;

    background: #117647;

    border-radius: 9px;

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

.plant-form-step > div {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.plant-form-step strong {
    font-size: 14px;
    font-weight: 850;

    color: #163d2d;
}

.plant-form-step small {
    margin-top: 2px !important;

    font-size: 11px !important;

    color: #607469 !important;
}


/* ========================================================= */
/* SELECCIÓN CATÁLOGO / MANUAL                               */
/* ========================================================= */

.plant-source-options {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    margin-bottom: 13px;
}

.plant-source-option {
    position: relative;

    min-height: 60px;

    display: flex !important;
    align-items: center;

    gap: 10px;

    margin: 0 !important;
    padding: 10px 12px;

    background: #f7faf8;

    border: 1px solid #b9cec2;
    border-radius: 10px;

    cursor: pointer;

    transition:
        border-color 0.15s ease,
        background-color 0.15s ease,
        box-shadow 0.15s ease;
}

.plant-source-option:hover {
    border-color: #73ab8e;
}

.plant-source-option.selected {
    background: #e9f4ee;

    border-color: #208358;

    box-shadow:
        inset 0 0 0 1px #208358;
}

.plant-source-option input {
    position: absolute;

    width: 1px !important;
    height: 1px !important;

    opacity: 0;
    pointer-events: none;
}

.source-radio {
    width: 19px;
    height: 19px;

    display: flex;

    flex-shrink: 0;

    background: #ffffff;

    border: 2px solid #8fac9d;
    border-radius: 50%;
}

.plant-source-option.selected
.source-radio {
    border: 6px solid #13804e;
}

.source-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.source-copy strong {
    font-size: 12px;
    font-weight: 850;

    color: #214838;
}

.source-copy small {
    margin: 2px 0 0 !important;

    font-size: 10px !important;

    color: #64796e !important;
}


/* ========================================================= */
/* CAMPOS                                                    */
/* ========================================================= */

.plant-field-group {
    margin-top: 12px;
}

.plant-field-group[hidden] {
    display: none;
}

.field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}


/* ========================================================= */
/* PERFIL SUGERIDO                                           */
/* ========================================================= */

.recommended-badge {
    display: inline-flex;
    align-items: center;

    min-height: 23px;

    padding: 2px 8px;

    color: #0a6940;
    background: #dcefe4;

    border: 1px solid #b8d6c4;
    border-radius: 999px;

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

.recommended-badge[hidden] {
    display: none;
}


/* ========================================================= */
/* RESUMEN DEL FORMULARIO                                    */
/* ========================================================= */

.plant-form-summary {
    margin-top: 18px;

    padding: 13px 14px;

    background:
        linear-gradient(
            135deg,
            #eef6f2,
            #e6f1eb
        );

    border: 1px solid #bdd3c7;
    border-radius: 10px;
}

.plant-form-summary-label {
    display: block;

    margin-bottom: 9px;

    font-size: 9px;
    font-weight: 850;
    letter-spacing: 1px;

    color: #0b7547;
}

.plant-form-summary-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;
}

.plant-form-summary-grid > div {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.plant-form-summary-grid small {
    margin: 0 !important;

    font-size: 10px !important;
    font-weight: 650;

    color: #5b7065 !important;
}

.plant-form-summary-grid strong {
    margin-top: 3px;

    overflow: hidden;

    font-size: 12px;
    font-weight: 850;

    color: #173f30;

    white-space: nowrap;
    text-overflow: ellipsis;
}


/* ========================================================= */
/* DIALOG MÁS CÓMODO                                         */
/* ========================================================= */

.plants-workspace #plantDialog {
    width: min(
        540px,
        calc(100% - 32px)
    );
}

.plants-workspace #plantDialog form {
    padding: 24px 25px;
}


/* ========================================================= */
/* PAGINACIÓN - NO MOSTRAR SI NO SE NECESITA                 */
/* ========================================================= */

.plants-pagination nav[hidden] {
    display: none;
}


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

@media (max-width: 560px) {

    .plant-source-options {
        grid-template-columns: 1fr;
    }

    .plant-form-summary-grid {
        grid-template-columns: 1fr;
    }

    .plant-form-summary-grid > div {
        padding: 4px 0;
    }

}

/* ========================================================= */
/* FLUJO POR PASOS                                           */
/* ========================================================= */

.plant-form-section {
    position: relative;

    transition:
        opacity 0.2s ease,
        filter 0.2s ease;
}


/* PASO ACTIVO */

.plant-form-section.active {
    opacity: 1;
}


/* PASO BLOQUEADO */

.plant-form-section.locked {
    opacity: 0.52;
}


/*
    Evita que el usuario pueda usar inputs,
    selects o botones del paso bloqueado.
*/

.plant-form-section.locked
input,

.plant-form-section.locked
select,

.plant-form-section.locked
button,

.plant-form-section.locked
label {

    pointer-events: none;
}


/* MENSAJE DE BLOQUEO */

.step-lock-message {
    display: none;

    margin-bottom: 12px;
    padding: 9px 11px;

    color: #5a6d63;
    background: #edf2ef;

    border: 1px solid #ccd9d2;
    border-radius: 8px;

    font-size: 11px;
    font-weight: 700;
}

.plant-form-section.locked
.step-lock-message {
    display: block;
}


/* PASO COMPLETADO */

.plant-form-section.completed
.plant-form-step > span {
    background: #0b7445;
}

.plant-form-section.completed
.plant-form-step > span::after {
    content: "✓";
}

.plant-form-section.completed
.plant-form-step > span {
    font-size: 0;
}

.plant-form-section.completed
.plant-form-step > span::after {
    font-size: 13px;
}


/* BOTÓN GUARDAR BLOQUEADO */

#savePlant:disabled {
    opacity: 0.5;

    cursor: not-allowed;

    box-shadow: none;
    transform: none;
}

/* ========================================================= */
/* RESPONSIVE - ACCIONES / ELIMINAR                          */
/* ========================================================= */

@media (max-width: 760px) {

    .plant-row-actions {
        justify-content: flex-end;
    }

    .plants-edit,
    .plants-delete {
        min-width: 78px;
    }

}

@media (max-width: 600px) {

    .plant-row-actions {
        width: 100%;

        justify-content: stretch;
    }

    .plants-edit,
    .plants-delete {
        flex: 1;
    }

    .plants-delete-dialog-content {
        flex-direction: column;
    }

    .plants-delete-dialog-actions {
        flex-direction: column-reverse;
    }

    .plants-delete-dialog-actions button {
        width: 100%;
    }

}


/* ========================================================= */
/* BOTÓN ELIMINAR PLANTA                                     */
/* ========================================================= */

.plant-delete-button {
    min-width: 104px;
    min-height: 42px;

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

    padding: 10px 18px;

    border: 1px solid var(--border);
    border-radius: 10px;

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

    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}


.plant-delete-button:hover {
    background: var(--green-50);
    border-color: var(--green-400);
    color: var(--green-950);

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


.plant-delete-button:active {
    transform: translateY(1px);
}


.plant-delete-button:focus-visible {
    outline: 3px solid var(--green-100);
    outline-offset: 2px;
}


/* ========================================================= */
/* ACCIONES DE LA FILA                                       */
/* ========================================================= */

.plant-row-actions {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 130px;
}