/* BUILD: 2025-09-25 clean */

/* ===== Paleta base y gradientes ===== */
:root{
  --brand-900:#233744;
  --brand-800:#2e4957;
  --brand-700:#375261;
  --brand-600:#415c6b;
  --brand-500:#4b6675;
  --accent:#38bdf8;
  --light:#f8fafc;
  --light-60:rgba(255,255,255,.6);
  --subtle:#f3f4f6;
  --footer:#1f2937;

  /* Gradiente compartido (header/actionbar) */
  --bar-grad-a:#4358b5;
  --bar-grad-b:#3aa1b5;

  /* Intensidad del velo del fondo en páginas de edición */
  --edit-bg-strength:.08; /* .06 suave | .08 medio | .12 fuerte */
}

/* Utilidades base */
.text-accent{ color:var(--accent)!important; }
.text-light-60{ color:var(--light-60)!important; }
.bg-brand{ background:linear-gradient(90deg,var(--brand-800),var(--brand-600)); }
.bg-subtle{ background-color:var(--subtle); }
.bg-footer{ background:var(--footer); }

/* Marca */
.brand-logo{
  width:28px;height:28px;border-radius:8px;display:inline-block;
  background:linear-gradient(135deg,var(--accent),#7dd3fc);
  box-shadow:0 4px 12px rgba(56,189,248,.35);
}
.brand-logo.small{ width:22px;height:22px; }
.brand-text{ font-weight:700; letter-spacing:.2px; }

/* ===== Navbar con mismo look que la actionbar ===== */
.headerbar{
  background: linear-gradient(90deg, var(--bar-grad-a), var(--bar-grad-b));
  box-shadow: 0 2px 24px rgba(0,0,0,.18);
  min-height:56px;
}
.headerbar .navbar-toggler{
  border:1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.18);
  border-radius:12px;
  padding:.4rem .6rem;
  backdrop-filter: blur(4px);
}
.headerbar .navbar-toggler:focus{ box-shadow:0 0 0 .15rem rgba(255,255,255,.35); }
.headerbar .navbar-toggler .navbar-toggler-icon{ filter: invert(1) opacity(.9); }
/* Links blancos con hover */
.navbar-dark .navbar-nav .nav-link{ color:rgba(255,255,255,.92); }
.navbar-dark .navbar-nav .nav-link:hover{ color:#fff; }

/* ===== Hero / tarjetas (páginas internas) ===== */
.hero .glass{
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.75));
  backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:16px;
}
.btn-accent{
  background:var(--accent); border:none; color:#003244;
  box-shadow:0 8px 20px rgba(56,189,248,.35);
}
.btn-accent:hover{ filter:brightness(.95); }
.feature-card{ border:1px solid #e5e7eb; border-radius:16px; }

/* Pseudo-iconos (masks) para secciones internas */
.fi{ display:inline-block; width:22px; height:22px; background:#0f172a;
     mask-size:cover; -webkit-mask-size:cover; }
.fi-id{ mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="%23000" d="M3 3h18v16H3zM6 8h8v2H6zm0 4h12v2H6z"/></svg>'); }
.fi-grid{ mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="%23000" d="M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z"/></svg>'); }

/* ===== Ads ===== */
.ad-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:768px){ .ad-grid{ grid-template-columns:1fr 1fr; } }
.ad-box{
  position:relative; background:#fff; border:1px dashed #cbd5e1; border-radius:12px; padding:16px;
}
.ad-label{
  position:absolute; top:-10px; left:12px; background:var(--brand-700); color:#fff; font-size:.75rem;
  padding:3px 8px; border-radius:999px; box-shadow:0 4px 8px rgba(0,0,0,.12);
}
.ad-banner-min{
  height:96px; background:#e5e7eb; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.ad-banner-text{ font-weight:700; letter-spacing:.08em; color:#c0c6d0; }

/* ===== Subheader / badges ===== */
.subheader{ border-bottom:1px solid #e5e7eb; }
.badge-soft{ background:#e2e8f0; color:#334155; border-radius:999px; font-weight:600; }

/* ===== Footer ===== */
footer a:hover{ text-decoration:underline; }
.footer-bar{ height:64px; }

/* ===================================================== */
/* =============== HOME MINIMAL (Mock) ================= */
/* ===================================================== */
.home-min{ background:#f6f8fb; }
.home-title{
  font-weight:800; color:#0b63c9;
  font-size: clamp(1.25rem, 2.8vw, 2rem);
  text-align:center;
}
/* Contenedor de acciones */
.quick-actions{
  display:grid;
  grid-template-columns: repeat(3, minmax(88px, 1fr));
  gap: 28px 28px;
  max-width: 620px;
  margin: 8px auto 0;
  padding: 8px 8px 24px;
  justify-items:center;
}
.quick-actions .qa{
  width: 96px; height: 96px; border-radius: 9999px;
  border: none; outline: none; text-decoration: none;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .08s ease-in-out, filter .12s ease-in-out;
}
.quick-actions .qa:active{ transform: scale(.98); filter: brightness(.95); }
.quick-actions .qa .qa-icon{
  width: 36px; height: 36px; background:#fff; opacity:.92;
  mask-size:cover; -webkit-mask-size:cover;
}
.quick-actions .qa .qa-tex{
  font-weight:800; color:#fff; letter-spacing:.06em;
  text-shadow: 0 1px 0 rgba(0,0,0,.2);
}
/* Colores de botones */
.qa-blue  { background:#1e90ff; }
.qa-dark  { background:#3a3a3a; }
.qa-green { background:#34c759; }
.qa-muted { background:#7396b6; }
/* Iconos HOME (masks) */
.fi-id{ mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="%23000" d="M3 5h18v14H3zM6 9h8v2H6zm0 4h12v2H6z"/></svg>'); -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path fill='%23000' d='M3 5h18v14H3zM6 9h8v2H6zm0 4h12v2H6z'/></svg>"); }
.fi-image{ mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="%23000" d="M4 5h16v14H4zM7 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm12 8l-6-6-4 4-2-2-4 4h16z"/></svg>'); -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path fill='%23000' d='M4 5h16v14H4zM7 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm12 8l-6-6-4 4-2-2-4 4h16z'/></svg>"); }
.fi-share{ mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="%23000" d="M14 9l-4 2 4 2v3l6-5-6-5v3zM4 6h6v2H4v8h6v2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z"/></svg>'); -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path fill='%23000' d='M14 9l-4 2 4 2v3l6-5-6-5v3zM4 6h6v2H4v8h6v2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z'/></svg>"); }

/* ===== Actionbar (inferior) ===== */
.has-actionbar { padding-bottom: 96px; }
.actionbar{
  position: fixed; left:0; right:0; bottom:0; z-index: 1040;
  background: linear-gradient(90deg, var(--bar-grad-a), var(--bar-grad-b));
  padding: 10px 14px;
  box-shadow: 0 -8px 24px rgba(0,0,0,.18);
  display:flex; align-items:center; justify-content:space-between;
}
.actionbar .btn-icon{
  width:44px; height:44px; border-radius:9999px; border:none; outline:none;
  background: rgba(255,255,255,.12); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  font-size:18px;
}
.actionbar .btn-icon:hover{ background: rgba(255,255,255,.18); }
.actionbar .ab-left, .actionbar .ab-center, .actionbar .ab-right{
  display:flex; align-items:center; gap:12px;
}
/* Variante centrada */
.actionbar.is-centered{ justify-content:center; }
.actionbar.is-centered .ab-left,
.actionbar.is-centered .ab-right{ display:none; }
.actionbar.is-centered .ab-center{ display:flex; gap:16px; }

/* Plus pequeño en botón “agregar imagen” */
.actionbar .btn-icon.plus{ position:relative; }
.actionbar .btn-icon.plus::after{
  content:'+'; position:absolute; right:6px; bottom:6px; width:16px; height:16px; border-radius:9999px;
  background:#fff; color:#1f2937; font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}

/* ===== IMÁGENES A PDF – Lienzo & ToolBar ===== */
.sheet-card{
  background:#fff; border-radius:10px;
  min-height: 520px; margin: 0 auto; padding: 80px 24px 120px;
  box-shadow: 0 2px 0 rgba(0,0,0,.03), 0 1px 4px rgba(0,0,0,.06);
}
.tool-float{
  position:absolute; left:50%; top:90px; transform:translateX(-50%);
  background:#fff; color:#1f2937; border-radius:9999px; padding:8px 10px;
  box-shadow: 0 10px 28px rgba(15,23,42,.18), 0 1px 0 rgba(255,255,255,.6) inset;
  display:flex; gap:10px; z-index:2;
}
.btn-icon{
  width:36px; height:36px; border-radius:9999px; border:none; outline:none;
  background:#f3f4f6; display:flex; align-items:center; justify-content:center;
  color:#1f2937; font-size:16px;
}
.btn-icon.danger{ color:#b91c1c; background:#fee2e2; }

.selection-box{
  position:relative; width:min(88%, 560px); height:340px; margin: 64px auto 0;
  border:2px solid #7c3aed; border-radius:6px;
  background:#e5e7eb;
}
.selection-box .demo-image{
  position:absolute; inset:0; background:
    radial-gradient(ellipse at bottom left, rgba(255,255,255,.2), transparent 60%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="%23dbeafe"/><stop offset="1" stop-color="%23c7d2fe"/></linearGradient></defs><rect width="100%" height="100%" fill="url(%23g)"/></svg>');
  background-size: cover;
  border-radius:4px;
}
/* Manejadores */
.selection-box .handle{
  position:absolute; width:14px; height:14px; background:#fff; border:2px solid #7c3aed; border-radius:9999px;
}
.selection-box .handle.tl{ top:-7px; left:-7px; }
.selection-box .handle.tr{ top:-7px; right:-7px; }
.selection-box .handle.bl{ bottom:-7px; left:-7px; }
.selection-box .handle.br{ bottom:-7px; right:-7px; }
.selection-box .handle.tm{ top:-7px; left:calc(50% - 7px); }
.selection-box .handle.bm{ bottom:-7px; left:calc(50% - 7px); }
.selection-box .handle.ml{ left:-7px; top:calc(50% - 7px); }
.selection-box .handle.mr{ right:-7px; top:calc(50% - 7px); }
/* Knob de rotación */
.rotate-knob{
  position:absolute; left:50%; bottom:-46px; transform:translateX(-50%);
  width:36px; height:36px; border-radius:9999px; background:#fff; border:2px solid #7c3aed;
  display:flex; align-items:center; justify-content:center; color:#7c3aed;
  box-shadow: 0 6px 16px rgba(124,58,237,.25);
}

/* ===== INE – Dropzones ===== */
.dz-card{
  position:relative; border-radius:14px; min-height:180px; overflow:hidden;
  box-shadow: 0 2px 0 rgba(0,0,0,.03), 0 1px 4px rgba(0,0,0,.06);
}
.dz-bg{
  position:absolute; inset:0;
  background:
    linear-gradient(45deg, rgba(0,0,0,.03) 25%, transparent 25%) 0 0/16px 16px,
    linear-gradient(-45deg, rgba(0,0,0,.03) 25%, transparent 25%) 0 0/16px 16px,
    linear-gradient(45deg, transparent 75%, rgba(0,0,0,.03) 75%) 0 0/16px 16px,
    linear-gradient(-45deg, transparent 75%, rgba(0,0,0,.03) 75%) 0 0/16px 16px,
    #ddd;
  filter: saturate(.9) brightness(1.05);
}
.dz-dashed{
  position:absolute; inset:12px; border-radius:12px;
  border: 4px dashed rgba(255,255,255,.9);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.dz-center{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; text-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.dz-center i{ font-size:64px; margin-bottom:12px; opacity:.95; }
.dz-text{ font-size: clamp(18px, 5vw, 34px); font-weight:800; letter-spacing:.02em; }

/* ===== Fondo especial de edición ===== */
.page-edit{
  background:
    linear-gradient(180deg,
      rgba(67,88,181,var(--edit-bg-strength)),
      rgba(58,161,181,var(--edit-bg-strength))
    ),
    #e9eef5;
}
/* Intensidad por clase en <body> */
.edit-bg-weak   { --edit-bg-strength:.04; }
.edit-bg-medium { --edit-bg-strength:.08; }
.edit-bg-strong { --edit-bg-strength:.12; }
/* Contraste de “hoja” sobre ese fondo */
.page-edit .sheet-card{
  box-shadow: 0 10px 30px rgba(15,23,42,.14);
  border: 1px solid rgba(2,6,23,.05);
  background: #fff;
}

/* ====== Hoja tamaño Carta real (8.5×11 in) ====== */
.paper-viewport{
  width: 100%;
  /* alto mínimo para que quepa la hoja + respiración */
  min-height: 680px;
  display: flex; align-items: flex-start; justify-content: center;
  overflow: hidden; /* evita scrolls laterales al escalar */
  position: relative;
}

.paper-zoom{
  transform-origin: top center;
  will-change: transform;
  /* no poner width/height aquí; la hoja define su tamaño real */
}

.paper.paper-letter{
  /* Carta: 8.5in × 11in → 816×1056px a 96ppi CSS */
  width: 8.5in;
  height: 11in;
  background: #fff;
  border: 1px solid rgba(2,6,23,.06);
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(2,6,23,.08);
  position: relative;
}

/* Márgenes visuales: 0.5" a cada lado (opcional) */
.paper-margins{
  position: absolute; inset: 0;
  padding: 0.5in; /* 0.5" = 12.7mm */
}

/* Área de trabajo donde colocarás imágenes/canvas */
.paper-stage{
  position: relative;
  width: 100%; height: 100%;
  background:
    linear-gradient(90deg, rgba(2,6,23,.04) 1px, transparent 1px) 0 0 / 8px 8px,
    linear-gradient(0deg,  rgba(2,6,23,.04) 1px, transparent 1px) 0 0 / 8px 8px,
    transparent;
  border-radius: 2px;
  overflow: hidden;
}

/* Placeholder de demostración, puedes eliminarlo */
.stage-placeholder{
  position: absolute; inset: 0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px;
  color:#64748b;
}
.stage-placeholder i{ font-size: 40px; }

/* Badge de zoom */
.zoom-badge{
  position:absolute; right:16px; top:16px; z-index:3;
  color:#fff; background: rgba(0,0,0,.35);
  border-radius: 9999px; padding:6px 10px; font-size: 13px;
  backdrop-filter: blur(4px);
}

/* Ajustes responsivos: en móviles, hoja centrada y escalada por JS */
@media (max-width: 992px){
  .sheet-card{ padding: 72px 12px 120px; }
}

/* Botón redondo en la NAV con el mismo look del actionbar */
.headerbar .btn-icon{
  width:44px; height:44px; border-radius:9999px; border:none; outline:none;
  background: rgba(255,255,255,.12); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  font-size:18px;
}
.headerbar .btn-icon:hover{ background: rgba(255,255,255,.18); }

/* (Opcional) si quieres el “plus” mini como en agregar imagen */
.headerbar .btn-icon.plus{ position:relative; }
.headerbar .btn-icon.plus::after{
  content:'+'; position:absolute; right:6px; bottom:6px; width:16px; height:16px; border-radius:9999px;
  background:#fff; color:#1f2937; font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}


/* ===== Fixes editor imágenes (prioridad alta) ===== */

/* 1) El overlay siempre encima y clickeable solo en sus controles */
#editorOverlayRoot{ 
  position: fixed; inset: 0; z-index: 6000; pointer-events: none;
}
#editorOverlayRoot .et-toolbar,
#editorOverlayRoot .et-handle{
  pointer-events: auto;
}

/* 2) Rotación aplicada al CONTENEDOR: no permitas que otra hoja la anule */
.paper-stage .stage-item{
  transform-origin: center center !important;
  /* NO forzamos transform aquí para no pisar el JS, solo origen */
}

/* 3) La imagen interna nunca lleva transform; la rotación la hace el padre */
.paper-stage .stage-item .img-el{
  transform: none !important;
  object-fit: contain; /* coherente con tu editor-fusionado.css */
}

/* 4) Evita gestos del navegador en las asas y en el lienzo durante edición */
.paper-stage,
#editorOverlayRoot .et-handle{
  touch-action: none;
}

/* 5) (Opcional debug) Muestra el borde real del contenedor al rotar
.stage-item{ outline: 1px dashed rgba(220,38,38,.6) !important; background: rgba(220,38,38,.03); }
*/