/* ═══════════════════════════════════════════════════════════════════════════
   SWEET LITTLE TRAUMA — MIS CREACIONES
   ───────────────────────────────────────────────────────────────────────────
   Una tarjeta por cosa hecha, como el fotograma de una película: la portada
   manda, el nombre va debajo, y lo que importa saber —si está listo, si se está
   haciendo, si necesita algo de vos— se lee sobre la imagen sin abrir nada.

   Los colores salen de los tokens del Studio (estetica.css): el rosa es el
   único acento, y cada estado tiene el suyo para distinguirse a primera vista
   sin depender solo del color (siempre hay un texto al lado).
   ═══════════════════════════════════════════════════════════════════════════ */

.mc { --mc-radio: 12px; --mc-rosa: var(--rosa, var(--gr-rosa)); --mc-ambar: var(--ambar, #ffd3a0); --mc-verde: var(--verde, #9dd5b7); }

/* ── La cabecera ─────────────────────────────────────────────────────────── */
.mc-cabecera { margin: 0 0 clamp(20px, 3vw, 32px); }
.mc-titulo-pagina {
  font-size: clamp(40px, 5.2vw, 72px);
  margin: 6px 0 10px;
  line-height: 1;
}
.mc-bajada { margin: 0; max-width: 62ch; font-size: 14.5px; color: var(--tinta-dim); }

/* ── La barra: filtros y búsqueda ────────────────────────────────────────── */
.mc-barra {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 0 0 22px; padding-bottom: 14px;
  border-bottom: 1px solid var(--g6);
}
.mc-filtros {
  display: flex; gap: 2px; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
  padding: 3px; border: 1px solid var(--g6); border-radius: 999px; background: var(--g1);
}
.mc-filtros::-webkit-scrollbar { display: none; }
.mc-filtro {
  flex: 0 0 auto; min-height: 36px; padding: 7px 16px; border: 0; border-radius: 999px;
  background: transparent; color: var(--tinta-dim); font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: background .2s, color .2s;
}
.mc-filtro:hover { color: var(--tinta); }
.mc-filtro.activo { background: var(--g6); color: var(--tinta); }
.mc-filtro[data-filtro="papelera"].activo { background: var(--mc-rosa); color: var(--acento-ink, #28161f); }

.mc-buscar {
  display: flex; align-items: center; gap: 9px; flex: 0 1 260px; min-width: 0;
  padding: 0 14px; min-height: 42px; border: 1px solid var(--g6); border-radius: 999px; background: var(--g1);
  color: var(--tinta-faint);
}
.mc-buscar:focus-within { border-color: var(--mc-rosa); }
.mc-buscar svg { flex: 0 0 auto; }
.mc-buscar input {
  appearance: none; flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  color: var(--tinta); font-size: 14px;
}
.mc-buscar input::placeholder { color: var(--tinta-faint); }
.mc-buscar input::-webkit-search-cancel-button { filter: invert(1); opacity: .6; }

/* ── Avisos de la página ─────────────────────────────────────────────────── */
.mc-aviso {
  margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--g7); border-left: 3px solid var(--mc-ambar);
  border-radius: 8px; background: var(--g1); font-size: 13.5px; color: var(--tinta);
}

/* ── La papelera ─────────────────────────────────────────────────────────── */
.mc-papelera-cabecera {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 20px; padding: 14px 18px; border: 1px dashed var(--g7); border-radius: var(--mc-radio);
}
.mc-papelera-nota { margin: 0; font-size: 14px; color: var(--tinta-dim); }
.mc-confirmar-vaciar { flex: 1 1 100%; }

/* ── La grilla ───────────────────────────────────────────────────────────── */
.mc-grilla {
  display: grid; gap: 22px 18px;
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
}

.mc-tarjeta {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border-radius: var(--mc-radio);
}

/* La portada: un fotograma. 4:5 deja ver vertical y horizontal sin recortar de más. */
.mc-portada {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0;
  border: 1px solid var(--g6); border-radius: var(--mc-radio); overflow: hidden;
  background: var(--g1); color: inherit; text-decoration: none; cursor: pointer;
  transition: border-color .2s, transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s;
}
.mc-portada:is(button):disabled { cursor: default; opacity: 1; }
.mc-portada:is(a, button:not(:disabled)):hover {
  border-color: var(--g9); transform: translateY(-3px); box-shadow: 0 18px 40px #0000004d;
}
.mc-portada:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.mc-medio { display: block; width: 100%; height: 100%; }
.mc-medio img, .mc-medio video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sin portada: una pieza tipográfica, con grano suave. */
.mc-medio.sin-portada {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background:
    radial-gradient(120% 90% at 50% 0%, #ffffff12, transparent 60%),
    linear-gradient(180deg, var(--g2), var(--g1));
  color: var(--tinta-faint);
}
.mc-glifo { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid var(--g7); border-radius: 50%; }
.mc-glifo-texto { font: 400 15px var(--f-serif); letter-spacing: .01em; }

/* La insignia de estado, sobre la portada. */
.mc-insignia {
  position: absolute; left: 10px; top: 10px; z-index: 1;
  display: inline-flex; align-items: center; gap: 7px; max-width: calc(100% - 20px);
  padding: 5px 11px 5px 9px; border-radius: 999px;
  background: #0f1a20d9; backdrop-filter: blur(8px);
  font-size: 11.5px; font-weight: 600; line-height: 1.2; color: var(--tinta);
}
.mc-insignia-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mc-punto { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--tinta-faint); }
[data-estado="listo"] .mc-punto { background: var(--mc-verde); }
[data-estado="fila"] .mc-punto, [data-estado="sinTerminar"] .mc-punto, [data-estado="ojo"] .mc-punto, [data-estado="esperando"] .mc-punto { background: var(--mc-ambar); }
[data-estado="haciendose"] .mc-punto { background: var(--mc-rosa); animation: mc-latido 1.6s ease-in-out infinite; }
[data-estado="fallo"] .mc-punto { background: #ff8aa0; }
@keyframes mc-latido { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { [data-estado="haciendose"] .mc-punto { animation: none; } .mc-portada { transition: none; } }

/* El pie: nombre, tipo, cuándo. */
.mc-pie { display: flex; flex-direction: column; gap: 4px; padding: 11px 2px 0; min-width: 0; }
.mc-titulo-fila { position: relative; display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.mc-titulo {
  flex: 1; min-width: 0; margin: 0; font: 600 15.5px/1.3 var(--f-rara, system-ui);
  letter-spacing: -.015em; color: var(--tinta);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.mc-titulo-campo {
  flex: 1; min-width: 0; padding: 4px 8px; margin: -5px 0 -5px -8px;
  border: 1px solid var(--mc-rosa); border-radius: 6px; background: var(--g1); color: var(--tinta);
  font: 600 15.5px/1.3 var(--f-rara, system-ui);
}
.mc-titulo-campo:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.mc-meta { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--tinta-dim); }
/* T28 · «Comparar» (08/11/2026): la palabra sola, sin caja, en el acento de la interfaz; lleva a /comparar/ con esta creación. */
.mc-comparar {
  align-self: flex-start; display: inline-flex; align-items: center; min-height: 36px; padding: 4px 0;
  border: 0; background: none; box-shadow: none; color: var(--acento); font-size: 13px; font-weight: 600;
  text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 4px;
}
.mc-comparar:hover { text-decoration-thickness: 2px; }
.mc-comparar:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

.mc-acciones {
  flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; margin: -6px -8px 0 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--tinta-dim);
}
.mc-acciones:hover, .mc-acciones[aria-expanded="true"] { background: var(--g6); color: var(--tinta); }
.mc-acciones:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

/* El menú «⋯». */
.mc-menu {
  position: absolute; right: -6px; top: calc(100% + 2px); z-index: 20; min-width: 200px; max-width: calc(100vw - 24px); margin: 0; padding: 6px;
  list-style: none; border: 1px solid var(--g7); border-radius: 12px;
  background: var(--g2); box-shadow: 0 18px 50px #0009;
}
/* Si alineado a la derecha del ⋯ no entra (la columna izquierda del celular), se abre hacia la derecha. */
.mc-menu.a-la-izquierda { right: auto; left: -6px; }
.mc-menu li { margin: 0; }
.mc-menu-item {
  display: flex; align-items: center; width: 100%; min-height: 42px; padding: 9px 12px;
  border: 0; border-radius: 8px; background: transparent; color: var(--tinta); font-size: 13.5px; text-align: left;
}
.mc-menu-item:hover, .mc-menu-item:focus-visible { background: var(--g6); outline: none; }
.mc-menu-item.peligro { color: #ffb3c4; }

/* El renglón del estado. */
.mc-estado { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 3px; min-width: 0; }
.mc-estado-texto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; margin: 0; min-width: 0; font-size: 12.5px; line-height: 1.4; }
.mc-estado-texto .mc-punto { align-self: center; }
.mc-estado-nombre { font-weight: 600; color: var(--tinta); }
.mc-estado-detalle { flex-basis: 100%; font-size: 11.5px; color: var(--tinta-dim); }
.mc-seguir { flex: 0 0 auto; min-height: 36px; padding: 7px 16px; font-size: 12.5px; }

/* Preguntas dentro de la tarjeta. */
.mc-confirmar {
  display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--g7);
  border-radius: 10px; background: var(--g1);
}
.mc-confirmar-texto { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--tinta); }
.mc-confirmar-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-confirmar-botones button { min-height: 40px; padding: 8px 14px; font-size: 13px; }

.mc-papelera-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mc-papelera-botones button { min-height: 40px; padding: 8px 14px; font-size: 13px; }
.mc-borrar-ya { color: #ffb3c4; }

/* ── Vacío ───────────────────────────────────────────────────────────────── */
.mc-vacio, .mc-puerta { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: clamp(34px, 6vw, 70px) 0; }
.mc-vacio-grande { margin: 0; max-width: 18ch; font: 500 clamp(30px, 4vw, 52px)/1.05 var(--f-rara, system-ui); letter-spacing: -.04em; color: var(--tinta); }
.mc-vacio-texto { margin: 0; font-size: 15px; color: var(--tinta-dim); }
.mc-vacio-acciones { display: flex; flex-wrap: wrap; gap: 10px; }

.mc-cargar-mas { display: flex; margin: 30px auto 0; }
.mc-espacio { margin: 34px 0 0; padding-top: 16px; border-top: 1px solid var(--g6); font-size: 12.5px; color: var(--tinta-dim); }
.mc-espacio strong { color: var(--mc-ambar); font-weight: 600; }

/* ── El visor ────────────────────────────────────────────────────────────── */
.mc-visor {
  width: min(880px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 18px;
  border: 1px solid var(--g7); border-radius: 16px; background: var(--g2); color: var(--tinta);
  box-shadow: 0 30px 90px #000a;
}
.mc-visor::backdrop { background: #0a141ad9; backdrop-filter: blur(4px); }
.mc-visor-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.mc-visor-titulo { margin: 0 0 2px; font-size: clamp(20px, 3vw, 28px); overflow-wrap: anywhere; }
.mc-visor-cerrar { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border: 1px solid var(--g6); border-radius: 50%; background: transparent; color: var(--tinta); }
.mc-visor-cerrar:hover { background: var(--g6); }
.mc-visor-medio { display: block; width: 100%; max-height: 62vh; object-fit: contain; border-radius: 10px; background: #000; }
audio.mc-visor-medio { background: transparent; }
.mc-visor-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.mc-visor-nota { min-height: 1.4em; margin: 10px 0 0; font-size: 13px; color: var(--mc-ambar); }
/* La etiqueta que prometen los Términos: se ve junto a todo resultado. */
.mc-visor-legal { margin: 10px 0 0; font: 500 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-faint); }

/* ── «¿Qué cambiar?» en el visor (23/10/2026) ───────────────────────────────
   Pedido del dueño: «donde escribis la modificacion que queres hacer?». La
   pieza y lo que se le hace: sin el campo (un audio, algo sin terminar), una
   debajo de la otra, como siempre. Con el campo, en la computadora, dos
   columnas: la pieza a la izquierda y, al costado, «Descargar», «Otra versión»
   y el campo, así todo entra sin desplazarse dentro del visor. En el celular,
   una columna: el campo va después de los botones. Los estilos del campo son
   los de pedir-cambio.css, los mismos de la caja. */
.mc-visor-cuerpo, .mc-visor-pieza, .mc-visor-lado { min-width: 0; }
.mc-visor-lado .pc { margin-top: 14px; }
/* «Otra versión», al lado del campo: suave y sin recuadro, como los botones del cambio (pedido del dueño del 23/10/2026: «que los
   botones no tengan un cuadrado que los encierre»). Con el mismo tono de fondo que ellos. */
.mc-visor .mc-visor-otra { box-shadow: none; border: 0; background: color-mix(in oklch, var(--tinta) 9%, transparent); color: var(--tinta); }
.mc-visor .mc-visor-otra:hover { background: color-mix(in oklch, var(--tinta) 16%, transparent); color: var(--tinta); }
.mc-visor .mc-visor-otra:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
/* El foco en una tarjeta entera (la pieza nueva de un cambio): un filete, sin recuadro de más. */
.mc-tarjeta:focus { outline: none; }
.mc-tarjeta:focus-visible { outline: 2px solid var(--acento); outline-offset: 6px; }
@media (min-width: 980px) {
  .mc-visor.con-cambio { width: min(1180px, calc(100vw - 48px)); padding: 22px; }
  .mc-visor.con-cambio .mc-visor-cuerpo {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 28px; align-items: start;
  }
  /* La pieza entra entera a la izquierda: el alto del visor menos su cabecera y sus márgenes. */
  .mc-visor.con-cambio .mc-visor-medio { max-height: calc(100vh - 190px); }
  .mc-visor.con-cambio .mc-visor-botones { margin-top: 0; }
  .mc-visor.con-cambio .mc-visor-lado .pc { margin-top: 6px; }
}

/* ── Avisos flotantes: abajo, y por encima del botón «Crear» del celular ─── */
.mc-avisos {
  position: fixed; left: 18px; bottom: 18px; z-index: 90; display: flex; flex-direction: column; gap: 8px;
  max-width: min(420px, calc(100vw - 36px)); pointer-events: none;
}
.mc-aviso-flotante {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; pointer-events: auto;
  padding: 12px 14px 12px 18px; border: 1px solid var(--g7); border-radius: 12px;
  background: var(--g2); color: var(--tinta); font-size: 14px; box-shadow: 0 14px 40px #0008;
  animation: mc-sube .3s cubic-bezier(.22, 1, .36, 1);
}
@keyframes mc-sube { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .mc-aviso-flotante { animation: none; } }
.mc-aviso-accion {
  flex: 0 0 auto; min-height: 36px; padding: 6px 12px; border: 0; border-radius: 8px; background: transparent;
  color: var(--mc-rosa); font-size: 14px; font-weight: 700;
}
.mc-aviso-accion:hover { background: var(--g6); }

/* ── El celular ──────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .mc-barra { flex-direction: column; align-items: stretch; gap: 12px; }
  .mc-buscar { flex: 0 0 auto; }
  /* Los cinco filtros entran en una fila de 343 px; en pantallas todavía más
     angostas se desliza, sin mover la página. */
  .mc-filtros { justify-content: space-between; }
  .mc-filtro { padding: 7px 11px; font-size: 12.5px; }
  .mc-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .mc-titulo { font-size: 14px; }
  .mc-comparar { min-height: 44px; }
  .mc-acciones { margin-right: -10px; }
  .mc-papelera-cabecera { padding: 12px 14px; }
  .mc-avisos { left: 12px; right: 12px; max-width: none; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .mc-visor { padding: 12px; }
}
@media (max-width: 400px) {
  .mc-filtro { padding: 7px 8px; font-size: 12px; }
  .mc-tarjeta .mc-seguir { padding-inline: 12px; }
  .mc-estado { flex-wrap: wrap; }
}