@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;800&family=Manrope:wght@400;500;700&display=swap');

:root {
    --bg: #130f12;
    --panel: rgba(24, 18, 22, 0.88);
    --panel-alt: rgba(34, 25, 31, 0.95);
    --muted: #d0c1ab;
    --ink: #fff4e5;
    --gold: #cca35a;
    --gold-soft: #f1ddb2;
    --wine: #7d3143;
    --border: rgba(226, 197, 136, 0.2);
    --shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    --radius: 24px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html:has(body.admin-body) {
    scroll-behavior: auto;
}

body {
    margin: 0;
    font-family: 'Manrope', sans-serif;
    background:
        radial-gradient(circle at top, rgba(204, 163, 90, 0.1), transparent 28%),
        radial-gradient(circle at 20% 20%, rgba(125, 49, 67, 0.18), transparent 22%),
        linear-gradient(180deg, #130f12 0%, #0e0c0f 100%);
    color: var(--ink);
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-family: 'Cinzel', serif;
    line-height: 1.08;
}

p {
    margin-top: 0;
}

.site-shell,
.admin-shell {
    width: min(1220px, calc(100% - 28px));
    margin: 0 auto;
}

.hero {
    position: relative;
    padding: 26px 0 20px;
    margin-bottom:20px;
}

.hero-overlay {
    position: absolute;
    inset: 24px 0 0;
    border: 1px solid var(--border);
    border-radius: 36px;
    background:
        linear-gradient(145deg, rgba(204, 163, 90, 0.12), transparent 36%),
        linear-gradient(180deg, rgba(125, 49, 67, 0.48), rgba(16, 13, 16, 0.92));
    box-shadow: var(--shadow);
}

.hero-inner,
.content-section,
.admin-section,
.admin-card,
.admin-login-card,
.metric-card,
.dashboard-table,
.dashboard-detail,
.content-panel,
.site-form,
.hero-copy,
.highlight-card,
.info-card,
.faq-card,
.media-card,
.site-flash,
.flash {
    position: relative;
    z-index: 1;
}
.hero-copy{
    margin-bottom:20px;
}

.admin-section{
  margin-bottom:20px;
}

.hero-inner {
    padding: 42px;
}

.hero-brand {
    display: flex;
    align-items: center;
    gap: 24px;
}

.hero-logo {
    width: 350px;
    filter: drop-shadow(0 0 24px rgba(204, 163, 90, 0.35));
}

.eyebrow {
    margin: 0 0 10px;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--gold-soft);
}

h1 {
    font-size: clamp(2.4rem, 6vw, 5rem);
    max-width: 12ch;
}

.hero-subtitle,
.section-heading > p,
.helper-text,
label,
input,
select,
textarea,
table,
.timeline-item span,
.timeline-item small {
    color: var(--muted);
}

.main-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 28px 0 34px;
}

.tab-button,
.ghost-link,
.admin-nav a,
.editor-toolbar button {
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink);
    border-radius: 999px;
    padding: 10px 16px;
    cursor: pointer;
    font: inherit;
}

.tab-button.is-active,
.tab-button:hover,
.ghost-link:hover,
.admin-nav a:hover,
.admin-nav a.is-active {
    background: linear-gradient(135deg, rgba(204, 163, 90, 0.18), rgba(255, 255, 255, 0.08));
    border-color: rgba(226, 197, 136, 0.44);
}

.producer-intro-card {
    margin-bottom: 22px;
}

.hero-grid,
.split-layout,
.dashboard-layout {
    display: grid;
    gap: 22px;
    align-items: start;
}

.hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
    margin-bottom: 20px;
}

.split-layout,
.dashboard-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
}

.stacked-section {
    display: grid;
    gap: 18px;
}

.hero-copy,
.content-panel,
.site-form,
.dashboard-detail,
.admin-login-card {
    padding: 28px;
}
.content-panel{
  margin-bottom:20px;
}

.highlight-card,
.info-card,
.faq-card,
.admin-card,
.metric-card,
.media-card {
    padding: 22px;
}

.hero-copy,
.content-panel,
.site-form,
.highlight-card,
.info-card,
.faq-card,
.admin-card,
.admin-login-card,
.dashboard-table,
.dashboard-detail,
.metric-card,
.media-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.content-stack {
    padding-bottom: 50px;
}

.tab-panel {
    display: none;
}

.tab-panel.is-visible {
    display: block;
}

.content-section,
.admin-section {
    padding: 30px;
    background: rgba(24, 18, 22, 0.76);
    border: 1px solid var(--border);
    border-radius: 30px;
    box-shadow: var(--shadow);
}

.section-heading {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: end;
    margin-bottom: 22px;
}

.section-heading h2 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.card-grid,
.faq-list,
.admin-grid,
.metric-grid,
.media-grid,
.art-columns {
    display: grid;
    gap: 18px;
}

.admin-grid{
    margin-top: 20px;
}

.card-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.admin-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.metric-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin: 24px 0;
}

.art-columns {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.media-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.highlight-card + .highlight-card {
    margin-top: 16px;
}

.highlight-card span,
.info-card span {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--gold-soft);
}

.primary-btn,
.secondary-btn,
.danger-btn {
    border: none;
    border-radius: 999px;
    min-height: 42px;
    padding: 0 20px;
    cursor: pointer;
    font: inherit;
}

.primary-btn {
    background: linear-gradient(135deg, var(--gold), var(--gold-soft));
    color: #241911;
    font-weight: 700;
}

.secondary-btn {
    background: transparent;
    color: var(--ink);
    border: 1px solid rgba(226, 197, 136, 0.35);
}

.danger-btn {
    background: rgba(125, 49, 67, 0.2);
    color: #ffd8de;
}

.site-form,
.stack-form {
    display: grid;
    gap: 14px;
    align-content: start;
}

.form-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

label {
    display: grid;
    gap: 8px;
    font-size: 0.95rem;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid rgba(226, 197, 136, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    padding: 11px 13px;
    font: inherit;
}

textarea {
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid rgba(204, 163, 90, 0.24);
    border-color: rgba(204, 163, 90, 0.56);
}

.timeline-list {
    display: grid;
    gap: 12px;
    max-height: 420px;
    overflow: auto;
    padding-right: 6px;
    margin-top: 15px;
}

.timeline-item {
    padding: 14px 16px;
    border-left: 3px solid var(--gold);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
}

.timeline-item strong,
.timeline-item span,
.timeline-item small {
    display: block;
}

.timeline-item strong {
    margin-bottom: 4px;
    color: var(--gold-soft);
}

.status-chip {
    display: inline-flex;
    width: fit-content;
    margin-top: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
}

.status-agendado {
    background: rgba(78, 137, 255, 0.22);
    color: #bdd4ff;
}

.status-realizado {
    background: rgba(73, 169, 110, 0.22);
    color: #c7f5d3;
}

.status-cancelado {
    background: rgba(207, 78, 78, 0.22);
    color: #ffd2d2;
}

.status-warning {
    background: rgba(214, 171, 57, 0.22);
    color: #ffe8a1;
}

.art-column {
    display: grid;
    gap: 16px;
    align-content: start;
}

.media-card {
    padding: 12px;
}

.media-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 10px;
}

.gallery-group + .gallery-group {
    margin-top: 28px;
}

.gallery-group h3 {
    margin-bottom: 16px;
}

.wide-panel {
    max-width: none;
}

.flash,
.site-flash {
    margin: 18px auto;
    padding: 16px 18px;
    border-radius: 18px;
}

.flash-success {
    background: rgba(87, 140, 96, 0.18);
    border: 1px solid rgba(87, 140, 96, 0.34);
}

.flash-error {
    background: rgba(125, 49, 67, 0.22);
    border: 1px solid rgba(125, 49, 67, 0.34);
}

.flash-warning {
    background: rgba(214, 171, 57, 0.16);
    border: 1px solid rgba(214, 171, 57, 0.34);
}

.admin-shell {
    padding: 24px 0 48px;
}

.admin-topbar {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-bottom: 14px;
}

.admin-topbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.metric-card strong {
    display: block;
    margin: 8px 0;
    font-size: 2.5rem;
    color: var(--gold-soft);
}

.dashboard-table {
    overflow: auto;
    padding: 14px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 14px 12px;
    border-bottom: 1px solid rgba(226, 197, 136, 0.12);
    text-align: left;
    font-size: 0.94rem;
}

th {
    font-family: 'Cinzel', serif;
    font-size: 0.84rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold-soft);
}

.detail-list {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.detail-list div {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(226, 197, 136, 0.12);
}

.detail-list dt {
    margin-bottom: 6px;
    color: var(--gold-soft);
    font-weight: 700;
}

.editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.editor-toolbar button {
    padding: 8px 12px;
}

.checkbox-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(226, 197, 136, 0.14);
}

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 54px;
    height: 30px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(226, 197, 136, 0.25);
    position: relative;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff4e5;
    transition: transform 0.2s ease;
}

input[type="checkbox"]:checked {
    background: linear-gradient(135deg, #73cf95, #4ba96e);
    border-color: rgba(115, 207, 149, 0.6);
}

input[type="checkbox"]:checked::after {
    transform: translateX(23px);
}

.admin-card-danger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.slot-manager {
    margin-top: 20px;
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.casting-grid {
    display: grid;
    gap: 18px;
}

.casting-card {
    display: grid;
    gap: 18px;
    padding: 24px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(31, 23, 29, 0.95), rgba(20, 16, 19, 0.92));
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.casting-card-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: start;
}

.casting-kicker {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 0.76rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-soft);
}

.casting-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.casting-lane {
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(226, 197, 136, 0.1);
}

.casting-lane-wide {
    padding: 20px;
}

.casting-lane h4 {
    font-size: 1rem;
}

.casting-pill,
.candidate-chip {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.casting-pill strong,
.candidate-chip strong {
    color: var(--ink);
}

.casting-pill span,
.casting-pill small,
.candidate-chip span {
    color: var(--muted);
}

.casting-pill-primary {
    background: rgba(76, 128, 255, 0.12);
}

.casting-pill-secondary {
    background: rgba(85, 189, 130, 0.12);
}

.casting-pill-cover {
    background: rgba(221, 180, 83, 0.12);
}

.candidate-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.candidate-chip {
    min-width: 160px;
    background: rgba(255, 255, 255, 0.04);
}

.inline-warning {
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(214, 171, 57, 0.12);
    border: 1px solid rgba(214, 171, 57, 0.3);
}

.inline-warning p:last-child {
    margin-bottom: 0;
}

.insights-card {
    display: grid;
    gap: 18px;
    align-content: start;
}

.pie-chart {
    width: 180px;
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--pie-background);
    box-shadow: inset 0 0 0 18px rgba(19, 15, 18, 0.9);
}

.legend-list,
.bar-list,
.mini-metrics {
    display: grid;
    gap: 12px;
}

.legend-list span,
.bar-item span,
.bar-item strong {
    color: var(--muted);
}

.legend-list i {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border-radius: 50%;
}

.mini-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mini-metrics strong {
    display: block;
    color: var(--gold-soft);
    font-size: 1.8rem;
}

.bar-item {
    display: grid;
    gap: 6px;
}

.bar-track {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--gold), var(--gold-soft));
}

code {
    color: var(--gold-soft);
    font-family: Consolas, monospace;
}


.dashboard-table tbody tr[data-row-link] {
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.dashboard-table tbody tr[data-row-link]:hover td,
.dashboard-table tbody tr[data-row-link]:focus td,
.dashboard-table tbody tr.is-selected td {
    background: rgba(204, 163, 90, 0.08);
}

.dashboard-table tbody tr[data-row-link]:focus {
    outline: none;
}

.dashboard-table tbody tr.is-selected td:first-child {
    box-shadow: inset 3px 0 0 var(--gold);
}

.slot-tabs {
    display: grid;
    gap: 14px;
}

.slot-tab-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.slot-tab {
    display: grid;
    gap: 2px;
    min-width: 180px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted);
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.slot-tab strong {
    color: var(--ink);
}

.slot-tab span {
    color: var(--gold-soft);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.slot-tab.is-active,
.slot-tab:hover {
    background: linear-gradient(135deg, rgba(204, 163, 90, 0.18), rgba(255, 255, 255, 0.08));
    border-color: rgba(226, 197, 136, 0.44);
}

.slot-panel {
    display: none;
}

.slot-panel.is-active {
    display: block;
}
@media (max-width: 960px) {
    .hero-inner,
    .content-section,
    .admin-section {
        padding: 22px;
    }

    .hero-grid,
    .split-layout,
    .dashboard-layout,
    .section-heading,
    .casting-columns {
        grid-template-columns: 1fr;
    }

    .section-heading {
        align-items: start;
    }
}

@media (max-width: 700px) {
    .site-shell,
    .admin-shell {
        width: min(100% - 16px, 1220px);
    }

    .hero-brand,
    .admin-topbar {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero-logo {
        width: 300px;
    }

    .form-split,
    .admin-grid,
    .card-grid,
    .art-columns,
    .media-grid,
    .mini-metrics {
        grid-template-columns: 1fr;
    }

    .tab-button,
    .admin-nav a {
        width: 100%;
        text-align: center;
    }
}


.timeline-list {
    overflow-y: auto;
    overflow-x: hidden;
}

.status-ensayo {
    background: rgba(78, 137, 255, 0.22);
    color: #bdd4ff;
}

.dashboard-layout-auditions {
    grid-template-columns: minmax(260px, 0.72fr) minmax(420px, 1.28fr);
}

.dashboard-table-compact {
    padding: 10px;
}

.dashboard-detail-wide {
    min-width: 0;
}

.casting-columns-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag-list-wide {
    margin-top: 10px;
}

.admin-tag,
.admin-tag-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(226, 197, 136, 0.24);
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink);
}

.admin-tag.is-active {
    background: linear-gradient(135deg, rgba(204, 163, 90, 0.18), rgba(255, 255, 255, 0.08));
    border-color: rgba(226, 197, 136, 0.44);
}

.admin-tag-form {
    padding-right: 8px;
}

.admin-tag-label {
    color: var(--ink);
    font-size: 0.92rem;
}

.admin-tag-close {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(125, 49, 67, 0.26);
    color: #ffd8de;
    cursor: pointer;
    font: inherit;
    line-height: 1;
}

.compact-form-panel {
    margin-top: 8px;
}

@media (max-width: 960px) {
    .dashboard-layout-auditions.has-detail {
        grid-template-columns: minmax(150px, 34vw) minmax(0, 1fr);
    }

    .dashboard-layout-auditions .dashboard-table table {
        font-size: 0.82rem;
    }

    .dashboard-layout-auditions .dashboard-table th,
    .dashboard-layout-auditions .dashboard-table td {
        padding: 10px 8px;
    }
}

@media (max-width: 700px) {
    .dashboard-layout-auditions.has-detail {
        grid-template-columns: minmax(128px, 38vw) minmax(0, 1fr);
        gap: 12px;
    }

    .slot-tab {
        min-width: 140px;
    }
}

select {
    color-scheme: dark;
}

select option {
    background: #1a1418;
    color: #fff4e5;
}

.character-reference-image,
.admin-reference-image {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid rgba(226, 197, 136, 0.16);
    margin-bottom: 12px;
}

.skill-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.skill-form-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(226, 197, 136, 0.12);
}

.skill-fields {
    display: grid;
    gap: 12px;
}

@media (max-width: 700px) {
    .skill-form-grid {
        grid-template-columns: 1fr;
    }
}


.status-nuevo {
    background: rgba(124, 111, 136, 0.24);
    color: #e2d8ef;
}

.status-seguimiento {
    background: rgba(78, 137, 255, 0.22);
    color: #bdd4ff;
}

.status-util {
    background: rgba(73, 169, 110, 0.22);
    color: #c7f5d3;
}

.status-descartado {
    background: rgba(207, 78, 78, 0.22);
    color: #ffd2d2;
}