:root{
  color-scheme:dark;
  --bg:#07101f;
  --panel:#0e1a2c;
  --panel2:#12223a;
  --text:#f6f8fb;
  --muted:#a8b5c8;
  --line:rgba(255,255,255,.10);
  --accent:#53d4ff;
  --accent2:#4f8cff;
  --good:#45d483;
  --bad:#ff6f7d;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:
radial-gradient(circle at 15% 10%,rgba(79,140,255,.18),transparent 35%),
radial-gradient(circle at 85% 15%,rgba(83,212,255,.12),transparent 30%),
var(--bg);color:var(--text)}
body{min-height:100vh}
a{color:inherit}
.shell{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:54px 0 30px}
.hero,.admin-box{background:linear-gradient(180deg,rgba(18,34,58,.88),rgba(10,20,35,.92));border:1px solid var(--line);border-radius:28px;padding:clamp(26px,5vw,60px);box-shadow:0 30px 80px rgba(0,0,0,.28);backdrop-filter:blur(14px)}
.admin-box{max-width:680px;margin:40px auto}
.brand{display:flex;gap:18px;align-items:center}
.brand.compact{margin-bottom:28px}
.logo{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;font-weight:900;font-size:30px;background:linear-gradient(135deg,var(--accent2),var(--accent));box-shadow:0 12px 30px rgba(79,140,255,.3)}
.eyebrow{display:block;color:var(--accent);font-size:12px;font-weight:800;letter-spacing:.16em;margin-bottom:4px}
h1{font-size:clamp(34px,6vw,64px);line-height:1;margin:0;letter-spacing:-.04em}
.compact h1{font-size:clamp(28px,5vw,42px)}
.lead{max-width:720px;color:var(--muted);font-size:clamp(18px,2.3vw,24px);line-height:1.55;margin:30px 0 28px}
.actions{display:flex;gap:14px;flex-wrap:wrap}
.btn{appearance:none;border:0;border-radius:15px;padding:16px 21px;font-size:16px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:12px;transition:.2s transform,.2s opacity,.2s box-shadow}
.btn.primary{background:linear-gradient(135deg,var(--accent2),var(--accent));color:#04101f;box-shadow:0 12px 30px rgba(79,140,255,.24)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(79,140,255,.34)}
.btn.disabled{background:#26364d;color:#8390a3;cursor:not-allowed}
.note{color:var(--muted);font-size:14px;margin:14px 0 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.card{background:rgba(7,16,31,.58);border:1px solid var(--line);padding:22px;border-radius:20px}
.card .icon{width:42px;height:42px;border-radius:12px;background:rgba(83,212,255,.12);display:grid;place-items:center;color:var(--accent);font-size:20px}
.card h2{font-size:18px;margin:16px 0 8px}
.card p{color:var(--muted);font-size:14px;line-height:1.6;margin:0}
.warning{margin-top:22px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.035);padding:17px 18px;color:var(--muted);line-height:1.55}
.warning strong{color:#fff}
footer{display:flex;justify-content:center;gap:10px;color:#76849a;font-size:13px;padding:24px 0}
.upload-form{display:grid;gap:14px}
.upload-form label{font-weight:800}
.upload-form input[type=password]{width:100%;padding:15px;border-radius:13px;border:1px solid var(--line);background:#07101f;color:#fff;font-size:16px;outline:none}
.upload-form input[type=password]:focus{border-color:var(--accent)}
.drop{border:1px dashed rgba(83,212,255,.45);background:rgba(83,212,255,.05);padding:24px;border-radius:17px}
.drop input{width:100%;margin-bottom:12px}
.drop p{margin:5px 0;color:#eaf2ff}
.drop small{color:var(--muted)}
.alert{padding:14px 16px;border-radius:13px;margin:0 0 20px;font-weight:700}
.alert.error{background:rgba(255,111,125,.11);border:1px solid rgba(255,111,125,.35);color:#ff9ca6}
.alert.success{background:rgba(69,212,131,.11);border:1px solid rgba(69,212,131,.35);color:#8beab6}
.admin-links{display:flex;gap:15px;flex-wrap:wrap;margin-top:22px;font-size:14px}
.admin-links a{color:var(--accent);text-decoration:none}
.admin-links a:hover{text-decoration:underline}
@media(max-width:760px){
  .shell{width:min(100% - 20px,1120px);padding-top:18px}
  .hero,.admin-box{border-radius:21px;padding:24px}
  .cards{grid-template-columns:1fr}
  .brand{align-items:flex-start}
  .logo{width:54px;height:54px;border-radius:15px}
  h1{font-size:39px}
  .btn{width:100%}
}

.muted{color:var(--muted)}
.gallery-box{max-width:1180px}
.top-links{margin-top:0;margin-bottom:24px}
.session-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.session-card{display:flex;flex-direction:column;gap:9px;background:rgba(7,16,31,.58);border:1px solid var(--line);border-radius:18px;padding:18px}
.session-id{font-size:12px;color:var(--accent);word-break:break-all}
.btn.small{padding:10px 12px;font-size:13px;width:100%}
.btn.danger{background:rgba(255,111,125,.12);border:1px solid rgba(255,111,125,.3);color:#ff9ca6}
.gallery-head{display:flex;justify-content:space-between;gap:20px;align-items:center;margin:18px 0}
.gallery-head>div{display:flex;gap:8px;flex-direction:column}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.photo-card{background:rgba(7,16,31,.58);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.photo-card img,.file-placeholder{display:block;width:100%;height:160px;object-fit:cover;background:#07101f}
.file-placeholder{display:grid;place-items:center;color:var(--accent);font-weight:900;font-size:23px}
.photo-info{padding:11px;display:flex;flex-direction:column;gap:5px;min-width:0}
.photo-info strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.photo-info span{font-size:11px;color:var(--muted)}
.photo-info a{font-size:12px;color:var(--accent);text-decoration:none}
.pagination{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:24px}
.pagination a{color:var(--accent);text-decoration:none}
.empty-state{grid-column:1/-1;color:var(--muted);padding:35px;text-align:center;border:1px dashed var(--line);border-radius:18px}
@media(max-width:600px){
  .photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .photo-card img,.file-placeholder{height:130px}
  .gallery-head{align-items:flex-start;flex-direction:column}
}


/* ===== RecoverDroid Gallery v1.3 ===== */
.gallery-tip{
  margin:0 0 15px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(83,212,255,.055);
  color:var(--muted);
  font-size:13px;
  line-height:1.5
}
.media-card{position:relative}
.media-preview{
  appearance:none;
  border:0;
  padding:0;
  margin:0;
  width:100%;
  display:block;
  cursor:pointer;
  background:#07101f;
  color:inherit;
  text-align:inherit
}
.media-preview:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:-2px
}
.media-preview img,
.media-preview .file-placeholder,
.video-placeholder{
  display:block;
  width:100%;
  height:160px;
  object-fit:cover;
  background:#07101f
}
.video-placeholder{
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  color:var(--accent);
  font-weight:900
}
.play-icon{
  width:52px;
  height:52px;
  border-radius:50%;
  display:grid;
  place-items:center;
  padding-left:4px;
  background:rgba(83,212,255,.13);
  border:1px solid rgba(83,212,255,.28);
  font-size:21px
}
.card-actions{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:3px
}
.text-action{
  appearance:none;
  border:0;
  padding:0;
  background:none;
  color:var(--accent);
  font:inherit;
  font-size:12px;
  cursor:pointer
}
.card-actions a{
  font-size:12px;
  color:var(--accent);
  text-decoration:none
}
body.modal-open{overflow:hidden}
.media-modal[hidden]{display:none!important}
.media-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  padding:18px;
  display:grid;
  place-items:center;
  background:rgba(1,7,16,.86);
  backdrop-filter:blur(10px)
}
.media-modal-panel{
  width:min(1420px,100%);
  height:min(92vh,920px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:22px;
  background:#091422;
  box-shadow:0 35px 100px rgba(0,0,0,.58)
}
.media-modal-header,
.media-modal-footer{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-color:var(--line);
  background:#0c192a
}
.media-modal-header{
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}
.media-modal-footer{
  justify-content:flex-end;
  border-top:1px solid var(--line)
}
.modal-heading{
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:12px
}
.modal-heading strong{
  min-width:0;
  max-width:min(70vw,880px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.icon-button{
  appearance:none;
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#12223a;
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer
}
.media-modal-body{
  min-height:0;
  flex:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px
}
.media-viewer{
  min-width:0;
  min-height:0;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#020711
}
.modal-stage{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  padding:18px 68px
}
.modal-image,
.modal-video{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain
}
.modal-video{
  width:min(100%,1100px);
  max-height:100%;
  background:#000
}
.modal-file{
  max-width:520px;
  color:var(--muted);
  text-align:center
}
.file-placeholder.large{
  height:190px;
  border-radius:20px;
  margin-bottom:14px
}
.nav-arrow{
  appearance:none;
  position:absolute;
  z-index:3;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:64px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(12,25,42,.82);
  color:#fff;
  font-size:42px;
  line-height:1;
  cursor:pointer;
  backdrop-filter:blur(6px)
}
.nav-arrow.prev{left:12px}
.nav-arrow.next{right:12px}
.nav-arrow:disabled{
  opacity:.25;
  cursor:not-allowed
}
.metadata-panel{
  min-height:0;
  overflow:auto;
  border-left:1px solid var(--line);
  background:#0b1727;
  padding:15px
}
.metadata-title{
  margin-bottom:12px;
  font-weight:900;
  font-size:15px
}
.metadata-list{
  display:grid;
  gap:7px
}
.meta-section-title{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
  color:var(--accent);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.09em
}
.meta-section-title:first-child{
  margin-top:0;
  padding-top:0;
  border-top:0
}
.meta-row{
  display:grid;
  grid-template-columns:minmax(95px,.7fr) minmax(0,1fr);
  gap:10px;
  align-items:start;
  padding:6px 0
}
.meta-row span{
  color:var(--muted);
  font-size:11px
}
.meta-row strong{
  min-width:0;
  word-break:break-word;
  font-size:12px;
  font-weight:700
}
.meta-empty{
  color:var(--muted);
  font-size:12px;
  line-height:1.5
}
.btn.modal-action{
  width:auto;
  min-width:116px;
  padding:11px 16px
}
@media(max-width:900px){
  .media-modal{padding:8px}
  .media-modal-panel{height:96vh;border-radius:16px}
  .media-modal-body{
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,1fr) minmax(150px,32vh)
  }
  .metadata-panel{
    border-left:0;
    border-top:1px solid var(--line)
  }
  .modal-stage{padding:10px 50px}
}
@media(max-width:600px){
  .media-preview img,
  .media-preview .file-placeholder,
  .video-placeholder{height:130px}
  .media-modal-footer{
    display:grid;
    grid-template-columns:1fr 1fr
  }
  .btn.modal-action{
    width:100%;
    min-width:0
  }
  .nav-arrow{
    width:40px;
    height:54px;
    font-size:34px
  }
  .nav-arrow.prev{left:6px}
  .nav-arrow.next{right:6px}
  .modal-stage{padding:8px 42px}
  .modal-heading{
    display:block
  }
  .modal-heading strong{
    display:block;
    max-width:72vw
  }
}


/* ===== RecoverDroid Gallery v1.4 ===== */
.bulk-toolbar{
  position:sticky;
  top:8px;
  z-index:30;
  display:flex;
  gap:9px;
  align-items:center;
  flex-wrap:wrap;
  margin:0 0 14px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(9,20,34,.94);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  backdrop-filter:blur(12px)
}
.bulk-toolbar .btn{
  width:auto;
  padding:10px 13px;
  font-size:13px
}
.bulk-count{
  margin-left:auto;
  color:var(--muted);
  font-size:13px;
  font-weight:800
}
.btn.danger{
  background:rgba(255,111,125,.13);
  border:1px solid rgba(255,111,125,.35);
  color:#ff9ca6
}
.btn.danger:disabled,
.btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none!important
}
.page-size-form{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--muted);
  font-size:12px
}
.page-size-form select{
  border:1px solid var(--line);
  background:#07101f;
  color:#fff;
  border-radius:10px;
  padding:8px 9px
}
.media-card{
  position:relative;
  transition:border-color .15s ease, transform .15s ease
}
.media-card.is-selected{
  border-color:rgba(83,212,255,.75);
  box-shadow:0 0 0 2px rgba(83,212,255,.12)
}
.select-badge{
  position:absolute;
  z-index:8;
  top:8px;
  left:8px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border-radius:11px;
  background:rgba(5,12,22,.88);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  cursor:pointer;
  backdrop-filter:blur(8px)
}
.select-badge input{
  width:18px;
  height:18px;
  margin:0;
  accent-color:#53d4ff;
  cursor:pointer
}
.select-badge span{
  font-size:11px;
  font-weight:800
}
.media-preview{
  min-height:130px
}
.media-preview img{
  background:
    linear-gradient(45deg,#0b1727 25%,transparent 25%) 0 0/16px 16px,
    linear-gradient(45deg,transparent 75%,#0b1727 75%) 0 0/16px 16px,
    linear-gradient(45deg,transparent 75%,#0b1727 75%) 8px -8px/16px 16px,
    linear-gradient(45deg,#0b1727 25%,#07101f 25%) 8px -8px/16px 16px
}
.preview-error{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  min-height:260px;
  padding:24px;
  text-align:center;
  color:#ffb0b7
}
.card-actions{
  justify-content:space-between
}
.card-actions .danger-link{
  color:#ff9ca6
}
.media-modal{
  padding:12px
}
.media-modal-panel{
  width:min(1500px,100%);
  height:min(96vh,980px)
}
.modal-stage{
  position:relative
}
.modal-loading{
  color:var(--muted);
  font-size:13px
}
.modal-image{
  user-select:none
}
.modal-video{
  outline:none
}
.modal-delete-row{
  display:flex;
  align-items:center;
  gap:8px
}
.modal-selection-note{
  margin-right:auto;
  color:var(--muted);
  font-size:12px
}
@media(max-width:700px){
  .bulk-toolbar{
    top:4px
  }
  .bulk-toolbar .btn{
    flex:1 1 calc(50% - 6px)
  }
  .bulk-count{
    width:100%;
    margin-left:0;
    text-align:center
  }
  .page-size-form{
    width:100%;
    justify-content:center
  }
  .modal-selection-note{
    display:none
  }
}


/* ===== RecoverDroid Gallery v1.5 — Modal centrado dentro del viewport ===== */

body.modal-open{
  overflow:hidden !important;
  overscroll-behavior:none;
}

/*
 * El visor ocupa exactamente la ventana visible y siempre se centra.
 * 100dvh corrige especialmente el alto real en navegadores móviles.
 */
.media-modal{
  position:fixed !important;
  inset:0 !important;
  left:0 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100vw !important;
  height:100vh !important;
  height:100dvh !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:12px !important;
  z-index:2147483000 !important;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden !important;
  background:rgba(1,7,16,.90);
  box-sizing:border-box;
}

.media-modal[hidden]{
  display:none !important;
}

/* La ventana nunca puede ser mayor que la pantalla. */
.media-modal-panel{
  position:relative;
  flex:none;
  width:min(1420px, calc(100vw - 24px)) !important;
  height:min(900px, calc(100dvh - 24px)) !important;

  max-width:calc(100vw - 24px) !important;
  max-height:calc(100dvh - 24px) !important;

  margin:0 !important;
  overflow:hidden !important;
  box-sizing:border-box;

  display:flex;
  flex-direction:column;
}

/* Cabecera y botones nunca crecen a costa de la imagen. */
.media-modal-header,
.media-modal-footer{
  flex:0 0 auto;
}

/* El área central usa únicamente el espacio restante. */
.media-modal-body{
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  max-width:100%;
  max-height:100%;
  overflow:hidden !important;
}

.media-viewer{
  position:relative;
  min-width:0;
  min-height:0;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  overflow:hidden !important;
}

.modal-stage{
  position:absolute !important;
  inset:0 !important;

  min-width:0 !important;
  min-height:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;

  padding:16px 70px !important;
  overflow:hidden !important;
  box-sizing:border-box;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/*
 * Nunca ampliar la foto más allá del área disponible.
 * Una imagen de 4000×6000, por ejemplo, se reduce proporcionalmente.
 */
.modal-image{
  display:block !important;
  position:static !important;

  width:auto !important;
  height:auto !important;

  max-width:100% !important;
  max-height:100% !important;

  min-width:0 !important;
  min-height:0 !important;

  object-fit:contain !important;
  object-position:center center !important;

  margin:auto !important;
}

/* Los videos siguen exactamente la misma regla. */
.modal-video{
  display:block !important;
  position:static !important;

  width:auto !important;
  height:auto !important;

  max-width:100% !important;
  max-height:100% !important;

  object-fit:contain !important;
  object-position:center center !important;

  margin:auto !important;
  background:#000;
}

/* Los metadatos tienen su propio scroll y no agrandan el modal. */
.metadata-panel{
  min-height:0 !important;
  max-height:100% !important;
  overflow:auto !important;
  overscroll-behavior:contain;
}

/* Las flechas siempre quedan dentro de la ventana. */
.nav-arrow{
  z-index:10 !important;
}

@media(max-width:900px){
  .media-modal{
    padding:6px !important;
  }

  .media-modal-panel{
    width:calc(100vw - 12px) !important;
    height:calc(100dvh - 12px) !important;
    max-width:calc(100vw - 12px) !important;
    max-height:calc(100dvh - 12px) !important;
    border-radius:14px !important;
  }

  .media-modal-body{
    grid-template-columns:1fr !important;
    grid-template-rows:minmax(0,1fr) minmax(120px,28dvh) !important;
  }

  .modal-stage{
    padding:10px 48px !important;
  }
}

@media(max-width:600px){
  .media-modal{
    padding:0 !important;
  }

  .media-modal-panel{
    width:100vw !important;
    height:100dvh !important;
    max-width:100vw !important;
    max-height:100dvh !important;
    border-radius:0 !important;
    border-left:0 !important;
    border-right:0 !important;
  }

  .media-modal-header{
    padding:9px 10px !important;
  }

  .media-modal-footer{
    padding:8px 10px !important;
  }

  .modal-stage{
    padding:8px 42px !important;
  }

  .metadata-panel{
    max-height:28dvh !important;
  }
}