/* ===== Fuente y reset básico ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    background: #f5f5f5;
    color: #333;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ===== App Container ===== */
#app {
    width: 100%;
    max-width: 450px;
    padding: 20px;
}

/* ===== Títulos ===== */
#app h1 {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: #222;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px;
}

#app h2 {
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

/* ===== Estados de asignación ===== */
.sin-asignacion {
    background-color: #ffe5e5;
    color: #b30000;
    border: 2px solid #ffb3b3;
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.15);
}

.asignado {
    background-color: #e6f0ff;
    color: #0044aa;
    border: 2px solid #b3d1ff;
    box-shadow: 0 4px 12px rgba(0, 80, 200, 0.15);
}

/* ===== Formularios ===== */
form {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 20px; /* aumentamos gap para mayor separación */
    margin-bottom: 25px;
}

/* ===== Título asignación ===== */
.asignacion-titulo {
    font-size: 1.6rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
    color: #1a1a1a;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px;
}

/* ===== Labels ===== */
form label {
    font-weight: 500;
    margin-bottom: 6px;
    display: block;
    color: #444;
}

/* ===== Selects ===== */
form select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    outline: none;
    transition: all 0.2s ease;
    background-color: #fff;
}

form select:focus {
    border-color: #1e90ff;
    box-shadow: 0 0 5px rgba(30, 144, 255, 0.3);
}

/* ===== Textarea ===== */
form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    outline: none;
    resize: vertical;
    transition: all 0.2s ease;
    min-height: 80px;
}

form textarea:focus {
    border-color: #1e90ff;
    box-shadow: 0 0 5px rgba(30, 144, 255, 0.3);
}

/* ===== Drop Area ===== */
.drop-area {
    border: 2px dashed #1e90ff;
    background: #f0f8ff;
    color: #1e90ff;
    padding: 25px;
    border-radius: 10px;
    text-align: center;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.drop-area:hover {
    background: #e7f3ff;
    box-shadow: 0 0 10px rgba(30, 144, 255, 0.25);
}

/* ===== Drop Area cuando hay imágenes seleccionadas ===== */
.drop-area.has-files {
    background: #d9ffe0; /* verde claro */
    border-color: #28a745; /* borde verde */
    color: #1b7c30; /* texto verde más oscuro */
    font-weight: 600;
    transition: all 0.3s ease;
}


/* ===== Botones de formulario ===== */
.btn-submit {
    width: 100%;
    background: linear-gradient(135deg, #98e6a8, #71d48a);
    color: #fff;
    padding: 14px 0;
    border: none;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0, 150, 80, 0.25);
    margin-top: 25px; /* aumentado desde 10px a 25px para separarlo de las imágenes */
}

.btn-submit:hover {
    background: linear-gradient(135deg, #8be1a0, #66cb81);
    box-shadow: 0 6px 18px rgba(0, 150, 80, 0.35);
    transform: translateY(-2px);
}

.btn-submit:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(0, 150, 80, 0.2);
}

.btn-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}


/* ===== Botón actualizar ===== */
#app > button {
    width: 100%;
    margin-top: 15px;
    background: #1e90ff; /* azul de base */
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(30, 144, 255, 0.25);
}

#app > button:hover {
    background: #1c86ee;
    box-shadow: 0 6px 18px rgba(30, 144, 255, 0.35);
}

#app > button:active {
    background: #1874cc;
    transform: translateY(1px);
    box-shadow: 0 3px 10px rgba(30, 144, 255, 0.2);
}
.log-cards-container {
    margin: 12px 0;
    font-family: system-ui, -apple-system, sans-serif;
}

/* Header */
.log-header {
    background: #1f2933;
    color: white;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
}

.log-title {
    font-size: 1.1rem;
    font-weight: 600;
}

.log-datetime {
    font-size: 1.3rem;
    font-weight: bold;
    margin-top: 4px;
}

/* Grid de tarjetas */
.log-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* Tarjeta base */
.card {
    background: white;
    border-radius: 14px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.card .label {
    font-size: 1rem;
    color: #555;
    margin-bottom: 6px;
}

.card .value {
    font-size: 2rem;
    font-weight: bold;
}

/* Estados */
.state.on {
    color: #16a34a;
}

.state.off {
    color: #dc2626;
}

/* Nivel estanque */
.card-level {
    margin-top: 12px;
}

.card-level .value {
    font-size: 2.6rem;
}

/* Tablets / Desktop */
@media (min-width: 768px) {
    .log-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .log-datetime {
        font-size: 1.1rem;
    }
}


/* ===== Responsive ===== */
@media (max-width: 500px) {
    #app {
        padding: 15px;
    }

    #app h1 {
        font-size: 1.4rem;
    }

    #app h2 {
        font-size: 1.3rem;
    }

    form {
        padding: 20px;
        gap: 18px; /* algo menor en móvil */
    }
}