trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none; }

trix-toolbar * {
  box-sizing: border-box; }

trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto; }

trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px; }
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 1.5vw; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button-group:not(:first-child) {
        margin-left: 0; } }

trix-toolbar .trix-button-group-spacer {
  flex-grow: 1; }
  @media (max-width: 768px) {
    trix-toolbar .trix-button-group-spacer {
      display: none; } }

trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent; }
  trix-toolbar .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-toolbar .trix-button.trix-active {
    background: #cbeefa;
    color: black; }
  trix-toolbar .trix-button:not(:disabled) {
    cursor: pointer; }
  trix-toolbar .trix-button:disabled {
    color: rgba(0, 0, 0, 0.125); }
  @media (max-width: 768px) {
    trix-toolbar .trix-button {
      letter-spacing: -0.01em;
      padding: 0 0.3em; } }

trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px; }
  @media (max-width: 768px) {
    trix-toolbar .trix-button--icon {
      height: 2em;
      max-width: calc(0.8em + 3.5vw); } }
  trix-toolbar .trix-button--icon::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.6;
    content: "";
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button--icon::before {
        right: 6%;
        left: 6%; } }
  trix-toolbar .trix-button--icon.trix-active::before {
    opacity: 1; }
  trix-toolbar .trix-button--icon:disabled::before {
    opacity: 0.125; }

trix-toolbar .trix-button--icon-attach::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  top: 8%;
  bottom: 4%; }

trix-toolbar .trix-button--icon-bold::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-italic::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-link::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-strike::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-quote::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-code::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-number-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-undo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-redo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-dialogs {
  position: relative; }

trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5; }

trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }
  trix-toolbar .trix-input--dialog.validate:invalid {
    box-shadow: #F00 0px 0px 1.5px 1px; }

trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none; }

trix-toolbar .trix-dialog--link {
  max-width: 600px; }

trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline; }
  trix-toolbar .trix-dialog__link-fields .trix-input {
    flex: 1; }
  trix-toolbar .trix-dialog__link-fields .trix-button-group {
    flex: 0 0 content;
    margin: 0; }

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection {
  background: none; }

trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection, trix-editor [data-trix-mutable] ::selection {
  background: none; }

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::-moz-selection {
  background: highlight; }

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::selection {
  background: highlight; }

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent; }

trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight; }

trix-editor .attachment {
  position: relative; }
  trix-editor .attachment:hover {
    cursor: default; }

trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text; }

trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in; }
  trix-editor .attachment__progress[value="100"] {
    opacity: 0; }

trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }

trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center; }

trix-editor .trix-button-group {
  display: inline-flex; }

trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent; }
  trix-editor .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-editor .trix-button.trix-active {
    background: #cbeefa; }
  trix-editor .trix-button:not(:disabled) {
    cursor: pointer; }

trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25); }
  trix-editor .trix-button--remove::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.7;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%; }
  trix-editor .trix-button--remove:hover {
    border-color: #333; }
    trix-editor .trix-button--remove:hover::before {
      opacity: 1; }

trix-editor .attachment__metadata-container {
  position: relative; }

trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px; }
  trix-editor .attachment__metadata .attachment__name {
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  trix-editor .attachment__metadata .attachment__size {
    margin-left: 0.2em;
    white-space: nowrap; }

.trix-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word; }
  .trix-content * {
    box-sizing: border-box;
    margin: 0;
    padding: 0; }
  .trix-content h1 {
    font-size: 1.2em;
    line-height: 1.2; }
  .trix-content blockquote {
    border: 0 solid #ccc;
    border-left-width: 0.3em;
    margin-left: 0.3em;
    padding-left: 0.6em; }
  .trix-content [dir=rtl] blockquote,
  .trix-content blockquote[dir=rtl] {
    border-width: 0;
    border-right-width: 0.3em;
    margin-right: 0.3em;
    padding-right: 0.6em; }
  .trix-content li {
    margin-left: 1em; }
  .trix-content [dir=rtl] li {
    margin-right: 1em; }
  .trix-content pre {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    font-family: monospace;
    font-size: 0.9em;
    padding: 0.5em;
    white-space: pre;
    background-color: #eee;
    overflow-x: auto; }
  .trix-content img {
    max-width: 100%;
    height: auto; }
  .trix-content .attachment {
    display: inline-block;
    position: relative;
    max-width: 100%; }
    .trix-content .attachment a {
      color: inherit;
      text-decoration: none; }
      .trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
        color: inherit; }
  .trix-content .attachment__caption {
    text-align: center; }
    .trix-content .attachment__caption .attachment__name + .attachment__size::before {
      content: ' \2022 '; }
  .trix-content .attachment--preview {
    width: 100%;
    text-align: center; }
    .trix-content .attachment--preview .attachment__caption {
      color: #666;
      font-size: 0.9em;
      line-height: 1.2; }
  .trix-content .attachment--file {
    color: #333;
    line-height: 1;
    margin: 0 2px 2px 2px;
    padding: 0.4em 1em;
    border: 1px solid #bbb;
    border-radius: 5px; }
  .trix-content .attachment-gallery {
    display: flex;
    flex-wrap: wrap;
    position: relative; }
    .trix-content .attachment-gallery .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%; }
    .trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
      flex-basis: 50%;
      max-width: 50%; }
/*
 * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
 * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
 * inclusion directly in any other asset bundle and remove this file.
 *

*/

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}
/* ==========================================================================
   Top Dato — design tokens + shared components for the public site.
   Values are taken directly from design_handoff_topdato/README.md and the
   reference mockup; reproduced exactly, not approximated.
   ========================================================================== */

:root {
  --color-brand: #0D47A1;
  --color-brand-dark: #0B3C87;
  --color-accent: #FFD600;
  --color-accent-hover: #E6C200;
  --color-ink: #111111;
  --color-body: #1F2430;
  --color-body-soft: #3F4650;
  --color-muted: #757575;
  --color-surface: #F5F7FA;
  --color-line: #E5E8EE;
  --color-line-soft: #EEF1F6;
  --color-line-strong: #D5DAE2;
  --color-tag-bg: #EEF2F9;
  --color-photo: #DCE0E7;
  --color-photo-label: #9AA1AC;
  --color-ad-border: #C3CAD5;
  --color-live: #D32F2F;
  --color-white: #FFFFFF;

  --td-content-width: 1200px;
  --td-content-padding: 24px;
  --td-content-padding-editorial: 44px;
  --td-mobile-width: 390px;
  --td-mobile-padding: 16px;
}

/* ==========================================================================
   Base
   ========================================================================== */

.td-page {
  font-family: "Roboto", sans-serif;
  color: var(--color-body);
  background: var(--color-white);
}

.td-page a {
  color: inherit;
  text-decoration: none;
}

.td-page h1, .td-page h2, .td-page h3, .td-page h4 {
  font-family: "Montserrat", sans-serif;
  margin: 0;
  text-wrap: pretty;
}

.td-page :focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.td-container {
  max-width: var(--td-content-width);
  margin: 0 auto;
  padding: 0 var(--td-content-padding);
}

.td-container--editorial {
  padding-left: var(--td-content-padding-editorial);
  padding-right: var(--td-content-padding-editorial);
}

/* Cada regla de "ocultar" vive solo dentro de su propio @media, sin
   ninguna declaración "siempre activa" fuera de rango compitiendo con
   ella. Eso dejaría al estado "visible" completamente libre de
   interferencia: cuando el media no coincide, esta utilidad no declara
   nada, y el `display` propio del componente (p. ej. `.td-header { display:
   flex }`) se aplica sin competencia. `revert` no sirve aquí porque no
   vuelve al `display` de OTRA regla de autor — salta directo al valor por
   defecto del navegador (`block` para un div), rompiendo igual el layout
   flex/grid del componente. El !important solo hace falta en el estado
   "ocultar", para ganarle al `display` propio del componente cuando sí
   corresponde ocultarlo. */
@media (max-width: 767.98px) {
  .td-hidden-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .td-hidden-desktop { display: none !important; }
}

/* ==========================================================================
   Topbar (date + social + search) — desktop only
   ========================================================================== */

.td-topbar {
  display: none;
}

@media (min-width: 768px) {
  .td-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 24px;
    border-bottom: 1px solid var(--color-line);
    background: var(--color-white);
    max-width: var(--td-content-width);
    margin: 0 auto;
  }
}

.td-topbar__date {
  font: 400 13px/1.4 "Roboto", sans-serif;
  color: var(--color-ink);
}

.td-topbar__social {
  display: flex;
  align-items: center;
  gap: 14px;
}

.td-topbar__social a {
  font: 800 14px "Montserrat", sans-serif;
  color: var(--color-ink);
  transition: color 150ms ease;
}

.td-topbar__social a:hover {
  color: var(--color-brand);
}

/* ==========================================================================
   Logo (SVG, reused everywhere)
   ========================================================================== */

.td-logo {
  display: inline-flex;
  align-items: center;
}

.td-logo svg {
  display: block;
}

/* ==========================================================================
   Header (logo + banner ad slot)
   ========================================================================== */

.td-header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-line);
  max-width: var(--td-content-width);
  margin: 0 auto;
}

@media (min-width: 768px) {
  .td-header {
    gap: 32px;
    padding: 22px 24px;
  }
}

.td-header__hamburger {
  font: 700 18px "Montserrat", sans-serif;
  color: var(--color-ink);
  background: none;
  border: none;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}

/* Mobile hamburger dropdown menu */

.td-mobile-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-line);
  box-shadow: 0 16px 32px rgba(17, 17, 17, .16);
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  z-index: 40;
}

.td-mobile-menu--open {
  display: flex;
}

.td-mobile-menu__link {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font: 700 13px "Montserrat", sans-serif;
  letter-spacing: .04em;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-line-soft);
  transition: background-color 150ms ease;
}

.td-mobile-menu__link:hover {
  background: var(--color-surface);
}

/* 3-column grid — copy left, CTA mathematically centered, house ad right —
   same arrangement at every width. A flex row with justify-content could
   only ever approximate the centered CTA (it'd drift depending on how wide
   "copy" vs "house" happen to be); grid's middle "auto" column keeps it
   dead center regardless. overflow-x: auto is the fallback for widths too
   narrow to fit all 3 without squeezing — it scrolls instead of shrinking
   or wrapping the row. */
.td-header__banner {
  display: none;
  position: relative;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

/* Sponsored flyer rotated over the banner by banner_rotator_controller.
   Absolutely positioned over the whole box so it never changes the
   banner's size; "contain" keeps the full flyer visible and the leftover
   bands take the flyer's own navy so it reads as one piece. visibility
   (not just opacity) keeps the hidden link out of the tab order/clicks. */
.td-header__banner-promo {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  background: #0a1526;
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms ease, visibility 0s linear 400ms;
}

.td-header__banner-promo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.td-header__banner.is-promo .td-header__banner-promo {
  opacity: 1;
  visibility: visible;
  transition: opacity 400ms ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .td-header__banner-promo,
  .td-header__banner.is-promo .td-header__banner-promo {
    transition: none;
  }
}

.td-header__banner-copy {
  justify-self: start;
}

.td-header__banner-cta {
  justify-self: center;
}

.td-header__banner-house {
  justify-self: end;
}

@media (min-width: 768px) {
  .td-header__banner {
    /* flex-shrink: 0 (via the 0 in "1 0") + a wide flex-basis means this
       never squeezes to fit next to the logo — once the row (.td-header,
       flex-wrap: wrap above) has no room left for it, it drops to its own
       full-width line below the logo instead. */
    display: grid;
    flex: 1 0 580px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    height: auto;
    min-height: 96px;
    background: var(--color-brand);
    padding: 10px 16px;
  }

  .td-header__banner::-webkit-scrollbar {
    display: none;
  }
}

@media (min-width: 1200px) {
  .td-header__banner {
    height: 96px;
    padding: 0 26px;
  }
}

/* Phone: the banner doesn't fit next to the logo at all, so it renders as
   its own full-width strip below the hamburger/logo row instead
   (shared/td_header wraps it in .td-header-banner-mobile, td-hidden-desktop
   so it only shows under the 768px breakpoint where the rules above take
   over). Same grid — copy/CTA/house stay left/center/right — just narrower. */
.td-header-banner-mobile {
  padding: 0 16px 16px;
}

.td-header-banner-mobile .td-header__banner {
  display: grid;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  height: auto;
  background: var(--color-brand);
  padding: 14px 16px;
}

.td-header-banner-mobile .td-header__banner::-webkit-scrollbar {
  display: none;
}

/* The house "CREATIVIDAD" placeholder (150px fixed width) is what forces
   this row wider than the screen on phones, causing the horizontal
   scrollbar — simplest fix is to just not show it here. Desktop's copy of
   the banner (.td-header, not wrapped in .td-header-banner-mobile) keeps
   it. */
.td-header-banner-mobile .td-header__banner-house {
  display: none;
}

.td-header__banner-copy {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 3px;
}

.td-header__banner-copy span:first-child {
  font: 400 17px "Roboto", sans-serif;
  color: var(--color-white);
}

.td-header__banner-copy span:last-child {
  font: 700 19px "Roboto", sans-serif;
  color: var(--color-white);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 2px;
}

.td-header__banner-cta {
  flex-shrink: 0;
  background: var(--color-accent);
  color: var(--color-ink);
  font: 700 12px "Montserrat", sans-serif;
  letter-spacing: .06em;
  padding: 9px 14px;
  white-space: nowrap;
}

.td-header__banner-house {
  flex-shrink: 0;
  width: 150px;
  height: 70px;
  background: rgba(255, 255, 255, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 10px "Roboto", sans-serif;
  letter-spacing: .14em;
  color: var(--color-white);
}

/* Compact header (sección/nota/etc: logo, date, search, CTA) */

.td-header--compact {
  align-items: center;
}

.td-header__cta {
  display: none;
}

@media (min-width: 768px) {
  .td-header__cta {
    display: inline-flex;
    background: var(--color-accent);
    color: var(--color-ink);
    font: 700 12px "Montserrat", sans-serif;
    letter-spacing: .06em;
    padding: 11px 16px;
    border: none;
    cursor: pointer;
    transition: background-color 150ms ease;
  }

  .td-header__cta:hover {
    background: var(--color-accent-hover);
  }
}

.td-header__right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.td-header__nav-link {
  font: 700 12px "Montserrat", sans-serif;
  letter-spacing: .05em;
  color: var(--color-ink);
  transition: color 150ms ease;
}

.td-header__nav-link:hover,
.td-header__nav-link--active {
  color: var(--color-brand);
}

.td-header__date {
  font: 400 13px "Roboto", sans-serif;
  color: var(--color-muted);
}

.td-header__search-field {
  width: 180px;
  border: 1px solid var(--color-line-strong);
  padding: 9px 14px;
  font: 400 13px "Roboto", sans-serif;
  color: var(--color-ink);
  background: var(--color-white);
}

.td-header__search-field::placeholder {
  color: var(--color-photo-label);
}

/* ==========================================================================
   Main nav
   ========================================================================== */

.td-nav {
  background: var(--color-brand);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.td-nav::-webkit-scrollbar {
  display: none;
}

.td-nav__inner {
  display: flex;
  align-items: stretch;
  max-width: var(--td-content-width);
  margin: 0 auto;
}

@media (min-width: 768px) {
  .td-nav__inner {
    padding: 0 12px;
  }
}

.td-nav__link {
  flex: 0 0 auto;
  color: var(--color-white);
  font: 700 13px "Montserrat", sans-serif;
  letter-spacing: .05em;
  padding: 15px 16px;
  white-space: nowrap;
  transition: background-color 150ms ease, color 150ms ease;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.td-nav__link:hover {
  background: var(--color-brand-dark);
  color: var(--color-white);
}

.td-nav__link--home {
  background: var(--color-white);
  color: var(--color-brand);
}

.td-nav__link--home:hover {
  background: var(--color-surface);
  color: var(--color-brand);
}

.td-nav__link--active {
  background: var(--color-white);
  color: var(--color-brand);
}

.td-nav__link--active:hover {
  background: var(--color-surface);
  color: var(--color-brand);
}

.td-nav__toggle {
  margin-left: auto;
  color: var(--color-white);
  font: 700 16px "Montserrat", sans-serif;
  padding: 15px 14px;
  background: none;
  border: none;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  display: none;
}

@media (min-width: 768px) {
  .td-nav__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ==========================================================================
   Ticker (exchange rates + weather)
   ========================================================================== */

.td-ticker {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.td-ticker::-webkit-scrollbar {
  display: none;
}

.td-ticker__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 16px;
  max-width: var(--td-content-width);
  margin: 0 auto;
}

@media (min-width: 768px) {
  .td-ticker__inner {
    gap: 28px;
    padding: 10px 24px;
  }
}

.td-ticker__label {
  font: 900 10px "Montserrat", sans-serif;
  letter-spacing: .12em;
  color: var(--color-brand);
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  .td-ticker__label {
    font-size: 11px;
    letter-spacing: .14em;
  }
}

.td-ticker__rate {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex: 0 0 auto;
  font: 400 11px "Roboto", sans-serif;
  color: var(--color-ink);
}

@media (min-width: 768px) {
  .td-ticker__rate { font-size: 12px; }
}

.td-ticker__rate-name {
  font-weight: 700;
}

.td-ticker__rate--extra {
  display: none;
}

@media (min-width: 768px) {
  .td-ticker__rate--extra { display: flex; }
}

.td-ticker__weather {
  margin-left: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  font: 400 11px "Roboto", sans-serif;
  color: var(--color-ink);
}

@media (min-width: 768px) {
  .td-ticker__weather {
    margin-left: auto;
    font-size: 12px;
  }
}

.td-ticker__weather-detail {
  display: none;
}

@media (min-width: 768px) {
  .td-ticker__weather-detail { display: inline; }
}

/* ==========================================================================
   Photo placeholder
   ========================================================================== */

.td-photo {
  background: var(--color-photo);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 10px "Roboto", sans-serif;
  letter-spacing: .14em;
  color: var(--color-photo-label);
  text-align: center;
  overflow: hidden;
}

/* ==========================================================================
   Section header (title + border + "ver todo")
   ========================================================================== */

.td-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 3px solid var(--color-brand);
  padding-bottom: 8px;
  margin-bottom: 16px;
}

.td-section-header__title {
  font: 800 18px "Montserrat", sans-serif;
  color: var(--color-ink);
}

@media (min-width: 768px) {
  .td-section-header__title { font-size: 20px; }
}

.td-section-header__link {
  margin-left: auto;
  font: 700 12px "Montserrat", sans-serif;
  letter-spacing: .06em;
  color: var(--color-brand);
  transition: color 150ms ease;
}

.td-section-header__link:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Note cards: hero, horizontal, grid, compact
   ========================================================================== */

.td-card-hero {
  position: relative;
  height: 250px;
  background: var(--color-photo);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

@media (min-width: 1200px) {
  .td-card-hero { height: 400px; }
}

.td-card-hero__badge {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--color-accent);
  color: var(--color-ink);
  font: 700 10px "Montserrat", sans-serif;
  letter-spacing: .1em;
  padding: 6px 10px;
}

@media (min-width: 1200px) {
  .td-card-hero__badge { font-size: 11px; padding: 7px 12px; }
}

.td-card-hero__photo-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font: 600 10px "Roboto", sans-serif;
  letter-spacing: .14em;
  color: var(--color-photo-label);
  text-align: center;
  z-index: 0;
}

@media (min-width: 1200px) {
  .td-card-hero__photo-label { font-size: 11px; letter-spacing: .16em; }
}

.td-card-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.td-card-hero__scrim {
  position: relative;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, .88), rgba(0, 0, 0, 0));
  padding: 52px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (min-width: 1200px) {
  .td-card-hero__scrim {
    background: linear-gradient(to top, rgba(0, 0, 0, .86), rgba(0, 0, 0, 0));
    padding: 70px 30px 26px;
    gap: 12px;
  }
}

.td-card-hero__title {
  font: 800 22px/1.15 "Montserrat", sans-serif;
  color: var(--color-white);
}

@media (min-width: 1200px) {
  .td-card-hero__title { font-size: 38px; line-height: 1.12; }
}

.td-card-hero__title:hover {
  text-decoration: underline;
}

.td-card-hero__lead {
  display: none;
  font: 400 16px/1.5 "Roboto", sans-serif;
  color: rgba(255, 255, 255, .86);
  max-width: 640px;
}

@media (min-width: 1200px) {
  .td-card-hero__lead { display: block; }
}

.td-card-hero__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
}

@media (min-width: 1200px) {
  .td-card-hero__meta { gap: 12px; margin-top: 4px; }
}

.td-card-hero__time {
  font: 400 12px "Roboto", sans-serif;
  color: rgba(255, 255, 255, .75);
}

@media (min-width: 1200px) {
  .td-card-hero__time { font-size: 13px; }
}

.td-card-hero__tag {
  background: var(--color-brand);
  color: var(--color-white);
  font: 700 10px "Montserrat", sans-serif;
  letter-spacing: .08em;
  padding: 4px 7px;
}

@media (min-width: 1200px) {
  .td-card-hero__tag { font-size: 11px; padding: 5px 9px; }
}

/* Horizontal card (story list rows) */

.td-card-horizontal {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-line);
}

@media (min-width: 1200px) {
  .td-card-horizontal {
    grid-template-columns: 180px 1fr;
    gap: 20px;
    padding: 20px 0;
  }
}

.td-card-horizontal__photo {
  height: 74px;
}

@media (min-width: 1200px) {
  .td-card-horizontal__photo { height: 112px; }
}

.td-card-horizontal__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

@media (min-width: 1200px) {
  .td-card-horizontal__body { gap: 8px; }
}

.td-card-horizontal__title {
  font: 700 15px/1.25 "Montserrat", sans-serif;
  color: var(--color-ink);
  transition: color 150ms ease;
}

@media (min-width: 1200px) {
  .td-card-horizontal__title { font-size: 20px; line-height: 1.28; }
}

.td-card-horizontal__title:hover {
  color: var(--color-brand);
  text-decoration: underline;
}

.td-card-horizontal__lead {
  display: none;
  font: 400 14px/1.5 "Roboto", sans-serif;
  color: var(--color-muted);
}

@media (min-width: 1200px) {
  .td-card-horizontal__lead { display: block; }
}

.td-card-horizontal__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (min-width: 1200px) {
  .td-card-horizontal__meta { gap: 10px; margin-top: 2px; }
}

.td-card-horizontal__time {
  font: 400 11px "Roboto", sans-serif;
  color: var(--color-muted);
}

@media (min-width: 1200px) {
  .td-card-horizontal__time { font-size: 12px; }
}

.td-card-horizontal__tag {
  display: none;
  background: var(--color-tag-bg);
  color: var(--color-brand);
  font: 700 10px "Montserrat", sans-serif;
  letter-spacing: .1em;
  padding: 4px 8px;
}

@media (min-width: 1200px) {
  .td-card-horizontal__tag { display: inline-block; }
}

.td-card-horizontal__time-mobile {
  font: 400 11px "Roboto", sans-serif;
  color: var(--color-muted);
}

@media (min-width: 1200px) {
  .td-card-horizontal__time-mobile { display: none; }
}

/* Grid card (economía-style 3-up) */

.td-card-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.td-card-grid__photo {
  height: 130px;
}

.td-card-grid__title {
  font: 700 16px/1.3 "Montserrat", sans-serif;
  color: var(--color-ink);
  transition: color 150ms ease;
}

.td-card-grid__title:hover {
  color: var(--color-brand);
  text-decoration: underline;
}

.td-card-grid__time {
  font: 400 12px "Roboto", sans-serif;
  color: var(--color-muted);
}

/* Compact card (sidebar lists, "seguí leyendo") */

.td-card-compact {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 14px;
  align-items: flex-start;
}

.td-card-compact__photo {
  height: 90px;
}

.td-card-compact__title {
  font: 700 14px/1.4 "Montserrat", sans-serif;
  color: var(--color-ink);
  transition: color 150ms ease;
}

.td-card-compact__title:hover {
  color: var(--color-brand);
  text-decoration: underline;
}

/* ==========================================================================
   Ad slots
   ========================================================================== */

.td-ad {
  background: var(--color-surface);
  border: 1px dashed var(--color-ad-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 11px "Roboto", sans-serif;
  letter-spacing: .14em;
  color: var(--color-photo-label);
  text-align: center;
}

.td-ad--728x90 { height: 90px; }
.td-ad--300x250 { height: 270px; }
.td-ad--160x600 { height: 600px; }

.td-ad-frame {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  border: 0;
}

.td-ad-badge {
  background: var(--color-accent);
  color: var(--color-ink);
  font: 700 10px "Montserrat", sans-serif;
  letter-spacing: .12em;
  padding: 5px 9px;
  align-self: flex-start;
  margin-bottom: 8px;
  display: inline-block;
}

/* ==========================================================================
   Newsletter box
   ========================================================================== */

.td-newsletter-box {
  background: var(--color-brand);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 1200px) {
  .td-newsletter-box { padding: 20px; gap: 12px; }
}

.td-newsletter-box__label {
  font: 900 11px "Montserrat", sans-serif;
  letter-spacing: .14em;
  color: var(--color-accent);
}

.td-newsletter-box__copy {
  font: 400 13px/1.45 "Roboto", sans-serif;
  color: var(--color-white);
}

@media (min-width: 1200px) {
  .td-newsletter-box__copy { font-size: 14px; }
}

.td-newsletter-box__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

@media (min-width: 1200px) {
  .td-newsletter-box__form { flex-direction: row; gap: 0; }
}

.td-newsletter-box__input {
  flex: 1;
  background: var(--color-white);
  border: none;
  padding: 11px;
  font: 400 12px "Roboto", sans-serif;
  color: var(--color-ink);
}

@media (min-width: 1200px) {
  .td-newsletter-box__input { padding: 12px; font-size: 13px; }
}

.td-newsletter-box__submit {
  background: var(--color-accent);
  color: var(--color-ink);
  font: 700 12px "Montserrat", sans-serif;
  letter-spacing: .06em;
  padding: 11px;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: background-color 150ms ease;
  min-height: 44px;
}

@media (min-width: 1200px) {
  .td-newsletter-box__submit { padding: 12px 16px; }
}

.td-newsletter-box__submit:hover {
  background: var(--color-accent-hover);
}

.td-newsletter-box__error {
  font: 400 12px "Roboto", sans-serif;
  color: var(--color-live);
}

/* ==========================================================================
   Lo más leído
   ========================================================================== */

.td-most-read {
  border: 1px solid var(--color-line);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.td-most-read__title {
  font: 800 17px "Montserrat", sans-serif;
  color: var(--color-ink);
}

.td-most-read__item {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-line-soft);
}

.td-most-read__number {
  font: 800 22px "Montserrat", sans-serif;
  color: var(--color-brand);
}

.td-most-read__link {
  font: 500 14px/1.4 "Roboto", sans-serif;
  color: var(--color-ink);
  transition: color 150ms ease;
}

.td-most-read__link:hover {
  color: var(--color-brand);
  text-decoration: underline;
}

.td-pill-link {
  border: 1px solid var(--color-brand);
  color: var(--color-brand);
  font: 700 12px "Montserrat", sans-serif;
  letter-spacing: .08em;
  padding: 11px;
  text-align: center;
  border-radius: 22px;
  transition: background-color 150ms ease, color 150ms ease;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.td-pill-link:hover {
  background: var(--color-brand);
  color: var(--color-white);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.td-footer {
  background: var(--color-brand);
}

.td-footer__inner {
  padding: 28px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: var(--td-content-width);
  margin: 0 auto;
}

@media (min-width: 1200px) {
  .td-footer__inner {
    padding: 34px 24px 22px;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 32px;
  }
}

.td-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.td-footer__tagline {
  font: 400 14px/1.5 "Roboto", sans-serif;
  color: rgba(255, 255, 255, .8);
}

.td-footer__col {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.td-footer__heading {
  font: 900 11px "Montserrat", sans-serif;
  letter-spacing: .14em;
  color: var(--color-accent);
}

.td-footer__col a {
  font: 400 13px "Roboto", sans-serif;
  color: rgba(255, 255, 255, .85);
  transition: color 150ms ease;
}

.td-footer__col a:hover {
  color: var(--color-white);
  text-decoration: underline;
}

.td-footer__social {
  display: flex;
  gap: 14px;
  color: var(--color-white);
  font: 800 15px "Montserrat", sans-serif;
}

.td-footer__copyright {
  background: var(--color-brand-dark);
  padding: 14px;
  text-align: center;
  font: 400 12px "Roboto", sans-serif;
  color: rgba(255, 255, 255, .7);
}

/* ==========================================================================
   Mobile tab bar
   ========================================================================== */

.td-tabbar {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid var(--color-line);
  padding: 12px 0;
  background: var(--color-white);
  position: sticky;
  bottom: 0;
}

@media (min-width: 768px) {
  .td-tabbar { display: none; }
}

.td-tabbar__link {
  font: 700 10px "Montserrat", sans-serif;
  letter-spacing: .06em;
  color: var(--color-muted);
  min-height: 44px;
  display: flex;
  align-items: center;
}

.td-tabbar__link--active {
  color: var(--color-brand);
}

/* ==========================================================================
   Section chips (mobile section scroller)
   ========================================================================== */

.td-chips {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 12px 16px;
  scrollbar-width: none;
}

.td-chips::-webkit-scrollbar {
  display: none;
}

@media (min-width: 768px) {
  .td-chips { display: none; }
}

.td-chip {
  flex: 0 0 auto;
  font: 700 12px "Montserrat", sans-serif;
  letter-spacing: .05em;
  padding: 8px 14px;
  border: 1px solid var(--color-line-strong);
  color: var(--color-ink);
  min-height: 44px;
  display: flex;
  align-items: center;
}

.td-chip--active {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-white);
}

/* ==========================================================================
   Page layout (main + sidebar grid)
   ========================================================================== */

.td-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px;
  max-width: var(--td-content-width);
  margin: 0 auto;
}

@media (min-width: 768px) {
  .td-layout { padding: 24px; gap: 28px; }
}

@media (min-width: 1200px) {
  .td-layout {
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 32px;
    padding: 26px 24px 34px;
  }
}

.td-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.td-sidebar {
  display: flex;
  flex-direction: column;
  gap: 22px;
}


/* Economía-style 2/3-up grid */

.td-grid-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 1200px) {
  .td-grid-cards { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* Deportes: featured story + results panel */

.td-split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 1200px) {
  .td-split-grid { grid-template-columns: 1.4fr 1fr; gap: 24px; }
  .td-split-grid--full { grid-template-columns: 1fr; }
}

.td-split-grid__feature {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.td-split-grid__feature-photo {
  height: 180px;
}

@media (min-width: 1200px) {
  .td-split-grid__feature-photo { height: 220px; }
}

.td-split-grid__feature-title {
  font: 700 20px/1.24 "Montserrat", sans-serif;
  color: var(--color-ink);
  transition: color 150ms ease;
}

@media (min-width: 1200px) {
  .td-split-grid__feature-title { font-size: 24px; }
}

.td-split-grid__feature-title:hover {
  color: var(--color-brand);
  text-decoration: underline;
}

.td-split-grid__feature-lead {
  font: 400 14px/1.55 "Roboto", sans-serif;
  color: var(--color-muted);
}

/* Generic bordered widget (results panel, tapa del día) */

.td-widget {
  border: 1px solid var(--color-line);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.td-widget__label {
  font: 900 12px "Montserrat", sans-serif;
  letter-spacing: .14em;
  color: var(--color-brand);
}

.td-tapa__photo {
  height: 250px;
}

/* Poll / encuesta */

.td-poll {
  background: var(--color-surface);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.td-poll__question {
  font: 700 16px/1.35 "Montserrat", sans-serif;
  color: var(--color-ink);
}

.td-poll__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.td-poll__row-header {
  display: flex;
  justify-content: space-between;
  font: 500 13px "Roboto", sans-serif;
  color: var(--color-ink);
}

.td-poll__row-pct {
  color: var(--color-muted);
}

.td-poll__track {
  height: 8px;
  background: var(--color-photo);
}

.td-poll__fill {
  height: 8px;
  background: var(--color-brand);
}

.td-poll__votes {
  font: 400 12px "Roboto", sans-serif;
  color: var(--color-muted);
}

.td-poll__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.td-poll__option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font: 500 14px "Roboto", sans-serif;
  color: var(--color-ink);
  cursor: pointer;
}

.td-poll__option input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-brand);
  flex-shrink: 0;
}

/* Section screen: banner, filters, feature story, grid cards */

.td-section-banner {
  background: var(--color-brand);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@media (min-width: 768px) {
  .td-section-banner { display: none; }
}

.td-section-banner__title {
  font: 800 30px/1 "Montserrat", sans-serif;
  color: var(--color-white);
}

.td-section-banner__desc {
  font: 400 13px "Roboto", sans-serif;
  color: rgba(255, 255, 255, .8);
}

.td-section-title-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-bottom: 4px solid var(--color-brand);
  padding-bottom: 12px;
}

@media (min-width: 1200px) {
  .td-section-title-row {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.td-section-title-row__heading {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.td-section-title-row__title {
  font: 800 42px/1 "Montserrat", sans-serif;
  color: var(--color-ink);
}

.td-section-title-row__desc {
  font: 400 15px "Roboto", sans-serif;
  color: var(--color-muted);
}

.td-filter-group {
  display: flex;
  gap: 8px;
}

.td-filter-pill {
  border: 1px solid var(--color-line-strong);
  color: var(--color-ink);
  font: 700 11px "Montserrat", sans-serif;
  letter-spacing: .08em;
  padding: 8px 12px;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.td-filter-pill:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.td-filter-pill--active {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-white);
}

.td-filter-pill--active:hover {
  color: var(--color-white);
}

.td-section-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 24px;
}

@media (min-width: 1200px) {
  .td-section-feature { grid-template-columns: 1.5fr 1fr; gap: 22px; }
}

.td-section-feature__photo {
  height: 200px;
}

@media (min-width: 1200px) {
  .td-section-feature__photo { height: 320px; }
}

.td-section-feature__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}

.td-section-feature__tag {
  background: var(--color-brand);
  color: var(--color-white);
  font: 700 10px "Montserrat", sans-serif;
  letter-spacing: .1em;
  padding: 5px 9px;
  align-self: flex-start;
}

.td-section-feature__title {
  font: 800 24px/1.18 "Montserrat", sans-serif;
  color: var(--color-ink);
  transition: color 150ms ease;
}

@media (min-width: 1200px) {
  .td-section-feature__title { font-size: 30px; }
}

.td-section-feature__title:hover {
  color: var(--color-brand);
  text-decoration: underline;
}

.td-section-feature__lead {
  font: 400 15px/1.55 "Roboto", sans-serif;
  color: var(--color-muted);
}

.td-section-feature__meta {
  font: 400 12px "Roboto", sans-serif;
  color: var(--color-muted);
}

.td-section-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 1200px) {
  .td-section-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

.td-card-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-line);
}

.td-card-section__photo {
  height: 180px;
}

.td-card-section__title {
  font: 700 19px/1.28 "Montserrat", sans-serif;
  color: var(--color-ink);
  transition: color 150ms ease;
}

.td-card-section__title:hover {
  color: var(--color-brand);
  text-decoration: underline;
}

.td-card-section__lead {
  font: 400 14px/1.5 "Roboto", sans-serif;
  color: var(--color-muted);
}

.td-card-section__meta {
  font: 400 12px "Roboto", sans-serif;
  color: var(--color-muted);
}

/* Nota (article) screen */

.td-note-progress {
  height: 3px;
  background: var(--color-line);
}

.td-note-progress__fill {
  height: 3px;
  width: 0%;
  background: var(--color-accent);
}

.td-note-column {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 720px;
}

@media (min-width: 1200px) {
  .td-note-column { gap: 20px; }
}

.td-note-breadcrumb {
  font: 400 12px "Roboto", sans-serif;
  color: var(--color-muted);
}

.td-note-tag {
  background: var(--color-brand);
  color: var(--color-white);
  font: 700 11px "Montserrat", sans-serif;
  letter-spacing: .1em;
  padding: 6px 10px;
  align-self: flex-start;
}

.td-note-title {
  font: 800 30px/1.15 "Montserrat", sans-serif;
  color: var(--color-ink);
}

@media (min-width: 1200px) {
  .td-note-title { font-size: 44px; line-height: 1.1; }
}

.td-note-lead {
  font: 400 17px/1.5 "Roboto", sans-serif;
  color: var(--color-body-soft);
}

@media (min-width: 1200px) {
  .td-note-lead { font-size: 20px; }
}

.td-note-byline {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.td-note-byline__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-photo);
  flex-shrink: 0;
}

.td-note-byline__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.td-note-byline__name {
  font: 700 14px "Montserrat", sans-serif;
  color: var(--color-ink);
}

.td-note-byline__name:hover {
  color: var(--color-brand);
  text-decoration: underline;
}

.td-note-byline__meta {
  font: 400 12px "Roboto", sans-serif;
  color: var(--color-muted);
}

.td-note-share-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-line);
}

.td-note-share-block__label {
  font: 700 13px "Montserrat", sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.td-note-share {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.td-note-share__btn {
  width: 34px;
  height: 34px;
  padding: 0;
  background: none;
  border: 1px solid var(--color-line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}

.td-note-share__btn:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.td-note-share__btn[data-copied="true"] {
  border-color: #197A4B;
  color: #197A4B;
  background: rgba(25, 122, 75, .08);
}

.td-note-cover {
  height: 260px;
  width: 100%;
  object-fit: cover;
}

/* Facebook's Video Plugin (an <iframe>) has no intrinsic size like an <img>
   or <video> does, so it's pinned to a 16:9 box via the classic
   padding-top-percentage trick instead. */
.td-note-video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: var(--color-ink);
  border-radius: 4px;
  overflow: hidden;
}

.td-note-video__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Instagram/TikTok/X's widgets size their own embed (usually a fixed
   max-width card, not full-bleed like a video) — just center it and keep it
   from overflowing the column on narrow screens. */
.td-note-social-embed {
  display: flex;
  justify-content: center;
}

.td-note-social-embed > * {
  max-width: 100%;
}

@media (min-width: 1200px) {
  .td-note-cover { height: 420px; }
}

.td-note-caption {
  font: 400 12px/1.4 "Roboto", sans-serif;
  color: var(--color-muted);
  border-left: 3px solid var(--color-accent);
  padding-left: 10px;
}

.td-note-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.td-note-body p,
.td-note-body .trix-content > div {
  margin: 0;
  font: 400 16px/1.65 "Roboto", sans-serif;
  color: var(--color-body);
  text-wrap: pretty;
}

@media (min-width: 1200px) {
  .td-note-body p,
  .td-note-body .trix-content > div { font-size: 18px; line-height: 1.7; }
}

/* In-article ad slots (see PostsHelper#post_body_with_ads) are spliced in
   as siblings of the Trix paragraph divs above, so they need their own
   vertical rhythm — .td-note-body's flex gap only reaches .trix-content's
   direct children, one level up. */
.td-note-inline-ad {
  max-width: 336px;
  margin: 28px auto;
}

.td-note-body blockquote {
  margin: 0;
  background: var(--color-surface);
  border-left: 5px solid var(--color-brand);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font: 700 20px/1.35 "Montserrat", sans-serif;
  color: var(--color-ink);
}

@media (min-width: 1200px) {
  .td-note-body blockquote { font-size: 24px; }
}

.td-note-body h2, .td-note-body h3 {
  font: 800 22px "Montserrat", sans-serif;
  color: var(--color-ink);
}

.td-note-body a {
  color: var(--color-brand);
  text-decoration: underline;
}

.td-note-author-card {
  border: 1px solid var(--color-line);
  padding: 22px;
  display: flex;
  gap: 18px;
  align-items: center;
}

.td-note-author-card__avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--color-photo);
  flex-shrink: 0;
}

.td-note-author-card__name {
  font: 700 17px "Montserrat", sans-serif;
  color: var(--color-ink);
}

.td-note-related {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}

.td-note-related__heading {
  border-bottom: 3px solid var(--color-brand);
  padding-bottom: 8px;
  font: 800 20px "Montserrat", sans-serif;
  color: var(--color-ink);
}

.td-note-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 1200px) {
  .td-note-related__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Error genérico (404, 500, etc.) */

.td-error-hero {
  background: var(--color-brand);
  padding: 36px 16px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

@media (min-width: 1200px) {
  .td-error-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    align-items: center;
    padding: 64px 44px;
  }
}

.td-error-hero__code {
  font: 900 84px/1 "Montserrat", sans-serif;
  letter-spacing: -.04em;
  color: var(--color-accent);
}

@media (min-width: 1200px) {
  .td-error-hero__code { font-size: 120px; }
}

.td-error-hero__title {
  font: 800 26px/1.12 "Montserrat", sans-serif;
  color: var(--color-white);
  margin: 0;
}

@media (min-width: 1200px) {
  .td-error-hero__title { font: 800 38px/1.1 "Montserrat", sans-serif; max-width: 520px; }
}

.td-error-hero__text {
  font: 400 14px/1.55 "Roboto", sans-serif;
  color: rgba(255, 255, 255, .8);
}

@media (min-width: 1200px) {
  .td-error-hero__text { font: 400 17px/1.6 "Roboto", sans-serif; max-width: 460px; }
}

.td-error-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.td-error-card {
  background: var(--color-white);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 1200px) {
  .td-error-card { padding: 28px; gap: 14px; }
}

.td-error-sections {
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 1200px) {
  .td-error-sections { padding: 34px 44px; }
}

.td-error-sections__heading {
  font: 800 18px "Montserrat", sans-serif;
  color: var(--color-ink);
}

@media (min-width: 1200px) {
  .td-error-sections__heading { font-size: 20px; }
}

.td-error-sections__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.td-error-chip {
  border: 1px solid var(--color-line-strong);
  color: var(--color-ink);
  font: 700 12px "Montserrat", sans-serif;
  letter-spacing: .06em;
  padding: 11px 16px;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.td-error-chip:hover {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-white);
}

/* Búsqueda (search results) */

.td-search-hero {
  background: var(--color-brand);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 1200px) {
  .td-search-hero { padding: 34px 24px; }
}

.td-search-hero__eyebrow {
  font: 900 11px "Montserrat", sans-serif;
  letter-spacing: .16em;
  color: var(--color-accent);
}

.td-search-hero__form {
  display: flex;
  max-width: 820px;
}

.td-search-hero__input {
  flex: 1;
  background: var(--color-white);
  border: none;
  padding: 14px 16px;
  font: 400 15px "Roboto", sans-serif;
  color: var(--color-ink);
}

@media (min-width: 1200px) {
  .td-search-hero__input { padding: 16px 18px; font-size: 17px; }
}

.td-search-hero__submit {
  background: var(--color-accent);
  color: var(--color-ink);
  font: 700 13px "Montserrat", sans-serif;
  letter-spacing: .06em;
  padding: 14px 20px;
  border: none;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.td-search-hero__submit:hover {
  background: var(--color-accent-hover);
}

.td-search-hero__count {
  font: 400 14px "Roboto", sans-serif;
  color: rgba(255, 255, 255, .75);
}

.td-search-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

@media (min-width: 1200px) {
  .td-search-layout { grid-template-columns: 250px 1fr 300px; gap: 32px; }
}

.td-search-filter-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.td-search-filter-group__label {
  font: 900 11px "Montserrat", sans-serif;
  letter-spacing: .14em;
  color: var(--color-brand);
}

.td-search-filter-row {
  display: flex;
  justify-content: space-between;
  font: 500 14px "Roboto", sans-serif;
  color: var(--color-ink);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-line-soft);
}

.td-search-filter-row--active {
  color: var(--color-brand);
  font-weight: 700;
}

.td-search-filter-row__count {
  color: var(--color-muted);
}

.td-search-result {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 14px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-line);
}

@media (min-width: 1200px) {
  .td-search-result { grid-template-columns: 170px 1fr; gap: 18px; }
}

.td-search-result__photo {
  height: 70px;
}

@media (min-width: 1200px) {
  .td-search-result__photo { height: 104px; }
}

.td-search-result__tag {
  background: var(--color-tag-bg);
  color: var(--color-brand);
  font: 700 10px "Montserrat", sans-serif;
  letter-spacing: .1em;
  padding: 4px 8px;
}

.td-search-result__date {
  font: 400 12px "Roboto", sans-serif;
  color: var(--color-muted);
}

.td-search-result__title {
  font: 700 15px/1.25 "Montserrat", sans-serif;
  color: var(--color-ink);
  transition: color 150ms ease;
}

@media (min-width: 1200px) {
  .td-search-result__title { font-size: 19px; line-height: 1.28; }
}

.td-search-result__title:hover {
  color: var(--color-brand);
  text-decoration: underline;
}

.td-search-result__lead {
  display: none;
  font: 400 14px/1.5 "Roboto", sans-serif;
  color: var(--color-muted);
}

@media (min-width: 1200px) {
  .td-search-result__lead { display: block; }
}

/* Pagination */

.td-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 4px;
  flex-wrap: wrap;
}

.td-pagination__page {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line-strong);
  color: var(--color-ink);
  font: 700 13px "Montserrat", sans-serif;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.td-pagination__page:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.td-pagination__page--active {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-white);
}

.td-pagination__gap {
  color: var(--color-muted);
  font: 700 13px "Montserrat", sans-serif;
  padding: 0 2px;
}

.td-pagination__next {
  min-height: 44px;
  display: flex;
  align-items: center;
  border: 1px solid var(--color-brand);
  color: var(--color-brand);
  font: 700 12px "Montserrat", sans-serif;
  letter-spacing: .06em;
  padding: 0 16px;
  transition: background-color 150ms ease, color 150ms ease;
}

.td-pagination__next:hover {
  background: var(--color-brand);
  color: var(--color-white);
}

/* Generic block buttons (newsletter submit, PDF download...) */

.td-btn-block {
  display: block;
  text-align: center;
  font: 700 12px "Montserrat", sans-serif;
  letter-spacing: .06em;
  padding: 11px;
  border: none;
  cursor: pointer;
  min-height: 44px;
  transition: background-color 150ms ease;
}

.td-btn-block--brand {
  background: var(--color-brand);
  color: var(--color-white);
}

.td-btn-block--brand:hover {
  background: var(--color-brand-dark);
}

.td-btn-block--accent {
  background: var(--color-accent);
  color: var(--color-ink);
}

.td-btn-block--accent:hover {
  background: var(--color-accent-hover);
}

/* Plain-text pages (quiénes somos, términos, privacidad) */

.td-legal {
  padding: 40px 0 64px;
}

.td-legal__inner {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.td-legal__eyebrow {
  font: 900 11px "Montserrat", sans-serif;
  letter-spacing: .14em;
  color: var(--color-brand);
}

.td-legal__title {
  font: 800 30px/1.15 "Montserrat", sans-serif;
  color: var(--color-ink);
}

.td-legal__meta {
  font: 400 13px "Roboto", sans-serif;
  color: var(--color-muted);
}

.td-legal__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
}

.td-legal__body p,
.td-legal__body li {
  font: 400 16px/1.7 "Roboto", sans-serif;
  color: var(--color-body);
  text-wrap: pretty;
}

.td-legal__body h2 {
  font: 800 19px "Montserrat", sans-serif;
  color: var(--color-ink);
  margin-top: 8px;
}

.td-legal__body ul {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.td-legal__body a {
  color: var(--color-brand);
  text-decoration: underline;
}

/* "Publicitá acá" lead form */

.td-ad-form__lead {
  font: 400 16px/1.6 "Roboto", sans-serif;
  color: var(--color-body);
  margin: 4px 0 8px;
}

.td-ad-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 8px;
}

.td-ad-form__row {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

@media (min-width: 600px) {
  .td-ad-form__row {
    flex-direction: row;
  }

  .td-ad-form__row .td-ad-form__field {
    flex: 1;
    min-width: 0;
  }
}

.td-ad-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.td-ad-form__field label {
  font: 700 11px "Montserrat", sans-serif;
  letter-spacing: .08em;
  color: var(--color-muted);
}

.td-ad-form__field input,
.td-ad-form__field textarea {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: var(--color-ink);
  background: var(--color-white);
  border: 1px solid var(--color-line-strong);
  padding: 11px 14px;
}

.td-ad-form__field textarea {
  resize: vertical;
}

.td-ad-form__field input:focus,
.td-ad-form__field textarea:focus {
  outline: 2px solid var(--color-brand);
  outline-offset: 1px;
}

.td-ad-form__errors {
  background: #FDEDEE;
  border: 1px solid #E7A0A6;
  padding: 14px 16px;
  color: #A32330;
  font: 400 14px/1.5 "Roboto", sans-serif;
}

.td-ad-form__errors ul {
  margin: 0;
  padding-left: 18px;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* This file now covers the admin panel only. The public site's design
   system (tokens, layout, components) lives in topdato.css. Values below
   are taken directly from design_handoff_topdato/PROMPT-ADMIN.md. */

:root {
  --admin-navy: #072049;
  --admin-brand: #0D47A1;
  --admin-brand-secondary: #1565C0;
  --admin-accent: #FFD600;
  --admin-accent-hover: #E6C200;
  --admin-accent-ink: #111111;

  --admin-bg: #F4F6FA;
  --admin-surface: #FFFFFF;
  --admin-row-alt: #FBFCFE;
  --admin-table-head: #F8FAFC;

  --admin-border-card: #E4E9F0;
  --admin-border-control: #D8DEE8;
  --admin-border-row: #F1F4F8;
  --admin-border-soft: #EDF0F5;

  --admin-text-strong: #1B2536;
  --admin-text-medium: #3D4859;
  --admin-text-secondary: #5B6779;
  --admin-text-muted: #7A879B;
  --admin-text-muted-2: #8A94A6;
  --admin-text-placeholder: #B0B7C3;

  --admin-success: #00A05A;
  --admin-success-text: #0B7A45;
  --admin-success-bg: #EAF6EF;
  --admin-warning: #F08C00;
  --admin-warning-text: #95560A;
  --admin-warning-bg: #FDF0DC;
  --admin-danger: #C62828;
  --admin-danger-bg: #FCEBEB;
  --admin-danger-border: #F0C9C9;
  --admin-info-bg: #EEF3FB;
  --admin-info-border: #CFDDF3;
  --admin-info-text: #1B3A6B;
}

/* ==========================================================================
   Admin shell (sidebar + main)
   ========================================================================== */

.admin-body {
  background-color: var(--admin-bg);
  font-family: "Roboto", sans-serif;
  margin: 0;
}

.admin-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

.admin-main {
  flex: 1;
  min-width: 0;
  padding: 26px 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (max-width: 640px) {
  .admin-main {
    padding: 16px 14px 24px;
  }
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

.admin-sidebar {
  width: 240px;
  box-sizing: border-box;
  flex-shrink: 0;
  background: var(--admin-navy);
  display: flex;
  flex-direction: column;
  padding: 22px 14px 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

/* ==========================================================================
   Responsive: sidebar becomes an off-canvas drawer below 1024px
   ========================================================================== */

/* Same "hidden-desktop"/"hidden-mobile" convention as the public site
   (topdato.css) — one class per direction, each only defined inside its own
   @media so it never fights the component's own display value. */
@media (min-width: 1024px) {
  .admin-hidden-desktop { display: none !important; }
}

@media (max-width: 1023.98px) {
  .admin-hidden-mobile { display: none !important; }

  .admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 200ms ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, .25);
  }

  .admin-sidebar--open {
    transform: translateX(0);
  }
}

.admin-mobile-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--admin-navy);
  padding: 14px 16px;
}

.admin-mobile-topbar__button {
  background: none;
  border: none;
  color: var(--admin-surface);
  padding: 8px;
  margin: -8px;
  display: flex;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

.admin-mobile-topbar__brand {
  display: flex;
  align-items: center;
  gap: 5px;
}

.admin-sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 32, 73, .55);
  z-index: 150;
}

@media (min-width: 1024px) {
  .admin-sidebar-backdrop { display: none; }
}

.admin-sidebar__brand {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 8px 14px;
}

.admin-sidebar__brand-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.admin-sidebar__brand-top {
  font: 900 21px/1 "Montserrat", sans-serif;
  color: var(--admin-surface);
}

.admin-sidebar__brand-dato {
  background: var(--admin-surface);
  color: var(--admin-navy);
  font: 900 21px/1 "Montserrat", sans-serif;
  padding: 4px 7px;
}

.admin-sidebar__brand-label {
  font: 700 11px "Montserrat", sans-serif;
  letter-spacing: .2em;
  color: #8AA2CE;
}

.admin-sidebar__group-label {
  font: 700 10px "Montserrat", sans-serif;
  letter-spacing: .15em;
  color: #7C93C0;
  padding: 15px 14px 9px;
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, .09);
}

.admin-sidebar__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  border-radius: 6px;
  font: 500 14px "Roboto", sans-serif;
  color: #C3D0E8;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}

.admin-sidebar__item svg {
  flex-shrink: 0;
}

.admin-sidebar__item:hover {
  background: rgba(255, 255, 255, .08);
  color: var(--admin-surface);
}

.admin-sidebar__item--active {
  background: var(--admin-brand);
  font: 700 14px "Roboto", sans-serif;
  color: var(--admin-surface);
}

.admin-sidebar__item--active:hover {
  background: var(--admin-brand);
}

.admin-sidebar__item--disabled {
  color: #5F79A8;
  cursor: not-allowed;
}

.admin-sidebar__item--disabled:hover {
  background: none;
  color: #5F79A8;
}

.admin-sidebar__item-text {
  flex: 1;
}

.admin-sidebar__badge {
  background: rgba(255, 255, 255, .15);
  color: var(--admin-surface);
  font: 700 11px "Roboto", sans-serif;
  padding: 2px 7px;
  border-radius: 9px;
}

.admin-sidebar__spacer {
  flex: 1;
  min-height: 36px;
}

.admin-sidebar__footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-sidebar__footer-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-radius: 6px;
  font: 600 14px "Roboto", sans-serif;
  color: var(--admin-surface);
  text-decoration: none;
  border: 1px solid transparent;
  background: none;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  cursor: pointer;
}

.admin-sidebar__footer-link--outline {
  border-color: rgba(255, 255, 255, .2);
}

.admin-sidebar__footer-link--ghost {
  color: #A9BBDA;
}

.admin-sidebar__footer-link:hover {
  background: rgba(255, 255, 255, .08);
}

/* ==========================================================================
   Page header (title + subtitle + actions + session chip)
   ========================================================================== */

.admin-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .admin-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

.admin-page-header__titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 13px "Roboto", sans-serif;
  color: var(--admin-text-muted);
  text-decoration: none;
  margin-bottom: 6px;
}

.admin-back-link:hover {
  color: var(--admin-brand);
}

.admin-page-header__title {
  font: 700 29px/1.1 "Montserrat", sans-serif;
  color: var(--admin-text-strong);
}

.admin-page-header__subtitle {
  font: 400 14px "Roboto", sans-serif;
  color: var(--admin-text-muted);
}

.admin-page-header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 4px;
  flex-wrap: wrap;
}

.admin-session-chip {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-session-chip__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--admin-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 13px "Montserrat", sans-serif;
  color: var(--admin-surface);
  flex-shrink: 0;
}

.admin-session-chip__info {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.admin-session-chip__name {
  font: 700 14px "Roboto", sans-serif;
  color: var(--admin-text-strong);
}

.admin-session-chip__role {
  font: 400 12px "Roboto", sans-serif;
  color: var(--admin-text-muted-2);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 6px;
  padding: 11px 16px;
  font: 700 14px "Montserrat", sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
  border: 1px solid var(--admin-border-control);
  background: var(--admin-surface);
  color: var(--admin-text-medium);
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.admin-btn:hover {
  background: var(--admin-bg);
}

.admin-btn--accent {
  background: var(--admin-accent);
  border-color: var(--admin-accent);
  color: var(--admin-accent-ink);
  padding: 12px 20px;
}

.admin-btn--accent:hover {
  background: var(--admin-accent-hover);
  border-color: var(--admin-accent-hover);
}

.admin-btn--facebook {
  background: #1877F2;
  border-color: #1877F2;
  color: #FFFFFF;
}

.admin-btn--facebook:hover {
  background: #1461C7;
  border-color: #1461C7;
}

.admin-btn--instagram {
  background: linear-gradient(45deg, #FEDA75 0%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 100%);
  border-color: transparent;
  color: #FFFFFF;
}

.admin-btn--instagram:hover {
  /* Re-declared (not just filter) because .admin-btn:hover's background
     has higher specificity (class + pseudo-class vs. this single class) and
     would otherwise win, wiping out the gradient on hover. */
  background: linear-gradient(45deg, #FEDA75 0%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 100%);
  filter: brightness(1.08);
}

.admin-btn--threads {
  background: #000000;
  border-color: #000000;
  color: #FFFFFF;
}

.admin-btn--threads:hover {
  /* Re-declared for the same specificity reason as .admin-btn--instagram
     above — .admin-btn:hover would otherwise win and wash it out. */
  background: #2B2B2B;
  border-color: #2B2B2B;
}

/* ==========================================================================
   Dropdown (split button — e.g. "Publicar en Instagram" > Historias/Feed)
   ========================================================================== */

.admin-dropdown {
  position: relative;
  display: inline-flex;
}

.admin-dropdown__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 190px;
  padding: 6px;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border-card);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}

/* The [hidden] attribute is how dropdown_controller.js opens/closes this —
   needs to be spelled out here since the class's own `display: flex` above
   otherwise wins over the browser's default (non-!important) [hidden] rule. */
.admin-dropdown__menu[hidden] {
  display: none;
}

.admin-dropdown__item {
  display: flex;
  align-items: center;
  width: 100%;
  border: none;
  border-radius: 6px;
  padding: 9px 12px;
  background: none;
  color: var(--admin-text-strong);
  font: 600 14px "Roboto", sans-serif;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.admin-dropdown__item:hover {
  background: var(--admin-bg);
}

/* ==========================================================================
   Token field (masked credential input with a show/hide button — Ajustes
   > Integraciones)
   ========================================================================== */

.admin-token-field {
  position: relative;
  display: flex;
}

.admin-token-field .admin-input {
  padding-right: 44px;
}

.admin-token-field__toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  color: var(--admin-text-muted);
  cursor: pointer;
}

.admin-token-field__toggle:hover {
  color: var(--admin-text-strong);
}

.admin-fab {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font: 700 14px "Montserrat", sans-serif;
  color: #fff;
  background: linear-gradient(135deg, var(--admin-brand), var(--admin-brand-secondary));
  box-shadow: 0 8px 24px rgba(13, 71, 161, .35);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.admin-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(13, 71, 161, .45);
}

.admin-fab svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.admin-fab:disabled {
  opacity: .75;
  cursor: wait;
  transform: none;
  animation: none;
}

.admin-fab--ai {
  animation: admin-fab-pulse 2.4s ease-in-out infinite;
}

@media (max-width: 640px) {
  .admin-fab {
    right: 16px;
    bottom: 16px;
    padding: 12px 16px;
    font-size: 13px;
  }
}

@keyframes admin-fab-pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(13, 71, 161, .35), 0 0 0 0 rgba(13, 71, 161, .35); }
  50% { box-shadow: 0 8px 24px rgba(13, 71, 161, .35), 0 0 0 10px rgba(13, 71, 161, 0); }
}

.admin-btn--outline {
  background: var(--admin-surface);
  border-color: var(--admin-brand);
  color: var(--admin-brand);
}

.admin-btn--outline:hover {
  background: var(--admin-bg);
}

.admin-btn--danger {
  background: var(--admin-surface);
  border-color: var(--admin-danger-border);
  color: var(--admin-danger);
}

.admin-btn--danger:hover {
  background: var(--admin-danger-bg);
  border-color: var(--admin-danger);
}

.admin-btn--sm {
  padding: 9px 12px;
  font-size: 13px;
}

.admin-btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.admin-card {
  background: var(--admin-surface);
  border: 1px solid var(--admin-border-card);
  border-radius: 8px;
}

.admin-card__body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.admin-card__title {
  font: 700 17px "Montserrat", sans-serif;
  color: var(--admin-text-strong);
}

.admin-post-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 1024px) {
  .admin-post-form-grid {
    grid-template-columns: 1fr 350px;
    align-items: start;
  }
}

/* ==========================================================================
   Form fields
   ========================================================================== */

.admin-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-field__label {
  font: 700 13px "Montserrat", sans-serif;
  color: var(--admin-text-strong);
}

.admin-field__hint {
  font: 400 12px "Roboto", sans-serif;
  color: var(--admin-text-muted-2);
}

.admin-field__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.admin-input,
.admin-select,
.admin-textarea {
  border: 1px solid var(--admin-border-control);
  border-radius: 6px;
  padding: 11px 14px;
  font: 400 14px "Roboto", sans-serif;
  color: var(--admin-text-strong);
  background: var(--admin-surface);
  width: 100%;
  box-sizing: border-box;
}

.admin-input:focus,
.admin-select:focus,
.admin-textarea:focus {
  outline: 2px solid var(--admin-brand);
  outline-offset: 1px;
  border-color: var(--admin-brand);
}

.admin-input--title {
  padding: 14px 15px;
  font-size: 18px;
}

.admin-textarea {
  resize: vertical;
  font-family: "Roboto", sans-serif;
}

.admin-readonly-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--admin-border-control);
  border-radius: 6px;
  padding: 11px 14px;
  font: 400 14px "Roboto", sans-serif;
  color: var(--admin-text-strong);
  background: var(--admin-table-head);
}

/* ==========================================================================
   Alerts
   ========================================================================== */

.admin-alert {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  border-radius: 8px;
  padding: 14px 16px;
  font: 400 13px/1.5 "Roboto", sans-serif;
}

.admin-alert svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.admin-alert--danger {
  background: var(--admin-danger-bg);
  border: 1px solid var(--admin-danger-border);
  color: #8C2323;
}

.admin-alert--danger ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

/* ==========================================================================
   Table
   ========================================================================== */

.admin-table-card {
  background: var(--admin-surface);
  border: 1px solid var(--admin-border-card);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.admin-table-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--admin-border-card);
  flex-wrap: wrap;
}

.admin-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 320px;
  border: 1px solid var(--admin-border-control);
  border-radius: 6px;
  padding: 9px 12px;
}

.admin-search svg {
  flex-shrink: 0;
  color: var(--admin-text-muted-2);
}

.admin-search input {
  border: none;
  outline: none;
  font: 400 13px "Roboto", sans-serif;
  color: var(--admin-text-strong);
  width: 100%;
  background: none;
}

.admin-search input::placeholder {
  color: #9AA3B2;
}

.admin-filter-select {
  border: 1px solid var(--admin-border-control);
  border-radius: 6px;
  padding: 9px 12px;
  font: 400 13px "Roboto", sans-serif;
  color: var(--admin-text-medium);
  background: var(--admin-surface);
}

.admin-table-toolbar-spacer {
  flex: 1;
}

.admin-period-tabs {
  display: flex;
  border: 1px solid var(--admin-border-control);
  border-radius: 6px;
  overflow: hidden;
}

.admin-period-tab {
  padding: 8px 14px;
  font: 500 13px "Roboto", sans-serif;
  color: var(--admin-text-medium);
  text-decoration: none;
  border-right: 1px solid var(--admin-border-control);
}

.admin-period-tab:last-child {
  border-right: none;
}

.admin-period-tab--active {
  background: var(--admin-brand);
  color: #fff;
}

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

.admin-table thead th {
  background: var(--admin-table-head);
  border-bottom: 1px solid var(--admin-border-card);
  font: 700 11px "Montserrat", sans-serif;
  letter-spacing: .07em;
  color: var(--admin-text-muted);
  text-transform: uppercase;
  padding: 12px 20px;
  text-align: left;
  white-space: nowrap;
}

.admin-table th.admin-table__num,
.admin-table td.admin-table__num {
  text-align: right;
}

.admin-table tbody tr {
  border-bottom: 1px solid var(--admin-border-row);
}

.admin-table tbody tr:nth-child(even) {
  background: var(--admin-row-alt);
}

.admin-table tbody td {
  padding: 15px 20px;
  font: 400 14px "Roboto", sans-serif;
  color: var(--admin-text-strong);
  vertical-align: middle;
}

.admin-table td.admin-table__num {
  font-weight: 700;
}

.admin-table__title-link {
  font: 500 14px/1.4 "Roboto", sans-serif;
  color: var(--admin-brand);
  text-decoration: none;
}

.admin-table__title-link:hover {
  text-decoration: underline;
}

.admin-table__muted {
  color: var(--admin-text-placeholder);
}

.admin-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-table-footer__count {
  font: 400 13px "Roboto", sans-serif;
  color: var(--admin-text-muted-2);
}

.admin-sortable-ghost {
  opacity: .4;
  background: var(--admin-bg) !important;
}

.admin-drag-handle {
  cursor: grab;
  color: #C3CAD6;
  display: flex;
  align-items: center;
}

.admin-drag-handle:active {
  cursor: grabbing;
}

/* The icon itself stays the same size — just a bigger touch target around
   it, since 16px is too small to reliably grab with a finger. */
@media (max-width: 1023.98px) {
  .admin-drag-handle {
    padding: 12px;
    margin: -12px;
  }
}

.admin-empty-state {
  padding: 48px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.admin-empty-state__title {
  font: 700 16px "Montserrat", sans-serif;
  color: var(--admin-text-strong);
}

.admin-empty-state__text {
  font: 400 14px "Roboto", sans-serif;
  color: var(--admin-text-muted);
  max-width: 420px;
}

/* Category badges — background color comes from Category#color (set by the
   admin in /admin/categorias), passed inline since categories are dynamic. */

.admin-badge-category {
  display: inline-block;
  font: 700 10px "Montserrat", sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--admin-surface);
  padding: 4px 8px;
}

.admin-badge-category--none {
  background: var(--admin-text-placeholder);
}

/* Status pills */

.admin-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 11px "Montserrat", sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 4px;
}

.admin-status-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.admin-status-pill--published {
  background: var(--admin-success-bg);
  color: var(--admin-success-text);
}

.admin-status-pill--published .admin-status-pill__dot {
  background: var(--admin-success-text);
}

.admin-status-pill--draft {
  background: var(--admin-warning-bg);
  color: var(--admin-warning-text);
}

.admin-status-pill--draft .admin-status-pill__dot {
  background: var(--admin-warning-text);
}

.admin-status-pill--danger {
  background: var(--admin-danger-bg);
  color: var(--admin-danger);
}

.admin-status-pill--danger .admin-status-pill__dot {
  background: var(--admin-danger);
}

/* Row actions (edit / delete) */

.admin-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.admin-row-action {
  width: 32px;
  height: 32px;
  border: 1px solid var(--admin-border-control);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--admin-text-medium);
  background: var(--admin-surface);
  cursor: pointer;
  text-decoration: none;
  padding: 0;
}

.admin-row-action:hover {
  background: var(--admin-bg);
}

.admin-row-action--danger {
  border-color: #F3CFCF;
  color: var(--admin-danger);
}

.admin-row-action--danger:hover {
  background: var(--admin-danger-bg);
}

/* "Compartir" share modal (admin/posts/_share_modal.html.erb) — a native
   <dialog>, styled here; showModal()/close() come from app/javascript/
   controllers/modal_controller.js. */

.admin-share-modal {
  border: none;
  border-radius: 10px;
  padding: 0;
  box-shadow: 0 20px 48px rgba(20, 24, 44, .22);
  width: min(360px, calc(100vw - 32px));
}

.admin-share-modal::backdrop {
  background: rgba(15, 18, 32, .5);
}

.admin-share-modal__panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
}

.admin-share-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-share-modal__title {
  font: 700 15px "Montserrat", sans-serif;
  color: var(--admin-text-strong);
}

.admin-share-modal__close {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--admin-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-share-modal__close:hover {
  background: var(--admin-bg);
  color: var(--admin-text-strong);
}

.admin-share-modal__post-title {
  margin: -6px 0 0;
  font: 400 13.5px/1.5 "Roboto", sans-serif;
  color: var(--admin-text-secondary);
}

.admin-share-modal__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-share-modal__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid var(--admin-border-control);
  border-radius: 8px;
  padding: 11px 14px;
  background: var(--admin-surface);
  color: var(--admin-text-strong);
  font: 600 14px "Roboto", sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.admin-share-modal__option:hover {
  background: var(--admin-bg);
  border-color: var(--admin-brand);
}

.admin-share-modal__option[data-copied="true"] {
  border-color: var(--admin-success);
  color: var(--admin-success-text);
  background: var(--admin-success-bg);
}

.admin-share-modal__icon {
  display: flex;
  flex-shrink: 0;
  color: inherit;
}

.admin-share-modal__empty {
  margin: 0;
  font: 400 13px/1.5 "Roboto", sans-serif;
  color: var(--admin-text-muted);
}

.admin-star-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}

/* Pagination (wraps Pagy's generated links) */

.admin-pagination {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-pagination a,
.admin-pagination span {
  min-width: 34px;
  height: 34px;
  border: 1px solid var(--admin-border-control);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 13px "Roboto", sans-serif;
  color: var(--admin-text-medium);
  text-decoration: none;
  padding: 0 6px;
  box-sizing: border-box;
}

.admin-pagination a:hover {
  background: var(--admin-bg);
}

.admin-pagination a[aria-disabled="true"] {
  color: var(--admin-text-placeholder);
  border-color: transparent;
  cursor: default;
}

.admin-pagination a[aria-disabled="true"]:hover {
  background: none;
}

.admin-pagination .current {
  background: var(--admin-brand);
  border-color: var(--admin-brand);
  color: var(--admin-surface);
  font-weight: 700;
}

/* ==========================================================================
   Switch (checkbox styled as a toggle)
   ========================================================================== */

.admin-switch {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
}

.admin-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.admin-switch__track {
  width: 40px;
  height: 23px;
  border-radius: 12px;
  background: var(--admin-border-control);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 3px;
  transition: background-color 150ms ease;
}

.admin-switch__thumb {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--admin-surface);
  transition: transform 150ms ease;
}

.admin-switch input:checked + .admin-switch__track {
  background: var(--admin-brand);
  justify-content: flex-end;
}

.admin-switch__label {
  font: 400 13px/1.45 "Roboto", sans-serif;
  color: var(--admin-text-medium);
}

.admin-switch__track--on {
  background: var(--admin-success);
  justify-content: flex-end;
}

/* Toggle rendered as a plain button (button_to, no real checkbox) */

.admin-toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.admin-toggle-switch__label {
  font: 600 12px "Roboto", sans-serif;
  color: var(--admin-text-muted-2);
}

.admin-toggle-switch__label--on {
  color: var(--admin-success-text);
}

/* Color swatch picker (categorías) */

.admin-swatch-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-swatch-picker input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.admin-swatch-picker__option {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  display: block;
}

.admin-swatch-picker input:checked + .admin-swatch-picker__option {
  box-shadow: 0 0 0 2px var(--admin-surface) inset, 0 0 0 2px var(--admin-text-strong);
}

.admin-color-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
  display: inline-block;
}

/* ==========================================================================
   Cover image dropzone
   ========================================================================== */

.admin-dropzone {
  position: relative;
  border: 1.5px dashed #C3CAD6;
  border-radius: 8px;
  background: var(--admin-table-head);
  padding: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.admin-dropzone__icon {
  color: #9AA3B2;
}

.admin-dropzone__title {
  font: 600 14px "Roboto", sans-serif;
  color: var(--admin-text-medium);
}

.admin-dropzone__hint {
  font: 400 12px "Roboto", sans-serif;
  color: var(--admin-text-muted-2);
}

.admin-dropzone--dragover {
  border-color: var(--admin-brand);
  background: var(--admin-brand-bg, #EAF1FB);
}

.admin-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.admin-dropzone__preview {
  max-width: 100%;
  border-radius: 6px;
}

/* ==========================================================================
   Rich text (Trix) — restyled to match the admin card look
   ========================================================================== */

.admin-card trix-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 10px;
  background: var(--admin-table-head);
  border: 1px solid var(--admin-border-control);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  /* Sticks while scrolling a long note so the toolbar is always at hand —
     bounded by .admin-field (its parent, wrapping just the label/toolbar/
     editor), so it releases naturally once you scroll past the editor
     instead of following you down the whole page. */
  position: sticky;
  top: 0;
  z-index: 5;
}

.admin-card trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.admin-card trix-toolbar .trix-button-group {
  border: none;
  margin: 0 6px 0 0;
  display: flex;
  gap: 2px;
}

.admin-card trix-toolbar .trix-button {
  border: none;
  background: none;
  color: var(--admin-text-medium);
  border-radius: 5px;
  width: 31px;
  height: 31px;
}

.admin-card trix-toolbar .trix-button:hover {
  background: var(--admin-border-control);
}

.admin-card trix-toolbar .trix-button.trix-active {
  background: var(--admin-brand);
  color: var(--admin-surface);
}

.admin-card trix-editor {
  border: 1px solid var(--admin-border-control);
  border-top: none;
  border-radius: 0 0 6px 6px;
  min-height: 320px;
  padding: 16px 15px;
  font: 400 15px/1.7 "Roboto", sans-serif;
  color: var(--admin-text-strong);
}

.admin-card trix-editor:focus {
  outline: none;
  border-color: var(--admin-brand);
}

/* ==========================================================================
   Auth screens (login, password reset) — no sidebar
   ========================================================================== */

.admin-auth {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  background: var(--admin-surface);
}

.admin-auth__brand {
  width: 560px;
  flex-shrink: 0;
  background: var(--admin-navy);
  padding: 48px 52px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.admin-auth__logo-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-auth__logo-top {
  font: 900 32px/1 "Montserrat", sans-serif;
  color: var(--admin-surface);
}

.admin-auth__logo-dato {
  background: var(--admin-surface);
  color: var(--admin-navy);
  font: 900 32px/1 "Montserrat", sans-serif;
  padding: 6px 10px;
}

.admin-auth__logo-label {
  font: 700 12px "Montserrat", sans-serif;
  letter-spacing: .24em;
  color: #8AA2CE;
  margin-top: 6px;
}

.admin-auth__slogan {
  font: 800 34px/1.2 "Montserrat", sans-serif;
  color: var(--admin-surface);
  max-width: 400px;
  text-wrap: pretty;
}

.admin-auth__slogan-bar {
  width: 64px;
  height: 4px;
  background: var(--admin-accent);
  margin-top: 18px;
}

.admin-auth__stats {
  display: flex;
  gap: 34px;
}

.admin-auth__stat-value {
  font: 700 22px "Montserrat", sans-serif;
  color: var(--admin-surface);
  display: block;
}

.admin-auth__stat-label {
  font: 400 12px "Roboto", sans-serif;
  color: #8AA2CE;
}

.admin-auth__footnote {
  font: 400 12px "Roboto", sans-serif;
  color: #5F79A8;
  margin-top: 14px;
}

.admin-auth__panel {
  flex: 1;
  min-width: 0;
  background: var(--admin-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.admin-auth__form-wrap {
  width: 420px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Below 900px there's no room for both the 560px brand panel and a usable
   form — the brand panel is purely decorative, so it's the one that goes.
   Covers login, password reset request and password reset edit: all three
   share this layout. */
@media (max-width: 900px) {
  .admin-auth__brand {
    display: none;
  }

  .admin-auth__panel {
    padding: 40px 16px;
  }
}

.admin-auth__card {
  background: var(--admin-surface);
  border: 1px solid var(--admin-border-card);
  border-radius: 8px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.admin-auth__heading {
  font: 700 26px/1.15 "Montserrat", sans-serif;
  color: var(--admin-text-strong);
}

.admin-auth__subheading {
  font: 400 14px "Roboto", sans-serif;
  color: var(--admin-text-muted);
}

.admin-auth__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-auth__field-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.admin-auth__field-row a {
  font: 500 12px "Roboto", sans-serif;
  color: var(--admin-brand);
}

.admin-auth__input-group {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--admin-border-control);
  border-radius: 6px;
  padding: 12px 14px;
}

.admin-auth__input-group:focus-within {
  border-color: var(--admin-brand);
}

.admin-auth__input-group svg {
  flex-shrink: 0;
  color: var(--admin-text-muted-2);
}

.admin-auth__input-group input {
  border: none;
  outline: none;
  flex: 1;
  font: 400 14px "Roboto", sans-serif;
  color: var(--admin-text-strong);
  background: none;
  min-width: 0;
}

.admin-auth__show-password {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--admin-text-muted-2);
  display: flex;
  flex-shrink: 0;
}

.admin-auth__remember {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 400 14px "Roboto", sans-serif;
  color: var(--admin-text-medium);
  cursor: pointer;
}

.admin-auth__remember input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--admin-brand);
  cursor: pointer;
}

.admin-auth__submit {
  background: var(--admin-accent);
  border: none;
  border-radius: 6px;
  padding: 14px;
  text-align: center;
  font: 700 15px "Montserrat", sans-serif;
  letter-spacing: .02em;
  color: var(--admin-accent-ink);
  cursor: pointer;
  width: 100%;
}

.admin-auth__submit:hover {
  background: var(--admin-accent-hover);
}

.admin-auth__note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border-top: 1px solid var(--admin-border-soft);
  padding-top: 16px;
  font: 400 12px/1.5 "Roboto", sans-serif;
  color: var(--admin-text-muted-2);
}

.admin-auth__note svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.admin-auth__back {
  text-align: center;
  font: 400 13px "Roboto", sans-serif;
  color: var(--admin-text-muted-2);
}

.admin-auth__back a {
  color: var(--admin-brand);
}

/* ==========================================================================
   Dashboard
   ========================================================================== */

.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 1279px) {
  .admin-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .admin-kpi-grid { grid-template-columns: 1fr; }
}

.admin-kpi-card {
  background: var(--admin-surface);
  border: 1px solid var(--admin-border-card);
  border-radius: 8px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-kpi-card__head {
  display: flex;
  align-items: center;
  gap: 13px;
}

.admin-kpi-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--admin-surface);
}

.admin-kpi-card__label {
  font: 700 11px "Montserrat", sans-serif;
  letter-spacing: .09em;
  color: var(--admin-text-muted);
}

.admin-kpi-card__value {
  font: 700 27px/1 "Montserrat", sans-serif;
  color: var(--admin-text-strong);
}

.admin-kpi-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.admin-kpi-card__delta {
  font: 700 13px "Roboto", sans-serif;
  color: var(--admin-success-text);
}

.admin-kpi-card__delta--negative {
  color: var(--admin-danger);
}

.admin-kpi-card__sublabel {
  font: 400 12px "Roboto", sans-serif;
  color: var(--admin-text-muted-2);
}

.admin-dashboard-row {
  display: grid;
  grid-template-columns: 1.52fr 1fr .76fr;
  gap: 16px;
  align-items: start;
}

/* Column-ratio variants as classes instead of inline style="" — an inline
   style always wins over the @media collapse below regardless of
   specificity, which is exactly what silently broke the mobile layout on
   the pages that used to set grid-template-columns inline. */
.admin-dashboard-row--2col {
  grid-template-columns: 1fr 1fr;
}

.admin-dashboard-row--wide-left {
  grid-template-columns: 1.6fr 1fr;
}

@media (max-width: 1279px) {
  .admin-dashboard-row { grid-template-columns: 1fr; }
}

.admin-chart-card {
  background: var(--admin-surface);
  border: 1px solid var(--admin-border-card);
  border-radius: 8px;
  padding: 20px 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin-chart-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.admin-chart-card__title {
  font: 700 19px "Montserrat", sans-serif;
  color: var(--admin-text-strong);
}

.admin-chart-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font: 400 11px "Roboto", sans-serif;
  color: #9AA3B2;
  text-align: right;
  padding-bottom: 2px;
}

.admin-chart-x-labels {
  display: flex;
  justify-content: space-between;
  font: 400 11px "Roboto", sans-serif;
  color: #9AA3B2;
}

.admin-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1;
  min-width: 0;
}

.admin-donut-legend__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-donut-legend__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.admin-donut-legend__label {
  flex: 1;
  font: 400 13px "Roboto", sans-serif;
  color: var(--admin-text-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-donut-legend__pct {
  font: 700 13px "Roboto", sans-serif;
  color: var(--admin-text-strong);
  width: 38px;
  text-align: right;
}

.admin-donut-legend__count {
  font: 400 13px "Roboto", sans-serif;
  color: var(--admin-text-muted-2);
  width: 46px;
  text-align: right;
}

.admin-card-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 700 13px "Roboto", sans-serif;
  color: var(--admin-brand);
  text-decoration: none;
  border-top: 1px solid var(--admin-border-soft);
  padding-top: 13px;
  margin-top: -2px;
}

.admin-quick-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.admin-quick-action {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--admin-border-control);
  border-radius: 6px;
  padding: 12px 14px;
  font: 500 14px "Roboto", sans-serif;
  color: var(--admin-text-strong);
  text-decoration: none;
  transition: background-color 150ms ease;
}

.admin-quick-action:hover {
  background: var(--admin-bg);
}

.admin-quick-action--accent {
  background: var(--admin-accent);
  border-color: var(--admin-accent);
  font: 700 14px "Montserrat", sans-serif;
  color: var(--admin-accent-ink);
}

.admin-quick-action--accent:hover {
  background: var(--admin-accent-hover);
}

.admin-mini-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-mini-table th {
  text-align: left;
  padding: 0 0 9px;
  border-bottom: 1px solid var(--admin-border-card);
  font: 700 12px "Montserrat", sans-serif;
  letter-spacing: .04em;
  color: var(--admin-text-muted);
}

.admin-mini-table th.admin-table__num {
  text-align: right;
}

.admin-mini-table td {
  padding: 14px 0;
  border-bottom: 1px solid var(--admin-border-row);
  font: 400 14px/1.4 "Roboto", sans-serif;
  color: var(--admin-text-strong);
  vertical-align: middle;
}

.admin-mini-table tr:last-child td {
  border-bottom: none;
}

.admin-mini-table td.admin-table__num {
  font-weight: 700;
}

.admin-activity-item {
  display: flex;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--admin-border-row);
}

.admin-activity-item:last-child {
  border-bottom: none;
}

.admin-activity-item__icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-activity-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.admin-activity-item__text {
  font: 400 13px/1.45 "Roboto", sans-serif;
  color: var(--admin-text-strong);
}

.admin-activity-item__category {
  font: 400 12px "Roboto", sans-serif;
  color: var(--admin-text-muted-2);
}

.admin-activity-item__time {
  font: 400 12px "Roboto", sans-serif;
  color: var(--admin-text-muted-2);
  flex-shrink: 0;
}

.admin-status-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.admin-status-row__label {
  flex: 1;
  font: 400 13px "Roboto", sans-serif;
  color: var(--admin-text-medium);
}

.admin-status-row__value {
  font: 700 13px "Roboto", sans-serif;
  color: var(--admin-text-strong);
}

.admin-status-row__meta {
  font: 400 12px "Roboto", sans-serif;
  color: var(--admin-text-muted-2);
}

.admin-status-badge {
  background: var(--admin-success-bg);
  color: var(--admin-success-text);
  font: 700 10px "Montserrat", sans-serif;
  letter-spacing: .06em;
  padding: 4px 7px;
  border-radius: 4px;
}

.admin-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--admin-border-row);
}

.admin-stat-row:last-child {
  border-bottom: none;
}

.admin-stat-row__label {
  font: 400 13px "Roboto", sans-serif;
  color: var(--admin-text-medium);
}

.admin-stat-row__value {
  font: 700 14px "Roboto", sans-serif;
  color: var(--admin-text-strong);
}

/* Poll results */

.admin-poll-result {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.admin-poll-result__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.admin-poll-result__label {
  font: 500 14px "Roboto", sans-serif;
  color: var(--admin-text-strong);
}

.admin-poll-result__stats {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.admin-poll-result__pct {
  font: 700 14px "Roboto", sans-serif;
  color: var(--admin-text-strong);
}

.admin-poll-result__votes {
  font: 400 12px "Roboto", sans-serif;
  color: var(--admin-text-muted-2);
}

.admin-poll-result__track {
  height: 10px;
  border-radius: 5px;
  background: #EEF2F8;
  overflow: hidden;
}

.admin-poll-result__fill {
  height: 100%;
  background: var(--admin-brand);
}

/* ==========================================================================
   Public-site admin preview banner (posts/show.html.erb, shown only to
   signed-in admins previewing an unpublished post)
   ========================================================================== */

.admin-preview-bar {
  background-color: #fff3cd;
  border: 1px solid #ffe69c;
  border-radius: 0.35rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}