/* ================= KIT DE MARCA Y VARIABLES ================= */
:root {
  --primario: #b22222;
  --primario-oscuro: #8b0000;
  --secundario: #2c3e50;
  --exito: #27ae60;
  --peligro: #e74c3c;
  --advertencia: #f39c12;
  --promociones: #9b59b6;
  --fondo-claro: #f4f6f9;
  --blanco: #ffffff;
  --sombra-base: 0 2px 10px rgba(0,0,0,0.1);
  --sombra-hover: 0 6px 16px rgba(0,0,0,0.15);
  --fuente-principal: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--fuente-principal);
  background-color: var(--fondo-claro);
  color: var(--secundario);
}

/* ================= CABECERAS Y NAVEGACIÓN ================= */
.header-blue {
  background-color: var(--blanco);
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: var(--sombra-base);
  border-bottom: 3px solid var(--primario);
}

.main-logo { max-width: 260px; height: auto; }
.header-title { font-size: 1.5rem; font-weight: bold; color: var(--secundario); text-transform: uppercase;}

.admin-nav {
  background-color: var(--primario);
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-nav a, .dropbtn {
  color: var(--blanco);
  text-decoration: none;
  font-weight: bold;
  padding: 8px 15px;
  border-radius: 6px;
  text-transform: uppercase;
  font-size: 0.9rem;
  transition: 0.2s;
  background: transparent;
  border: none;
  cursor: pointer;
}

.admin-nav a:hover, .dropbtn:hover { background-color: var(--primario-oscuro); }

/* Menú Desplegable */
.dropdown { position: relative; display: inline-block; }
.dropdown-content {
  display: none; position: absolute; right: 0;
  background-color: var(--blanco); min-width: 200px;
  box-shadow: var(--sombra-hover); z-index: 100; border-radius: 8px;
  overflow: hidden;
}
.dropdown-content a {
  color: var(--secundario); padding: 12px 16px; text-decoration: none;
  display: block; border-bottom: 1px solid #eee; text-transform: uppercase;
}
.dropdown-content a:hover { background-color: #f1f1f1; color: var(--primario); }
.show { display: block; }

/* ================= TARJETAS Y CONTENEDORES ================= */
.container { max-width: 1200px; margin: 30px auto; padding: 0 20px; }

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.card {
  background: var(--blanco);
  padding: 25px 20px;
  border-radius: 12px;
  box-shadow: var(--sombra-base);
  text-align: center;
  text-decoration: none;
  color: var(--secundario);
  transition: all 0.2s;
  border-top: 4px solid var(--primario);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-hover);
  border-color: var(--advertencia);
}

.card h3 { font-size: 1.2rem; margin-bottom: 10px; text-transform: uppercase; }
.card p { color: #7f8c8d; font-size: 0.9rem; text-transform: uppercase;}

/* ================= BOTONES Y FORMULARIOS ================= */
.btn {
  padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer;
  font-weight: bold; text-transform: uppercase; transition: 0.2s; font-size: 0.9rem;
}
.btn:active { transform: scale(0.96); }
.btn-primary { background-color: var(--primario); color: var(--blanco); }
.btn-primary:hover { background-color: var(--primario-oscuro); }
.btn-success { background-color: var(--exito); color: var(--blanco); }
.btn-danger { background-color: var(--peligro); color: var(--blanco); }
.btn-warning { background-color: var(--advertencia); color: var(--blanco); }
.btn-small { padding: 5px 10px; font-size: 0.8rem; border-radius: 4px; }

.filtros {
  background: var(--blanco); padding: 20px; border-radius: 12px;
  box-shadow: var(--sombra-base); margin-bottom: 20px;
}
.filtros label { font-weight: bold; text-transform: uppercase; font-size: 0.85rem; }
.input-field, select, input[type="date"], input[type="text"], input[type="number"], input[type="password"] {
  width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px;
  font-family: var(--fuente-principal); font-size: 1rem; margin-bottom: 15px;
}

/* ================= TABLAS (DATATABLES) ================= */
table { width: 100%; border-collapse: collapse; background: var(--blanco); border-radius: 12px; overflow: hidden; box-shadow: var(--sombra-base); }
thead { background-color: var(--secundario); color: var(--blanco); }
th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #eee; }
th { text-transform: uppercase; font-size: 0.85rem; }
tr:hover { background-color: #f9f9f9; }

/* ================= ALERTAS (FLASH) ================= */
.flash-messages { position: fixed; top: 20px; right: 20px; z-index: 9999; }
.flash-message { padding: 15px 25px; margin-bottom: 10px; border-radius: 8px; color: white; font-weight: bold; box-shadow: var(--sombra-hover); }
.flash-success { background-color: var(--exito); }
.flash-warning { background-color: var(--advertencia); }
.flash-error { background-color: var(--peligro); }