/* ==================================================
   Cacta Luna Communities
   Archivo: style.css
   Tema: Real de Palmas - Verde Ecológico
   Versión: 1.0
================================================== */


/* ==========================
   VARIABLES DEL SISTEMA
========================== */

:root{

    --verde-principal:#2E8B57;

    --verde-secundario:#4CAF7A;

    --verde-claro:#E8F5EE;

    --verde-hover:#267348;

    --fondo:#F7FBF8;

    --blanco:#FFFFFF;

    --texto:#263238;

    --gris:#607D8B;


    --sombra:
    0 10px 30px rgba(46,139,87,.12);


    --radio:18px;

}


/* ==========================
   RESET GENERAL
========================== */


*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


body{

    background:var(--fondo);

    color:var(--texto);

    font-family:
    'Poppins',
    Arial,
    sans-serif;

}


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


h1,h2,h3,h4{

    font-weight:600;

}


/* ==========================
   LINKS
========================== */


a{

    text-decoration:none;

    color:inherit;

}


/* ==========================
   SCROLL SUAVE
========================== */


html{

    scroll-behavior:smooth;

}

/* ==================================================
   SIDEBAR - MENU LATERAL
================================================== */

.sidebar{

    width:260px;

    min-height:100vh;

    background:
    linear-gradient(
        180deg,
        var(--verde-principal),
        var(--verde-secundario)
    );

    color:white;

    padding:25px;

    position:fixed;

    left:0;

    top:0;

    box-shadow:var(--sombra);

    z-index:1000;

}


/* LOGO */

.logo-circle{

width:90px;
height:90px;
margin:0 auto 15px;
display:flex;
align-items:center;
justify-content:center;
background:white;
border-radius:15px;
overflow:hidden;

}

.logo-circle img{

width:75px;
height:75px;
object-fit:contain;
display:block;

}

/* MENU */

.sidebar a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:13px 15px;

    margin:8px 0;

    border-radius:14px;

    transition:.3s;

}


.sidebar a:hover{

    background:
    rgba(255,255,255,.18);

    transform:translateX(5px);

}


/* ==================================================
   CONTENIDO PRINCIPAL
================================================== */


.main{

    margin-left:260px;

    padding:35px;

}



/* ==================================================
   HEADER SUPERIOR
================================================== */


.topbar{

    background:white;

    padding:25px;

    border-radius:var(--radio);

    box-shadow:var(--sombra);

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}


.topbar h1{

    color:var(--verde-principal);

}


.topbar p{

    color:var(--gris);

}



/* PERFIL */

.profile{

    display:flex;

    align-items:center;

    gap:12px;

}


.avatar{

    width:50px;

    height:50px;

    border-radius:50%;

    background:var(--verde-claro);

    color:var(--verde-principal);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    font-weight:bold;

}

/* ==================================================
   DASHBOARD - TARJETAS PRINCIPALES
================================================== */


.dashboard{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:25px;

    margin-bottom:35px;

}



.card{

    background:var(--blanco);

    padding:25px;

    border-radius:var(--radio);

    box-shadow:var(--sombra);

    position:relative;

    overflow:hidden;

    transition:.3s;

}



.card::before{

    content:"";

    position:absolute;

    width:90px;

    height:90px;

    background:var(--verde-claro);

    border-radius:50%;

    right:-25px;

    top:-25px;

}



.card:hover{

    transform:translateY(-6px);

    box-shadow:
    0 15px 35px rgba(46,139,87,.20);

}



.card h3{

    color:var(--gris);

    font-size:16px;

    margin-bottom:15px;

    position:relative;

}



.card span{

    display:block;

    font-size:42px;

    font-weight:700;

    color:var(--verde-principal);

    position:relative;

}



.card p{

    margin-top:10px;

    color:var(--verde-secundario);

    position:relative;

}



/* ==================================================
   ACCESOS RAPIDOS
================================================== */


.titulo{

    margin-bottom:20px;

    color:var(--texto);

}



.grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(150px,1fr));

    gap:20px;

    margin-bottom:35px;

}



.app{

    background:white;

    padding:25px;

    border-radius:var(--radio);

    text-align:center;

    box-shadow:var(--sombra);

    font-size:35px;

    cursor:pointer;

    transition:.3s;

}



.app h4{

    margin-top:15px;

    font-size:16px;

    color:var(--texto);

}



.app:hover{

    background:var(--verde-principal);

    color:white;

    transform:translateY(-5px);

}



.app:hover h4{

    color:white;

}

/* ==================================================
   PANEL DE REPORTES
================================================== */


.panel{

    background:var(--blanco);

    padding:25px;

    border-radius:var(--radio);

    box-shadow:var(--sombra);

    margin-bottom:30px;

}


.panel h2{

    margin-bottom:20px;

    color:var(--verde-principal);

}



/* TABLA */


table{

    width:100%;

    border-collapse:collapse;

}



th{

    text-align:left;

    padding:15px;

    background:var(--verde-claro);

    color:var(--verde-principal);

}



td{

    padding:15px;

    border-bottom:1px solid #eeeeee;

    color:var(--texto);

}



tr:hover{

    background:#F8FCF9;

}



/* ESTADOS */


.badge{

    padding:6px 12px;

    border-radius:20px;

    font-size:13px;

    font-weight:600;

    display:inline-block;

}



.proceso{

    background:#FFF3CD;

    color:#856404;

}



.nuevo{

    background:#DFF3FF;

    color:#006B9F;

}



.resuelto{

    background:#DDF6E8;

    color:#237A45;

}

/* ==================================================
   DISEÑO PARA CELULAR
================================================== */


@media(max-width:900px){


    .sidebar{

        transform:translateX(-100%);

        transition:.3s;

    }


    .sidebar.show{

        transform:translateX(0);

    }


    .main{

        margin-left:0;

        padding:20px;

    }


    .topbar{

        flex-direction:column;

        align-items:flex-start;

        gap:20px;

    }


    .dashboard{

        grid-template-columns:1fr;

    }


    .grid{

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

    }


}


/* ==================================================
   BOTON MENU CELULAR
================================================== */


.menu-btn{

    display:none;

    position:fixed;

    top:20px;

    left:20px;

    z-index:2000;

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

    background:var(--verde-principal);

    color:white;

    font-size:25px;

    cursor:pointer;

    box-shadow:var(--sombra);

}



@media(max-width:900px){


.menu-btn{

    display:flex;

    align-items:center;

    justify-content:center;

}


}

/* ==================================================
   FORMULARIO REPORTES V2
================================================== */


.panel form{

    display:flex;
    flex-direction:column;
    gap:18px;

}


.panel form label{

    display:block;

    font-weight:600;

    color:var(--texto);

}


.panel select,
.panel textarea{

    width:100%;

    padding:14px;

    border-radius:14px;

    border:1px solid #d8e6dc;

    font-size:16px;

    font-family:inherit;

    background:white;

}


.panel textarea{

    resize:vertical;

    min-height:130px;

}


.panel select:focus,
.panel textarea:focus{

    outline:none;

    border-color:var(--verde-principal);

    box-shadow:0 0 0 4px var(--verde-claro);

}



.prioridad{

    display:flex;

    gap:12px;

}


.prioridad label{

    background:var(--verde-claro);

    padding:10px 18px;

    border-radius:25px;

    cursor:pointer;

}



.btn{

    width:100%;

    padding:16px;

    border:none;

    border-radius:14px;

    background:var(--verde-principal);

    color:white;

    font-size:17px;

    font-weight:bold;

    cursor:pointer;

}


.btn:hover{

   /* ==================================================
   NAVEGACION APP
================================================== */


.app-nav{

display:flex;

justify-content:space-around;

align-items:center;

background:white;

padding:15px;

border-radius:18px;

margin-bottom:20px;

box-shadow:0 5px 15px rgba(0,0,0,.05);

}


.app-nav a{

text-decoration:none;

color:var(--texto);

font-size:14px;

font-weight:600;

text-align:center;

}


.app-nav a:hover{

color:var(--verde-principal);

}


.app-nav .activo{

color:var(--verde-principal);

}

    background:var(--verde-hover);

}

/* ==================================================
   SUBIDA DE IMAGEN
================================================== */


.campo{

display:flex;

flex-direction:column;

gap:8px;

}


input[type="file"]{

padding:12px;

background:#f5f8f6;

border-radius:14px;

border:1px solid #d8e6dc;

font-family:inherit;

}


input[type="file"]::file-selector-button{

background:var(--verde-principal);

color:white;

border:none;

padding:10px 15px;

border-radius:10px;

cursor:pointer;

margin-right:10px;

}

.campo input[type="text"]{

width:100%;

padding:14px;

border-radius:14px;

border:1px solid #d8e6dc;

font-size:16px;

font-family:inherit;

}


.campo input[type="text"]:focus{

outline:none;

border-color:var(--verde-principal);

box-shadow:0 0 0 4px var(--verde-claro);

}

.campo input{

width:100%;

padding:14px;

border-radius:14px;

border:1px solid #d8e6dc;

font-size:16px;

font-family:inherit;

background:white;

}


.campo input:focus{

outline:none;

border-color:var(--verde-principal);

box-shadow:0 0 0 4px var(--verde-claro);

}

/* ==================================================
   AGENDA COMUNITARIA
================================================== */

.evento-destacado{

    background:linear-gradient(135deg,#3d8b6d,#5da886);

    color:white;

    padding:30px;

    border-radius:24px;

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

    margin-bottom:30px;

}

.evento-destacado h2{

    margin:15px 0;

    font-size:30px;

}

.evento-destacado p{

    line-height:1.8;

    opacity:.95;

}

.evento-badge{

    display:inline-block;

    background:rgba(255,255,255,.2);

    padding:8px 18px;

    border-radius:30px;

    font-weight:bold;

    font-size:14px;

}

.titulo-seccion{

    margin-bottom:20px;

    color:var(--texto);

}

.lista-eventos{

    display:grid;

    gap:18px;

}

.evento-card{

    background:white;

    border-radius:18px;

    padding:20px;

    display:flex;

    align-items:center;

    gap:20px;

    box-shadow:0 6px 18px rgba(0,0,0,.08);

    transition:.30s;

}

.evento-card:hover{

    transform:translateY(-5px);

    box-shadow:0 12px 28px rgba(0,0,0,.15);

}

.evento-icono{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--verde-claro);

    font-size:34px;

}

.evento-card h3{

    margin-bottom:8px;

    color:var(--texto);

}

.evento-card p{

    color:#666;

}

@media(max-width:700px){

.evento-card{

flex-direction:column;

text-align:center;

}

.evento-icono{

margin-bottom:10px;

}

}

/* TARJETA CLIMA */

.clima-card{
    background:linear-gradient(135deg,#2E8B57,#5DBB63);
    color:white;
    border-radius:20px;
    padding:25px;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.clima-card h3{
    margin-top:0;
}

#climaActual{
    font-size:18px;
    line-height:1.8;
    margin-top:15px;
}

/* ==================================================
   CALENDARIO DE EVENTOS
   ================================================== */

.calendario-contenedor{
    background:var(--blanco);
    padding:30px;
    border-radius:var(--radio);
    box-shadow:var(--sombra);
    margin-bottom:30px;
}

.calendario-contenedor > h1{
    color:var(--verde-principal);
    margin-bottom:10px;
}

.calendario-contenedor > p{
    color:var(--gris);
    margin-bottom:25px;
    line-height:1.6;
}


/* ==========================
   FILTROS
   ========================== */

.filtros-calendario{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:25px;
}

.filtro{
    border:none;
    background:var(--verde-claro);
    color:var(--verde-principal);
    padding:10px 16px;
    border-radius:25px;
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.filtro:hover{
    background:var(--verde-principal);
    color:white;
    transform:translateY(-2px);
}

.filtro.activo{
    background:var(--verde-principal);
    color:white;
}


/* ==========================
   CAMBIO DE MES
   ========================== */

.navegacion-mes{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin:25px 0;
}

.navegacion-mes button{
    width:45px;
    height:45px;
    border:none;
    border-radius:50%;
    background:var(--verde-claro);
    color:var(--verde-principal);
    font-size:28px;
    cursor:pointer;
    transition:.3s;
    flex-shrink:0;
}

.navegacion-mes button:hover{
    background:var(--verde-principal);
    color:white;
}

#mesActual{
    flex:1;
    text-align:center;
    color:var(--verde-principal);
    font-size:24px;
    font-weight:600;
}


/* ==========================
   LEYENDA
   ========================== */

.leyenda-calendario{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    margin-bottom:25px;
}

.leyenda-calendario span{
    background:var(--verde-claro);
    padding:8px 14px;
    border-radius:20px;
    font-size:13px;
    color:var(--texto);
}


/* ==========================
   EVENTOS DEL DÍA
   ========================== */

.eventos-dia{
    background:#F8FCF9;
    border-radius:18px;
    padding:20px;
    margin-top:25px;
}

.eventos-dia h3{
    color:var(--verde-principal);
    margin-bottom:10px;
}

.sin-eventos{
    color:var(--gris);
    font-size:14px;
}


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

@media(max-width:700px){

    .calendario-contenedor{
        padding:18px;
        border-radius:16px;
        margin-left:0;
        margin-right:0;
    }

    .calendario-contenedor > h1{
        font-size:24px;
        line-height:1.3;
    }

    .calendario-contenedor > p{
        font-size:14px;
    }

    .filtros-calendario{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:8px;
    }

    .filtro{
        width:100%;
        padding:10px 6px;
        font-size:12px;
    }

    .navegacion-mes{
        margin:20px 0;
    }

    .navegacion-mes button{
        width:42px;
        height:42px;
        font-size:24px;
    }

    #mesActual{
        font-size:19px;
    }

    .leyenda-calendario{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:8px;
    }

    .leyenda-calendario span{
        text-align:center;
        font-size:11px;
        padding:8px 5px;
    }

    .eventos-dia{
        padding:15px;
    }

}


/* ==================================================
   CELULARES PEQUEÑOS
   ================================================== */

@media(max-width:400px){

    .calendario-contenedor{
        padding:14px;
    }

    .calendario-contenedor > h1{
        font-size:21px;
    }

    .filtros-calendario{
        grid-template-columns:1fr 1fr;
    }

    .filtro{
        font-size:11px;
        padding:9px 4px;
    }

    #mesActual{
        font-size:17px;
    }

    .leyenda-calendario{
        grid-template-columns:1fr;
    }

}