/* Panel de gestión — образец админки в духе Payload CMS: боковое меню коллекций,
   список с фильтрами, карточка документа с колонкой сохранения справа.
   Своя система классов (boton, campo, pastilla), отдельная от продающих страниц. */
:root{
  --fondo:#f1f1f2; --lienzo:#fff; --lateral:#fff;
  --tinta:#18181b; --tinta-70:#55555c; --tinta-45:#6b6b74; /* 4,7:1 к фону — подписи читаемы */
  --linea:#e4e4e7; --linea-fuerte:#d1d1d6; --suave:#f7f7f8;
  --acento:#1c1c20; --acento-txt:#fff; --foco:#2f4a8c;
  --azul-f:#e8edf8; --azul-t:#2a4278;
  --ambar-f:#fbf0da; --ambar-t:#7a5510;
  --verde-f:#e3f1e8; --verde-t:#256b41;
  --rojo-f:#fbe7e5; --rojo-t:#9e2018;
  --gris-f:#eeeef0; --gris-t:#5b5b63;
  --sombra:0 1px 2px rgba(20,20,25,.06), 0 8px 24px -18px rgba(20,20,25,.3);
  --r:4px;
  --ancho-lateral:252px;
}
[data-tema="oscuro"]{
  --fondo:#141416; --lienzo:#1c1c1f; --lateral:#1a1a1d;
  --tinta:#f0f0f2; --tinta-70:#b0b0b8; --tinta-45:#95959e; /* 4,8:1 к боковой колонке */
  --linea:#2c2c31; --linea-fuerte:#3a3a41; --suave:#212125;
  --acento:#f0f0f2; --acento-txt:#18181b; --foco:#8fa8e0;
  --azul-f:#1e2740; --azul-t:#b7c8ec;
  --ambar-f:#332811; --ambar-t:#e8c489;
  --verde-f:#16291d; --verde-t:#9ad4b0;
  --rojo-f:#331a17; --rojo-t:#f0a9a1;
  --gris-f:#27272b; --gris-t:#b0b0b8;
  --sombra:0 1px 2px rgba(0,0,0,.4);
  color-scheme:dark;
}
*{box-sizing:border-box}
/* Атрибут hidden важнее классов: иначе .campo{display:block} показывал поле,
   которое условие должно было спрятать. */
[hidden]{display:none!important}
body{margin:0;background:var(--fondo);color:var(--tinta);
  font:400 15px/1.55 "Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%}
/* Кнопки и поля не наследуют шрифт сами: без этого иконки-кнопки шли в Arial. */
button,input,select,textarea{font-family:inherit}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;letter-spacing:-.012em;font-weight:600}
h1{font-size:25px;line-height:1.2}
h2{font-size:17px}
h3{font-size:15.5px}
.mono{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;font-size:13px}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--foco);outline-offset:2px}

/* ── каркас ─────────────────────────────────────────────────────────── */
/* Фон сетки повторяет боковую колонку: на снимке всей страницы колонка под
   липким меню не обрывается пустым полем. */
.app{display:grid;grid-template-columns:var(--ancho-lateral) minmax(0,1fr);min-height:100vh;
  background:linear-gradient(90deg,var(--lateral) 0 calc(var(--ancho-lateral) - 1px),
    var(--linea) calc(var(--ancho-lateral) - 1px) var(--ancho-lateral),var(--fondo) var(--ancho-lateral))}
/* min-width:0 обязателен: колонка 1fr иначе не сжимается ниже содержимого, и
   широкая таблица растягивала всю страницу вместо прокрутки внутри рамки. */
.principal{min-width:0}
.lateral{background:var(--lateral);border-right:1px solid var(--linea);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
/* ≡ на мониторе сворачивает колонку, как в Payload 3 */
@media(min-width:901px){
  .app[data-nav="cerrado"]{grid-template-columns:minmax(0,1fr);background:var(--fondo)}
  .app[data-nav="cerrado"] .lateral{display:none}
}
.marca{display:flex;align-items:center;gap:10px;padding:18px 20px;border-bottom:1px solid var(--linea);
  text-decoration:none}
.marca__sello{width:30px;height:30px;border-radius:3px;background:var(--acento);color:var(--acento-txt);
  display:grid;place-items:center;font-weight:600;font-size:13px;flex:0 0 auto;letter-spacing:.02em}
.marca b{display:block;font-size:14.5px;font-weight:600;line-height:1.25}
.marca span{display:block;font-size:11.5px;color:var(--tinta-45);letter-spacing:.04em}
/* Селектор .marca span перебивал .marca__sello по весу: буквы в квадрате
   красились серым и уезжали в левый верхний угол вместо центра. */
.marca span.marca__sello{display:grid;color:var(--acento-txt);font-size:13px;letter-spacing:.02em}

.menu{padding:14px 12px;flex:1}
.menu__grupo{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-45);
  font-weight:600;padding:14px 8px 7px}
.menu a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r);
  text-decoration:none;color:var(--tinta-70);font-size:14.5px;min-height:40px}
.menu a:hover{background:var(--suave);color:var(--tinta)}
.menu a[aria-current="page"]{background:var(--suave);color:var(--tinta);font-weight:600}
.menu svg{width:17px;height:17px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.menu .cuenta{margin-left:auto;font-size:12px;font-variant-numeric:tabular-nums;color:var(--tinta-45);
  background:var(--gris-f);border-radius:9px;padding:1px 7px;font-weight:600}
.menu a[aria-current="page"] .cuenta{color:var(--tinta-70)}
.menu .cuenta--aviso{background:var(--azul-f);color:var(--azul-t)}

.usuario{border-top:1px solid var(--linea);padding:10px 12px 10px 20px;display:flex;align-items:center;gap:10px}
.usuario__ini{width:28px;height:28px;border-radius:50%;background:var(--gris-f);color:var(--tinta-70);
  display:grid;place-items:center;font-size:12px;font-weight:600;flex:0 0 auto}
.usuario__txt{min-width:0;flex:1}
.usuario__txt b{display:block;font-size:13.5px;font-weight:600}
.usuario__txt span{display:block;font-size:11.5px;color:var(--tinta-45)}

/* ── верхняя полоса ─────────────────────────────────────────────────── */
.barra{position:sticky;top:0;z-index:15;background:var(--fondo);border-bottom:1px solid var(--linea);
  display:flex;align-items:center;gap:12px;padding:12px 24px;min-height:57px}
.miga{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--tinta-45);
  flex:1 1 auto;min-width:0;overflow:hidden}
.miga a{text-decoration:none;white-space:nowrap;flex:0 0 auto}
.miga a:hover{color:var(--tinta);text-decoration:underline}
.miga b{color:var(--tinta-70);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.miga__sep{flex:0 0 auto}
.barra__der{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}
.barra__der .barra__guardar{display:none}

.icono-btn{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--linea-fuerte);
  border-radius:var(--r);background:var(--lienzo);color:var(--tinta-70);cursor:pointer;flex:0 0 auto;padding:0}
.icono-btn:hover{color:var(--tinta);border-color:var(--tinta-45)}
.icono-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.icono-btn--suave{background:transparent;border-color:transparent}
.icono-btn--suave:hover{background:var(--suave);border-color:var(--linea)}
.icono-btn .sol,.icono-btn .luna{display:grid;place-items:center}
[data-tema="oscuro"] .sol{display:none}
:root:not([data-tema="oscuro"]) .luna{display:none}

/* ── страница ───────────────────────────────────────────────────────── */
.hoja{padding:26px 24px 80px;max-width:1240px}
.cab-pag{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.cab-pag__txt{min-width:0;flex:1 1 260px}
.cab-pag p{margin:6px 0 0;color:var(--tinta-70);font-size:14.5px;max-width:62ch}
.cab-pag__acc{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

.boton{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;
  padding:8px 15px;border:1px solid var(--linea-fuerte);border-radius:var(--r);background:var(--lienzo);
  color:var(--tinta);font-weight:600;font-size:14px;line-height:1;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .14s,border-color .14s,color .14s}
.boton:hover{border-color:var(--tinta-45)}
.boton svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.boton--primario{background:var(--acento);border-color:var(--acento);color:var(--acento-txt)}
.boton--primario:hover{opacity:.88;border-color:var(--acento)}
.boton--peligro{color:var(--rojo-t);border-color:var(--linea-fuerte)}
.boton--peligro:hover{background:var(--rojo-f);border-color:var(--rojo-t)}
.boton--fino{min-height:32px;padding:5px 11px;font-size:13px;font-weight:500}
.boton--ancho{width:100%}
.boton__mas{display:none}
.boton[disabled]{opacity:.5;cursor:default}

/* ── плашка «это демо» ──────────────────────────────────────────────── */
.tira{display:flex;gap:12px;align-items:flex-start;background:var(--azul-f);color:var(--azul-t);
  border:1px solid color-mix(in srgb,var(--azul-t) 22%,transparent);border-radius:var(--r);
  padding:14px 16px;margin-bottom:22px;font-size:14px;line-height:1.5}
.tira b{display:block;font-size:14.5px;margin-bottom:2px}
.tira p{margin:0}
.tira svg{width:18px;height:18px;flex:0 0 auto;margin-top:2px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ── плитки и карточки коллекций ────────────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:26px}
.kpi{background:var(--lienzo);border:1px solid var(--linea);border-radius:var(--r);padding:15px 17px;min-width:0}
.kpi span{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinta-45);font-weight:600}
.kpi b{display:block;font-size:27px;line-height:1.15;margin-top:7px;font-variant-numeric:tabular-nums}
.kpi--texto b{font-size:20px;line-height:1.25;margin-top:9px}
.kpi small{display:block;color:var(--tinta-45);font-size:13px;margin-top:4px;line-height:1.4}

.seccion{margin-bottom:30px}
.seccion__cab{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.seccion__cab h2{font-size:15px}
.seccion__cab span{font-size:13px;color:var(--tinta-45)}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:12px}
.cole{background:var(--lienzo);border:1px solid var(--linea);border-radius:var(--r);padding:17px 18px;
  display:flex;flex-direction:column;gap:7px;min-width:0}
.cole__cab{display:flex;align-items:center;gap:9px}
.cole__cab svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;color:var(--tinta-45)}
.cole__cab b{font-size:15px;font-weight:600}
.cole__cab .n{margin-left:auto;font-size:13px;color:var(--tinta-45);font-variant-numeric:tabular-nums}
.cole p{margin:0;color:var(--tinta-70);font-size:13.5px}
.cole p:not(.cole__dato){flex:1}
.cole__dato{font-size:12.5px!important;color:var(--tinta-45)!important;font-variant-numeric:tabular-nums}
.cole__pie{display:flex;gap:8px;margin-top:4px}

/* ── список ─────────────────────────────────────────────────────────── */
.utiles{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.buscar{position:relative;flex:1 1 230px;max-width:340px}
.buscar input{width:100%;min-height:38px;padding:8px 12px 8px 34px;border:1px solid var(--linea-fuerte);
  border-radius:var(--r);background:var(--lienzo);color:var(--tinta);font-weight:400;font-size:14px;line-height:1.4}
.buscar svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;
  stroke:var(--tinta-45);fill:none;stroke-width:1.8;pointer-events:none}
.filtros{display:flex;gap:6px;flex-wrap:wrap}
.filtro{min-height:34px;padding:6px 12px;border:1px solid var(--linea-fuerte);border-radius:999px;
  background:var(--lienzo);color:var(--tinta-70);font-weight:500;font-size:13px;line-height:1;cursor:pointer}
.filtro:hover{color:var(--tinta)}
.filtro[aria-pressed="true"]{background:var(--acento);border-color:var(--acento);color:var(--acento-txt)}

/* Прокрутка внутри рамки, а не страницей: широкая таблица не тянет за собой
   всю страницу вбок. */
.caja{background:var(--lienzo);border:1px solid var(--linea);border-radius:var(--r);
  overflow-x:auto;overscroll-behavior-x:contain}
table.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla th{text-align:left;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tinta-45);font-weight:600;padding:11px 14px;border-bottom:1px solid var(--linea);
  background:var(--suave);white-space:nowrap}
.tabla th button{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;text-transform:inherit;letter-spacing:inherit}
.tabla th button:hover{color:var(--tinta)}
.tabla th .orden{font-size:12px;opacity:.9}
.tabla td{padding:12px 14px;border-bottom:1px solid var(--linea);vertical-align:middle}
.tabla tr:last-child td{border-bottom:0}
.tabla tbody tr:hover{background:var(--suave)}
.tabla .sel{width:38px;padding-right:0}
.tabla .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabla .acc{text-align:right;white-space:nowrap}
.tabla td.foto{width:66px;padding-right:0}
.tabla a.titulo{font-weight:600;text-decoration:none}
@media(min-width:901px){.tabla td.cab{white-space:nowrap}}
.tabla a.titulo:hover{text-decoration:underline}
.tabla .apunte{display:block;color:var(--tinta-45);font-size:12.5px;margin-top:2px;line-height:1.4}
.tabla .num .apunte{white-space:normal}
.tabla .mini{width:42px;height:52px;border-radius:3px;object-fit:cover;background:var(--suave)}
.tabla .mini--vacia{border:1px dashed var(--linea-fuerte)}
.fila--borrador .mini{opacity:.55}
input[type="checkbox"]{width:17px;height:17px;accent-color:var(--foco);cursor:pointer;margin:0}
/* Запас на палец вокруг флажка, без сдвига разметки. */
.sel__caja{display:inline-flex;padding:14px;margin:-14px;cursor:pointer}

.pastilla{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;
  font-size:12.5px;font-weight:600;white-space:nowrap;background:var(--gris-f);color:var(--gris-t)}
.pastilla::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.pastilla--azul{background:var(--azul-f);color:var(--azul-t)}
.pastilla--ambar{background:var(--ambar-f);color:var(--ambar-t)}
.pastilla--verde{background:var(--verde-f);color:var(--verde-t)}
.pastilla--rojo{background:var(--rojo-f);color:var(--rojo-t)}
.chip{display:inline-block;padding:2px 8px;border:1px solid var(--linea-fuerte);border-radius:3px;
  font-size:12.5px;color:var(--tinta-70);white-space:nowrap}

/* Полоса выделенных строк висит над содержимым, а не в потоке: в потоке она
   сдвигала таблицу вниз, и второй щелчок по чекбоксу попадал не туда. */
.barra-sel{position:fixed;z-index:30;bottom:16px;left:16px;right:16px;
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  background:var(--azul-f);color:var(--azul-t);
  border:1px solid color-mix(in srgb,var(--azul-t) 30%,transparent);
  border-radius:var(--r);padding:10px 14px;font-size:14px;font-weight:600;
  box-shadow:0 10px 34px -12px rgba(10,10,15,.5)}
@media(min-width:901px){.barra-sel{left:calc(var(--ancho-lateral) + 24px);right:26px}
  .app[data-nav="cerrado"] .barra-sel{left:26px}}
.barra-sel .boton{background:transparent;border-color:color-mix(in srgb,var(--azul-t) 35%,transparent);
  color:inherit}
.barra-sel .boton:hover{background:color-mix(in srgb,var(--azul-t) 12%,transparent)}

.paginacion{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;
  font-size:13.5px;color:var(--tinta-70)}
.paginacion .pasos{display:flex;gap:6px;margin-left:auto}
.vacio{padding:44px 20px;text-align:center;color:var(--tinta-45)}
.vacio b{display:block;color:var(--tinta-70);font-size:15.5px;margin-bottom:5px}

/* ── медиатека ──────────────────────────────────────────────────────── */
.medios{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.medio{background:var(--lienzo);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;
  text-align:left;padding:0;cursor:pointer;color:inherit;font:inherit;display:block;width:100%;min-width:0;text-decoration:none}
.medio:hover{border-color:var(--tinta-45)}
.medio img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--suave)}
.medio__txt{display:block;padding:9px 11px 11px}
.medio__txt b{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.medio__txt span{display:block;font-size:12px;color:var(--tinta-45);margin-top:2px}
.archivo{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:16px;align-items:start}
.archivo img{width:100%;border-radius:3px;border:1px solid var(--linea);background:var(--suave)}
.archivo__txt{display:grid;gap:4px;align-content:start}
.archivo__txt b{font-size:14.5px;overflow-wrap:anywhere}
.archivo__txt span{font-size:13px;color:var(--tinta-45)}

/* ── карточка документа ─────────────────────────────────────────────── */
.doc{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:20px;align-items:start}
#campos,#editor{min-width:0}
.grupo{background:var(--lienzo);border:1px solid var(--linea);border-radius:var(--r);
  padding:20px;margin-bottom:16px;min-width:0}
.grupo>h2{font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-45);
  margin-bottom:15px}
.fila{display:grid;gap:14px}
@media(min-width:720px){.fila--dos{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .fila--tres{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fila--cuatro{grid-template-columns:repeat(4,minmax(0,1fr))}}
.campo{display:block;margin-bottom:14px;min-width:0}
.campo:last-child,.fila>.campo,.fila>div>.campo{margin-bottom:0}
.campo>span:first-child,.campo>legend{display:block;font-size:13px;font-weight:600;margin-bottom:5px;padding:0}
.campo em{font-style:normal;color:var(--tinta-45);font-weight:400}
.campo .pista{display:block;font-size:12.5px;color:var(--tinta-45);margin-top:5px;font-weight:400;line-height:1.45}
.campo input[type="text"],.campo input[type="number"],.campo input[type="date"],
.campo input[type="time"],.campo select,.campo textarea{
  width:100%;min-height:40px;padding:9px 11px;border:1px solid var(--linea-fuerte);border-radius:var(--r);
  background:var(--lienzo);color:var(--tinta);font-weight:400;font-size:14.5px;line-height:1.45}
.campo textarea{min-height:88px;resize:vertical}
.campo select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--tinta-45) 50%),linear-gradient(135deg,var(--tinta-45) 50%,transparent 50%);
  background-position:calc(100% - 17px) 18px,calc(100% - 12px) 18px;background-size:5px 5px;
  background-repeat:no-repeat;padding-right:34px}
.campo--check{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px}
.campo--check input{margin-top:3px}
.campo--check span{font-size:14px;font-weight:500;margin:0}
.campo--mal input,.campo--mal textarea,.campo--mal select{border-color:var(--rojo-t)}
.error{display:block;color:var(--rojo-t);font-size:12.5px;margin-top:5px;font-weight:500}
.aviso-campo{display:block;color:var(--ambar-t);font-size:12.5px;margin-top:5px;font-weight:600}
.contador{display:block;text-align:right;font-size:12.5px;color:var(--tinta-45);margin-top:4px;font-variant-numeric:tabular-nums}
.sufijo{position:relative;display:block}
.sufijo input{padding-right:38px!important}
.sufijo--ancho input{padding-right:54px!important}
.sufijo b{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--tinta-45);
  font-size:13.5px;font-weight:500;pointer-events:none}
/* адрес в сайте: неизменяемая часть слева от поля */
.prefijo{display:flex;align-items:stretch}
.prefijo b{display:flex;align-items:center;padding:0 9px;border:1px solid var(--linea-fuerte);border-right:0;
  border-radius:var(--r) 0 0 var(--r);background:var(--suave);color:var(--tinta-45);font-weight:500;font-size:13px;
  white-space:nowrap}
.prefijo input{border-radius:0 var(--r) var(--r) 0!important;min-width:0}
/* поле, которое считает панель сама */
.calculo{display:flex;align-items:center;min-height:40px;padding:9px 11px;border:1px dashed var(--linea-fuerte);
  border-radius:var(--r);background:var(--suave);font-weight:600;font-size:14.5px;font-variant-numeric:tabular-nums}

/* несколько галочек — поводы, месяцы, дополнения */
fieldset.campo{border:0;padding:0;margin:0 0 14px;min-width:0}
.checks{display:flex;flex-wrap:wrap;gap:7px}
.check{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 13px 6px 11px;
  border:1px solid var(--linea-fuerte);border-radius:999px;background:var(--lienzo);cursor:pointer;
  font-size:13.5px;line-height:1.2;color:var(--tinta-70)}
.check:hover{border-color:var(--tinta-45);color:var(--tinta)}
.check:has(input:checked){background:var(--azul-f);border-color:color-mix(in srgb,var(--azul-t) 40%,transparent);color:var(--azul-t);font-weight:600}
.check input{flex:0 0 auto}
.check:has(input:focus-visible){outline:2px solid var(--foco);outline-offset:2px}
.checks--meses{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.checks--meses .check{justify-content:flex-start;border-radius:var(--r)}

/* три размера каталога */
.tallas{display:grid;grid-template-columns:92px 116px minmax(0,1fr);gap:8px 10px;align-items:center}
.tallas__cab{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-45);font-weight:600}
.tallas__et{font-size:14px;font-weight:600}
.tallas input{width:100%;min-height:40px;padding:9px 11px;border:1px solid var(--linea-fuerte);border-radius:var(--r);
  background:var(--lienzo);color:var(--tinta);font-weight:400;font-size:14.5px;line-height:1.45}

/* строки заказа — как массив в Payload */
.arts{display:grid;gap:10px}
.art{display:grid;grid-template-columns:minmax(0,1fr) 150px 70px 104px 40px;gap:9px;align-items:end;
  padding-bottom:10px;border-bottom:1px dashed var(--linea)}
.art .campo{margin:0}
.quitar{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--linea-fuerte);padding:0;
  border-radius:var(--r);background:var(--lienzo);color:var(--tinta-45);cursor:pointer}
.quitar:hover{color:var(--rojo-t);border-color:var(--rojo-t)}
.quitar svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
@media(max-width:620px){
  .art{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;grid-template-areas:"p p p" "t t t" "n i q"}
  .art__prod{grid-area:p}.art__talla{grid-area:t}.art__n{grid-area:n}.art__precio{grid-area:i}.art .quitar{grid-area:q}
}

/* лист заказа */
.cuenta{margin:0;display:grid}
.cuenta>div{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--linea);font-size:14px}
.cuenta dt{min-width:0}
.cuenta dd{margin:0;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--tinta-70)}
.cuenta>div:has(+ .cuenta__sub){border-bottom-color:transparent;padding-bottom:2px}
.cuenta .cuenta__sub{padding-top:0}
.cuenta .cuenta__sub dt{font-size:13px;color:var(--tinta-45)}
.cuenta .cuenta__entrega{border-top:1px solid var(--linea)}
.cuenta .cuenta__total{border-bottom:0;padding-top:10px;font-size:16px;font-weight:600}
.cuenta .cuenta__total dd{color:var(--tinta)}
#cuenta-caja>.pista{display:block;font-size:12.5px;color:var(--tinta-45);margin:10px 0 0}

/* колонка справа */
.doc__lado{position:sticky;top:73px;display:grid;gap:16px;min-width:0}
.lado{background:var(--lienzo);border:1px solid var(--linea);border-radius:var(--r);padding:16px}
.lado h2{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-45);
  margin-bottom:12px}
.lado .campo{margin:0}
.dato{display:flex;justify-content:space-between;gap:10px;padding:7px 0;font-size:13.5px;
  border-bottom:1px solid var(--linea)}
.dato:last-child{border-bottom:0}
.dato span{color:var(--tinta-45);flex:0 0 auto}
.dato b{font-weight:500;text-align:right;min-width:0;overflow-wrap:anywhere}
.guardar{display:grid;gap:9px}
.pista--lado{margin:0;font-size:13px;color:var(--tinta-45);text-align:center;padding:4px 0}

/* превью изображения в поле */
.foto-campo{display:flex;gap:13px;align-items:flex-start}
.foto-campo img{width:104px;height:78px;object-fit:cover;border-radius:3px;border:1px solid var(--linea);
  background:var(--suave);flex:0 0 auto}
.foto-campo__acc{display:grid;gap:7px;justify-items:start;min-width:0}
.foto-campo__acc span{font-size:12.5px;color:var(--tinta-45);overflow-wrap:anywhere}

/* ── часы, зоны, даты и цены настроек ──────────────────────────────── */
.hor{display:grid;grid-template-columns:118px minmax(0,1fr);gap:10px;align-items:center}
.hor label{font-size:14px;font-weight:500}
.hor input{min-height:38px;padding:8px 11px;border:1px solid var(--linea-fuerte);width:100%;
  border-radius:var(--r);background:var(--lienzo);color:inherit;font-size:14px;line-height:1.4}
@media(max-width:560px){.hor{grid-template-columns:1fr;gap:5px}}
.select-mini{min-height:32px;padding:4px 8px;border:1px solid var(--linea-fuerte);
  border-radius:var(--r);background:var(--lienzo);color:inherit;font-size:13px}
.grupo>.fila{margin-bottom:14px}
.grupo>.fila:last-child{margin-bottom:0}
.grupo>.pista,.grupo .pista--suelta{display:block;margin:0;font-size:12.5px;color:var(--tinta-45);line-height:1.5}
.pista--intro{margin:0 0 14px!important;font-size:13px;color:var(--tinta-45)}
.apunte--alerta{color:var(--ambar-t)!important}
.grupo>p.pista{margin:14px 0 0}
.boton--arriba{margin-top:12px}

.pestanas{display:flex;gap:2px;border-bottom:1px solid var(--linea);margin:0 0 16px;overflow-x:auto;
  scrollbar-width:none;overscroll-behavior-x:contain}
.pestanas::-webkit-scrollbar{display:none}
.pestana{flex:0 0 auto;appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  margin-bottom:-1px;padding:10px 12px;min-height:44px;color:var(--tinta-70);font-size:14px;font-weight:500;
  white-space:nowrap;cursor:pointer;border-radius:var(--r) var(--r) 0 0}
.pestana:hover{color:var(--tinta);background:var(--suave)}
.pestana[aria-selected="true"]{color:var(--tinta);border-bottom-color:var(--tinta);font-weight:600}

.zonas{display:grid}
.zona-fila{display:grid;grid-template-columns:minmax(0,1fr) 124px;gap:12px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--linea)}
.zona-fila:first-child{padding-top:0}
.zona-fila label{display:flex;flex-direction:column;gap:1px;font-size:14px}
.zona-fila label span{font-size:12.5px;color:var(--tinta-45)}
.zona-fila input,.precio input{width:100%;min-height:40px;padding:9px 11px;border:1px solid var(--linea-fuerte);
  border-radius:var(--r);background:var(--lienzo);color:var(--tinta);font-size:14.5px;text-align:right}
.franjas{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-top:16px}
.franjas span{font-size:13px;padding:4px 9px;border:1px solid var(--linea-fuerte);border-radius:3px;color:var(--tinta-70)}
.franjas .franjas__t{border:0;padding:0 4px 0 0;font-weight:600;color:var(--tinta)}
.grupo .franjas+.pista{margin-top:8px}

.fechas-lista{display:grid;gap:12px}
.fecha-fila{border:1px solid var(--linea);border-radius:var(--r);padding:14px 15px}
.fecha-fila__cab{display:flex;justify-content:space-between;align-items:baseline;gap:6px 12px;flex-wrap:wrap;margin-bottom:12px}
.fecha-fila__cab b{font-size:15px}
.fecha-fila__cab span{font-size:13px;color:var(--tinta-45)}
.fecha-fila .fila{margin-bottom:14px}
.fecha-fila__ahora{display:grid;gap:3px;margin:12px 0 0;padding-top:10px;border-top:1px dashed var(--linea);
  font-size:13px;color:var(--tinta-70)}

.precios{margin-bottom:18px}
.precios:last-of-type{margin-bottom:0}
.precios h3{font-size:13px;font-weight:600;margin-bottom:8px;color:var(--tinta)}
.precios__filas{display:grid;gap:8px}
.precio{display:grid;grid-template-columns:minmax(0,1fr) 124px;gap:12px;align-items:center}
.precio>span:first-child{font-size:14px;color:var(--tinta-70)}
.precios .pista{display:block;font-size:12.5px;color:var(--tinta-45);margin:8px 0 0}

/* ── блоки контента ────────────────────────────────────────────────── */
.bloques{display:grid;gap:10px}
.bloque{border:1px solid var(--linea);border-radius:var(--r);background:var(--lienzo);min-width:0}
.bloque__cab{display:flex;align-items:center;gap:10px;padding:9px 10px 9px 13px}
.bloque__n{font-size:13px;font-weight:600;color:var(--tinta-45);font-variant-numeric:tabular-nums;flex:0 0 auto}
.bloque__nombre{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.bloque__nombre .tipo{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-45);font-weight:600}
.bloque__nombre b{font-size:14.5px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.bloque__nombre i{font-weight:500;color:var(--tinta-70)}
.bloque__cab .der{margin-left:auto;display:flex;gap:5px;flex:0 0 auto}
.bloque__cuerpo{padding:14px 13px 15px;border-top:1px solid var(--linea)}
.bloque[data-abierto="no"] .bloque__cuerpo{display:none}
.bloque__tipo{margin:0 0 12px;font-size:12.5px;color:var(--tinta-45)}
.mueve{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--linea-fuerte);padding:0;
  border-radius:3px;background:var(--lienzo);color:var(--tinta-45);cursor:pointer}
.mueve:hover{color:var(--tinta)}
.mueve[disabled]{opacity:.4;cursor:default}
.mueve svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bloque__menu{position:relative;display:none}
.bloque__pop{position:absolute;z-index:9;right:0;top:calc(100% + 6px);min-width:200px;display:none;
  background:var(--lienzo);border:1px solid var(--linea-fuerte);border-radius:var(--r);box-shadow:var(--sombra);padding:5px}
.bloque__pop[data-abierto="si"]{display:block}
.bloque__pop button{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;padding:8px 10px;border:0;
  background:none;color:var(--tinta);font-size:14px;font-weight:500;border-radius:3px;cursor:pointer;text-align:left}
.bloque__pop button:hover{background:var(--suave)}
.bloque__pop button[disabled]{opacity:.4;cursor:default}
.bloque__pop svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bloque__cuerpo>.fila{margin-bottom:14px}
.bloque__cuerpo .pista--suelta{margin-top:12px}
.bloque__cuerpo a{color:var(--tinta)}
.nota-bloque{margin-top:12px;padding:11px 13px;border-radius:var(--r);background:var(--suave);font-size:13px;color:var(--tinta-70)}
.nota-bloque p{margin:0 0 6px}
.mini-lista{margin:0;padding-left:20px;display:grid;gap:3px}
.mini-lista span{color:var(--tinta-45)}
.estaciones{display:grid;gap:10px;margin-top:4px}
.estacion{border:1px solid var(--linea);border-radius:var(--r);min-width:0}
.estacion summary{display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap;min-height:44px;padding:11px 12px 11px 34px;
  cursor:pointer;list-style:none;position:relative}
.estacion summary::-webkit-details-marker{display:none}
.estacion summary::before{content:"";position:absolute;left:14px;top:18px;width:6px;height:6px;border-right:1.6px solid var(--tinta-45);
  border-bottom:1.6px solid var(--tinta-45);transform:rotate(-45deg);transition:transform .15s}
.estacion[open] summary::before{transform:rotate(45deg);top:16px}
.estacion summary b{font-size:13.5px;font-weight:600}
.estacion summary em{font-style:normal;color:var(--verde-t)}
.estacion__lista{font-size:13px;color:var(--tinta-45)}
.estacion>.fila{gap:10px;padding:0 12px 12px}
.estacion .campo{margin:0}
.opciones-bloque{display:grid;gap:10px;margin-top:14px}
.opcion-bloque{display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 10px;padding-top:12px;border-top:1px dashed var(--linea)}
.opcion-bloque__letra{grid-row:span 2;font-style:italic;font-size:17px;color:var(--tinta-45);padding-top:24px}
.opcion-bloque .campo{margin-bottom:8px}
.opcion-bloque textarea{min-height:64px!important}
.anadir-bloque{position:relative;margin-top:12px}
/* Раскрывается вверх: кнопка стоит внизу длинной формы, вниз меню уходило
   за нижнюю кромку экрана и его не было видно. */
.lista-bloques{position:absolute;z-index:8;left:0;bottom:calc(100% + 6px);min-width:260px;max-width:calc(100vw - 32px);
  background:var(--lienzo);border:1px solid var(--linea-fuerte);border-radius:var(--r);
  box-shadow:var(--sombra);padding:6px;display:none}
.lista-bloques[data-abierto="si"]{display:block}
.lista-bloques button{display:block;width:100%;text-align:left;padding:9px 10px;border:0;
  background:none;color:var(--tinta);font-weight:500;font-size:14px;line-height:1.3;border-radius:3px;cursor:pointer}
.lista-bloques button:hover{background:var(--suave)}
.lista-bloques small{display:block;color:var(--tinta-45);font-weight:400;font-size:12.5px}

/* ── модальное окно ────────────────────────────────────────────────── */
.velo{position:fixed;inset:0;background:rgba(15,15,18,.55);display:none;z-index:40;
  padding:20px;overflow-y:auto}
.velo[data-abierto="si"]{display:grid;place-items:center}
.modal{background:var(--lienzo);border-radius:6px;box-shadow:var(--sombra);width:100%;
  max-width:560px;padding:22px}
.modal--ancho{max-width:860px}
.modal h2{font-size:18px;margin-bottom:8px}
.modal p{margin:0 0 18px;color:var(--tinta-70);font-size:14.5px}
.modal__acc{display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap;margin-top:18px}
.medios--modal{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}

/* ── всплывающее подтверждение ─────────────────────────────────────── */
/* Сообщение снизу справа и выше полосы выделения: сверху оно накрывало кнопку
   «Guardar» в боковой колонке, снизу вплотную — полосу выделенных строк. */
.aviso-flotante{position:fixed;right:18px;bottom:76px;z-index:60;background:var(--acento);
  color:var(--acento-txt);border-radius:var(--r);padding:12px 16px;font-size:14px;font-weight:600;
  box-shadow:0 10px 34px -12px rgba(10,10,15,.5);max-width:min(380px,calc(100vw - 36px));
  opacity:0;transform:translateY(8px);transition:opacity .18s,transform .18s;pointer-events:none}
.aviso-flotante[data-visible="si"]{opacity:1;transform:none}

.nota-demo{margin:0;padding:18px 24px 26px;color:var(--tinta-45);font-size:13px;max-width:96ch}
.nota-demo b{color:var(--tinta-70);font-weight:600}

/* ── телефон и планшет ─────────────────────────────────────────────── */
@media(max-width:900px){
  .app{grid-template-columns:minmax(0,1fr);background:var(--fondo)}
  .lateral{position:fixed;z-index:50;top:0;left:0;width:272px;max-width:84vw;
    transform:translateX(-100%);transition:transform .2s;visibility:hidden}
  .app[data-menu="si"] .lateral{transform:none;box-shadow:0 0 40px rgba(0,0,0,.28);visibility:visible}
  .velo-menu{position:fixed;inset:0;background:rgba(15,15,18,.45);z-index:45;display:none}
  .app[data-menu="si"] .velo-menu{display:block}
  /* Пальцем: не меньше 44 px по правилу ревью. На мониторе плотность
     админки оставляем прежней — там курсор. */
  .icono-btn{width:44px;height:44px}
  .menu a{min-height:44px}
  .boton{min-height:44px}
  .boton--fino{min-height:44px;padding-inline:14px}
  .miga a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
  /* Флажок «показывать объявление» стоит отдельно от подписи: даём запас
     на палец вокруг самого флажка, как в строках заказов. */
  .campo--check input{width:24px;height:24px;flex:none;margin-top:0}
  .filtro{min-height:44px}
  .check{min-height:44px}
  .pestana{min-height:46px}
  /* Safari на iPhone зумит страницу, когда в поле шрифт меньше 16 px:
     после этого макет шире экрана и его надо сводить пальцами обратно. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select,textarea,
  .campo input,.campo select,.campo textarea,.select-mini,.tallas input,.zona-fila input,.precio input{font-size:16px}
  .campo input:not([type=checkbox]),.campo select,.tallas input,.zona-fila input,.precio input,
  .buscar input,.hor input{min-height:46px}
  .campo textarea{padding:11px}
  .select-mini{min-height:44px}
  .quitar{width:44px;height:46px}
  /* Стрелки порядка блоков были 30 × 30 — мимо них попадаешь чаще, чем по ним. */
  .mueve{width:44px;height:44px}
  .seccion__cab a{display:inline-flex;align-items:center;min-height:44px}
  .tabla th button{display:inline-flex;align-items:center;min-height:44px}
  .paginacion select{min-height:44px}
  .barra{padding-inline:16px;gap:10px}
  [data-guarda] .barra__web{display:none}
  [data-guarda] .barra__der .barra__guardar{display:inline-flex;min-width:96px}
  [data-guarda] .guardar #guardar{display:none}
  .hoja{padding:20px 16px 70px}
  /* На телефоне: сверху действия (сохранить, статус, WhatsApp), потом поля,
     и только затем служебные данные и удаление. display:contents вынимает
     блоки боковой колонки в общий поток, иначе «Documento» и «Borrar»
     оказывались раньше самих полей. */
  .doc{display:flex;flex-direction:column;gap:16px;align-items:stretch}
  .doc__lado{display:contents}
  .doc__lado .lado:first-child{order:-1}
  .doc__lado .lado{order:1}
  .doc__lado .lado--web:first-child{order:1}
  #campos,#editor{order:0}
  .grupo{margin-bottom:0}
  #campos,#editor{display:grid;gap:16px}
  .panel-tab{display:grid;gap:16px}
  .nota-demo{padding-inline:16px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi b{font-size:23px}
  .kpi--texto b{font-size:17.5px}
  .archivo{grid-template-columns:minmax(0,1fr)}
  .archivo img{max-width:260px}

  /* Строки таблицы — карточками: название шапкой, дальше «подпись — значение».
     Раньше пояснение под названием ставилось flex-строкой с отступом 120 px
     и шириной 100 %, вылезало за край, и телефон уменьшал всю страницу. */
  .caja{border:0;background:none;overflow:visible}
  .tabla thead{display:none}
  .tabla,.tabla tbody{display:block;width:auto}
  .tabla tbody{display:grid;gap:10px}
  .tabla tr{display:grid;grid-template-columns:minmax(0,1fr);background:var(--lienzo);border:1px solid var(--linea);
    border-radius:var(--r);padding:4px 14px 10px;position:relative;min-width:0}
  .tabla tbody tr:hover{background:var(--lienzo)}
  .tabla td{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:12px;align-items:baseline;
    border:0;padding:5px 0;min-width:0;width:auto}
  .tabla td::before{content:attr(data-etiqueta);grid-column:1;color:var(--tinta-45);font-size:12.5px;line-height:1.5}
  .tabla td>*{grid-column:2;min-width:0;justify-self:start}
  .tabla td>.apunte{justify-self:stretch}
  .tabla td .apunte{margin-top:1px}
  .tabla td.num,.tabla td.acc{text-align:left;white-space:normal}
  .tabla td.cab{display:block;padding:8px 48px 9px 0;margin-bottom:5px;border-bottom:1px solid var(--linea)}
  .tabla td.cab::before{display:none}
  .tabla a.titulo{display:inline-flex;align-items:center;min-height:44px;min-width:44px;font-size:16px}
  .tabla td.cab .apunte{margin-top:-6px}
  .tabla td.sel{position:absolute;right:14px;top:18px;padding:0;display:block;width:auto}
  .tabla td.sel::before{display:none}
  .tabla td.acc{display:block;padding-top:8px}
  .tabla td.acc::before{display:none}
  .tabla td.acc .boton{width:100%}
  .tabla td.acc .boton__mas{display:inline}
  .tabla td:empty{display:none}
  /* у каталога фото слева от названия */
  .tabla--fotos tr{grid-template-columns:62px minmax(0,1fr)}
  .tabla--fotos td{grid-column:1 / -1}
  .tabla--fotos td.foto{grid-column:1;grid-row:1;display:block;width:auto;padding:10px 0 9px;margin-bottom:5px;border-bottom:1px solid var(--linea)}
  .tabla--fotos td.foto::before{display:none}
  .tabla--fotos td.cab{grid-column:2;grid-row:1}
  .tabla .mini{width:50px;height:62px}
}
@media(min-width:601px) and (max-width:900px){
  .tabla tbody{grid-template-columns:repeat(2,minmax(0,1fr))}
  #ultimos .tabla tbody{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  /* в крошках карточки на телефоне «Panel» лишний: он же первый пункт меню */
  .miga--larga>a:first-child,.miga--larga>a:first-child+.miga__sep{display:none}
  .bloque__cab .mueve--ancho{display:none}
  .bloque__menu{display:block}
  .bloque__cab{padding-left:11px;gap:8px}
  .checks--meses{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tallas{grid-template-columns:minmax(0,108px) minmax(0,1fr)}
  .tallas__cab{display:none}
  .tallas__et{grid-column:1 / -1;margin-top:6px}
  .zona-fila,.precio{grid-template-columns:minmax(0,1fr) 112px}
  .fecha-fila{padding:12px}
  .opcion-bloque{grid-template-columns:minmax(0,1fr)}
  .opcion-bloque__letra{display:none}
  .foto-campo img{width:88px;height:66px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.velo-menu{display:none}