/* =========================
   IOT DEVICE TELEMETRY
   Componentes reutilizables
========================= */


/* =========================
   DEVICE NAME
========================= */

.iot-device-name {
    font-weight: 600;
    color: var(--color-white);
}


/* =========================
   STATUS
========================= */

.iot-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-size: 13px;
    font-weight: 600;
}

.iot-status-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    flex-shrink: 0;
}


/* Online */

.iot-status-online {
    color: #22c55e;
}

.iot-status-online .iot-status-dot {
    background: #22c55e;

    box-shadow:
        0 0 7px rgba(34,197,94,.8),
        0 0 13px rgba(34,197,94,.35);
}


/* Waiting */

.iot-status-waiting {
    color: #3b82f6;
}

.iot-status-waiting .iot-status-dot {
    background: #3b82f6;

    box-shadow:
        0 0 7px rgba(59,130,246,.8),
        0 0 13px rgba(59,130,246,.35);
}


/* Offline */

.iot-status-offline {
    color: #ef4444;
}

.iot-status-offline .iot-status-dot {
    background: #ef4444;

    box-shadow:
        0 0 7px rgba(239,68,68,.7);
}


/* Sin datos */

.iot-status-unknown {
    color: var(--color-text-muted);
}


/* =========================
   BATTERY
========================= */

.iot-power-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 58px;

    padding: 6px 11px;

    border-radius: 20px;

    background:
        rgba(34,197,94,0.10);

    border:
        1px solid rgba(34,197,94,0.22);

    color: #86efac;

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

.iot-power-value i {
    font-size: 14px;
    line-height: 1;
}


/* =========================
   WIFI
========================= */

.iot-wifi {
    display: inline-flex;
    align-items: flex-end;

    gap: 10px;
}

.iot-wifi-bars {
    display: inline-flex;
    align-items: flex-end;

    gap: 3px;

    height: 18px;
}

.iot-wifi-bar {
    display: block;

    width: 4px;

    border-radius: 3px;

    background:
        rgba(255,255,255,0.12);
}

.iot-wifi-bar:nth-child(1) {
    height: 5px;
}

.iot-wifi-bar:nth-child(2) {
    height: 8px;
}

.iot-wifi-bar:nth-child(3) {
    height: 11px;
}

.iot-wifi-bar:nth-child(4) {
    height: 14px;
}

.iot-wifi-bar:nth-child(5) {
    height: 18px;
}

.iot-wifi-bar.active {
    background: #3b82f6;

    box-shadow:
        0 0 6px rgba(59,130,246,.35);
}

.iot-wifi-quality {
    font-size: 13px;
    font-weight: 600;

    color: #93c5fd;
}


/* =========================
   WAITING / LOADING
========================= */

.iot-telemetry-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 58px;
}

.iot-mini-spinner {
    width: 14px;
    height: 14px;

    border:
        2px solid rgba(59,130,246,.20);

    border-top-color:
        #3b82f6;

    border-radius: 50%;

    animation:
        iotMiniSpin .8s linear infinite;
}

@keyframes iotMiniSpin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =========================
   OFFLINE TELEMETRY
========================= */

.iot-telemetry-offline {
    background:
        rgba(148,163,184,.08);

    border-color:
        rgba(148,163,184,.18);

    color: #64748b;
}

.iot-wifi-offline .iot-wifi-bar {
    background: #475569;
    box-shadow: none;
}

.iot-wifi-offline .iot-wifi-quality {
    color: #64748b;
}


/* =========================
   EDIT LINK
========================= */

.iot-edit-link {
    border: none;
    background: transparent;

    padding: 0;

    color: #60a5fa;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition: .2s ease;
}

.iot-edit-link:hover {
    color: #93c5fd;

    text-shadow:
        0 0 10px rgba(59,130,246,.35);
}
/* =========================
   IOT DEVICE PANEL
========================= */

.iot-device-panel {
    padding: 22px;
}


/* =========================
   IOT DEVICE TABLE
========================= */

.iot-device-table {
    width: 100%;

    border-collapse: separate;
    border-spacing: 0;
}

.iot-device-table th {
    padding: 0 18px 14px 18px;

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

    letter-spacing: .02em;

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

.iot-device-table td {
    padding: 18px;

    vertical-align: middle;

    border-top:
        1px solid rgba(255,255,255,0.06);

    font-size: 14px;
}


/* Primera columna */

.iot-device-table th:first-child,
.iot-device-table td:first-child {
    width: auto;
    min-width: 150px;
}


/* Hover */

.iot-device-table tbody tr {
    transition:
        background .2s ease;
}

.iot-device-table tbody tr:hover {
    background:
        rgba(255,255,255,0.025);
}


/* Responsive */

@media (max-width: 1100px) {

    .iot-device-panel {
        overflow-x: auto;
    }

    .iot-device-table {
        min-width: 950px;
    }
}

/* =========================
   WMDHTC3 CALENDAR PICKER
========================== */

.wmdhtc3-calendar-only {
    position: relative;

    width: 44px;
    min-width: 44px;
    height: 40px;

    padding: 0;

    cursor: pointer;

    color: transparent;

    -webkit-appearance: auto;
    appearance: auto;
}


/*
 * Ocultamos visualmente fecha y hora,
 * pero NO eliminamos el control interno.
 */
.wmdhtc3-calendar-only::-webkit-datetime-edit,
.wmdhtc3-calendar-only::-webkit-datetime-edit-fields-wrapper,
.wmdhtc3-calendar-only::-webkit-datetime-edit-text,
.wmdhtc3-calendar-only::-webkit-datetime-edit-month-field,
.wmdhtc3-calendar-only::-webkit-datetime-edit-day-field,
.wmdhtc3-calendar-only::-webkit-datetime-edit-year-field,
.wmdhtc3-calendar-only::-webkit-datetime-edit-hour-field,
.wmdhtc3-calendar-only::-webkit-datetime-edit-minute-field,
.wmdhtc3-calendar-only::-webkit-datetime-edit-ampm-field {
    color: transparent;
}


/*
 * Conservamos y centramos el icono
 * nativo del navegador.
 */
.wmdhtc3-calendar-only::-webkit-calendar-picker-indicator {
    display: block;

    position: absolute;

    top: 50%;
    left: 50%;

    width: 20px;
    height: 20px;

    margin: 0;
    padding: 0;

    transform: translate(
        -50%,
        -50%
    );

    opacity: 1;

    cursor: pointer;
}