/* Paleta cinematográfica: esmeralda, turquesa, violeta, ámbar y coral.
   Solo pantalla: la versión para imprimir conserva sus contrastes de papel. */
@media screen {
  :root {
    --accent: #cdf58b;
    --teal: #70dfd3;
    --violet: #c1acff;
    --amber: #ffd08c;
    --coral: #ffa49f;
    --panel: #19202c;
    --input: #121a25;
  }

  body { background: #10141d; }
  .main {
    background:
      radial-gradient(ellipse 780px 440px at 100% 0%, #244b6080, transparent 72%),
      radial-gradient(ellipse 520px 410px at 8% 560px, #3c2e583b, transparent 76%),
      #10141d;
  }
  .sidebar {
    background: linear-gradient(165deg, #192530, #141b26 58%, #111922);
    border-right-color: #344657;
  }
  .sidebar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--teal), var(--violet), var(--amber));
  }
  .brand-mark span:nth-child(1) { border-color: var(--teal); }
  .brand-mark span:nth-child(2) { border-color: var(--violet); opacity: .85; }
  .brand-mark span:nth-child(3) { border-color: var(--amber); opacity: .85; }
  .brand-mark span:nth-child(4) { border-color: var(--accent); }
  .brand-type > span { color: var(--teal); }
  .nav-item.selected {
    color: #e4f8ea;
    background: linear-gradient(100deg, #32615583, #41375a70);
    box-shadow: inset 3px 0 0 var(--teal);
  }
  .nav-item.selected svg { color: var(--teal); }
  .search-box { background: #17212c; border-color: #3b4d5c; }
  .sidebar-bottom-title { color: var(--violet); }
  .sidebar-text-button:hover { color: var(--teal); }
  .topbar {
    background: linear-gradient(90deg, #151c27, #1d2b35 58%, #212736);
    border-bottom-color: #36485a;
  }
  .topbar-avatar { background: #3c3155; border-color: #8270a7; color: #e5d9ff; }
  .creator-credit { color: var(--violet); }
  .page-intro .accent-label { color: var(--teal); }
  .eyebrow-line { background: linear-gradient(90deg, var(--teal), var(--violet)); }
  .page-intro h1 { color: #f7faff; text-shadow: 0 2px 24px #91d5e230; }
  .page-intro h1 .period { color: var(--amber); }

  .button-accent {
    background: linear-gradient(110deg, #d6f897, #8ce7cf);
    border-color: #c9f6b1;
    color: #142728;
    box-shadow: 0 5px 18px #a5efb72b;
  }
  .button-accent:hover { background: linear-gradient(110deg, #e4ffb4, #a4f4dc); }
  .button-outline { background: #273341; border-color: #46566a; color: #edf5f7; }
  .button-outline:hover { background: #35445a; border-color: #7995a8; }

  .report-banner {
    background:
      radial-gradient(circle at 87% 13%, #c39fff38, transparent 39%),
      radial-gradient(circle at 30% 100%, #5ad9c82f, transparent 52%),
      linear-gradient(115deg, #244339, #243e47 55%, #363151);
    border-color: #5b948d;
    box-shadow: 0 17px 42px #02091142, inset 0 1px 0 #c5ffe125;
  }
  .report-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, #a4f4d510, transparent 42%, #c2aaff0e);
    pointer-events: none;
  }
  .report-banner::after { background: radial-gradient(ellipse, #8de4cf26, transparent 68%); }
  .art-ring-one { border-color: #9fece1; }
  .art-ring-two { border-color: #d1b0ff; }
  .art-cross { color: var(--amber); }
  .banner-led { background: var(--amber); box-shadow: 0 0 0 4px #ffdc9b26; }
  .banner-kicker { color: #d6f6e6; }
  .banner-meta svg { color: var(--teal); }
  .banner-action { background: #425060cc; border-color: #7492a0; color: #f1f7f7; }
  .banner-action:hover { background: #536c78; }
  .banner-action[data-action="share-pdf"] {
    background: linear-gradient(110deg, #9becdf, #c8f5a3);
    border-color: #aeefde;
    color: #14302b;
    box-shadow: 0 3px 15px #7ce5d947;
  }
  .banner-action[data-action="share-pdf"]:hover { background: #d2fae2; }

  .summary-card {
    background: linear-gradient(110deg, #1e2634, #22313b 60%, #262b3d);
    border-color: #46576b;
    box-shadow: 0 7px 27px #040a1530;
  }
  .summary-top .eyebrow { color: var(--violet); }
  .summary-camera svg { color: var(--teal); }
  .summary-numbers > div:nth-child(1) strong { color: var(--accent); }
  .summary-numbers > div:nth-child(2) strong { color: var(--teal); }
  .summary-numbers > div:nth-child(3) strong { color: var(--amber); }
  .summary-numbers span { color: #a9b7c1; }

  .panel {
    background: linear-gradient(180deg, #1c2330, #19202c 180px);
    border-color: #36465a;
    box-shadow: 0 8px 32px #02071427;
  }
  .panel-heading {
    position: relative;
    background: linear-gradient(105deg, #262d40, #202b36 75%, #24283c);
    border-bottom-color: #3c4d60;
  }
  .panel-heading::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: var(--section-accent, var(--accent));
  }
  .panel[aria-labelledby="general-title"] { --section-accent: var(--violet); }
  .panel[aria-labelledby="camera-title"] { --section-accent: var(--teal); }
  .takes-panel { --section-accent: var(--amber); }
  .notes-panel { --section-accent: var(--coral); }
  .panel[aria-labelledby="general-title"] .heading-icon { background: #403454; border-color: #816fac; color: #e6d8ff; }
  .panel[aria-labelledby="camera-title"] .heading-icon { background: #21494b; border-color: #5ca9a4; color: #a2f5e8; }
  .takes-panel .heading-icon { background: #4d3a32; border-color: #a6855e; color: #ffdfab; }
  .notes-panel .heading-icon { background: #50353f; border-color: #ad7382; color: #ffc4bb; }
  .panel-heading .eyebrow { color: #aebdcc; }
  .panel-heading h2 { color: #f7f9ff; }
  .panel-heading-aside { color: #9facc0; }
  .panel[aria-labelledby="general-title"] .form-subheading { color: #c8b8ff; }
  .panel[aria-labelledby="camera-title"] .form-subheading { color: #9becdf; }
  .form-subheading::after { background: linear-gradient(90deg, #60708d, #39475b); }
  .field > span { color: #cbd3df; }
  .field input, .field select, .field textarea {
    background-color: var(--input);
    border-color: #405063;
    color: #f3f8fb;
  }
  .field input:hover, .field select:hover, .field textarea:hover { border-color: #718ca1; }
  .field input:focus, .field select:focus, .field textarea:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px #70dfd32c;
  }
  .field input::placeholder, .field textarea::placeholder { color: #8191a1; }
  .technical-note { background: #1c2c38; border-color: #3d5664; color: #b2c7d0; }
  .technical-note svg { color: var(--teal); }

  .table-intro { background: #24313e; color: #b5cbd0; }
  .table-intro strong { color: var(--amber); }
  .takes-count { background: #453750; border-color: #715b7b; color: #e3d1ff; }
  .takes-table th, .takes-table th:last-child { background: #293447; border-color: #48546c; color: #c2d3e7; }
  .takes-table td { border-bottom-color: #37465a; }
  .takes-table .take-row td:last-child { background: #1d2835; box-shadow: -8px 0 18px #101722c9; }
  .takes-table input, .takes-table select { background: #121c29; border-color: #46566a; color: #f1f6fa; }
  .takes-table input:focus, .takes-table select:focus { border-color: var(--teal); box-shadow: 0 0 0 2px #70dfd328; }
  .details-button { background: #3b3154; border-color: #8572af; color: #dccbff; }
  .details-button:hover, .details-button.is-open { background: #534371; }
  .take-detail-row td { background: #232b3d !important; border-bottom-color: #566782 !important; }
  .take-detail-title { border-bottom-color: #53627a; }
  .takes-footer { background: #1c2733; }
  .notes-field { background: #1a2230; }
  .footer-dot { color: var(--coral); }

  .share-dialog, .login-card {
    background: linear-gradient(155deg, #243146, #20283a 55%, #2b2941);
    border-color: #6d799d;
  }
  .share-dialog-icon, .login-symbol { background: linear-gradient(140deg, #327f77, #7158a0); color: #f5fff5; }
  .share-steps { background: #26374a; border-color: #4d6a80; color: var(--teal); }
  .share-dialog p strong { color: #ddf9e3; }
  .login-page {
    background:
      radial-gradient(circle at 40% 16%, #345a7291, transparent 43%),
      radial-gradient(circle at 75% 78%, #47346b69, transparent 48%),
      #111720;
  }
}

@media screen and (max-width: 620px) {
  .creator-credit { font-size: 9px; letter-spacing: .9px; }
  .report-banner { box-shadow: 0 10px 28px #050b1845; }
  .banner-action[data-action="share-pdf"] { padding: 7px; }
}