:root{
    --Morado:#803ab9;
    --Aqua:#27bdbf;
    --Naranja:#ff621d;
    --Fresa:#f12851;
    --Cobalto:#00598c;
    --Verde:#27bd45;
    --Amarillo:#fcc400;
    --Blanco:#FFFFFF;
    --GrisClaro:#ccc2c0;
    --Obscuro:#333333;

    --font-small:clamp(.8rem,2.2vw,.875rem);
    --font-base:clamp(.9rem,2.5vw,1rem);
    --font-medium:clamp(1rem,3vw,1.125rem);
    --font-large:clamp(1.2rem,4vw,1.6rem);
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-tap-highlight-color: transparent;
}
html,body{
    width:100%;
    min-height:100%;
    background:var(--Obscuro);
    font-family:'Open Sans',sans-serif;
    color:var(--Blanco);
    overflow-x:hidden;
    scroll-behavior:smooth;
}
/* =========================
   CONTENEDOR PRINCIPAL
========================= */
#principal{
    width:100%;
    max-width:600px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:20px;
    padding:
        calc(20px + env(safe-area-inset-top))
        calc(15px + env(safe-area-inset-right))
        calc(20px + env(safe-area-inset-bottom))
        calc(15px + env(safe-area-inset-left));
    min-height:100vh;
    min-height:100svh;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
}

/* =========================
   BLOQUES
========================= */

.hola,
.logo_home,
.entrar,
.registro,
.desarrollado{
    width:100%;
}

/* HOLA */
.hola{
    text-align:center;
}
.hola h1{
    color:var(--Amarillo);
    font-size:var(--font-large);
}
.hola p{
    color:var(--GrisClaro);
    font-size:var(--font-base);
    margin-top:6px;
}

/* LOGO */
.logo_home{
    display:flex;
    justify-content:center;
    align-items:center;
}
.logo_home img{
    width:100%;
    max-width:220px;
    height:auto;
    object-fit:contain;
}

/* BOTÓN ENTRAR */
.entrar{
    display:flex;
    flex-direction:column;
    text-align:center;
    justify-content:center;
}

/* REGISTRO */
.registro{
    text-align:center;
}
.entrar p,
.registro p{
    color:var(--GrisClaro);
    font-size:var(--font-small);
    line-height:1.4;
    margin-bottom:12px;
}

/* FOOTER */
.desarrollado{
    margin-top:auto;
    text-align:center;
}
.desarrollado span{
    font-size:var(--font-small);
    color:var(--GrisClaro);
}
.desarrollado img{
    height:50px;
    margin-top:6px;
}

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

.btn{
    display:block;
    width:100%;
    max-width:300px;
    margin:0 auto;
    height:48px;
    line-height:48px;
    text-align:center;
    text-decoration:none;
    font-weight:700;
    font-size:var(--font-medium);
    color:#fff;
    border:none;
    border-radius:4px;
    cursor:pointer;
    transition:filter 0.3s ease;
}

.btn--verde { background:var(--Verde); }
.btn--morado { background:var(--Morado); }

.btn:hover{
    filter:brightness(1.1);
}

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

form{
    width:100%;
}

input, textarea, select, button{
    font-size:16px; /* evita zoom en iOS */
}





/* =========================
   FORMULARIO LOGIN
========================= */

.formulario{
    width:100%;
    max-width:400px;
    margin:0 auto;
    text-align:left;
}

.formulario label{
    display:block;
    font-size:var(--font-small);
    color:var(--GrisClaro);
    margin-bottom:4px;
}

.formulario input[type="email"],
.formulario input[type="password"],
.formulario input[type="text"]{
    width:100%;
    height:42px;
    padding:0 12px;
    margin-bottom:12px;

    border-radius:4px;
    border:none;

    font-size:var(--font-base);
    outline:none;
}

/* =========================
   FILA CHECKBOXES
========================= */

.fila-recordarme-y-mostrar-pass{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-bottom:15px;
}

.recordarme,
.mostrar-pass{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:var(--font-small);
    color:var(--GrisClaro);
    cursor:pointer;
}

.recordarme input,
.mostrar-pass input{
    cursor:pointer;
}

/* =========================
   BOTÓN LOGIN
========================= */

.formulario button{
    display:block;
    width:100%;
    max-width:300px;
    margin:10px auto 0;

    height:48px;
    line-height:48px;

    text-align:center;
    font-weight:700;
    font-size:var(--font-medium);

    color:#fff;
    border:none;
    border-radius:4px;

    background:var(--Verde);
    cursor:pointer;
    transition:filter 0.3s ease;
}

.formulario button:hover{
    filter:brightness(1.1);
}

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

.registro_login,
.olvide{
    text-align:center;
    margin-top:12px;
}

.registro_login a,
.olvide a{
    color:var(--Amarillo);
    font-size:var(--font-small);
    text-decoration:none;
}

.registro_login a:hover,
.olvide a:hover{
    text-decoration:underline;
}

/* =========================
   ERROR
========================= */

.error{
    background:var(--Fresa);
    color:white;
    padding:10px;
    border-radius:4px;
    margin-bottom:12px;
    font-size:var(--font-small);
    text-align:center;
}





/* =========================
   SUCCESS (REGISTRO)
========================= */

.success{
    background:var(--Verde);
    color:var(--Blanco);
    padding:20px;
    text-align:center;
    margin-bottom:12px;
}

/* Botón secundario dentro de success */
.btn_secundario{
    display:inline-block;
    margin-top:10px;

    padding:10px 16px;

    font-size:var(--font-small);
    font-weight:700;

    background:var(--Blanco);
    color:var(--Verde);

    text-decoration:none;
    border:none;
    cursor:pointer;
}

/* =========================
   LINK "YA TENGO CUENTA"
========================= */

.ya_tengo_cuenta{
    text-align:center;
    margin-top:12px;
}

.ya_tengo_cuenta a{
    color:var(--Amarillo);
    font-size:var(--font-small);
    text-decoration:none;
}

.ya_tengo_cuenta a:hover{
    text-decoration:underline;
}

#contenedor_seleccion {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 600px;
    margin: 0 auto;
    background: var(--Obscuro);
    padding-bottom: 80px; /* 🔥 clave para menú */
}

/* HEADER */
.header_usuario {
    padding: 30px 20px 10px;
    text-align: center;
}

.header_usuario h1 {
    color: var(--Amarillo);
    font-size: var(--font-large);
}

.header_usuario p {
    font-size: var(--font-small);
    color: var(--GrisClaro);
}

/* CONTENIDO */
.seccion_listado {
    flex: 1;
    padding: 20px;
}

/* LISTA */
.lista_botones {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ITEM */
.grupo-item {
    background: rgba(255,255,255,0.05);
    padding: 16px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* HEADER ITEM */
.grupo-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* NOMBRE */
.grupo-nombre {
    color: #fff;
    font-weight: 600;
}

/* ROL */
.tag_rol {
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 700;
}

.tag_rol.lider { background: var(--Amarillo); color: #000; }
.tag_rol.miembro { background: var(--GrisClaro); color: #fff; }

/* ACCIONES */
.grupo-acciones {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn_accion {
    flex: 1;
    text-align: center;
    padding: 8px;
    font-size: var(--font-small);
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    color: #fff;
}

.ver { background: var(--Aqua); }
.tareas { background: var(--Fresa); }
.editar { background: var(--Morado); }
.eliminar { background: var(--Cobalto); }


/* EMPTY */
.sin-grupos {
    text-align: center;
    color: var(--GrisClaro);
    margin-top: 30px;
}

/* FOOTER */
.footer_estatico {
    padding: 30px 10px;
    text-align: center;
}

/* =========================
   HEADER HORIZONTAL (LOGO)
========================= */
.header_horizontal {
    padding: 40px 0 20px;
    display: flex;
    justify-content: center;
}
.header_horizontal img {
    width: 80%;
    height: auto;
}

/* =========================
   ITEM GRUPO SIMPLE
========================= */
.btn_grupo_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.05);
    padding: 18px;
    border-radius: 4px;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.1);
}

/* =========================
   MENÚ FIXED (FALTABA)
========================= */
.nav-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: #1a1a1a;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: center;
    z-index: 1000;
}

.menu {
    width: 100%;
    max-width: 600px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.menu-item {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.menu-item img {
    height: 40px; /* 🔥 esto evita lo "gigante" */
    width: auto;
    opacity: 0.8;
}

.menu-item:hover img {
    opacity: 1;
}









/* =========================
   MÓVIL
========================= */

@media (max-width:768px){

    #principal{
        gap:15px;
    }

    .btn{
        height:40px;
        line-height:40px;
        font-size:var(--font-small);
        max-width:220px;
    }
    .logo_home img{
	width:180px;
	max-width:none;
	}

}

/* =========================
   LANDSCAPE (CLAVE)
========================= */

@media (orientation:landscape) and (max-width:768px){

    #principal{
        min-height:auto;
    }
    .desarrollado{
        margin-top:20px;
    }

}

/* =========================
   EXTRA UX
========================= */

body{
    overscroll-behavior-x:none;
}