/* Reiniciamos margenes de body para que no interfieran con navegadores móviles */
body {
    margin: 0;
    padding: 0;
    font-family: Verdana, sans-serif;
}

/* Contenedor principal: aquí aplicamos márgenes, anchura máxima y centrado */
.container {
    max-width: 600px;
    margin: 30px auto; /* Subimos a 30px para aumentar la separación */
    padding: 0;
}

/* Aseguramos que headers/footers queden centrados */
/header, footer {
/    text-align: center;
/}

/* Encabezado de la ventana: fondo azul claro */
header {
    text-align: center;
    /* background-color: #bbdefb;  Azul claro */
    /* padding: 10px;              Espacio interno */
    /* border-radius: 10px;        Esquinas redondeadas */
}

footer {
    text-align: center;
}


/* Listas simples (sin viñetas) */
ul {
    list-style-type: none;
    padding-left: 0;
}

/* Mensajes de error/success en <li> */
li.error {
    color: red;
}
li.success {
    color: green;
}

/* Ajuste para tablas (scroll horizontal si excede la pantalla) */
table {
    border-collapse: collapse;
    width: 100%;
    overflow-x: auto;
    display: block; /* Permite el scroll en algunos navegadores */
}

/* Borde y padding en celdas de tabla */
table, th, td {
    border: 1px solid #999;
    padding: 5px;
}

/* Checkboxes más grandes (accesibles) */
input[type="checkbox"] {
    transform: scale(1.2);
    margin-right: 5px;
}

/* Botones con estilo básico */
/button {
/    cursor: pointer;
/    padding: 8px 12px;
/   border: 1px solid #333;
/    background: #eee;
/}

button {
  padding: 10px 20px;
  background-color: #c1001f;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #5a6268;
}

button:active {
  background-color: #545b62;
}

/* Títulos con margen superior reducido */
h1, h2 {
    margin-top: 1;
}

/* Media query para pantallas muy pequeñas (<=400px) */
@media (max-width: 400px) {
    .container {
        /* Forzamos más margen y algo de relleno interno en pantallas muy estrechas */
        margin: 30px !important;
        padding: 15px !important;
    }
    body {
        font-size: 0.95em;
    }
}

/* Botón gris (mismo estilo que el azul) */
.btn-gray {
  padding: 10px 20px;
  background-color: #6c757d;   /* gris */
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.btn-gray:hover {
  background-color: #5a6268;
}

.btn-gray:active {
  background-color: #5a6268;
}

/* Normalizar tamaño del enlace “Atrás” */
.back-link {
  /* Modelo de caja y espaciado */
  display: inline-block;
  margin: 1rem 0;               /* margen arriba/abajo */
  padding: 8px 16px;            /* relleno interno */

  /* Fondo y borde */
  background-color: ##ffffff;       /* color de fondo */
  border: 1px solid #2f2f2f;       /* grosor y color de borde */
  border-radius: 5px;            /*esquinas redondeadas */

  /* Tipografía */
  font-family: inherit;         /* hereda la familia de la página */
  font-size: 1em;               /* tamaño de fuente */
  /*font-weight: bold;             grosor */
  line-height: 1.2;             /* altura de línea */
  /*text-transform: uppercase;     mayúsculas */
  /*letter-spacing: 0.05em;        espaciado entre letras */
  color: #2f2f2f;                  /* color del texto */
  text-decoration: none;        /* sin subrayado */

  /* Alineación */
  text-align: center;

  /* Cursor */
  cursor: pointer;

 
  /* Accesibilidad */
  outline: none;
}

.back-link:hover,
.back-link:active {
  background-color: #ccc;            /* fondo al hacer clic */
  /*transform: translateY(1px);         ligero desplazamiento hacia abajo */
}

.back-link:focus-visible {
  outline: 2px dashed #007bff;       /* estilo de enfoque visible */
  outline-offset: 2px;
}

/* Header con logo a la izquierda */
.site-header {
  display: flex;
  flex-direction: column;   /* apila logo sobre título */
  align-items: center;      /* centra horizontalmente ambos elementos */
  justify-content: center;  /* centra verticalmente si le das altura */
  text-align: center;       /* por si el Flex falla, como respaldo */
  padding: 1rem;            /* opcional, espaciado interno */
 /* background: #bee1ff;       tu color de fondo */
 /* border-radius: 8px;        redondear esquinas del header */
}

.site-logo {
  width: 100px;
  height: auto;
  border-radius: 10%;   /* 10% del ancho/alto */
  margin-bottom: 0.5rem;    /* espacio entre logo y título */
  display: block;           /* para que margin auto funcione */
}

.site-title {
  margin: 0;
  font-size: 2rem;
}