/* Estilos Base y Variables */
:root {
    --bg-color-dark: #1a1a1a;
    --text-color-dark: #e0e0e0;
    --primary-color-dark: #00ffcc; /* Neon cyan */
    --secondary-color-dark: #ff00ff; /* Neon magenta */
    --accent-color-dark: #ffff00; /* Neon yellow */
    --border-color-dark: var(--primary-color-dark);
    --button-bg-dark: var(--primary-color-dark);
    --button-text-dark: #000;
    --input-bg-dark: #333;
    --input-border-dark: var(--secondary-color-dark);
    --card-bg-dark: #282828;

    --bg-color-light: #f0f0f0;
    --text-color-light: #222;
    --primary-color-light: #007bff; /* Classic blue */
    --secondary-color-light: #6c757d; /* Gray */
    --accent-color-light: #ffc107; /* Amber */
    --border-color-light: var(--primary-color-light);
    --button-bg-light: var(--primary-color-light);
    --button-text-light: #fff;
    --input-bg-light: #fff;
    --input-border-light: #ccc;
    --card-bg-light: #ffffff;
}

body {
    font-family: 'Press Start 2P', cursive; /* Fuente pixelada - requiere importación */
    /* O usa una fuente retro genérica: font-family: 'Courier New', Courier, monospace; */
    margin: 0;
    padding: 0;
    transition: background-color 0.3s, color 0.3s;
}

.dark-theme {
    background-color: var(--bg-color-dark);
    color: var(--text-color-dark);
}

.light-theme {
    background-color: var(--bg-color-light);
    color: var(--text-color-light);
}

.container {
    max-width: 70rem;
    margin: 20px auto;
    padding: 20px;
    border: 3px solid var(--border-color-dark); /* Borde inicial dark */
    box-shadow: 0 0 15px var(--primary-color-dark); /* Sombra neón */
    background-color: var(--card-bg-dark); /* Fondo card inicial dark */
    position: relative; /* Para el botón de tema */
}

.light-theme .container {
    border-color: var(--border-color-light);
    box-shadow: 5px 5px 10px #ccc;
    background-color: var(--card-bg-light);
}


/* --- Header / Navegación --- */
.main-nav {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	background-color: #000; /* Fondo negro para nav */
	padding: 10px 0;
	margin-bottom: 20px;
	border-bottom: 3px solid var(--primary-color-dark);
}
.light-theme .main-nav {
    background-color: var(--primary-color-light);
    border-bottom-color: var(--accent-color-light);
}
.main-nav a {
	color: var(--primary-color-dark);
	text-decoration: none;
	font-size: 1.2em;
	padding: 5px 15px;
	border: 2px solid transparent;
	transition: all 0.3s ease;
}
@media screen and (max-width: 740px) {
	.main-nav {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #000; /* Fondo negro para nav */
		padding: 10px 0;
		margin-bottom: 20px;
		border-bottom: 3px solid var(--primary-color-dark);
	}
}	
.light-theme .main-nav a {
    color: var(--button-text-light);
}

.main-nav a:hover {
    color: var(--secondary-color-dark);
    border-color: var(--secondary-color-dark);
    text-shadow: 0 0 5px var(--secondary-color-dark);
}
.light-theme .main-nav a:hover {
     color: var(--accent-color-light);
     border-color: var(--accent-color-light);
     text-shadow: none;
}

/* --- Botón de Tema --- */
.theme-switcher {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    padding: 8px 12px;
    border: 2px solid var(--accent-color-dark);
    background-color: var(--bg-color-dark);
    color: var(--accent-color-dark);
    font-size: 0.9em;
    box-shadow: 0 0 5px var(--accent-color-dark);
}
.light-theme .theme-switcher {
    border-color: var(--secondary-color-light);
    background-color: var(--bg-color-light);
    color: var(--secondary-color-light);
    box-shadow: 2px 2px 5px #aaa;
}


/* --- Títulos y Texto --- */
h1, h2, h3 {
    color: var(--primary-color-dark);
    text-shadow: 0 0 8px var(--primary-color-dark);
    text-align: center;
    margin-bottom: 20px;
}
.light-theme h1, .light-theme h2, .light-theme h3 {
    color: var(--primary-color-light);
    text-shadow: none;
}

p {
    line-height: 1.6;
    margin-bottom: 15px;
}

/* --- Formularios --- */
.form-group {
    margin-bottom: 15px;
}
.form-group label {
    display: block;
    margin-bottom: 5px;
    color: var(--secondary-color-dark);
}
.light-theme .form-group label {
     color: var(--secondary-color-light);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group textarea,
.form-group select {
    width: calc(100% - 22px); /* Ajustar por padding y borde */
    padding: 10px;
    border: 2px solid var(--input-border-dark);
    background-color: var(--input-bg-dark);
    color: var(--text-color-dark);
    font-family: inherit; /* Usar la fuente del body */
    font-size: 1em;
}
.light-theme .form-group input[type="text"],
.light-theme .form-group input[type="email"],
.light-theme .form-group input[type="password"],
.light-theme .form-group textarea,
.light-theme .form-group select {
    border-color: var(--input-border-light);
    background-color: var(--input-bg-light);
    color: var(--text-color-light);
}

.form-group input[type="file"] {
    color: var(--text-color-dark); /* Estilo básico para input file */
}
.light-theme .form-group input[type="file"] {
     color: var(--text-color-light);
}


.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.password-wrapper input[type="password"],
.password-wrapper input[type="text"] { /* Para cuando se cambia */
     width: calc(100% - 45px); /* Dejar espacio para el ojo */
}
.toggle-password {
    cursor: pointer;
    padding: 10px;
    margin-left: 5px;
    /* Estilizar el 'ojo' aquí (puedes usar un icono) */
    border: 2px solid var(--input-border-dark);
    background-color: var(--input-bg-dark);
    color: var(--primary-color-dark);
}
.light-theme .toggle-password {
    border-color: var(--input-border-light);
    background-color: var(--input-bg-light);
    color: var(--primary-color-light);
}

/* --- Botones --- */
.btn {
    display: inline-block;
    padding: 12px 25px;
    border: 2px solid var(--button-bg-dark);
    background-color: var(--button-bg-dark);
    color: var(--button-text-dark);
    font-family: inherit;
    font-size: 1em;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    margin: 5px;
    box-shadow: 0 0 8px var(--button-bg-dark);
}
.light-theme .btn {
    border-color: var(--button-bg-light);
    background-color: var(--button-bg-light);
    color: var(--button-text-light);
    box-shadow: 3px 3px 5px #aaa;
}

.btn:hover {
    background-color: var(--bg-color-dark);
    color: var(--button-bg-dark);
    box-shadow: 0 0 15px var(--button-bg-dark);
}
.light-theme .btn:hover {
    background-color: var(--bg-color-light);
    color: var(--button-bg-light);
    box-shadow: 5px 5px 8px #999;
}

.btn-secondary {
    background-color: var(--secondary-color-dark);
    border-color: var(--secondary-color-dark);
    box-shadow: 0 0 8px var(--secondary-color-dark);
}
.light-theme .btn-secondary {
     background-color: var(--secondary-color-light);
     border-color: var(--secondary-color-light);
     box-shadow: 3px 3px 5px #aaa;
}
.btn-secondary:hover {
    background-color: var(--bg-color-dark);
    color: var(--secondary-color-dark);
     box-shadow: 0 0 15px var(--secondary-color-dark);
}
.light-theme .btn-secondary:hover {
    background-color: var(--bg-color-light);
    color: var(--secondary-color-light);
     box-shadow: 5px 5px 8px #999;
}

/* --- Ranking --- */
.ranking-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    border: 2px solid var(--secondary-color-dark);
}
.light-theme .ranking-table {
    border-color: var(--secondary-color-light);
}

.ranking-table th, .ranking-table td {
    border: 1px solid var(--secondary-color-dark);
    padding: 10px;
    text-align: left;
}
.light-theme .ranking-table th, .light-theme .ranking-table td {
    border-color: var(--secondary-color-light);
}

.ranking-table th {
    background-color: #000; /* Fondo cabecera tabla */
    color: var(--primary-color-dark);
}
.light-theme .ranking-table th {
     background-color: var(--primary-color-light);
     color: var(--button-text-light);
}


/* --- Test / Preguntas --- */
.pregunta-container {
    border: 2px dashed var(--primary-color-dark);
    padding: 15px;
    margin-bottom: 20px;
    background-color: rgba(0, 0, 0, 0.2); /* Fondo semi-transparente */
}
.light-theme .pregunta-container {
    border-color: var(--primary-color-light);
     background-color: rgba(255, 255, 255, 0.5);
}

.pregunta-imagen {
    max-width: 200px; /* Miniatura */
    max-height: 120px;
    float: right; /* O mostrar antes/después */
    margin-left: 15px;
    border: 1px solid var(--accent-color-dark);
}
.light-theme .pregunta-imagen {
     border-color: var(--accent-color-light);
}

.opciones label {
    display: block;
    margin: 8px 0;
    cursor: pointer;
    padding: 5px;
    border: 1px solid transparent;
}
.opciones input[type="radio"] {
    margin-right: 10px;
    /* Estilos personalizados para radio buttons si se desea */
}
.opciones label:hover {
    border-color: var(--accent-color-dark);
    background-color: rgba(255, 255, 0, 0.1);
}
.light-theme .opciones label:hover {
    border-color: var(--accent-color-light);
    background-color: rgba(255, 193, 7, 0.1);
}

/* --- Cronómetro --- */
#cronometro {
    font-size: 1.5em;
    color: var(--accent-color-dark);
    text-align: center;
    margin-bottom: 20px;
    border: 2px solid var(--accent-color-dark);
    padding: 10px;
    background-color: #000;
    display: inline-block; /* Para que no ocupe todo el ancho */
}
.light-theme #cronometro {
    color: var(--accent-color-light);
    border-color: var(--accent-color-light);
    background-color: var(--card-bg-light);
}


/* --- Mensajes --- */
.mensaje {
    padding: 15px;
    margin: 15px 0;
    border: 2px solid;
    text-align: center;
}
.mensaje-error {
    color: #ff4d4d;
    background-color: rgba(255, 77, 77, 0.2);
    border-color: #ff4d4d;
}
.mensaje-exito {
    color: #4dff4d;
    background-color: rgba(77, 255, 77, 0.2);
    border-color: #4dff4d;
}
/* Ajustes para tema claro */
.light-theme .mensaje-error {
    color: #dc3545;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.light-theme .mensaje-exito {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

/* --- Admin Tablas --- */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
.admin-table th, .admin-table td {
    border: 1px solid var(--secondary-color-dark);
    padding: 8px;
    text-align: left;
    font-size: 0.7em; /* Más pequeño para admin */
}
.light-theme .admin-table th, .light-theme .admin-table td {
     border-color: var(--secondary-color-light);
}
.admin-table th {
    background-color: #111;
    color: var(--primary-color-dark);
}
.light-theme .admin-table th {
     background-color: var(--primary-color-light);
     color: var(--button-text-light);
}
.admin-table td a {
    color: var(--primary-color-dark);
    margin: 0 5px;
    text-decoration: none;
}
.light-theme .admin-table td a {
    color: var(--primary-color-light);
}
.admin-table td a:hover {
    color: var(--accent-color-dark);
    text-decoration: underline;
}
.light-theme .admin-table td a:hover {
     color: var(--accent-color-light);
}
#categoria{
    background-color: hsl(168, 100%, 50%);
    width: 16rem;
    height: 2rem;
    font-size: 15px;
    font-weight: bold;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
/* --- Estilos para Tablas Responsivas (Stacking/Card) --- */

/* ... (Estilos base para .responsive-table, th, td sin cambios) ... */


/* --- Media Query para pantallas pequeñas (AJUSTAR BREAKPOINT) --- */
/* Cambiamos max-width a 740px (o ajusta según necesidad) */
@media screen and (max-width: 740px) {
    .responsive-table {
        border: none; /* Quitar borde general de la tabla */
    }

    .responsive-table thead {
        /* Ocultar la cabecera original */
        display: none;
    }

    .responsive-table tr {
        display: block; /* Convertir filas en bloques (tarjetas) */
        margin-bottom: 15px;
        border: 2px solid var(--primary-color-dark); /* Borde de la tarjeta (oscuro) */
        border-radius: 5px;
        background-color: rgba(0,0,0,0.1);
        padding: 10px;
    }
    .light-theme .responsive-table tr {
        border-color: var(--primary-color-light); /* Borde tarjeta claro */
        background-color: rgba(255,255,255,0.6);
    }

    .responsive-table td {
        display: block; /* Celdas como bloques dentro de la tarjeta */
        text-align: right; /* Alinear contenido a la derecha inicialmente */
        border: none; /* Quitar bordes de celda */
        border-bottom: 1px dashed var(--secondary-color-dark); /* Línea separadora sutil (oscura) */
        padding: 8px 5px 8px 50%; /* Padding: T R B L (dejar espacio para label) */
        position: relative; /* Necesario para el posicionamiento del ::before */
        min-height: 25px;
    }
    .light-theme .responsive-table td {
        border-bottom-color: var(--secondary-color-light); /* Separador claro */
    }

    .responsive-table td:last-child {
        border-bottom: none;
    }

    .responsive-table td::before {
        content: attr(data-label); /* Tomar texto del atributo data-label */
        position: absolute;
        left: 10px; /* Posicionar la etiqueta a la izquierda */
        width: 45%; /* Ancho de la etiqueta */
        padding-right: 10px;
        white-space: nowrap;
        text-align: left; /* Alinear texto de la etiqueta a la izquierda */
        font-weight: bold;
        color: var(--primary-color-dark); /* Color de la etiqueta (oscuro) */
        font-size: 0.9em; /* Hacer etiqueta un poco más pequeña si es necesario */
    }
    .light-theme .responsive-table td::before {
         color: var(--primary-color-light); /* Color etiqueta claro */
    }

    /* Ajustes para el contenido dentro de la celda responsiva */
    .responsive-table td span,
    .responsive-table td ul,
    .responsive-table td img,
    .responsive-table td a {
         text-align: left;
         display: inline-block;
         width: 100%;
         /* Word-wrap para contenido largo */
         word-wrap: break-word;
         overflow-wrap: break-word;
         -webkit-hyphens: auto;
         -moz-hyphens: auto;
         hyphens: auto;
    }
     .responsive-table td ul {
         padding-left: 5px;
         margin-top: 5px;
         text-align: left;
         list-style-position: inside; /* Para que los números queden dentro */
    }
     .responsive-table td ul li {
         margin-bottom: 3px;
         text-align: left;
    }
     .responsive-table td img {
         max-width: 80px !important;
         max-height: 60px !important;
         float: right;
         margin-left: 10px;
     }
     .responsive-table td[data-label="Acciones"] {
           text-align: right; /* Alinear los iconos a la derecha de la etiqueta */
           padding-left: 50%; /* Asegurar que el padding izquierdo se mantenga */
     }
      .responsive-table td[data-label="Acciones"] a {
          display: inline-block;
          margin: 0 8px;
          width: auto;
          font-size: 1.5em;
     }


} /* Fin Media Query (740px) */