/* SmartIrrigate - Estilos personalizados */

/* En PC/laptop la letra general va un poco mas grande, para aprovechar el
   espacio y leerse mejor. En celular se queda igual. */
@media (min-width: 1024px) {
    html { font-size: 17px; }
}

/* Etiquetas de las tarjetas de datos (resumen del panel y del admin) un poco
   mas oscuras, para que se lean mejor. */
.kpi-grid p.text-slate-500,
#admin-resumen p.text-slate-500 { color: #475569; }

/* ===== Visibilidad segun sesion =====
   Se controla desde CSS y no quitando/poniendo la clase .hidden porque los
   variantes responsivos de Tailwind (sm:flex, sm:block) ganan sobre .hidden
   en pantallas grandes y dejaban visibles los dos menus a la vez. */
body:not(.is-authed) .only-authed { display: none !important; }
body.is-authed        .only-guest  { display: none !important; }

/* Durante el cambio obligatorio de contrasena no se muestra ningun menu:
   solo el boton de salir. Asi no hay forma de rodear el paso. */
body.is-onboarding .only-guest,
body.is-onboarding .only-authed { display: none !important; }
body:not(.is-onboarding) .only-onboarding { display: none !important; }

/* La pantalla de administracion solo la ve quien tiene el permiso. Esto es
   comodidad visual, no seguridad: el servidor vuelve a comprobarlo en cada
   ruta de /admin, porque esconder un boton no impide llamar a la API. */
body:not(.is-admin) .only-admin { display: none !important; }

/* Al reves: la cuenta administradora no tiene invernadero propio, asi que no
   ve las pestanas de riego (Panel, Plantas, Zonas, Graficas...). Solo su
   consola. */
body.is-admin .only-cliente { display: none !important; }


@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fadeIn {
    animation: fadeIn 0.3s ease-in;
}

.view-section {
    animation: fadeIn 0.3s ease-in;
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Sensor status indicators */
.sensor-status-ok {
    width: 12px;
    height: 12px;
    background-color: #10b981;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}

.sensor-status-alert {
    width: 12px;
    height: 12px;
    background-color: #ef4444;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0%, 100% { box-shadow: 0 0 6px rgba(239, 68, 68, 0.5); }
    50% { box-shadow: 0 0 12px rgba(239, 68, 68, 0.8); }
}

/* Range slider styling */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #059669;
    border-radius: 50%;
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #059669;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}