/* ==========================================================
   ARCHIVO : index.css

   PROYECTO : Ablochat

   DESCRIPCIÓN GENERAL:
   Este archivo contiene todos los estilos visuales de la
   pantalla principal de acceso a Ablochat.

   FUNCIONALIDADES INCLUIDAS:
   - Diseño general de la página.
   - Pantalla de inicio de sesión.
   - Formulario de registro.
   - Modal de aceptación de políticas y privacidad.
   - Sistema de pestañas Login / Registro.
   - Validación visual de campos.
   - Selector de imagen de perfil.
   - Notificaciones tipo Toast.
   - Diseño responsive para dispositivos móviles.
   - Iconos SVG embebidos mediante Data URI.

   NOTA:
   Cualquier modificación visual relacionada con la pantalla
   de acceso debe realizarse dentro de este archivo.

   AUTOR : Gustavo
   ÚLTIMA ACTUALIZACIÓN : 2026
========================================================== */
/* =====================================================
   RESET Y CONFIGURACIÓN GLOBAL
===================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;}
/* =====================================================
   VARIABLES DE COLORES Y CONFIGURACIÓN
===================================================== */
:root {
  --color-principal: #25D366;
  --color-secundario: #128C7E;
  --color-claro: #F0F4F8;
  --color-blanco: #FFFFFF;
  --color-gris-claro: #E5E7EB;
  --color-gris: #9CA3AF;
  --color-oscuro: #1F2937;
  --color-error: #EF4444;
  --color-exito: #10B981;
  --transicion: all 0.3s ease; }
/* =====================================================
   ESTRUCTURA GENERAL DE LA PÁGINA
===================================================== */
body {
  background-color: var(--color-claro);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100dvh;
  overflow: hidden;
  padding: 0;}

html, body {
  height: 100%;
  overflow: hidden;}
/* =====================================================
   MODAL DE POLÍTICAS Y PRIVACIDAD
===================================================== */
.modal-politicas {
  pointer-events: auto;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 20px;
  opacity: 1;
  transition: opacity 0.3s ease;}

.modal-politicas.oculto {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;}

.contenido-modal {
  background-color: var(--color-blanco);
  border-radius: 16px;
  max-width: 380px;
  width: 100%;
  padding: 30px 25px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  transform: scale(1.05);
  transition: transform 0.3s ease;}

.modal-politicas.oculto .contenido-modal {
  transform: scale(0.95);}

.titulo-modal {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-oscuro);
  text-align: center;
  margin-bottom: 15px;}

.texto-modal {
  font-size: 0.95rem;
  color: var(--color-gris);
  line-height: 1.5;
  margin-bottom: 20px;
  text-align: justify;}

.enlaces-modal {
  margin-bottom: 25px;
  text-align: center;}

.enlaces-modal a {
  color: var(--color-principal);
  text-decoration: none;
  font-size: 0.9rem;
  margin: 0 10px;}

.enlaces-modal a:hover {
  text-decoration: underline;}

.btn-aceptar-modal {
  width: 100%;
  background-color: var(--color-principal);
  color: var(--color-blanco);
  border: none;
  border-radius: 8px;
  padding: 14px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transicion);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2);}

.btn-aceptar-modal:hover {
  background-color: var(--color-secundario);
  transform: translateY(-1px);}

.btn-aceptar-modal:active {
  transform: translateY(0);}

.contenedor-app-bloqueado {
  opacity: 0.7;
  pointer-events: none;
  transition: all 0.3s ease;}
/* =====================================================
   CONTENEDOR PRINCIPAL DE LA APLICACIÓN
===================================================== */
.contenedor-app {
  width: 100%;
  max-width: 400px;
  background-color: var(--color-blanco);
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  position: relative; }
/* =====================================================
   CABECERA Y TÍTULOS
===================================================== */
.cabecera-app {
  background: linear-gradient(135deg, var(--color-secundario), var(--color-principal));
  padding: 25px 20px;
  text-align: center;
  color: var(--color-blanco); }

.titulo-app {
  font-size: 1.8rem;
  font-weight: 600; }

.subtitulo-app {
  font-size: 0.95rem;
  opacity: 0.9;
  margin-top: 5px; }

.contenedor-formularios {
  padding: 20px;}
/* =====================================================
   PESTAÑAS LOGIN / REGISTRO
===================================================== */
.pestanas {
  display: flex;
  margin-bottom: 25px;
  border-bottom: 1px solid var(--color-gris-claro); }

.pestana {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  font-weight: 500;
  color: var(--color-gris);
  cursor: pointer;
  transition: var(--transicion);
  position: relative; }

.pestana.activa {
  color: var(--color-principal); }

.pestana.activa::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-principal); }
/* =====================================================
   FORMULARIOS Y ANIMACIONES
===================================================== */
.formulario {
  display: none;
  flex-direction: column;
  gap: 20px;
  animation: fadeIn 0.4s ease forwards;}

.formulario.activo {
  display: flex;}

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

.grupo-campo {
  display: flex;
  flex-direction: column;
  gap: 8px; }

.texto-imagen small {
  font-size: 0.75rem;
  margin-top: 3px;
  display: block;
  opacity: 0.8;}
/* =====================================================
   CAMPOS DE ENTRADA Y VALIDACIÓN
===================================================== */
.campo-input {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-gris-claro);
  border-radius: 8px;
  padding: 0 15px;
  transition: var(--transicion);
  background-color: var(--color-claro);}

input:invalid {
  border-color: var(--color-error);}

input:valid {
  border-color: var(--color-exito);}

.campo-input:has(input:invalid) {
  border-color: var(--color-error);}

.campo-input:has(input:valid) {
  border-color: var(--color-exito);}

.campo-input:focus-within {
  border-color: var(--color-principal);
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1); }

.campo-input select,
.campo-input input {
  flex: 1;
  border: none;
  outline: none;
  padding: 14px 0;
  background-color: transparent;
  font-size: 1rem;
  color: var(--color-oscuro); }
  
.campo-input select {
  width: 100%;
  cursor: pointer; }

.campo-input input::placeholder {
  color: var(--color-gris);}

.campo-input i {
  width: 24px;
  height: 24px;
  display: inline-block;
  margin-right: 10px;}
/* =====================================================
   SUBIDA Y PREVISUALIZACIÓN DE IMAGEN DE PERFIL
===================================================== */
.campo-imagen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 15px;
  border: 2px dashed var(--color-gris-claro);
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transicion);
  justify-content: center;
  background-color: var(--color-claro); }

.campo-imagen:hover {
  border-color: var(--color-principal);
  background-color: rgba(37, 211, 102, 0.05); }

.preview-imagen {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  display: none;
  border: 2px solid var(--color-principal); }

.texto-imagen {
  text-align: center;
  color: var(--color-gris);}

.campo-input:hover {
  border-color: var(--color-principal);}

.texto-imagen span {
  display: block;
  font-size: 0.85rem;
  margin-top: 5px; }

#input-imagen {
  display: none; }
/* =====================================================
   BOTONES DE ACCIÓN
===================================================== */
.btn-enviar {
  background-color: var(--color-principal);
  color: var(--color-blanco);
  border: none;
  border-radius: 8px;
  padding: 14px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transicion);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2);}

.btn-enviar:hover {
  background-color: var(--color-secundario);
  transform: translateY(-1px);}

.icon-camera {
  opacity: 0.7;
  transition: 0.3s;}

.campo-imagen:hover .icon-camera {
  opacity: 1;
  transform: scale(1.1);}

.btn-enviar:active {
  transform: translateY(0); }
/* =====================================================
   MENSAJES INFORMATIVOS
===================================================== */
.mensaje-estado {
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 0.85rem;
  text-align: center;
  display: none;
  margin-bottom: 15px;}

.pie-formulario {
  text-align: center;
  margin-top: 20px;
  font-size: 0.85rem;
  color: var(--color-gris);}

.pie-formulario a {
  color: var(--color-principal);
  text-decoration: none;
  font-weight: 500;}

.pie-formulario a:hover {
  text-decoration: underline;}
/* =====================================================
   SISTEMA DE NOTIFICACIONES TOAST
===================================================== */
#toast-container {
  top: 20px;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;}

.toast {
  min-width: 250px;
  max-width: 90vw;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 0.9rem;
  color: #fff;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);}

.toast.show {
  opacity: 1;
  transform: translateY(0);}

.toast.success {
  background: #10B981;}

.toast.error {
  background: #EF4444;}

.toast.info {
  background: #3B82F6;}
/* =====================================================
   DISEÑO RESPONSIVO PARA PANTALLAS PEQUEÑAS
===================================================== */
@media (max-width: 400px) {

  body {
    align-items: flex-start;
    padding-top: 10px;
  }

  .contenedor-app {
    transform: scale(0.85);
    transform-origin: top center;
  }

}
/* =====================================================
   ICONOS SVG EMBEBIDOS
===================================================== */
.icon-mundo{
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm7.93 9h-3.18a15.7 15.7 0 00-1.38-5.03A8.02 8.02 0 0119.93 11zM12 4c1.3 1.5 2.3 3.6 2.75 6H9.25C9.7 7.6 10.7 5.5 12 4zM4.07 13h3.18c.2 1.9.8 3.7 1.38 5.03A8.02 8.02 0 014.07 13zM7.25 11H4.07a8.02 8.02 0 014.56-5.03C8.05 7.3 7.45 9.1 7.25 11zM12 20c-1.3-1.5-2.3-3.6-2.75-6h5.5c-.45 2.4-1.45 4.5-2.75 6zm3.37-1.97c.58-1.33 1.18-3.13 1.38-5.03h3.18a8.02 8.02 0 01-4.56 5.03z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;}

.icon-phone {
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.3 1.2.4 2.5.6 3.8.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.3 21 3 13.7 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.6.6 3.8.1.4 0 .8-.3 1.1l-2.2 2.2z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;}

.icon-lock {
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17 9h-1V7a4 4 0 10-8 0v2H7a2 2 0 00-2 2v8a2 2 0 002 2h10a2 2 0 002-2v-8a2 2 0 00-2-2zm-6 0V7a2 2 0 114 0v2h-4z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;}

.icon-camera {
  width: 34px;
  height: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9 3l-1.5 2H5a2 2 0 00-2 2v11a2 2 0 002 2h14a2 2 0 002-2V7a2 2 0 00-2-2h-2.5L15 3H9zm3 5a5 5 0 110 10 5 5 0 010-10z'/%3E%3Ccircle cx='12' cy='13' r='2.5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;}

.icon-user {
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;}