/* =========================
BODY
========================= */

body{

background:linear-gradient(
135deg,
#071422,
#0b1f33
);

min-height:100vh;

display:flex;

justify-content:center;

padding:40px 20px;

}


/* =========================
CARD PRINCIPAL
========================= */

.glass-card{

width:100%;

max-width:1200px;

padding:40px;

}


/* =========================
TITULOS
========================= */

h1{

text-align:center;

margin-bottom:30px;

letter-spacing:2px;

}


h3{

margin-top:35px;

margin-bottom:15px;

opacity:0.9;

}


/* =========================
FORMULARIOS
========================= */

input,
textarea{

width:100%;

padding:16px;

margin:10px 0;

border:none;

outline:none;

border-radius:18px;

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

border:1px solid rgba(255,255,255,0.08);

color:white;

font-size:15px;

transition:0.3s;

backdrop-filter:blur(10px);

}


input::placeholder,
textarea::placeholder{

color:rgba(255,255,255,0.5);

}


input:focus,
textarea:focus{

border:1px solid #4caf50;

box-shadow:0 0 15px rgba(76,175,80,0.3);

}


textarea{

min-height:140px;

resize:none;

}


/* =========================
FILE INPUT
========================= */

input[type="file"]{

padding:14px;

cursor:pointer;

}


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

button{

padding:14px 24px;

margin:8px 5px;

border:none;

border-radius:14px;

background:linear-gradient(
135deg,
#22c55e,
#16a34a
);

color:white;

font-size:15px;

font-weight:600;

cursor:pointer;

transition:0.3s ease;

box-shadow:
0 10px 25px rgba(34,197,94,0.25);

}


/* hover */

button:hover{

transform:translateY(-3px);

box-shadow:
0 18px 35px rgba(34,197,94,0.35);

}


/* click */

button:active{

transform:scale(0.97);

}


/* cerrar sesión */

.logout{

background:linear-gradient(
135deg,
#ef4444,
#dc2626
);

box-shadow:
0 10px 25px rgba(239,68,68,0.25);

}

.logout:hover{

box-shadow:
0 18px 35px rgba(239,68,68,0.35);

}

/* =========================
SEPARADOR
========================= */

hr{

border:none;

height:1px;

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

margin:35px 0;

}


/* =========================
SUGERENCIAS
========================= */

#sugerencias{

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

border-radius:20px;

overflow:hidden;

margin-top:10px;

border:1px solid rgba(255,255,255,0.08);

}


.sugerencia-item{

display:flex;

align-items:center;

gap:15px;

padding:14px;

cursor:pointer;

transition:0.3s;

}


.sugerencia-item:hover{

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

}


.sugerencia-item img{

width:55px;

height:55px;

border-radius:12px;

object-fit:cover;

}


/* =========================
PREVIEW API
========================= */

.preview-img{

width:220px;

border-radius:20px;

margin-top:20px;

box-shadow:0 15px 35px rgba(0,0,0,0.35);

}


/* =========================
LISTA PLANTAS
========================= */

#lista{

display:flex;

flex-direction:column;

gap:15px;

margin-top:25px;

}


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

.planta-item{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px;

border-radius:20px;

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

border:1px solid rgba(255,255,255,0.08);

transition:0.3s;

}


.planta-item:hover{

transform:translateY(-3px);

box-shadow:0 15px 30px rgba(0,0,0,0.25);

}


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

.acciones{

display:flex;

gap:10px;

flex-wrap:wrap;

}


/* =========================
BOTON VER
========================= */

.btn-ver{

background:#4caf50;

}


/* =========================
BOTON ELIMINAR
========================= */

.btn-eliminar{

background:#e53935;

}


.btn-eliminar:hover{

background:#ef5350;

}


/* =========================
LABELS
========================= */

label{

display:block;

margin-top:15px;

margin-bottom:8px;

opacity:0.8;

}


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

@media(max-width:768px){

body{

padding:20px 15px;

}


.glass-card{

padding:25px;

}


.planta-item{

flex-direction:column;

gap:15px;

text-align:center;

}


.acciones{

justify-content:center;

width:100%;

}


button{

width:100%;

}


.preview-img{

width:100%;

max-width:260px;

}

/* =========================
BOTONES MODERNOS
========================= */

button{

padding:14px 24px;

border:none;

border-radius:14px;

background:linear-gradient(
135deg,
#22c55e,
#16a34a
);

color:white;

font-size:15px;

font-weight:600;

cursor:pointer;

transition:0.3s ease;

box-shadow:
0 10px 25px rgba(34,197,94,0.25);

}


/* hover */

button:hover{

transform:translateY(-3px);

box-shadow:
0 18px 35px rgba(34,197,94,0.35);

}


/* click */

button:active{

transform:scale(0.97);

}


/* cerrar sesión */

.logout{

background:linear-gradient(
135deg,
#ef4444,
#dc2626
);

box-shadow:
0 10px 25px rgba(239,68,68,0.25);

}

.logout:hover{

box-shadow:
0 18px 35px rgba(239,68,68,0.35);

}

}