/* =========================================================
   ZENDIKARSTUDIO — LENGUAJE VISUAL COMPARTIDO
   Personaje / Inventario / futuros módulos personales
   ========================================================= */

:root {
    --zs-ivory: #fffdf8;
    --zs-ivory-soft: #f7f2e8;
    --zs-paper: #f4ead5;
    --zs-navy-950: #06182d;
    --zs-navy-900: #0b2545;
    --zs-navy-800: #123b68;
    --zs-navy-700: #1a5187;
    --zs-gold-700: #8c6427;
    --zs-gold-600: #ad7d31;
    --zs-gold-500: #c99b46;
    --zs-gold-300: #ead39c;
    --zs-gold-100: #f7ebc9;
    --zs-text: #18283b;
    --zs-text-soft: #625a4d;
    --zs-danger: #8b3035;
    --zs-success: #356c4b;
    --zs-border: rgba(173, 125, 49, .34);
    --zs-border-strong: rgba(173, 125, 49, .58);
    --zs-shadow-soft: 0 8px 22px rgba(6, 24, 45, .09);
    --zs-shadow-card: 0 12px 28px rgba(6, 24, 45, .13);
    --zs-radius: 14px;
    --zs-radius-small: 8px;
    --zs-font-body: "Lato", Arial, sans-serif;
    --zs-font-display: "Marcellus", Georgia, serif;
}

html { color-scheme: light; }
body, button, input, select, textarea { font-family: var(--zs-font-body); }
h1, h2, h3, h4, .display-title { font-family: var(--zs-font-display); }

/* Superficie compartida */
.zs-page-surface {
    color: var(--zs-text);
    background:
        radial-gradient(circle at top, rgba(255,255,255,.82), transparent 38%),
        linear-gradient(180deg, #ebe6dc 0%, #f5f1e8 100%);
}

/* Botones: menos app genérica, más registro de Gardenia */
.button,
.inventory-button,
.zs-button {
    min-height: 40px;
    padding: 9px 16px;
    border: 1px solid var(--zs-border-strong);
    border-radius: 7px;
    background: linear-gradient(180deg, #fffefb, #f3ead7);
    color: var(--zs-navy-900);
    font-family: var(--zs-font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .025em;
    box-shadow: 0 2px 0 rgba(140,100,39,.10);
    transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.button:hover,
.inventory-button:hover,
.zs-button:hover {
    filter: none;
    transform: translateY(-1px);
    border-color: var(--zs-gold-600);
    background: linear-gradient(180deg, #fffdf7, #eee0c0);
    box-shadow: 0 5px 14px rgba(6,24,45,.10);
}
.button.primary,
.inventory-button.primary,
.zs-button.primary {
    border-color: #d6b260;
    background: linear-gradient(180deg, #173f6e, #0b294b);
    color: #fffdf8;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 4px 12px rgba(6,24,45,.16);
}
.button.primary:hover,
.inventory-button.primary:hover,
.zs-button.primary:hover {
    background: linear-gradient(180deg, #1c4d82, #0d3158);
}
.button.danger,
.inventory-button.danger,
.zs-button.danger {
    border-color: #b97b7f;
    background: linear-gradient(180deg, #a5484e, #7f272d);
    color: #fff;
}
.button.small,
.inventory-button.small,
.zs-button.small { min-height: 32px; padding: 6px 10px; font-size: 12px; }

/* Formularios */
label, .field-label, .field-block {
    color: var(--zs-navy-900);
    font-family: var(--zs-font-body);
    font-weight: 700;
}
input, select, textarea {
    border: 1px solid rgba(140,100,39,.34);
    border-radius: 6px;
    background: rgba(255,253,248,.95);
    color: var(--zs-text);
    box-shadow: inset 0 1px 2px rgba(6,24,45,.035);
}
input:hover, select:hover, textarea:hover { border-color: rgba(140,100,39,.52); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--zs-gold-600) !important;
    box-shadow: 0 0 0 3px rgba(201,155,70,.15) !important;
}
input[readonly], input:disabled, select:disabled, textarea:disabled {
    background: #efeae0;
    color: #626b76;
    border-color: #d4c9b5;
}

/* Panel institucional/personal */
.panel,
.inventory-panel,
.zs-panel {
    background:
        linear-gradient(180deg, rgba(255,253,248,.98), rgba(249,244,233,.98));
    border: 1px solid var(--zs-border);
    border-top: 3px solid var(--zs-navy-800);
    border-radius: var(--zs-radius);
    box-shadow: var(--zs-shadow-soft);
}
.panel h2,
.inventory-panel h2,
.zs-panel h2 { color: var(--zs-navy-900); font-weight: 400; }

/* Kicker, badges y tags */
.section-kicker,
.inventory-kicker,
.eyebrow,
.zs-kicker {
    color: var(--zs-gold-700);
    font-weight: 800;
    letter-spacing: .14em;
}
.badge, .tag, .save-state, .sheet-badge {
    border: 1px solid rgba(173,125,49,.22);
    background: #f5eee0;
    color: var(--zs-navy-900);
}

/* Mensajes */
.status,
.inventory-notice {
    border-radius: 8px;
    border-color: var(--zs-border);
    background: rgba(255,253,248,.92);
}

/* Separadores */
.zs-rule { border: 0; border-top: 1px solid var(--zs-border); margin: 18px 0; }

@media (max-width: 640px) {
    .button, .inventory-button, .zs-button { letter-spacing: 0; }
}