/* ============================================================
   estilo.css — PDF Factory (blanco + cereza TFF, modo oscuro)
   ============================================================ */

:root{
  --cereza:#D2003F; --cereza-osc:#A80033; --cereza-suave:#FFE9F0;
  --fondo:#F6F6F8; --tarjeta:#FFFFFF; --tinta:#1C1C22; --tinta2:#6A6A75;
  --linea:#E7E7EC; --ok:#0F8A3C; --sombra:0 2px 10px rgba(0,0,0,.07);
  --radio:14px;
}
@media (prefers-color-scheme: dark){
  :root{
    --cereza:#FF3D6E; --cereza-osc:#D2003F; --cereza-suave:#3A0A18;
    --fondo:#131316; --tarjeta:#1E1E24; --tinta:#F2F2F5; --tinta2:#A0A0AB;
    --linea:#2E2E36; --sombra:0 2px 10px rgba(0,0,0,.4);
  }
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--fondo); color:var(--tinta);
  padding-bottom:env(safe-area-inset-bottom);
}
button{ font-family:inherit; }
input,select,textarea{ font-family:inherit; color:var(--tinta); }

/* ---------- Botones ---------- */
.btn{
  border:none; border-radius:12px; padding:10px 16px; font-size:15px;
  font-weight:600; cursor:pointer; background:var(--tarjeta); color:var(--tinta);
  box-shadow:var(--sombra); transition:transform .06s, opacity .2s;
}
.btn:active{ transform:scale(.97); }
.btn-primario{ background:var(--cereza); color:#fff; }
.btn-primario:active{ background:var(--cereza-osc); }
.btn-suave{ background:var(--tarjeta); border:1px solid var(--linea); box-shadow:none; }
.btn-peligro{ background:#C62828; color:#fff; }
.btn-grande{ padding:14px 20px; font-size:17px; width:100%; }
.btn[disabled]{ opacity:.5; pointer-events:none; }

/* ---------- Login ---------- */
.login-fondo{
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,var(--cereza) 0%,var(--cereza-osc) 60%,#5C001C 100%);
  padding:20px;
}
.login-caja{
  background:var(--tarjeta); border-radius:22px; padding:34px 28px;
  width:100%; max-width:380px; box-shadow:0 18px 50px rgba(0,0,0,.35);
  display:flex; flex-direction:column; gap:14px;
}
.login-logo{ font-size:52px; text-align:center; }
.login-caja h1{ margin:0; text-align:center; font-size:26px; }
.login-sub{ margin:0 0 6px; text-align:center; color:var(--tinta2); font-size:14px; }
.login-error{
  background:#FDE8E8; color:#B71C1C; border-radius:10px; padding:10px 12px;
  font-size:14px; text-align:center;
}
@media (prefers-color-scheme: dark){ .login-error{ background:#3A1010; color:#FF8A80; } }
.login-caja label{ font-size:13px; font-weight:600; color:var(--tinta2); display:block; }
.login-caja input{
  width:100%; margin-top:5px; padding:12px; font-size:17px;
  border:1.5px solid var(--linea); border-radius:11px; background:var(--fondo);
}
.login-caja input:focus{ outline:none; border-color:var(--cereza); }

/* ---------- Barra de arriba ---------- */
.tope{
  position:sticky; top:0; z-index:40; display:flex; align-items:center;
  justify-content:space-between; padding:10px 14px;
  padding-top:calc(10px + env(safe-area-inset-top));
  background:var(--tarjeta); border-bottom:1px solid var(--linea);
}
.tope-marca{ display:flex; align-items:center; gap:8px; cursor:pointer; }
.tope-logo{ font-size:22px; }
.tope-nombre{ font-weight:800; font-size:18px; letter-spacing:-.3px; }
.tope-acciones{ display:flex; gap:8px; }

/* ---------- Biblioteca ---------- */
#vista{ padding:16px; max-width:1100px; margin:0 auto; }
.bib-acciones{ display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.bib-acciones .btn{ flex:1; min-width:150px; padding:14px; font-size:16px; }
.bib-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px;
}
.doc-card{
  background:var(--tarjeta); border-radius:var(--radio); box-shadow:var(--sombra);
  overflow:hidden; cursor:pointer; position:relative;
  transition:transform .08s;
}
.doc-card:active{ transform:scale(.97); }
.doc-thumb{
  width:100%; aspect-ratio:3/4; object-fit:cover; display:block;
  background:repeating-conic-gradient(var(--fondo) 0% 25%, var(--tarjeta) 0% 50%) 0 0/20px 20px;
}
.doc-thumb-vacia{
  width:100%; aspect-ratio:3/4; display:flex; align-items:center; justify-content:center;
  font-size:42px; color:var(--tinta2); background:var(--fondo);
}
.doc-info{ padding:9px 10px 10px; }
.doc-nombre{
  font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis;
}
.doc-meta{ font-size:11.5px; color:var(--tinta2); margin-top:2px; }
.doc-menu-btn{
  position:absolute; top:6px; right:6px; width:32px; height:32px; border:none;
  border-radius:50%; background:rgba(0,0,0,.45); color:#fff; font-size:17px;
  cursor:pointer; line-height:1;
}
.bib-vacia{
  text-align:center; color:var(--tinta2); padding:60px 20px; font-size:16px;
}
.bib-vacia .emoji{ font-size:52px; display:block; margin-bottom:10px; }

/* ---------- Modales ---------- */
.modal-fondo{
  position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.modal{
  background:var(--tarjeta); border-radius:18px; width:100%; max-width:420px;
  max-height:88dvh; overflow:auto; padding:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.modal h2{ margin:0 0 14px; font-size:19px; }
.modal label{ font-size:13px; font-weight:600; color:var(--tinta2); display:block; margin-top:10px; }
.modal input[type=text],.modal input[type=password]{
  width:100%; margin-top:5px; padding:11px; font-size:16px;
  border:1.5px solid var(--linea); border-radius:10px; background:var(--fondo);
}
.modal input:focus{ outline:none; border-color:var(--cereza); }
.modal-botones{ display:flex; gap:10px; margin-top:18px; }
.modal-botones .btn{ flex:1; }
.modal-lista{ display:flex; flex-direction:column; gap:8px; }
.modal-lista .btn{ text-align:left; box-shadow:none; border:1px solid var(--linea); }
.modal-nota{ font-size:12.5px; color:var(--tinta2); margin-top:10px; line-height:1.45; }
.modal-ok{ color:var(--ok); font-size:14px; font-weight:600; margin-top:10px; }
.modal-mal{ color:#C62828; font-size:14px; font-weight:600; margin-top:10px; }

/* ---------- Aviso flotante (progreso / guardado) ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom));
  transform:translateX(-50%); background:var(--tinta); color:var(--fondo);
  border-radius:99px; padding:10px 20px; font-size:14.5px; font-weight:600;
  z-index:300; box-shadow:var(--sombra); white-space:nowrap;
}

/* ---------- Recorte (4 esquinas) ---------- */
.rec-lienzo-caja{
  position:relative; margin:0 auto; touch-action:none; user-select:none;
  -webkit-user-select:none;
}
.rec-lienzo-caja canvas{ display:block; width:100%; height:auto; border-radius:10px; }
.rec-esquina{
  position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px;
  border-radius:50%; background:var(--cereza); border:3px solid #fff;
  box-shadow:0 1px 6px rgba(0,0,0,.5); touch-action:none;
}
.rec-filtros{ display:flex; gap:8px; margin-top:12px; }
.rec-filtros .btn{ flex:1; font-size:13.5px; padding:9px 6px; }
.rec-filtros .activo{ background:var(--cereza); color:#fff; }

/* ---------- Editor ---------- */
.ed-cuerpo{ position:fixed; inset:0; z-index:60; display:flex; flex-direction:column;
  background:var(--fondo); }
.ed-tope{
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  padding-top:calc(8px + env(safe-area-inset-top));
  background:var(--tarjeta); border-bottom:1px solid var(--linea);
}
.ed-tope input{
  flex:1; min-width:0; border:none; background:transparent; font-size:16px;
  font-weight:700; padding:6px;
}
.ed-tope input:focus{ outline:none; border-bottom:2px solid var(--cereza); }
.ed-estado{ font-size:12px; color:var(--tinta2); white-space:nowrap; }
.ed-area{
  flex:1; overflow:hidden; position:relative; touch-action:none;
  background:repeating-conic-gradient(rgba(127,127,127,.08) 0% 25%, transparent 0% 50%) 0 0/26px 26px;
}
.ed-mundo{ position:absolute; transform-origin:0 0; }
.ed-pagina{ position:relative; box-shadow:0 4px 24px rgba(0,0,0,.35); background:#fff; }
.ed-pagina canvas{ display:block; }
.ed-texto-caja{
  position:absolute; z-index:5; border:1.5px dashed transparent;
}
.ed-texto-caja.sel{ border-color:var(--cereza); }
.ed-agarre{
  position:absolute; width:26px; height:26px; border-radius:50%;
  background:var(--cereza); border:2.5px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,.5);
  touch-action:none; z-index:6;
}
.ed-textarea{
  position:absolute; z-index:8; border:1.5px solid var(--cereza); background:transparent;
  resize:none; overflow:hidden; padding:0; margin:0; line-height:1.25; outline:none;
}
.ed-nav{
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:6px; background:var(--tarjeta); border-top:1px solid var(--linea);
  font-size:14px; font-weight:600;
}
.ed-nav .btn{ padding:6px 14px; }
.ed-herr{
  display:flex; gap:6px; padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  background:var(--tarjeta); overflow-x:auto;
}
.ed-herr .btn{
  flex:1; min-width:64px; display:flex; flex-direction:column; align-items:center;
  gap:2px; font-size:11.5px; padding:8px 4px; box-shadow:none;
  border:1.5px solid var(--linea);
}
.ed-herr .btn .ico{ font-size:20px; }
.ed-herr .activo{ border-color:var(--cereza); background:var(--cereza-suave); color:var(--cereza); }
@media (prefers-color-scheme: dark){ .ed-herr .activo{ color:#fff; } }

/* Panel de opciones de la herramienta (texto/dibujo/firma) */
.ed-panel{
  position:absolute; left:10px; right:10px; bottom:10px; z-index:20;
  background:var(--tarjeta); border-radius:14px; box-shadow:0 6px 30px rgba(0,0,0,.35);
  padding:12px; display:flex; flex-direction:column; gap:10px; max-height:46dvh; overflow:auto;
}
.ed-panel-fila{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ed-panel-fila label{ font-size:12.5px; font-weight:600; color:var(--tinta2); }
.ed-panel input[type=range]{ flex:1; accent-color:var(--cereza); }
.chip{
  border:1.5px solid var(--linea); border-radius:99px; padding:7px 13px; font-size:13.5px;
  background:var(--tarjeta); cursor:pointer; font-weight:600; color:var(--tinta);
}
.chip.activo{ border-color:var(--cereza); background:var(--cereza-suave); color:var(--cereza); }
@media (prefers-color-scheme: dark){ .chip.activo{ color:#fff; } }
.muestra-color{
  width:30px; height:30px; border-radius:50%; border:2.5px solid var(--linea);
  cursor:pointer; padding:0; -webkit-appearance:none; appearance:none; background:none;
}
.punto-color{
  width:28px; height:28px; border-radius:50%; border:2px solid var(--linea); cursor:pointer;
}
.punto-color.activo{ border-color:var(--cereza); box-shadow:0 0 0 2px var(--cereza-suave); }

/* Lista de fonts */
.font-lista{ display:flex; flex-direction:column; gap:4px; max-height:34dvh; overflow:auto; }
.font-item{
  padding:9px 12px; border-radius:10px; cursor:pointer; font-size:19px;
  border:1.5px solid transparent; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  flex-shrink:0; line-height:1.35;
}
.font-item:hover{ background:var(--fondo); }
.font-item.activo{ border-color:var(--cereza); background:var(--cereza-suave); }
.font-item small{ display:block; font-size:11px; color:var(--tinta2);
  font-family:-apple-system,sans-serif; }

/* Páginas (organizar) */
.pag-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:12px; }
.pag-celda{ position:relative; border-radius:10px; overflow:hidden; box-shadow:var(--sombra); }
.pag-celda img{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block; background:#888; }
.pag-num{
  position:absolute; top:5px; left:5px; background:rgba(0,0,0,.6); color:#fff;
  font-size:11px; font-weight:700; border-radius:8px; padding:2px 7px;
}
.pag-botones{ display:flex; }
.pag-botones button{
  flex:1; border:none; background:var(--tarjeta); font-size:15px; padding:7px 0;
  cursor:pointer; color:var(--tinta);
}
.pag-botones button:active{ background:var(--fondo); }

/* Firma */
.firma-lienzo{
  width:100%; height:180px; border:2px dashed var(--linea); border-radius:12px;
  touch-action:none; background:#fff;
}
.firma-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; }
.firma-item{
  position:relative; border:1.5px solid var(--linea); border-radius:10px; padding:6px;
  cursor:pointer; background:#fff;
}
.firma-item img{ width:100%; height:56px; object-fit:contain; display:block; }
.firma-item .x{
  position:absolute; top:-8px; right:-8px; width:26px; height:26px; border:none;
  border-radius:50%; background:#C62828; color:#fff; cursor:pointer; font-size:13px;
}

/* Menú contextual del documento */
.menu-doc{ position:fixed; z-index:200; background:var(--tarjeta); border-radius:14px;
  box-shadow:0 8px 40px rgba(0,0,0,.4); overflow:hidden; min-width:200px; }
.menu-doc button{
  display:block; width:100%; text-align:left; border:none; background:none;
  padding:13px 16px; font-size:15px; cursor:pointer; color:var(--tinta);
  border-bottom:1px solid var(--linea);
}
.menu-doc button:last-child{ border-bottom:none; }
.menu-doc button:active{ background:var(--fondo); }
.menu-doc .rojo{ color:#E53935; }

@media (min-width:700px){
  .bib-acciones .btn{ flex:0 0 auto; min-width:190px; }
  .bib-grid{ grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
  .ed-herr .btn{ flex:0 0 auto; min-width:84px; }
  .ed-herr{ justify-content:center; }
  .ed-panel{ left:auto; right:16px; bottom:16px; width:360px; }
}