/* ========================================================= */
/* CONFIGURACIÓN GENERAL PANEL ADMINISTRADOR */
/* ========================================================= */

body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    background:
        radial-gradient(circle at top left,#2d6a4f 0,#111820 32%,#080d11 100%);
    color:#eef4f1;
}

/* Contenedor principal */
#contenedor{
    max-width:1180px;
    margin:auto;
    min-height:100vh;
    background:rgba(20,30,38,0.96);
    box-shadow:0 0 45px rgba(0,0,0,0.65);
}


/* ========================================================= */
/* CABECERA PANEL ADMIN */
/* ========================================================= */

header{
    padding:35px;
    background:
        linear-gradient(135deg,#101820,#1b2a33,#183f34);
    border-bottom:1px solid #34444d;
}

/* Título principal */
header h1{
    margin:0;
    font-size:42px;
    color:#a8e6a3;
}

/* Subtítulo */
header h2{
    color:#dce8df;
    font-weight:normal;
}


/* ========================================================= */
/* NAVEGACIÓN Y BOTONES GENERALES */
/* ========================================================= */

nav a,
.boton,
button,
input[type=submit]{
    background:#2d6a4f;
    color:white;
    text-decoration:none;
    border:0;
    border-radius:10px;
    padding:11px 18px;
    margin:6px;
    display:inline-block;
    cursor:pointer;
    font-weight:bold;
    transition:0.3s;
}

/* Hover botones */
nav a:hover,
.boton:hover,
button:hover,
input[type=submit]:hover{
    background:#c9a227;
    color:#111820;
}

/* Botón especial cerrar sesión */
.boton.cerrar{
    background:#7d2f2f;
}

.boton.cerrar:hover{
    background:#c94c4c;
    color:white;
}


/* ========================================================= */
/* ESTRUCTURA GENERAL PANEL */
/* ========================================================= */

section{
    padding:35px;
}

/* Títulos principales */
section h2{
    font-size:34px;
    color:#a8e6a3;
}

.panel-productos{
    padding:38px;
}

.titulo-admin{
    margin:0;
    font-size:42px;
    color:#a8e6a3;
}

.subtitulo-admin{
    color:#dce8df;
    margin-bottom:35px;
    font-size:18px;
}

.panel-productos h2{
    color:#c9a227;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:18px;
}


/* ========================================================= */
/* TABLA DE PRODUCTOS */
/* ========================================================= */

.tabla-productos{
    width:100%;
    border-collapse:collapse;
    background:#1e2a32;
    color:#eef4f1;
    margin-bottom:40px;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,0.28);
}

/* Cabecera tabla */
.tabla-productos th{
    background:#0f171d;
    color:#c9a227;
    padding:14px;
    text-transform:uppercase;
    font-size:13px;
}

/* Celdas */
.tabla-productos td{
    padding:13px;
    border-bottom:1px solid #34444d;
    text-align:center;
}

/* Hover filas */
.tabla-productos tr:hover{
    background:#263944;
}


/* ========================================================= */
/* FORMULARIOS ADMIN */
/* ========================================================= */

.bloque-formulario{
    border:1px solid #3d505a;
    border-radius:18px;
    margin-top:30px;
    padding:28px;
    background:linear-gradient(135deg,#1a242c,#202f38);
    box-shadow:0 10px 25px rgba(0,0,0,0.25);
}

/* Títulos formularios */
.bloque-formulario legend{
    color:#c9a227;
    font-size:26px;
    font-weight:bold;
    padding:0 14px;
    text-transform:uppercase;
}

/* Insertar producto destacado */
.bloque-formulario.insertar legend{
    font-size:34px;
    color:#a8e6a3;
}

/* Labels */
.bloque-formulario label{
    display:block;
    margin-top:15px;
    margin-bottom:5px;
    color:#dce8df;
    font-weight:bold;
}


/* ========================================================= */
/* INPUTS / SELECT / TEXTAREA */
/* ========================================================= */

input,
select,
textarea{
    padding:12px;
    margin:5px 8px 10px 0;
    border:1px solid #465a64;
    border-radius:8px;
    background:#0f171d;
    color:#fff;
}

/* Focus */
input:focus,
select:focus,
textarea:focus{
    outline:none;
    border-color:#c9a227;
}

/* Textarea */
textarea{
    min-width:300px;
    min-height:80px;
}

/* Grupo de medidas */
.grupo-medidas{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.grupo-medidas input{
    width:180px;
}


/* ========================================================= */
/* BOTONES FINALES */
/* ========================================================= */

.botones-finales{
    text-align:center;
    margin-top:45px;
    padding-top:28px;
    border-top:1px solid #34444d;
}

.botones-finales .boton{
    min-width:140px;
}


/* ========================================================= */
/* FOOTER PANEL */
/* ========================================================= */

footer{
    text-align:center;
    padding:22px;
    background:#0f171d;
    color:#aeb8bd;
}


/* ========================================================= */
/* LOGIN ADMINISTRADOR */
/* ========================================================= */

/* Fondo específico de la pantalla de login */
.login-admin{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    background:
        radial-gradient(circle at top left,#2d6a4f 0,#111820 32%,#080d11 100%);
    color:#eef4f1;
    min-height:100vh;
}

/* Centrado vertical y horizontal del login */
.login-contenedor{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
}

/* Caja principal del formulario */
.caja-login{
    width:390px;
    background:rgba(20,30,38,0.96);
    border:1px solid #3d505a;
    border-radius:22px;
    padding:38px;
    box-shadow:0 0 45px rgba(0,0,0,0.65);
}

/* Título del login */
.caja-login h1{
    margin:0;
    font-size:36px;
    color:#a8e6a3;
    text-align:center;
}

/* Subtítulo del login */
.caja-login h2{
    color:#c9a227;
    text-align:center;
    text-transform:uppercase;
    font-size:18px;
    letter-spacing:1px;
    margin-top:12px;
}

/* Texto explicativo */
.texto-login{
    color:#dce8df;
    text-align:center;
    font-size:15px;
    margin-bottom:28px;
}

/* Etiquetas del formulario */
.caja-login label{
    display:block;
    margin-top:16px;
    margin-bottom:6px;
    color:#dce8df;
    font-weight:bold;
}

/* Campos usuario y contraseña */
.caja-login input[type="text"],
.caja-login input[type="password"]{
    width:100%;
    box-sizing:border-box;
    padding:13px;
    border:1px solid #465a64;
    border-radius:9px;
    background:#0f171d;
    color:#fff;
}

/* Focus campos login */
.caja-login input:focus{
    outline:none;
    border-color:#c9a227;
}

/* Botón entrar al panel */
.caja-login input[type="submit"]{
    width:100%;
    background:#2d6a4f;
    color:white;
    border:0;
    border-radius:10px;
    padding:13px;
    margin-top:24px;
    cursor:pointer;
    font-weight:bold;
    transition:0.3s;
}

/* Hover botón entrar */
.caja-login input[type="submit"]:hover{
    background:#c9a227;
    color:#111820;
}

/* Mensaje de error */
.error-login{
    background:#7d2f2f;
    color:white;
    padding:12px;
    border-radius:8px;
    text-align:center;
    margin-bottom:18px;
}


/* ========================================================= */
/* BOTONES DEL LOGIN */
/* ========================================================= */

/* Contenedor del botón volver */
.acciones-login{
    margin-top:18px;
    text-align:center;
}

/* Botón secundario volver a tienda */
.acciones-login .boton-secundario{
    display:block !important;
    width:100%;
    box-sizing:border-box;
    text-decoration:none !important;
    text-align:center;
    padding:13px;
    border-radius:10px;
    background:#1b242c !important;
    border:1px solid #465a64;
    color:#dce8df !important;
    font-weight:bold;
    transition:0.3s;
    font-size:15px;
}

/* Hover botón volver */
.acciones-login .boton-secundario:hover{
    background:#263944 !important;
    border-color:#c9a227;
    color:#e8d18f !important;
}


/* ========================================================= */
/* ENLACES DE AYUDA LOGIN */
/* ========================================================= */

/* Contenedor ayuda */
.ayuda-login{
    margin-top:22px;
    text-align:center;
    font-size:13px;
    color:#8fa1a8;
    line-height:1.8;
}

/* Enlaces ayuda */
.ayuda-login a{
    color:#9bb5bc !important;
    text-decoration:none !important;
    font-weight:normal;
}

/* Hover enlaces ayuda */
.ayuda-login a:hover{
    color:#c9a227 !important;
}

/* Separador entre enlaces */
.ayuda-login span{
    margin:0 8px;
    color:#50616a;
}

/* BOTÓN CAMBIO DE TEMA */

.boton-tema{
    background:#c9a227;
    color:#10251f;
    border:none;
    padding:12px 20px;
    border-radius:10px;
    cursor:pointer;
    font-weight:bold;
    margin:15px 0 30px 0;
}

.boton-tema:hover{
    background:#f0d27a;
}


/* MODO CLARO PANEL ADMIN */

.boton-tema{
    background:#c9a227;
    color:#10251f;
    border:none;
    padding:12px 20px;
    border-radius:10px;
    cursor:pointer;
    font-weight:bold;
    margin:15px 0 30px 0;
}

body.modo-claro{
    background:#f5f5f5;
    color:#222;
}

body.modo-claro #contenedor{
    background:#ffffff;
}

body.modo-claro .panel-productos{
    background:#ffffff;
    color:#222;
}

body.modo-claro .tabla-productos{
    background:white;
    color:#222;
}

body.modo-claro .tabla-productos th{
    background:#e9e9e9;
    color:#10251f;
}

body.modo-claro .bloque-formulario{
    background:#fafafa;
    color:#222;
}

body.modo-claro input,
body.modo-claro textarea,
body.modo-claro select{
    background:white;
    color:#222;
    border:1px solid #ccc;
}

/* BOTÓN CAMBIO TEMA */

.boton-tema{
    background:#c9a227;
    color:#10251f;
    border:none;
    padding:12px 20px;
    border-radius:10px;
    cursor:pointer;
    font-weight:bold;
    margin:15px 0 30px 0;
}

.boton-tema:hover{
    background:#f0d27a;
}


/* MODO CLARO */

body.modo-claro{
    background:#f5f5f5 !important;
    color:#222 !important;
}

body.modo-claro #contenedor{
    background:#ffffff !important;
    box-shadow:0 0 25px rgba(0,0,0,0.18) !important;
}

body.modo-claro .panel-productos{
    background:#ffffff !important;
    color:#222 !important;
}

body.modo-claro .titulo-admin{
    color:#1f4d3a !important;
}

body.modo-claro .subtitulo-admin{
    color:#333 !important;
}

body.modo-claro .panel-productos h2{
    color:#b08a20 !important;
}

body.modo-claro .tabla-productos{
    background:white !important;
    color:#222 !important;
}

body.modo-claro .tabla-productos th{
    background:#e9e9e9 !important;
    color:#10251f !important;
}

body.modo-claro .tabla-productos td{
    border-color:#ddd !important;
}

body.modo-claro .tabla-productos tr:hover{
    background:#f1f1f1 !important;
}

body.modo-claro .bloque-formulario{
    background:#fafafa !important;
    border:1px solid #ddd !important;
    color:#222 !important;
}

body.modo-claro .bloque-formulario legend{
    color:#b08a20 !important;
}

body.modo-claro .bloque-formulario.insertar legend{
    color:#1f4d3a !important;
}

body.modo-claro .bloque-formulario label{
    color:#222 !important;
}

body.modo-claro input,
body.modo-claro textarea,
body.modo-claro select{
    background:white !important;
    color:#222 !important;
    border:1px solid #ccc !important;
}

body.modo-claro footer{
    background:#f2f2f2 !important;
    color:#333 !important;
}

/* =============================== */
/* MODO CLARO FORZADO ADMIN */
/* =============================== */

html body.modo-claro{
    background:#f4f4f4 !important;
    color:#1f1f1f !important;
}

html body.modo-claro #contenedor{
    background:#ffffff !important;
    color:#1f1f1f !important;
    box-shadow:0 0 25px rgba(0,0,0,0.18) !important;
}

html body.modo-claro .panel-productos{
    background:#ffffff !important;
    color:#1f1f1f !important;
}

html body.modo-claro .titulo-admin{
    color:#1f4d3a !important;
}

html body.modo-claro .subtitulo-admin{
    color:#333333 !important;
}

html body.modo-claro h1,
html body.modo-claro h2,
html body.modo-claro h3,
html body.modo-claro label,
html body.modo-claro p{
    color:#1f1f1f !important;
}

html body.modo-claro .tabla-productos{
    background:#ffffff !important;
    color:#222222 !important;
}

html body.modo-claro .tabla-productos th{
    background:#e6e6e6 !important;
    color:#10251f !important;
}

html body.modo-claro .tabla-productos td{
    background:#ffffff !important;
    color:#222222 !important;
    border-bottom:1px solid #dddddd !important;
}

html body.modo-claro .bloque-formulario{
    background:#f7f7f7 !important;
    border:1px solid #cccccc !important;
    color:#222222 !important;
}

html body.modo-claro .bloque-formulario legend{
    color:#b08a20 !important;
}

html body.modo-claro input,
html body.modo-claro textarea,
html body.modo-claro select{
    background:#ffffff !important;
    color:#222222 !important;
    border:1px solid #bbbbbb !important;
}

html body.modo-claro footer{
    background:#eeeeee !important;
    color:#333333 !important;
}