/* ===========================================================
   GESTOR DE PROMOCIONES
   Autor: ChatGPT
   =========================================================== */

:root{

	--color-principal:#0d6efd;
	--color-fondo:#f5f6fa;
	--color-texto:#333;
	--color-blanco:#fff;
	--color-borde:#ddd;
	--radio:12px;
	--sombra:0 4px 18px rgba(0,0,0,.12);

}

*{

	margin:0;
	padding:0;
	box-sizing:border-box;

}

body{
	font-size:20px;
	font-family:Segoe UI,Tahoma,sans-serif;
	background:var(--color-fondo);
	color:var(--color-texto);

}

header{

	background:#1EB000;
	color:white;
	padding:25px;
	text-align:center;
	margin-bottom:30px;
	box-shadow:0 2px 10px rgba(0,0,0,.2);

}

header h1{

	font-size:34px;
	font-weight:600;

}

header p{

	opacity:.9;
	margin-top:8px;

}

.contenedor{

	width:95%;
	max-width:1600px;
	margin:auto;

	display:grid;

	grid-template-columns:
		repeat(auto-fill,minmax(300px,1fr));

	gap:25px;

	padding-bottom:50px;

}

a {
    color: #0077cc;
    text-decoration: none;
    font-weight: 500;
	font-size: 20px;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

a:hover {
    color: #005fa3;
    text-decoration: underline;
}

a:visited {
    color: #6a5acd;
}

a:active {
    color: #003f6b;
}

a:focus {
    outline: 2px solid #66afe9;
    outline-offset: 2px;
}

/***********************
	  TARJETAS
************************/

.tarjeta{

	background:white;
	border-radius:15px;
	overflow:hidden;
	box-shadow:var(--sombra);
	transition:.25s;

}

.tarjeta:hover{

	transform:translateY(-5px);
	box-shadow:0 10px 30px rgba(0,0,0,.18);

}

.tarjeta img{

	width:100%;
	height:210px;
	object-fit:cover;

}

.contenido{

	padding:18px;

}

.tipo{

	display:inline-block;

	padding:8px 15px;

	border-radius:40px;

	color:white;

	font-weight:bold;

	font-size:15px;

	margin-bottom:15px;

}

.tarjeta h2{

	font-size:23px;
	margin-bottom:12px;

}

.tarjeta p{

	color:#555;
	line-height:1.5;
	margin-bottom:20px;

}

.pie{

	display:flex;
	justify-content:space-between;
	align-items:center;
	font-size:14px;
	color:#666;

}

.pie div{

	display:flex;
	align-items:center;
	gap:6px;

}

/***********************
 BOTONES
************************/

button{

	cursor:pointer;
	border:none;
	border-radius:8px;
	padding:12px 20px;
	font-size:15px;
	transition:.2s;

}

.btn{

	background:var(--color-principal);
	color:white;

}

.btn:hover{

	background:#0b5ed7;

}

.btn-verde{

	background:#198754;
	color:white;

}

.btn-verde:hover{

	background:#157347;

}

.btn-rojo{

	background:#dc3545;
	color:white;

}

.btn-rojo:hover{

	background:#bb2d3b;

}

.btn-gris{

	background:#6c757d;
	color:white;

}

/***********************
 FORMULARIOS
************************/

form{

	background:white;

	padding:25px;

	border-radius:15px;

	box-shadow:var(--sombra);

}

label{

	display:block;

	margin-top:18px;

	margin-bottom:6px;

	font-weight:bold;

}

input[type=text],
input[type=date],
input[type=file],
textarea,
select{

	width:100%;

	padding:12px;

	border:1px solid #ccc;

	border-radius:8px;

	font-size:15px;

}

textarea{

	resize:vertical;

	min-height:120px;

}

input:focus,
textarea:focus,
select:focus{

	outline:none;

	border-color:#0d6efd;

}

/***********************
 TABLAS
************************/

table{

	width:100%;
	border-collapse:collapse;
	background:white;
	box-shadow:var(--sombra);

}

th{

	background:#0d6efd;
	color:white;

}

th,td{

	padding:12px;
	border-bottom:1px solid #eee;

}

tr:hover{

	background:#f6f6f6;

}

/***********************
 TARJETAS ADMIN
************************/

.listaAdmin{

	display:grid;

	gap:20px;

}

.adminPromo{

	background:white;

	border-radius:12px;

	box-shadow:var(--sombra);

	display:flex;

	overflow:hidden;

}

.adminPromo img{

	width:170px;

	object-fit:cover;

}

.adminDatos{

	flex:1;

	padding:20px;

}

.adminDatos h3{

	margin-bottom:10px;

}

.adminBotones{

	margin-top:15px;

	display:flex;

	gap:10px;

	flex-wrap:wrap;

}

/***********************
 BUSCADOR
************************/

.buscador{

	background:white;

	padding:20px;

	border-radius:12px;

	box-shadow:var(--sombra);

	margin-bottom:25px;

}

.buscador input{

	width:100%;

}

/***********************
 CONTADORES
************************/

.estadisticas{

	display:grid;

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

	gap:20px;

	margin-bottom:30px;

}

.caja{

	background:white;

	padding:25px;

	border-radius:12px;

	box-shadow:var(--sombra);

	text-align:center;

}

.numero{

	font-size:42px;

	font-weight:bold;

	margin-bottom:10px;

}

.verde{

	color:#198754;

}

.amarillo{

	color:#ffc107;

}

.rojo{

	color:#dc3545;

}

/***********************
 ETIQUETA
************************/

.badge{

	display:inline-block;

	padding:6px 12px;

	border-radius:25px;

	color:white;

	font-size:13px;

	font-weight:bold;

}

/***********************
 RESPONSIVE
************************/

@media(max-width:1200px){

.contenedor{
font-size:28px;
grid-template-columns:
repeat(auto-fill,minmax(280px,1fr));

}

}

@media(max-width:900px){

.adminPromo{

flex-direction:column;

}

.adminPromo img{

width:100%;
height:220px;

}

}

@media(max-width:700px){

header h1{

font-size:28px;

}

.contenedor{

grid-template-columns:1fr;

}

.tarjeta img{

height:220px;

}

.pie{

flex-direction:column;

align-items:flex-start;

gap:10px;

}

}

@media(max-width:500px){

header{

padding:20px;

}

.contenido{

padding:15px;

}

.tarjeta h2{

font-size:20px;

}

}

.mensaje{

padding:15px;

margin-bottom:20px;

border-radius:10px;

color:white;

font-weight:bold;

}

.mensaje.verde{

background:#198754;

}

.mensaje.amarillo{

background:#d39e00;

}

.mensaje.rojo{

background:#dc3545;

}


.filtros{

display:flex;

gap:10px;

flex-wrap:wrap;

margin-bottom:20px;

}


.contenedorAdmin{

width:95%;

max-width:1400px;

margin:auto;

padding-bottom:50px;

}