/* San Pablo Healing Center — área privada. Misma marca que la web pública. */
:root {
  --oro: #ac943e; --oro-hondo: #8a7530; --oro-claro: #d8c78c; --oro-velo: rgba(172, 148, 62, .12); --oro-velo2: rgba(172, 148, 62, .2);
  --marfil: #fbf8f2; --crema: #f3ede1; --papel: #fff; --tinta: #2b2823; --gris: #5e5850; --gris-claro: #8f887c; --linea: #e8e0cf;
  --noche: #1c1914; --rojo: #a3392a; --rojo-velo: rgba(163, 57, 42, .1); --verde: #4c7a45;
  --sans: 'Montserrat', system-ui, sans-serif; --serif: 'Cormorant Garamond', Georgia, serif;
  --radio: 14px; --sombra: 0 22px 60px -28px rgba(43, 40, 35, .45); --sombra-s: 0 6px 20px -12px rgba(43, 40, 35, .35);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--marfil); color: var(--tinta); font: 400 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
a { color: var(--oro-hondo); }
::selection { background: var(--oro); color: #fff; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
svg.i { width: 18px; height: 18px; flex: none; }
h1, h2, h3 { font-weight: 400; margin: 0; line-height: 1.25; }

/* Barra de scroll: solo el pulgar (pulgar.js), en táctil la del sistema */
@media (hover: hover) and (pointer: fine) {
  html, .sin-barra { scrollbar-width: none; }
  html::-webkit-scrollbar, .sin-barra::-webkit-scrollbar { display: none; }
}
.pulgar { position: fixed; right: 3px; top: 0; width: 6px; border-radius: 6px; z-index: 300; background: var(--oro); opacity: .45; transition: opacity .25s, width .15s; cursor: grab; touch-action: none; }
.pulgar:hover, .pulgar.activo { opacity: .95; width: 8px; }
.pulgar.oculto { display: none; }
.pulgar-local { position: absolute; z-index: 5; }

/* ── Acceso ───────────────────────────────────────────── */
.acceso { background: var(--marfil); }
.acc { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: 1.05fr 1fr; }
.acc-foto { position: relative; overflow: hidden; background: var(--noche); isolation: isolate; }
.acc-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; animation: acercar 16s ease-out forwards; }
.acc-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 17, 12, .25), rgba(20, 17, 12, .75)); }
@keyframes acercar { from { transform: scale(1.08); } to { transform: none; } }
.acc-rayos { position: absolute; z-index: 1; width: 120%; left: -10%; top: 50%; translate: 0 -50%; opacity: .06; }
.acc-rayos img { width: 100%; animation: girar 200s linear infinite; }
@keyframes girar { to { rotate: 360deg; } }
.acc-cita { position: absolute; z-index: 2; left: 48px; right: 48px; bottom: 44px; margin: 0; color: #fff; }
.acc-cita blockquote { margin: 0; font: italic 400 clamp(26px, 2.8vw, 36px)/1.3 var(--serif); max-width: 520px; }
.acc-cita figcaption { margin-top: 12px; font-size: 11.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--oro-claro); }
.acc-panel { display: flex; flex-direction: column; padding: 28px clamp(22px, 5vw, 64px); }
.acc-volver { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; color: var(--gris); text-decoration: none; font-size: 13px; font-weight: 500; padding: 8px 12px 8px 4px; border-radius: 999px; }
.acc-volver:hover { color: var(--tinta); }
.acc-volver svg { width: 18px; height: 18px; }
.acc-caja { width: 100%; max-width: 400px; margin: auto; padding: 30px 0; }
.acc-logo { width: 150px; height: auto; margin: 0 auto 36px; }
.acc-paso { display: grid; gap: 16px; animation: entrar .5s cubic-bezier(.2, .7, .2, 1); }
@keyframes entrar { from { opacity: 0; transform: translateY(10px); } }
.acc h1 { font-size: 32px; font-weight: 300; text-align: center; }
.acc-sub { margin: -4px 0 8px; text-align: center; color: var(--gris); }
.acc-sub strong { color: var(--tinta); font-weight: 600; word-break: break-all; }
.acc-campo { display: grid; gap: 6px; }
.acc-campo span { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; }
.acc-campo input, .acc-digitos input {
  width: 100%; height: 52px; border: 1px solid var(--linea); border-radius: 12px; background: var(--papel); padding: 0 16px; font-size: 16px;
  transition: border-color .2s, box-shadow .2s;
}
.acc-campo input:focus, .acc-digitos input:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 4px var(--oro-velo); }
.acc-digitos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.acc-digitos input { height: 60px; padding: 0; text-align: center; font: 500 26px/1 var(--sans); caret-color: var(--oro); }
.acc-digitos input:nth-child(3) { margin-right: 8px; }
.acc-digitos.mal input { border-color: var(--rojo); animation: temblar .35s; }
@keyframes temblar { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.acc-error { margin: -4px 0 0; min-height: 1.4em; font-size: 13.5px; color: var(--rojo); text-align: center; }
.acc-btn {
  height: 52px; border: 0; border-radius: 999px; background: var(--tinta); color: #fff; font-weight: 600; font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase;
  transition: background .25s; display: grid; place-items: center; position: relative;
}
.acc-btn:hover { background: var(--oro); }
.acc-btn:disabled { opacity: .7; cursor: default; }
.acc-btn.cargando span { visibility: hidden; }
.acc-btn.cargando::after { content: ''; position: absolute; width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: girar .8s linear infinite; }
.acc-otros { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.acc-enlace { background: none; border: 0; padding: 6px 0; color: var(--oro-hondo); font-weight: 600; font-size: 13px; }
.acc-enlace:disabled { color: var(--gris-claro); cursor: default; font-weight: 500; }
.acc-nota { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 12.5px; color: var(--gris-claro); margin: 0; text-align: center; }
.acc-nota svg { width: 15px; height: 15px; flex: none; }
@media (max-width: 860px) {
  .acc { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .acc-foto { height: 190px; }
  .acc-cita { left: 22px; right: 22px; bottom: 20px; }
  .acc-cita blockquote { font-size: 22px; }
  .acc-rayos { width: 160%; left: -30%; }
  .acc-panel { padding-top: 14px; }
  .acc-logo { width: 120px; margin-bottom: 26px; }
  .acc-caja { padding-top: 10px; }
}
@media (max-width: 380px) { .acc-digitos { gap: 5px; } .acc-digitos input { height: 52px; font-size: 22px; } .acc-digitos input:nth-child(3) { margin-right: 4px; } }

/* ── Aplicación ───────────────────────────────────────── */
.barra { position: sticky; top: 0; z-index: 40; background: rgba(251, 248, 242, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--linea); }
.barra-in { max-width: 1320px; margin: auto; height: 68px; padding: 0 24px; display: flex; align-items: center; gap: 20px; }
.barra-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tinta); flex: none; }
.barra-logo img { height: 40px; width: auto; }
.barra-logo span { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--oro-hondo); border-left: 1px solid var(--linea); padding-left: 12px; }
.pestanas { display: flex; gap: 4px; margin-left: 12px; }
.pestanas a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; text-decoration: none; color: var(--gris); font-weight: 500; font-size: 14px; transition: .2s; }
.pestanas a:hover { background: var(--oro-velo); color: var(--tinta); }
.pestanas a[aria-current] { background: var(--tinta); color: #fff; }
.yo { margin-left: auto; position: relative; }
.yo-btn { display: flex; align-items: center; gap: 10px; background: none; border: 1px solid transparent; border-radius: 999px; padding: 4px 10px 4px 4px; transition: .2s; }
.yo-btn:hover, .yo-btn[aria-expanded="true"] { border-color: var(--linea); background: var(--papel); }
.yo-txt { display: grid; text-align: left; line-height: 1.25; }
.yo-txt b { font-weight: 600; font-size: 13.5px; }
.yo-txt small { font-size: 11.5px; color: var(--gris-claro); }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: linear-gradient(140deg, var(--oro-claro), var(--oro)); color: #fff; font-weight: 600; font-size: 13px; letter-spacing: .02em; }
.avatar.admin { background: linear-gradient(140deg, #4a443a, var(--tinta)); color: var(--oro-claro); }
.menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; box-shadow: var(--sombra);
  padding: 6px; z-index: 60; transform-origin: top right; animation: abrir .16s ease-out;
}
@keyframes abrir { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
.menu button, .menu a { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; padding: 10px 12px; border-radius: 9px; text-align: left; color: var(--tinta); text-decoration: none; font-size: 14px; }
.menu button:hover, .menu a:hover, .menu .foco { background: var(--oro-velo); }
.menu .peligro { color: var(--rojo); }
.menu .peligro:hover { background: var(--rojo-velo); }
.menu hr { border: 0; border-top: 1px solid var(--linea); margin: 6px 4px; }
.menu-cab { padding: 10px 12px 8px; font-size: 12.5px; color: var(--gris-claro); word-break: break-all; }

.contenido { max-width: 1320px; margin: auto; padding: 34px 24px 90px; }
.cab-vista { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
.cab-vista h1 { font-size: clamp(28px, 3vw, 36px); font-weight: 300; }
.antes { font-size: 11.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--oro); margin: 0 0 6px; }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: 13px; letter-spacing: .03em; white-space: nowrap; transition: .2s; text-decoration: none; }
.btn-oscuro { background: var(--tinta); color: #fff; }
.btn-oscuro:hover { background: var(--oro); }
.btn-oro { background: var(--oro); color: #fff; }
.btn-oro:hover { background: var(--oro-hondo); }
.btn-linea { background: var(--papel); border-color: var(--linea); color: var(--tinta); }
.btn-linea:hover { border-color: var(--oro-claro); background: var(--marfil); }
.btn-peligro { background: var(--rojo); color: #fff; }
.btn-peligro:hover { background: #8b2e21; }
.btn:disabled { opacity: .55; cursor: default; }
.btn-ico { width: 38px; height: 38px; border-radius: 50%; border: 0; background: none; display: grid; place-items: center; color: var(--gris); transition: .2s; }
.btn-ico:hover { background: var(--oro-velo); color: var(--tinta); }

/* Barra de herramientas del drive */
.herr { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; }
.migas { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; font-size: 14px; min-width: 0; flex: 1; }
.migas button { background: none; border: 0; padding: 6px 10px; border-radius: 8px; color: var(--gris); font-weight: 500; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.migas button:hover { background: var(--oro-velo); color: var(--tinta); }
.migas button[aria-current] { color: var(--tinta); font-weight: 600; }
.migas button.soltar-aqui { background: var(--oro-velo2); outline: 1px dashed var(--oro); }
.migas .sep { color: var(--gris-claro); display: grid; }
.migas .sep svg { width: 14px; height: 14px; }
.buscar { position: relative; width: min(300px, 100%); }
.buscar svg { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 17px; height: 17px; color: var(--gris-claro); pointer-events: none; }
.buscar input { width: 100%; height: 42px; border-radius: 999px; border: 1px solid var(--linea); background: var(--papel); padding: 0 16px 0 40px; font-size: 14px; }
.buscar input:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 4px var(--oro-velo); }
.buscar input::-webkit-search-cancel-button { display: none; }

/* Select propio (nunca el nativo) */
.sel { position: relative; }
.sel-btn { height: 42px; display: inline-flex; align-items: center; gap: 10px; padding: 0 14px 0 16px; border-radius: 999px; border: 1px solid var(--linea); background: var(--papel); font-size: 13.5px; font-weight: 500; }
.sel-btn:hover, .sel-btn[aria-expanded="true"] { border-color: var(--oro-claro); }
.sel-btn svg { width: 16px; height: 16px; color: var(--gris-claro); transition: transform .2s; }
.sel-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.sel-lista { position: absolute; top: calc(100% + 6px); right: 0; min-width: 100%; list-style: none; margin: 0; padding: 6px; background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; box-shadow: var(--sombra); z-index: 70; animation: abrir .16s ease-out; max-height: 300px; overflow: auto; }
.sel-lista li { padding: 9px 12px 9px 34px; border-radius: 9px; white-space: nowrap; cursor: pointer; font-size: 14px; position: relative; }
.sel-lista li:hover, .sel-lista li.foco { background: var(--oro-velo); }
.sel-lista li[aria-selected="true"] { font-weight: 600; }
.sel-lista li[aria-selected="true"]::before { content: ''; position: absolute; left: 13px; top: 50%; width: 10px; height: 6px; border: solid var(--oro); border-width: 0 0 2px 2px; transform: translateY(-70%) rotate(-45deg); }

/* Rejillas */
.seccion-t { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gris-claro); margin: 8px 0 14px; }
.carpetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-bottom: 36px; }
.carpeta {
  display: flex; flex-direction: column; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
  text-align: left; transition: .2s; position: relative; min-width: 0; cursor: pointer; overflow: hidden;
}
.carpeta:hover { border-color: var(--oro-claro); box-shadow: var(--sombra-s); transform: translateY(-2px); }
.carpeta.soltar-aqui { border-color: var(--oro); background: var(--oro-velo); box-shadow: 0 0 0 3px var(--oro-velo2); }
.carpeta-collage { display: grid; aspect-ratio: 16 / 8; gap: 3px; background: var(--crema); grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.carpeta-collage img { width: 100%; height: 100%; object-fit: cover; min-height: 0; transition: transform .6s; }
.carpeta:hover .carpeta-collage img { transform: scale(1.04); }
.carpeta-collage.n3 img:first-child { grid-row: span 2; }
.carpeta-collage.n2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.carpeta-collage.n1, .carpeta-collage.n0 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.carpeta-collage-vacia { display: grid; place-items: center; color: var(--oro-claro); }
.carpeta-collage-vacia svg { width: 44px; height: 44px; stroke-width: 1.2; }
.carpeta-pie { display: flex; align-items: center; gap: 12px; padding: 12px 8px 12px 14px; min-width: 0; }
.carpeta-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--oro-velo); color: var(--oro-hondo); display: grid; place-items: center; flex: none; }
.carpeta-ico svg { width: 19px; height: 19px; }
.carpeta-txt { display: grid; min-width: 0; flex: 1; }
.carpeta-txt b { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carpeta-txt small { color: var(--gris-claro); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carpeta .btn-ico { width: 34px; height: 34px; }
.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px 18px; }
.video { position: relative; display: flex; flex-direction: column; min-width: 0; }
.video-portada {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radio); overflow: hidden; background: linear-gradient(135deg, #2f2a22, #1c1914); border: 0; padding: 0;
  display: block; width: 100%; isolation: isolate;
}
.video-portada img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.video:hover .video-portada img { transform: scale(1.04); }
.video-portada::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(20, 17, 12, .55)); pointer-events: none; }
.video-play { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; background: rgba(251, 248, 242, .92); color: var(--tinta); display: grid; place-items: center; z-index: 2; opacity: 0; transform: scale(.85); transition: .25s; }
.video-play svg { width: 22px; height: 22px; margin-left: 3px; }
.video:hover .video-play, .video-portada:focus-visible .video-play { opacity: 1; transform: none; }
.video-dur { position: absolute; right: 10px; bottom: 10px; z-index: 2; background: rgba(20, 17, 12, .72); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.video-sin { position: absolute; inset: 0; display: grid; place-items: center; }
.video-sin img { width: 38%; opacity: .5; }
.video-prep { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 10px; background: rgba(28, 25, 20, .78); color: #fff; font-size: 13px; font-weight: 500; }
.video-prep .barrita { width: 140px; }
.video-prep.error { background: rgba(120, 36, 24, .85); }
.video-info { display: flex; gap: 6px; align-items: flex-start; padding: 12px 2px 0; }
.video-info > div { min-width: 0; flex: 1; }
.video-titulo { font-weight: 600; font-size: 15px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; background: none; border: 0; padding: 0; text-align: left; }
.video-meta { font-size: 12.5px; color: var(--gris-claro); margin-top: 3px; }
.video-ruta { font-size: 12px; color: var(--oro-hondo); margin-top: 2px; }
.video[draggable="true"] { cursor: grab; }
.video.arrastrando { opacity: .45; }
.barrita { height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.barrita i { display: block; height: 100%; background: var(--oro-claro); border-radius: 5px; transition: width .3s; }

.vacio { text-align: center; padding: 70px 20px; border: 1.5px dashed var(--linea); border-radius: 18px; color: var(--gris); }
.vacio img { width: 64px; margin: 0 auto 18px; opacity: .8; }
.vacio h2 { font-size: 22px; font-weight: 400; margin-bottom: 6px; color: var(--tinta); }
.vacio p { margin: 0 0 18px; }
.cargando-vista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.cargando-vista div { aspect-ratio: 16 / 11; border-radius: var(--radio); background: linear-gradient(90deg, var(--crema), #ece4d4, var(--crema)); background-size: 200% 100%; animation: brillo 1.4s linear infinite; }
@keyframes brillo { to { background-position: -200% 0; } }

/* Soltar archivos */
.soltar { position: fixed; inset: 0; z-index: 90; background: rgba(28, 25, 20, .72); display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .2s; }
.soltar.activo { opacity: 1; }
.soltar div { border: 2px dashed var(--oro-claro); border-radius: 24px; padding: 56px 70px; text-align: center; color: #fff; }
.soltar img { width: 70px; margin: 0 auto 16px; }
.soltar b { display: block; font-size: 22px; font-weight: 400; }
.soltar span { color: rgba(255, 255, 255, .7); font-size: 14px; }

/* Cola de subidas */
.subidas { position: fixed; right: 20px; bottom: 20px; z-index: 80; width: min(380px, calc(100vw - 40px)); background: var(--papel); border: 1px solid var(--linea); border-radius: 16px; box-shadow: var(--sombra); overflow: hidden; animation: abrir .2s; }
.subidas-cab { display: flex; align-items: center; justify-content: space-between; padding: 10px 8px 10px 16px; background: var(--noche); color: #fff; font-weight: 500; font-size: 14px; }
.subidas-cab .btn-ico { color: rgba(255, 255, 255, .8); width: 32px; height: 32px; }
.subidas-cab .btn-ico:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.subidas ul { list-style: none; margin: 0; padding: 6px 0; max-height: 280px; overflow: auto; }
.subidas li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 14px 10px 16px; align-items: center; }
.subidas li + li { border-top: 1px solid var(--linea); }
.subidas .nombre { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subidas .estado { grid-column: 1; font-size: 12px; color: var(--gris-claro); }
.subidas .barrita { grid-column: 1 / -1; background: var(--crema); height: 4px; }
.subidas .barrita i { background: var(--oro); }
.subidas .ok .estado { color: var(--verde); }
.subidas .mal .estado { color: var(--rojo); }
.subidas li .btn-ico { grid-row: 1 / 3; grid-column: 2; width: 32px; height: 32px; }

/* Modales */
.velo { position: fixed; inset: 0; z-index: 100; background: rgba(28, 25, 20, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: grid; place-items: center; padding: 20px; animation: fundir .2s; }
@keyframes fundir { from { opacity: 0; } }
.modal { width: min(460px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: var(--papel); border-radius: 20px; box-shadow: var(--sombra); padding: 28px; animation: subir .25s cubic-bezier(.2, .7, .2, 1); position: relative; }
@keyframes subir { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.modal h2 { font-size: 24px; font-weight: 400; margin-bottom: 8px; padding-right: 30px; }
.modal > p { color: var(--gris); margin: 0 0 18px; }
.modal-cerrar { position: absolute; right: 14px; top: 14px; }
.modal-pie { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.modal .campo { display: grid; gap: 6px; margin-bottom: 16px; }
.modal .campo > span { font-size: 12.5px; font-weight: 600; letter-spacing: .03em; }
.modal .campo input, .modal .campo textarea { width: 100%; border: 1px solid var(--linea); border-radius: 11px; background: var(--marfil); padding: 11px 14px; font-size: 15px; resize: vertical; }
.modal .campo input:focus, .modal .campo textarea:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 4px var(--oro-velo); }
.modal .campo small { color: var(--gris-claro); font-size: 12.5px; }
.modal .error { color: var(--rojo); font-size: 13.5px; margin: 0; min-height: 1.3em; }
.icono-modal { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: var(--oro-velo); color: var(--oro-hondo); margin-bottom: 16px; }
.icono-modal.peligro { background: var(--rojo-velo); color: var(--rojo); }
.icono-modal svg { width: 24px; height: 24px; }

/* Segmentos (opciones excluyentes) */
.segmentos { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--crema); border-radius: 12px; padding: 4px; gap: 4px; }
.segmentos button { border: 0; background: none; border-radius: 9px; padding: 9px 8px; font-size: 13px; font-weight: 500; color: var(--gris); line-height: 1.25; }
.segmentos button:hover { color: var(--tinta); }
.segmentos button[aria-checked="true"] { background: var(--papel); color: var(--tinta); font-weight: 600; box-shadow: var(--sombra-s); }
.ayuda-permiso { font-size: 12.5px; color: var(--gris-claro); margin: 8px 2px 0; }

/* Casilla propia */
.casilla { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 14px; color: var(--gris); }
.casilla input { position: absolute; opacity: 0; pointer-events: none; }
.casilla-caja { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--linea); background: var(--marfil); display: grid; place-items: center; color: transparent; flex: none; transition: .2s; }
.casilla-caja svg { width: 14px; height: 14px; }
.casilla input:checked + .casilla-caja { background: var(--oro); border-color: var(--oro); color: #fff; }
.casilla input:focus-visible + .casilla-caja { outline: 2px solid var(--oro); outline-offset: 2px; }

/* Interruptor */
.interruptor { position: relative; width: 42px; height: 24px; border-radius: 24px; border: 0; background: #d9d1c1; padding: 0; transition: background .2s; flex: none; }
.interruptor::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s cubic-bezier(.3, .7, .3, 1.3); }
.interruptor[aria-checked="true"] { background: var(--oro); }
.interruptor[aria-checked="true"]::after { transform: translateX(18px); }
.interruptor:disabled { opacity: .5; cursor: default; }

/* Reproductor */
.velo-video { background: rgba(14, 12, 9, .9); }
.reproductor { width: min(1100px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; animation: subir .25s; }
.reproductor-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; color: #fff; margin-bottom: 14px; }
.reproductor-cab h2 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 300; }
.reproductor-cab p { margin: 4px 0 0; color: rgba(255, 255, 255, .6); font-size: 13px; }
.reproductor-cab .acciones .btn-ico { color: rgba(255, 255, 255, .8); }
.reproductor-cab .acciones .btn-ico:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.reproductor-cab .btn-linea { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #fff; }
.reproductor-cab .btn-linea:hover { background: rgba(255, 255, 255, .16); }
.reproductor video { width: 100%; max-height: calc(100vh - 170px); background: #000; border-radius: 14px; outline: none; }
.reproductor-desc { color: rgba(255, 255, 255, .75); margin-top: 14px; white-space: pre-wrap; font-size: 14px; max-width: 800px; }
.solo-descarga { background: var(--papel); border-radius: 20px; overflow: hidden; width: min(560px, 100%); animation: subir .25s; }
.solo-descarga .portada { aspect-ratio: 16 / 9; background: var(--noche); position: relative; }
.solo-descarga .portada img { width: 100%; height: 100%; object-fit: cover; }
.solo-descarga > div:last-child { padding: 24px 26px 26px; }
.solo-descarga h2 { font-size: 22px; font-weight: 400; margin-bottom: 6px; }
.solo-descarga p { color: var(--gris); margin: 0 0 18px; font-size: 14px; }

/* Selector de carpeta (mover) */
.arbol { list-style: none; margin: 0 0 4px; padding: 6px; border: 1px solid var(--linea); border-radius: 14px; max-height: 300px; overflow: auto; background: var(--marfil); }
.arbol button { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; padding: 9px 10px; border-radius: 9px; text-align: left; font-size: 14px; }
.arbol button:hover { background: var(--oro-velo); }
.arbol button[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.arbol button[aria-pressed="true"] svg { color: var(--oro-claro); }
.arbol button:disabled { opacity: .4; cursor: default; }
.arbol svg { width: 18px; height: 18px; color: var(--oro-hondo); }

/* Avisos */
.avisos { position: fixed; left: 50%; bottom: 24px; translate: -50% 0; z-index: 200; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.aviso { background: var(--noche); color: #fff; padding: 12px 18px; border-radius: 12px; box-shadow: var(--sombra); font-size: 14px; display: flex; gap: 10px; align-items: center; animation: subir .25s; pointer-events: auto; max-width: calc(100vw - 40px); }
.aviso svg { width: 18px; height: 18px; color: var(--oro-claro); }
.aviso.mal svg { color: #f0a597; }
.aviso.fuera { opacity: 0; transform: translateY(8px); transition: .3s; }

/* ── Equipo ───────────────────────────────────────────── */
.resumen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 26px; }
.resumen div { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px 20px; }
.resumen b { display: block; font: 300 34px/1.1 var(--sans); }
.resumen span { font-size: 12.5px; color: var(--gris-claro); font-weight: 500; }
.personas { background: var(--papel); border: 1px solid var(--linea); border-radius: 18px; overflow: hidden; }
.personas-cab, .persona { display: grid; grid-template-columns: minmax(220px, 2.2fr) 1.2fr 90px 110px 1.1fr 44px; gap: 14px; align-items: center; padding: 14px 18px; }
.personas-cab { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-claro); background: var(--marfil); border-bottom: 1px solid var(--linea); padding-block: 12px; }
.persona + .persona { border-top: 1px solid var(--linea); }
.persona:hover { background: #fdfbf7; }
.persona-quien { display: flex; gap: 12px; align-items: center; min-width: 0; }
.persona-quien > div { min-width: 0; }
.persona-quien b { display: flex; align-items: center; gap: 6px; font-weight: 600; min-width: 0; }
.persona-quien b .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persona-quien small { display: block; color: var(--gris-claro); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yo-marca { flex: none; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--oro-hondo); background: var(--oro-velo); padding: 1px 7px; border-radius: 99px; }
.rol { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--crema); color: var(--gris); justify-self: start; }
.rol.admin { background: var(--tinta); color: var(--oro-claro); }
.rol svg { width: 14px; height: 14px; }
.permiso { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.permiso .etq { display: none; }
.ultimo { font-size: 13px; color: var(--gris); }
.ultimo small { display: block; color: var(--gris-claro); font-size: 12px; }
.registro { list-style: none; margin: 0; padding: 0; background: var(--papel); border: 1px solid var(--linea); border-radius: 18px; }
.registro li { display: flex; gap: 14px; padding: 12px 18px; font-size: 13.5px; align-items: baseline; }
.registro li + li { border-top: 1px solid var(--linea); }
.registro time { color: var(--gris-claro); font-size: 12.5px; flex: none; width: 128px; font-variant-numeric: tabular-nums; }
.registro span { color: var(--gris); min-width: 0; overflow-wrap: anywhere; }
.registro b { color: var(--tinta); font-weight: 600; }
.bloque-equipo + .bloque-equipo { margin-top: 42px; }

@media (max-width: 980px) {
  .personas-cab { display: none; }
  .persona { grid-template-columns: 1fr auto; grid-template-areas: 'quien menu' 'rol rol' 'ver descargar' 'ultimo ultimo'; gap: 10px 14px; padding: 16px; }
  .persona-quien { grid-area: quien; } .persona .rol { grid-area: rol; } .persona .p-ver { grid-area: ver; } .persona .p-desc { grid-area: descargar; }
  .persona .ultimo { grid-area: ultimo; } .persona .p-menu { grid-area: menu; }
  .permiso .etq { display: inline; color: var(--gris); }
  .resumen b { font-size: 28px; }
}
@media (max-width: 760px) {
  .barra-in { padding: 0 14px; gap: 10px; height: 62px; }
  .barra-logo img { height: 34px; }
  .barra-logo span, .yo-txt { display: none; }
  .pestanas { margin-left: 0; }
  .pestanas a { padding: 0 12px; font-size: 13.5px; }
  .pestanas a svg { display: none; }
  .contenido { padding: 24px 16px 90px; }
  .herr { gap: 10px; }
  .buscar { width: 100%; order: -1; }
  .migas { flex-basis: 100%; }
  .videos { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
  .video-info .btn-ico { width: 32px; height: 32px; }
  .video-titulo { font-size: 14px; }
  .carpetas { grid-template-columns: 1fr 1fr; gap: 12px; }
  .carpeta-pie { padding: 10px 4px 10px 10px; gap: 8px; }
  .carpeta-pie .carpeta-ico { display: none; }
  .resumen { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .resumen div { padding: 12px 14px; }
  .registro time { width: auto; }
  .registro li { flex-direction: column; gap: 2px; }
  .cab-vista .acciones { width: 100%; }
  .cab-vista .acciones .btn { flex: 1; }
  .modal { padding: 24px 20px; border-radius: 18px; }
  .velo { align-items: end; padding: 10px; }
  .velo-video { align-items: center; }
  .reproductor video { border-radius: 10px; }
}
@media (max-width: 420px) {
  .videos { grid-template-columns: 1fr; }
  .carpetas { grid-template-columns: 1fr; }
  .pestanas a { padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }