/* Estilos para los temas de la aplicación */

/* Tema Claro (predeterminado) */
.tema-claro {
    --color-fondo: #e9ecef;
    --color-texto: #212529;
    --color-principal: #007bff;
    --color-secundario: #f8f9fa;
    --color-boton: #007bff;
    --color-boton-texto: #ffffff;
    --color-borde: #ced4da;
    --color-header: #343a40;
    --color-header-texto: #ffffff;
    --color-footer: #343a40;
    --color-footer-texto: #ffffff;
    --color-enlace: #007bff;
    --color-enlace-hover: #0056b3;
}

/* Tema Oscuro */
.tema-oscuro {
    --color-fondo: #1a1a1a;
    --color-texto: #f8f9fa;
    --color-principal: #343a40;
    --color-secundario: #2d2d2d;
    --color-boton: #6c757d;
    --color-boton-texto: #ffffff;
    --color-borde: #495057;
    --color-header: #212529;
    --color-header-texto: #f8f9fa;
    --color-footer: #212529;
    --color-footer-texto: #f8f9fa;
    --color-enlace: #adb5bd;
    --color-enlace-hover: #99a1a8;
}

/* Tema Marino */
.tema-marino {
    --color-fondo: #e3f2fd;
    --color-texto: #01579b;
    --color-principal: #0288d1;
    --color-secundario: #b3e5fc;
    --color-boton: #0277bd;
    --color-boton-texto: #ffffff;
    --color-borde: #81d4fa;
    --color-header: #01579b;
    --color-header-texto: #ffffff;
    --color-footer: #01579b;
    --color-footer-texto: #ffffff;
    --color-enlace: #0288d1;
    --color-enlace-hover: #01579b;
}

/* Tema Happy */
.tema-happy {
    --color-fondo: #fce4ec;
    --color-texto: #880e4f;
    --color-principal: #e91e63;
    --color-secundario: #f8bbd0;
    --color-boton: #c2185b;
    --color-boton-texto: #ffffff;
    --color-borde: #f48fb1;
    --color-header: #880e4f;
    --color-header-texto: #ffffff;
    --color-footer: #880e4f;
    --color-footer-texto: #ffffff;
    --color-enlace: #e91e63;
    --color-enlace-hover: #ad1457;
}

/* Tema Steampunk */
.tema-steampunk {
    --color-fondo: #e5e5e5;
    --color-texto: #3e2723;
    --color-principal: #795548;
    --color-secundario: #a1887f;
    --color-boton: #5d4037;
    --color-boton-texto: #ffffff;
    --color-borde: #8d6e63;
    --color-header: #5d4037;
    --color-header-texto: #ffffff;
    --color-footer: #5d4037;
    --color-footer-texto: #ffffff;
    --color-enlace: #795548;
    --color-enlace-hover: #5d4037;
}

/* Aplicación de estilos globales */
body {
    background-color: var(--color-fondo);
    color: var(--color-texto);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* Estilos para el header */
header {
    background-color: var(--color-header);
    color: var(--color-header-texto);
    padding: 15px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Estilos para el footer */
footer {
    background-color: var(--color-footer);
    color: var(--color-footer-texto);
    text-align: center;
    padding: 15px 0;
    margin-top: 20px;
}

/* Estilos para los botones */
.boton, button, input[type="button"], input[type="submit"] {
    background-color: var(--color-boton);
    color: var(--color-boton-texto);
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s, opacity 0.3s;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.boton:hover, button:hover, input[type="button"]:hover, input[type="submit"]:hover {
    opacity: 0.9;
}

/* Estilos para enlaces */
a {
    color: var(--color-enlace);
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: var(--color-enlace-hover);
}

/* Estilos para formularios */
input[type="text"], input[type="email"], input[type="password"], input[type="date"], textarea, select {
    width: 100%;
    padding: 10px;
    margin: 5px 0 15px;
    border: 1px solid var(--color-borde);
    border-radius: 5px;
    font-size: 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--color-secundario);
    color: var(--color-texto);
}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="date"]:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--color-principal);
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* Estilos para tarjetas */
.card {
    background-color: var(--color-secundario);
    border: 1px solid var(--color-borde);
    border-radius: 5px;
    padding: 20px;
    margin: 10px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Estilos para tablas */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    background-color: var(--color-secundario);
}

table th, table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--color-borde);
}

table th {
    background-color: var(--color-principal);
    color: var(--color-boton-texto);
}

table tr:hover {
    background-color: rgba(0, 123, 255, 0.1);
}

/* Estilos para mensajes de alerta */
.alert {
    padding: 15px;
    margin: 10px 0;
    border-radius: 5px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert-warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

/* Estilos para el contenedor principal */
.main-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Estilos para el menú de navegación */
.nav-menu {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: var(--color-principal);
}

.nav-menu li {
    margin: 0;
}

.nav-menu li a {
    display: block;
    padding: 10px 20px;
    color: var(--color-boton-texto);
    transition: background-color 0.3s;
}

.nav-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Estilos para el contenido de la configuración */
.config-content {
    background-color: var(--color-secundario);
    border: 1px solid var(--color-borde);
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Estilos para los botones de selección de tema */
.seleccion-tema {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
    cursor: pointer;
    transition: transform 0.2s;
}

.seleccion-tema:hover {
    transform: scale(1.05);
}

.boton-tema {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-bottom: 5px;
    border: 3px solid var(--color-borde);
    transition: all 0.3s;
}

.boton-tema.claro { background-color: #007bff; }
.boton-tema.oscuro { background-color: #6c757d; }
.boton-tema.marino { background-color: #0288d1; }
.boton-tema.happy { background-color: #e91e63; }
.boton-tema.steampunk { background-color: #5d4037; }

.nombre-tema {
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    color: var(--color-texto);
}

.estilo-seleccionado {
    border-color: #ffd700 !important;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
}

/* Estilos para el botón de guardar */
.boton-guardar {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.boton-guardar:hover {
    background-color: #218838;
}

/* Estilos para el mensaje de confirmación */
.mensaje {
    margin-top: 20px;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.exito {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Estilos para el contenedor de estilos */
.estilos-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 20px;
    background-color: var(--color-secundario);
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Estilos para el título */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-principal);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Estilos para el botón de guardar estilo */
#btn_guardar_estilo {
    background-color: var(--color-boton);
    color: var(--color-boton-texto);
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s, opacity 0.3s;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#btn_guardar_estilo:hover {
    opacity: 0.9;
}