/* General styles */
:root{
    --fondo: #F2F5F9;
    --primary-text: #333;
    --secondary-text: #5c6b73;
    --button-color: #009ee3;
    --button-text: #ffffff;
    --button-menu-color: #5c6b73;
    --button-menu-hover: #007ab8;
    --safe-top: env(safe-area-inset-top, 0px);
    --primary-gradient: linear-gradient(135deg, #00C6FB 0%, #005BEA 100%);


    --bg: #0b1020;
    --muted: #b5c0d0;
    --card: #12172a;
    --accent: #5b7cff;
    --ok: #12b981;
    --warn: #f59e0b;
    --err: #ef4444;

    /* --- Estados --- */
    --success-green: #10B981; /* Verde esmeralda para "Completado" */
    --pending-orange: #F59E0B; /* Naranja suave para "Pendiente" */

    /* --- Sombras (Clave para el efecto 3D suave) --- */
      --shadow-soft: 0 10px 25px -5px rgba(0, 132, 255, 0.15);
      --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05);


    /* --- Tipografía --- */
      /* Recomiendo 'Inter' o 'DM Sans' de Google Fonts */
      --font-family: 'Inter', system-ui, -apple-system, sans-serif;

}

/* Estilos generales */
html, body {
    margin: 0;
    padding: 0;
    height: auto;
    min-height: 100dvh;
    overscroll-behavior: none; /* Permite scroll pero evita el rebote */
    padding-top: env(safe-area-inset-top, 0);
}

body {
    font-family: var(--font-family);
    background: linear-gradient(135deg, #007bff, #00d4ff);
    color: white;
    padding-top: env(safe-area-inset-top, 0);
}

header {
    color: #ffffff; /* Texto blanco */
    padding: 20px;
    text-align: center;
}

main {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

h1, h2 {
    color: white; /* Color azul para títulos */
}

a {
    color: #007bff; /* Color azul para enlaces */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

footer {
    background: transparent; /* Fondo gris claro */
    position: relative;
    bottom: 0px; /* Separación del borde inferior */
    color: white; /* Texto oscuro */
    padding: 20px;
}

footer a{
  text-decoration: none; /* Quita el subrayado */
  color: white; /* Cambia el color del enlace */
}

footer p{
  font-size: small;
}

/* Formulario de configuración de cookies */
form#cookie-settings {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

form#cookie-settings label {
    display: flex;
    align-items: center;
    gap: 10px;
}

form#cookie-settings button {
    background: #007bff; /* Fondo azul */
    color: #ffffff; /* Texto blanco */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
}

form#cookie-settings button:hover {
    background: #0056b3; /* Azul más oscuro al pasar el ratón */
}

/* Barra superior */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 20px;
    background: transparent;
}

.logo img {
    height: 60px;
}

.cookie-policy-container{
    margin-left: 10%;
    margin-right: 10%;
}

/* Mensajes Flash */
.alert {
    padding: 15px;
    margin: 0 auto; /* Centrar horizontalmente */
    position: fixed; /* Fijar en la pantalla */
    top: 10px; /* Distancia desde la parte superior */
    left: 50%; /* Centrar horizontalmente */
    transform: translateX(-50%); /* Ajuste para centrar completamente */
    z-index: 1000; /* Asegurarse de que esté sobre otros elementos */
    width: 80%; /* Ajustar ancho relativo al tamaño de la pantalla */
    max-width: 500px; /* Limitar el ancho máximo */
    text-align: center;
    font-size: 1em;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Añadir sombra para destacar */
    border-radius: 8px; /* Bordes redondeados */
}

/* Éxito */
.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

/* Error */
.alert-error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}