/* Panel de administración: usa los tokens de csf.css. Es una pantalla de trabajo,
   así que lleva bordes en tablas y campos, y nada de animaciones. */
.adm { background: var(--paper-tone); color: var(--paper-ink); }
.adm__bar { display: flex; align-items: center; gap: var(--gutter); flex-wrap: wrap; min-height: 4.25rem; padding: 0.5rem var(--margin); background: var(--bg); color: var(--ink); }
.adm__bar .nav__brand { margin-right: 0; font-size: var(--step-small); }
.adm__bar .nav__brand img { width: 2.5rem; height: 2.5rem; }
.adm__nav { display: flex; gap: 1.5rem; margin-right: auto; flex-wrap: wrap; }
.adm__nav a { text-decoration: none; padding-block: 0.3rem; }
.adm__nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--accent); } /* taste-skill-ignore */
.adm__salir { display: flex; align-items: center; gap: 1rem; font-size: var(--step-small); color: var(--muted); }
.adm__salir button { min-height: 2.5rem; padding: 0 1rem; background: var(--surface); color: var(--ink); font-weight: 500; }
.adm__main { max-width: 76rem; margin: 0 auto; padding: 2.5rem var(--margin) 5rem; }
.adm h1 { font-size: var(--step-lead); letter-spacing: -0.015em; line-height: 1.1; }
.adm h2 { font-size: var(--step-body); font-weight: 700; letter-spacing: 0; line-height: 1.3; margin-bottom: 0.75rem; }
.adm__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.adm__card { background: var(--paper); padding: clamp(1.25rem, 3vw, 2rem); margin-bottom: 1.25rem; }
.adm__card--chica { max-width: 30rem; margin: 3rem auto; }
.adm__card h1 { margin-bottom: 0.5rem; }
.adm__ayuda { display: block; font-size: var(--step-small); color: var(--paper-muted); font-weight: 400; }
.adm__ayuda code { font-size: 0.95em; }
.adm__aviso { padding: 0.9rem 1.1rem; margin-bottom: 1.25rem; background: #dff3e5; color: #11421f; font-weight: 500; }
.adm__aviso--error { background: #fde3ea; color: #6b0f2c; }
.adm__form { display: grid; gap: 1rem; }
.adm__form--angosto { max-width: 24rem; }
.adm__form label { display: grid; gap: 0.35rem; font-weight: 500; }
.adm .field { background: var(--paper); color: var(--paper-ink); border: 1px solid #c5cbe3; }
.adm .field::placeholder { color: var(--paper-muted); }
.adm .field:focus-visible { outline: 3px solid var(--p-yellow); outline-offset: 0; }
.adm textarea.field { min-height: 0; }
.adm__fila { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 1rem; }
.adm__peligro { background: #c8264f; color: #fff; }
.adm__enlace { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; font-weight: 500; }
.adm__dos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

.adm__tabla { width: 100%; border-collapse: collapse; background: var(--paper); font-size: var(--step-small); }
.adm__tabla th { text-align: left; font-weight: 500; color: var(--paper-muted); padding: 0.75rem 1rem; border-bottom: 1px solid #dfe3f0; }
.adm__tabla td { padding: 0.85rem 1rem; border-bottom: 1px solid #eef0f7; vertical-align: middle; }
.adm__tabla td:first-child { display: flex; align-items: center; gap: 0.9rem; font-size: var(--step-body); font-weight: 500; }
.adm__tabla td a { text-decoration: none; }
.adm__tabla td a:hover { text-decoration: underline; }
.adm__mini { width: 3.5rem; height: 2.6rem; object-fit: cover; flex: none; }
.adm__acciones { text-align: right; white-space: nowrap; }
.adm__acciones a, .adm__acciones form { display: inline-block; margin-left: 1rem; }
.adm__estado { display: inline-block; padding: 0.2rem 0.55rem; font-weight: 500; }
.adm__estado--publicada { background: #dff3e5; color: #11421f; }
.adm__estado--borrador { background: var(--paper-tone); color: var(--paper-muted); }
.adm__estado--programada { background: #fff3c4; color: #5a4300; }

.adm__editor { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; gap: 1.5rem; }
.adm__col { display: grid; gap: 1.25rem; background: var(--paper); padding: clamp(1.25rem, 3vw, 2rem); }
.adm__col--lado { background: none; padding: 0; position: sticky; top: 1rem; }
.adm__grupo { border: 0; margin: 0; padding: 1.25rem; background: var(--paper); display: grid; gap: 0.9rem; }
.adm__grupo legend { float: left; width: 100%; font-weight: 700; margin-bottom: 0.25rem; padding: 0; }
.adm__check { display: flex !important; grid-template-columns: none; align-items: center; gap: 0.5rem; font-weight: 400 !important; }
.adm__preview { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.adm__campo { display: grid; gap: 0.5rem; font-weight: 500; }
.adm__barra { display: flex; flex-wrap: wrap; gap: 4px; }
.adm__barra button { min-height: 2.25rem; padding: 0 0.7rem; background: var(--paper-tone); font-size: var(--step-small); font-weight: 500; }
.adm__barra button:hover { background: #dfe3f0; }
.adm__texto { min-height: 22rem; padding: 1rem 1.1rem; border: 1px solid #c5cbe3; background: var(--paper); font-weight: 400; max-width: none; }
.adm__texto:focus-visible { outline: 3px solid var(--p-yellow); outline-offset: 0; }
.adm__texto h3 { font-size: var(--step-lead); margin: 1em 0 0.4em; }
.adm__texto blockquote { margin: 1em 0; padding-left: 1rem; border-left: 4px solid var(--accent); }
.adm__texto ul, .adm__texto ol { padding-left: 1.3em; }

@media (max-width: 56em) {
  .adm__editor, .adm__dos { grid-template-columns: 1fr; }
  .adm__col--lado { position: static; }
  .adm__tabla thead { display: none; }
  .adm__tabla, .adm__tabla tbody, .adm__tabla tr, .adm__tabla td { display: block; }
  .adm__tabla tr { padding: 0.75rem 0; border-bottom: 1px solid #dfe3f0; }
  .adm__tabla td { border: 0; padding: 0.25rem 1rem; }
  .adm__acciones { text-align: left; }
  .adm__acciones a:first-child, .adm__acciones form:first-child { margin-left: 0; }
}
.adm__sub { margin-top: 2.5rem; }