/* Admin styles to match public site */
/* This file overrides/extends public/assets/css/style.css for admin pages only */

:root{
    /* Paleta inspirada en verde salvia / beige / dorado suave */
    --admin-bg: #f6f3ee; /* blanco cálido / crema */
    --admin-surface: #ffffff; /* tarjetas */
    --sidebar-bg: #3b5a48; /* verde salvia oscuro */
    --sidebar-grad: linear-gradient(180deg,#3b5a48,#2f4b3a);
    --admin-accent: #c9a853; /* dorado suave */
    --admin-text: #21323a; /* gris oscuro para textos */
    --admin-subtext: #6b7280; /* gris secundario */
    /* aliases for compatibility */
    --muted: var(--admin-subtext);
    --gray: var(--admin-subtext);
    --text-color: var(--admin-text);
    --input-border: rgba(33,50,58,0.08);
    --input-focus: rgba(201,168,83,0.18);
    --card-shadow: 0 8px 24px rgba(33,50,58,0.06);
}

/* Forzar color claro en todo el panel administrativo y sus elementos descendientes.
   Especificidad alta para evitar conflictos con estilos externos. */
.admin-layout { display:flex; min-height:100vh; }
.admin-layout, .admin-layout * { color: var(--admin-text) !important; }

html, body{
    height:100%;
    background:var(--admin-bg) !important;
    color:var(--admin-text);
    font-family: "Inter", Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
    font-size:15px;
    line-height:1.45;
}

/* Forzar fondo claro en elementos raíz que puedan venir de estilos globales */
body {
    background-color: var(--admin-bg) !important;
}

/* Asegurar que el header y footer usen superficies claras y contraste */
header {
    background: transparent;
}

footer {
    background: transparent;
    color: var(--admin-muted);
}

/* Main content area when using sidebar */
.admin-main {
    flex:1;
    max-width:1200px;
    margin:28px auto;
    padding:20px 28px;
}

main { max-width:1200px; margin:0; }

/* Header */
header {
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:18px;
}

header img {
    max-height:110px;
    height:auto;
}

header h1 {
    font-family:"Playfair Display", serif;
    color:var(--admin-text);
    margin:0;
}

header h2 {
    color:var(--admin-muted);
    margin:6px 0 0 0;
    font-weight:600;
}

/* Cards for summary */
.admin-summary {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:18px;
    margin-top:18px;
}

.admin-card {
    background:var(--admin-surface);
    border:1px solid rgba(33,50,58,0.04);
    padding:18px;
    border-radius:12px;
    box-shadow:var(--card-shadow);
}

.admin-card h3 {
    margin:0 0 8px 0;
    font-family:"Playfair Display", serif;
}

.admin-card p {
    color:var(--admin-muted);
    margin:6px 0;
}

.admin-card a {
    color:var(--admin-accent);
    text-decoration:none;
    font-weight:700;
}

/* Table styles */
table {
    width:100%;
    border-collapse:collapse;
    background:transparent;
    color:var(--admin-text);
}

table thead th {
    background:transparent;
    color:var(--admin-text);
    text-align:left;
    padding:12px;
    border-bottom:1px solid rgba(33,50,58,0.06);
}

table tbody td { padding:12px 14px; border-bottom:1px solid rgba(33,50,58,0.04); vertical-align:middle; }

table tr:hover td { background: rgba(33,50,58,0.02); }

/* Mejor legibilidad en tablas */
table thead th,
table tbody td {
    font-size:15px;
}

.btn-link {
    background:transparent;
    border:1px solid rgba(33,50,58,0.06);
    color:var(--admin-accent);
    padding:8px 10px;
    border-radius:8px;
    text-decoration:none;
    display:inline-block;
}

/* Form container */
form {
    background:transparent;
    padding:0;
}

form .fs-card {
    background:var(--admin-surface);
    padding:18px;
    border-radius:10px;
}

/* Inputs inside admin keep dark style */
input, select, textarea {
    background:var(--admin-surface);
    border:1px solid var(--input-border);
    color:var(--admin-text);
    padding:10px;
    border-radius:8px;
}

input:focus,
select:focus,
textarea:focus {
    outline:none;
    box-shadow:0 0 0 4px var(--input-focus);
    border-color:rgba(201,168,83,0.35);
}

textarea {
    min-height:120px;
    resize:vertical;
}

::placeholder { color:var(--admin-subtext); }

/* Footer admin */
footer {
    margin-top:28px;
    color:var(--admin-muted);
}

/* Responsive tweaks */
@media(max-width:1000px) {
    .admin-layout { flex-direction:column; }
    .admin-sidebar { position:fixed; left:-280px; top:0; bottom:0; width:260px; transition:left .22s ease; z-index:999; }
    .admin-sidebar.open { left:0 }
    .admin-main { margin-left:0; padding:16px }
}

@media(max-width:600px) { .admin-card { padding:12px } }

/* Helpers específicos para tema oscuro */
.btn { cursor:pointer }
.btn-primary { background:var(--admin-accent); color:#1f2b26; border:0 }
.btn-ghost { background:transparent; color:var(--admin-accent); border:1px solid rgba(33,50,58,0.06) }
.badge { background: rgba(33,50,58,0.04); color:var(--admin-text); padding:6px 8px; border-radius:999px; }
.badge.success { background: rgba(109,189,154,0.12); color:#176b3f }
.badge.gray { background: rgba(33,50,58,0.02); color:var(--admin-subtext) }

/* ===== Login page specific tweaks =====
   target <main> elements that are NOT the admin content area (.admin-main)
   so we don't affect other admin screens that use .admin-main layout.
*/
main:not(.admin-main) {
    max-width:420px;
    margin:40px auto;
    background:var(--admin-surface);
    padding:28px 22px;
    border-radius:12px;
    box-shadow:var(--card-shadow);
    text-align:center;
    color:var(--admin-text);
}

main:not(.admin-main) img {
    max-width:220px;
    height:auto;
    display:block;
    margin:0 auto 14px;
    border-radius:8px;
    box-shadow:0 8px 20px rgba(0,0,0,0.12);
}

main:not(.admin-main) h1,
main:not(.admin-main) h2 { margin:6px 0; }

main:not(.admin-main) form { margin-top:18px; text-align:left; }
main:not(.admin-main) form p { margin-bottom:12px; }

main:not(.admin-main) input[type="text"],
main:not(.admin-main) input[type="password"],
main:not(.admin-main) input[type="date"],
main:not(.admin-main) select,
main:not(.admin-main) textarea {
    width:100%;
    box-sizing:border-box;
    padding:12px 14px;
    border-radius:8px;
    border:1px solid var(--input-border);
    background:rgba(255,255,255,0.98);
    color:var(--admin-text);
}

main:not(.admin-main) button {
    width:100%;
    padding:12px 14px;
    border-radius:8px;
    background:var(--admin-accent);
    color:#1f2b26;
    border:0;
    font-weight:700;
    cursor:pointer;
}

main:not(.admin-main) a { color:var(--admin-accent); display:inline-block; margin-top:8px; }

/* Small screens: reduce margins */
@media(max-width:480px) {
    main:not(.admin-main) { margin:20px 12px; padding:18px; }
}

/* Sidebar styles (admin-sidebar) */
.admin-sidebar { width:300px; background: linear-gradient(180deg,#2f6b52,#2b5a43); color:var(--admin-surface); padding:22px 18px; box-shadow:0 10px 30px rgba(33,50,58,0.12); border-right:1px solid rgba(0,0,0,0.06); }
.admin-sidebar .sidebar-brand { display:flex; gap:12px; align-items:center; margin-bottom:20px }
.admin-sidebar .sidebar-logo { width:60px; height:auto; border-radius:8px; box-shadow:0 8px 22px rgba(0,0,0,0.28); }
.admin-sidebar .sidebar-title { font-weight:800; font-size:1.12rem; color:var(--admin-surface); letter-spacing:0.3px; text-shadow:0 1px 0 rgba(0,0,0,0.25) }
.sidebar-nav { display:flex; flex-direction:column; gap:10px; margin-top:10px }
.sidebar-nav .nav-item, .admin-sidebar .nav-item { color: #fbfbf8; padding:14px 16px; border-radius:10px; text-decoration:none; display:flex; align-items:center; gap:10px; font-size:16px; font-weight:600; opacity:0.98 }
.sidebar-nav .nav-item::before { display:inline-block; margin-right:6px }
.sidebar-nav .nav-item.active, .admin-sidebar .nav-item.active { background: rgba(201,168,83,0.12); color: #1f2b26; font-weight:700; box-shadow: 0 6px 18px rgba(0,0,0,0.14); border-left:6px solid var(--admin-accent); padding-left:12px }
.sidebar-nav .nav-item:hover, .admin-sidebar .nav-item:hover { background: rgba(255,255,255,0.06); color:#fff; transform:none; transition:all .14s ease }

/* Aumentar contraste de los iconos/emojis dentro del nav */
.sidebar-nav .nav-item { text-shadow: 0 1px 0 rgba(0,0,0,0.25) }

/* Header adjustments */
.admin-header { display:flex; justify-content:space-between; align-items:center; padding:16px 28px; background:transparent; }
.brand { display:flex; gap:12px; align-items:center; text-decoration:none }
.brand-logo { width:56px; height:auto; border-radius:6px }
.brand-text .brand-name { font-weight:700 }
.brand-text .brand-sub { font-size:0.85rem; color:var(--admin-subtext) }
.admin-user { margin-left:12px; color:var(--admin-subtext) }

/* Loader */
.loader { border-top-color: var(--admin-accent); }