/*  =============
Proyecto: To Do List
Autor: Dagoberto17
Descripción: To Do List App con estilo moderno con detalles en naranja
Fecha: Marzo 2026
============= */

/* ============= Fuentes ============= */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* ============= Estilos globales ============= */
* {
	font-family: 'Roboto', sans-serif;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* Fondo y color base solo al body */
body {
	background-color: #f9f9f9;
	color: #333;
}

/* ============= Titulo ============= */
.titulo {
	text-align: center;
	margin: 50px 0;
	font-size: 2rem;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 0.5px;
}

/* ============= Formulario ============= */
/* Estilos globales del formulario */
.formulario {
	width: 90%; /* Ancho de 90% para dejar aire en versión de móviles */
	max-width: 800px;
	margin: 50px auto;
}
.forma {
	display: flex;
	gap: 0.5rem;
}

/* Entrada de texto */
.input_texto {
	flex: 1; /* Es para decir que abarque todo el espacio asignado*/
	padding: 15px 20px;
	border-radius: 15px;
	font-size: 1rem;
	border: solid 1px #ddd;
	transition: all 0.15s ease-in;
}

/* Animación entrada de texto */
.input_texto:focus {
	outline: none;
	border-color: #ff6f00;
}

/* Botón de enviar */
.enviar {
	padding: 15px 15px;
	border: none;
	border-radius: 15px;
	background-color: #ff6f00;
	color: #fff;
	font-size: 1rem;
	cursor: pointer;
	transition: all 0.15s ease;
}

/* Animación de botón */
.enviar:hover {
	background-color: #e65100;
}

/* ============= Lista de tareas ============= */
/* Globales */
.lista {
	width: 90%; /* Ancho de 90% para dejar aire en versión de móviles */
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Elemento */
.elemento {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #ffffff;
	border: solid 1px #e2e2e2;
	border-radius: 15px;
	padding: 15px 10px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	transition: all 0.15s ease-in;
}

/* Animación de elementos */
.elemento:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

/* Texto de cada nota */
.tarea {
	flex: 1;
	margin: 0 15px;

	font-size: 1rem;
	color: #444;
}

/* Iconos */
/* Globales */
.circulo,
.eliminar,
.editar {
	cursor: pointer;
	font-size: 1.2rem;
	color: #888;
	transition: all 0.2s ease-in;
	padding: 3px;
	margin: 0 10px;
}

/* Animaciones */
/* Completar */
.circulo:hover {
	color: #ff6f00;
	transform: scale(1.1);
}

/* Eliminar */
.eliminar:hover {
	color: #ff0011;
	transform: scale(1.1);
}

/* Editar */
.editar:hover {
	color: #0091ff;
	transform: scale(1.1);
}

/* ===== Estilo de tarea completada ===== */
.elemento.completada {
	background-color: #f0f0f0;
	border: 1px solid #ccc;
	opacity: 0.8;
	transform: scale(0.99);
	transition: all 0.3s ease-in-out;
}

.elemento.completada .tarea {
	text-decoration: line-through;
	color: #555;
	font-style: italic;
}

.circulo.fa-circle-check {
	color: #2e7d32;
}

/* ========== Próximos estilos ========== */
/* Agregar estilos para tarea completada */
/* Agregar diseño responsive en el futuro */
/* Agregar diseño para confirmaciones de edición y eliminación */