/* =====================================================================
   Sistema de Gestión Documental — Gestión Idónea S.A.S.
   Identidad: azul #114A77 · verde #B3CF3A · Montserrat
   ===================================================================== */
:root{
  --azul:#114A77; --azul-osc:#0D3A5E; --azul-cla:#1B6BA8; --verde:#B3CF3A; --verde-osc:#8FA82D;
  --tinta:#16212B; --texto:#3C4A57; --suave:#6B7B8C; --linea:#DCE5EC; --linea-sut:#EDF1F5;
  --fondo:#F4F7FA; --blanco:#fff;
  --ok:#1E8E5A; --ok-bg:#E6F5ED; --warn:#B7791F; --warn-bg:#FDF4E3;
  --danger:#C0392B; --danger-bg:#FCECEA; --info:#1B6BA8; --info-bg:#E8F1F9;
  --r:10px; --r-s:6px;
  --sombra:0 1px 2px rgba(16,33,49,.06),0 2px 8px rgba(16,33,49,.05);
  --sombra-m:0 4px 16px rgba(16,33,49,.10);
  --lat:250px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:14px;line-height:1.55;color:var(--texto);background:var(--fondo);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;color:var(--tinta);font-weight:600;line-height:1.25}
a{color:var(--azul-cla);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:8px 14px;border-radius:6px;z-index:999}
.ico{width:18px;height:18px;flex:none}

/* ------------------------------ Layout ----------------------------- */
.app{display:flex;min-height:100vh}
.lateral{width:var(--lat);flex:none;background:var(--azul);color:#DCE7F1;display:flex;flex-direction:column;
  position:fixed;inset:0 auto 0 0;z-index:40}
.contenedor{flex:1;margin-left:var(--lat);display:flex;flex-direction:column;min-width:0}
.marca{display:flex;align-items:center;gap:11px;padding:18px 18px 16px;border-bottom:1px solid rgba(255,255,255,.12)}
.marca-logo{width:34px;height:40px;flex:none;border-radius:4px;overflow:hidden;background:#fff2}
.marca-logo svg{display:block;width:100%;height:100%}
.marca-txt strong{display:block;color:#fff;font-size:14px;font-weight:600;letter-spacing:.2px}
.marca-txt span{display:block;font-size:11px;color:var(--verde);text-transform:uppercase;letter-spacing:.9px;font-weight:500}
.nav{flex:1;overflow-y:auto;padding:14px 10px}
.nav-grupo{font-size:10px;text-transform:uppercase;letter-spacing:1.1px;color:#8FB0CC;margin:16px 10px 6px;font-weight:600}
.nav-grupo:first-child{margin-top:2px}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r-s);color:#D5E2EE;font-size:13.5px;font-weight:500}
.nav-item:hover{background:rgba(255,255,255,.09);color:#fff;text-decoration:none}
.nav-item.on{background:rgba(179,207,58,.16);color:#fff;box-shadow:inset 3px 0 0 var(--verde)}
.nav-item.on .ico{color:var(--verde)}
.lateral-pie{padding:12px 18px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;
  align-items:center;font-size:10.5px;color:#8FB0CC}
.lateral-pie .tag{color:var(--verde);font-weight:600;letter-spacing:.4px}

/* ------------------------------ Barra ------------------------------ */
.barra{display:flex;align-items:center;gap:16px;background:#fff;border-bottom:1px solid var(--linea);
  padding:12px 24px;position:sticky;top:0;z-index:30}
.barra-titulo{min-width:0;flex:none;max-width:320px}
.barra-titulo h1{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra-titulo p{margin:1px 0 0;font-size:12px;color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra-busca{flex:1;max-width:520px;position:relative;display:flex;align-items:center}
.barra-busca .ico{position:absolute;left:11px;color:var(--suave)}
.barra-busca input{width:100%;padding:9px 12px 9px 36px;border:1px solid var(--linea);border-radius:var(--r-s);
  background:var(--fondo);font:inherit;font-size:13px}
.barra-busca input:focus{outline:none;border-color:var(--azul-cla);background:#fff;box-shadow:0 0 0 3px rgba(27,107,168,.12)}
.menu-btn{display:none;background:none;border:0;padding:6px;cursor:pointer;color:var(--tinta)}
.menu-btn svg{width:22px;height:22px}
.usuario{margin-left:auto;position:relative}
.usuario details summary{list-style:none;display:flex;align-items:center;gap:9px;cursor:pointer;padding:4px 6px;border-radius:var(--r-s)}
.usuario details summary::-webkit-details-marker{display:none}
.usuario details summary:hover{background:var(--linea-sut)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--azul);color:#fff;display:grid;place-items:center;
  font-size:12.5px;font-weight:600;flex:none}
.usuario-txt strong{display:block;font-size:12.5px;color:var(--tinta);font-weight:600}
.usuario-txt small{display:block;font-size:11px;color:var(--suave)}
.menu-usuario{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--linea);
  border-radius:var(--r);box-shadow:var(--sombra-m);min-width:250px;padding:6px;z-index:50}
.mu-cab{padding:11px 12px;border-bottom:1px solid var(--linea-sut);margin-bottom:5px}
.mu-cab strong{display:block;font-size:13px;color:var(--tinta)}
.mu-cab small{display:block;color:var(--suave);font-size:11.5px;margin-bottom:6px}
.menu-usuario a{display:block;padding:9px 12px;border-radius:var(--r-s);color:var(--texto);font-size:13px}
.menu-usuario a:hover{background:var(--linea-sut);text-decoration:none}
.menu-usuario a.salir{color:var(--danger)}

.principal{flex:1;padding:22px 24px 40px;max-width:1500px;width:100%}
.pie{padding:14px 24px;border-top:1px solid var(--linea);display:flex;justify-content:space-between;gap:12px;
  flex-wrap:wrap;font-size:11.5px;color:var(--suave);background:#fff}

/* ------------------------- Encabezado sección ---------------------- */
.seccion-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.seccion-cab h2{font-size:15.5px}
.seccion-cab .desc{margin:3px 0 0;font-size:12.5px;color:var(--suave);max-width:70ch}
.acciones{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ------------------------------ Botones ---------------------------- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8.5px 15px;border-radius:var(--r-s);border:1px solid var(--azul);
  background:var(--azul);color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--azul-osc);border-color:var(--azul-osc);text-decoration:none;color:#fff}
.btn.sec{background:#fff;color:var(--azul);border-color:var(--linea)}
.btn.sec:hover{background:var(--linea-sut);color:var(--azul)}
.btn.verde{background:var(--verde);border-color:var(--verde);color:#23310A}
.btn.verde:hover{background:var(--verde-osc);border-color:var(--verde-osc);color:#23310A}
.btn.peligro{background:#fff;color:var(--danger);border-color:#F0C4BE}
.btn.peligro:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn.chico{padding:5.5px 10px;font-size:12px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn .ico{width:16px;height:16px}

/* ------------------------------ Avisos ----------------------------- */
.aviso{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border-radius:var(--r);margin-bottom:14px;
  font-size:13px;border:1px solid transparent}
.aviso .cerrar{margin-left:auto;background:none;border:0;font-size:19px;line-height:1;cursor:pointer;color:inherit;opacity:.5}
.aviso.ok{background:var(--ok-bg);border-color:#BFE3D0;color:#125E3B}
.aviso.error{background:var(--danger-bg);border-color:#F3C9C3;color:#8E2A1F}
.aviso.info{background:var(--info-bg);border-color:#C4DCF0;color:#12507F}
.aviso.warn{background:var(--warn-bg);border-color:#EFD9AC;color:#8A5A12}

/* ------------------------------ Tarjetas --------------------------- */
.tarjeta{background:#fff;border:1px solid var(--linea);border-radius:var(--r);box-shadow:var(--sombra);margin-bottom:18px}
.tarjeta-cab{padding:14px 18px;border-bottom:1px solid var(--linea-sut);display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-wrap:wrap}
.tarjeta-cab h3{font-size:13.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--azul)}
.tarjeta-cuerpo{padding:18px}
.tarjeta-cuerpo.compacto{padding:0}

.rejilla{display:grid;gap:16px}
.r2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.r3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.r4{grid-template-columns:repeat(auto-fit,minmax(195px,1fr))}

/* ------------------------------ KPI -------------------------------- */
.kpi{background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:16px 18px;box-shadow:var(--sombra);
  display:flex;flex-direction:column;gap:3px;position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--azul)}
.kpi.verde::before{background:var(--verde)}
.kpi.warn::before{background:var(--warn)}
.kpi.danger::before{background:var(--danger)}
.kpi .n{font-size:26px;font-weight:700;color:var(--tinta);line-height:1.15}
.kpi .t{font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--suave);font-weight:600}
.kpi .d{font-size:11.5px;color:var(--suave)}
.kpi a{font-size:12px;font-weight:600}

/* ------------------------------ Tablas ----------------------------- */
.tabla-env{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tabla{width:100%;border-collapse:collapse;font-size:13px}
table.tabla th{text-align:left;padding:10px 14px;background:var(--linea-sut);color:var(--azul-osc);font-weight:600;
  font-size:11px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;border-bottom:1px solid var(--linea)}
table.tabla td{padding:11px 14px;border-bottom:1px solid var(--linea-sut);vertical-align:middle}
table.tabla tbody tr:hover{background:#FAFCFE}
table.tabla tbody tr:last-child td{border-bottom:0}
table.tabla td.num,table.tabla th.num{text-align:right;font-variant-numeric:tabular-nums}
table.tabla td.acc{text-align:right;white-space:nowrap}
.tabla .principal-txt{font-weight:600;color:var(--tinta)}
.tabla .sec-txt{font-size:11.5px;color:var(--suave)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}

/* ------------------------------ Badges ----------------------------- */
.badge{display:inline-block;padding:2.5px 9px;border-radius:20px;font-size:10.5px;font-weight:600;
  letter-spacing:.3px;white-space:nowrap;border:1px solid transparent}
.badge.ok{background:var(--ok-bg);color:#116B42;border-color:#BFE3D0}
.badge.info{background:var(--info-bg);color:#12507F;border-color:#C4DCF0}
.badge.warn{background:var(--warn-bg);color:#8A5A12;border-color:#EFD9AC}
.badge.danger{background:var(--danger-bg);color:#9E2E22;border-color:#F3C9C3}
.badge.muted{background:var(--linea-sut);color:var(--suave);border-color:var(--linea)}
.badge.verde{background:#F1F7DA;color:#5B7016;border-color:#DCE9AE}

/* ------------------------------ Formularios ------------------------ */
.campo{margin-bottom:14px}
.campo label,.etq{display:block;font-size:12px;font-weight:600;color:var(--azul-osc);margin-bottom:5px}
.campo .ayuda{font-size:11.5px;color:var(--suave);margin-top:4px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],input[type=search],
input[type=tel],input[type=datetime-local],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--linea);border-radius:var(--r-s);font:inherit;font-size:13px;
  background:#fff;color:var(--tinta)}
textarea{min-height:88px;resize:vertical}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7B8C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:16px;padding-right:32px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul-cla);box-shadow:0 0 0 3px rgba(27,107,168,.12)}
input[readonly],input[disabled],select[disabled]{background:var(--linea-sut);color:var(--suave)}
.fila{display:grid;gap:14px}
.f2{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.f3{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.f4{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.check{display:flex;align-items:flex-start;gap:8px;font-size:13px;margin-bottom:8px}
.check input{margin-top:2px;width:16px;height:16px;flex:none;accent-color:var(--azul)}
fieldset{border:1px solid var(--linea);border-radius:var(--r);padding:16px;margin:0 0 18px}
legend{font-size:12px;font-weight:700;color:var(--azul);padding:0 8px;text-transform:uppercase;letter-spacing:.6px}
.form-pie{display:flex;gap:10px;justify-content:flex-end;padding-top:6px;flex-wrap:wrap}

/* ------------------------------ Filtros ---------------------------- */
.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;padding:14px 18px;background:#fff;
  border:1px solid var(--linea);border-radius:var(--r);margin-bottom:16px;box-shadow:var(--sombra)}
.filtros .campo{margin:0;min-width:150px;flex:1}
.filtros .campo.ancho{min-width:250px;flex:2}

/* ------------------------------ Vacío ------------------------------ */
.vacio{text-align:center;padding:48px 20px;color:var(--suave)}
.vacio svg{width:46px;height:46px;opacity:.35;margin-bottom:10px}
.vacio p{margin:0 0 14px;font-size:13.5px}

/* ------------------------------ Paginador -------------------------- */
.pager{display:flex;gap:5px;align-items:center;padding:12px 18px;flex-wrap:wrap}
.pager a{padding:5px 11px;border:1px solid var(--linea);border-radius:var(--r-s);color:var(--texto);font-size:12.5px}
.pager a:hover{background:var(--linea-sut);text-decoration:none}
.pager a.on{background:var(--azul);color:#fff;border-color:var(--azul)}
.pager .gap{color:var(--suave)}
.pager .total{margin-left:auto;font-size:11.5px;color:var(--suave)}

/* ------------------------------ Expediente ------------------------- */
.exp-cab{background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:18px;margin-bottom:18px;
  box-shadow:var(--sombra);display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.exp-cab .ident{flex:1;min-width:240px}
.exp-cab .ident h2{font-size:18px;margin-bottom:3px}
.exp-cab .codigo{font-family:ui-monospace,monospace;font-size:12px;color:var(--suave)}
.exp-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 22px;margin-top:14px;width:100%}
.dato .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--suave);font-weight:600}
.dato .v{font-size:13px;color:var(--tinta);font-weight:500}

.pestanas{display:flex;gap:2px;border-bottom:1px solid var(--linea);margin-bottom:18px;overflow-x:auto}
.pestanas a{padding:10px 16px;font-size:13px;font-weight:600;color:var(--suave);border-bottom:2.5px solid transparent;
  white-space:nowrap}
.pestanas a:hover{color:var(--azul);text-decoration:none}
.pestanas a.on{color:var(--azul);border-bottom-color:var(--verde)}

/* Checklist documental */
.check-lista{display:grid;gap:1px;background:var(--linea-sut)}
.check-item{background:#fff;padding:11px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.check-item .est{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:12px;font-weight:700}
.check-item .est.si{background:var(--ok-bg);color:var(--ok)}
.check-item .est.no{background:var(--linea-sut);color:var(--suave)}
.check-item .est.falta{background:var(--danger-bg);color:var(--danger)}
.check-item .est.vence{background:var(--warn-bg);color:var(--warn)}
.check-item .nom{flex:1;min-width:190px;font-size:13px}
.check-item .nom small{display:block;color:var(--suave);font-size:11.5px}

/* Barra de progreso */
.barra-prog{height:7px;background:var(--linea-sut);border-radius:20px;overflow:hidden}
.barra-prog i{display:block;height:100%;background:var(--verde);border-radius:20px}
.barra-prog.baja i{background:var(--danger)}
.barra-prog.media i{background:var(--warn)}

/* Zona de carga */
.dropzone{border:2px dashed var(--linea);border-radius:var(--r);padding:30px 20px;text-align:center;background:#FAFCFE;
  transition:.15s;cursor:pointer}
.dropzone.activa{border-color:var(--verde);background:#F7FBE9}
.dropzone p{margin:6px 0 0;font-size:13px;color:var(--suave)}
.dropzone strong{color:var(--azul)}
.lista-archivos{margin-top:14px;display:grid;gap:8px}
.arch-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--linea);border-radius:var(--r-s);
  background:#fff;font-size:12.5px}
.arch-item .quitar{margin-left:auto;background:none;border:0;color:var(--danger);cursor:pointer;font-size:17px;line-height:1}

/* Visor con marca de agua */
.visor{position:relative;background:#333;border-radius:var(--r);overflow:hidden;min-height:65vh}
.visor iframe,.visor img{width:100%;height:65vh;border:0;display:block;object-fit:contain;background:#3A3A3A}
.marca-agua{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center;overflow:hidden}
.marca-agua span{font-size:17px;color:rgba(17,74,119,.16);font-weight:700;transform:rotate(-30deg);white-space:nowrap;
  letter-spacing:1px;text-align:center;line-height:2.6}

/* Ubicación topográfica */
.ruta-fisica{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px}
.ruta-fisica span{background:var(--linea-sut);padding:3px 9px;border-radius:var(--r-s);font-weight:600;color:var(--azul-osc)}
.ruta-fisica i{color:var(--suave);font-style:normal}

/* Árbol CCD */
.arbol{font-size:13px}
.arbol .nodo{border-bottom:1px solid var(--linea-sut)}
.arbol .fila-nodo{display:flex;align-items:center;gap:10px;padding:10px 14px}
.arbol .fila-nodo:hover{background:#FAFCFE}
.arbol .n-seccion{background:var(--linea-sut);font-weight:700;color:var(--azul-osc)}
.arbol .cod{font-family:ui-monospace,monospace;font-size:11.5px;color:var(--suave);min-width:76px}
.arbol .ret{margin-left:auto;display:flex;gap:7px;align-items:center;font-size:11px;color:var(--suave);white-space:nowrap}
.nivel-1{padding-left:14px}.nivel-2{padding-left:34px}.nivel-3{padding-left:54px}

/* Rótulos imprimibles */
.rotulo{width:170mm;border:1.5px solid #114A77;border-radius:4px;padding:8mm;margin:0 auto 8mm;background:#fff;
  page-break-inside:avoid;display:flex;gap:8mm}
.rotulo .r-cuerpo{flex:1}
.rotulo h3{font-size:15pt;color:#114A77;margin-bottom:3mm}
.rotulo table{width:100%;font-size:9.5pt;border-collapse:collapse}
.rotulo table td{padding:1.4mm 2mm;border-bottom:.4pt solid #DCE5EC}
.rotulo table td.k{color:#6B7B8C;width:34mm;font-weight:600;font-size:8.5pt;text-transform:uppercase}
.rotulo .r-qr{width:34mm;text-align:center}
.rotulo .r-qr svg{width:32mm;height:32mm}
.rotulo .r-qr small{display:block;font-size:7pt;color:#6B7B8C;margin-top:1mm;word-break:break-all}
.rotulo .r-barra{height:5mm;background:#B3CF3A;margin-top:4mm;border-radius:2px}

/* ------------------------------ Login ------------------------------ */
body.acceso{display:grid;place-items:center;min-height:100vh;background:linear-gradient(135deg,#0D3A5E,#114A77 55%,#1B6BA8)}
.caja-acceso{width:min(410px,92vw);background:#fff;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.28);overflow:hidden}
.caja-acceso .cab{background:var(--azul);padding:26px 28px 22px;text-align:center;color:#fff}
.caja-acceso .cab .logo{width:56px;height:66px;margin:0 auto 12px;display:block}
.caja-acceso .cab h1{color:#fff;font-size:17px;margin-bottom:3px}
.caja-acceso .cab p{margin:0;font-size:11.5px;color:var(--verde);text-transform:uppercase;letter-spacing:1.1px;font-weight:600}
.caja-acceso .cuerpo{padding:26px 28px 28px}
.caja-acceso .btn{width:100%;justify-content:center;padding:11px}
.caja-acceso .legal{margin-top:18px;padding-top:14px;border-top:1px solid var(--linea-sut);font-size:10.5px;
  color:var(--suave);text-align:center;line-height:1.5}

/* ------------------------------ Utilidades ------------------------- */
.der{text-align:right}.cen{text-align:center}
.mt0{margin-top:0}.mb0{margin-bottom:0}.mt16{margin-top:16px}.mb16{margin-bottom:16px}
.suave{color:var(--suave)}.chico{font-size:11.5px}
.nowrap{white-space:nowrap}
.pill-lista{display:flex;gap:6px;flex-wrap:wrap}
hr{border:0;border-top:1px solid var(--linea-sut);margin:18px 0}
details.desplegable summary{cursor:pointer;font-weight:600;color:var(--azul);font-size:13px;padding:8px 0}

/* ------------------------------ Responsive ------------------------- */
@media (max-width:980px){
  .lateral{transform:translateX(-100%);transition:transform .2s;box-shadow:var(--sombra-m)}
  .lateral.abierto{transform:none}
  .contenedor{margin-left:0}
  .menu-btn{display:block}
  .barra-busca{display:none}
  .barra-titulo{max-width:none;flex:1}
  .principal{padding:16px 14px 32px}
  .usuario-txt{display:none}
}
@media (max-width:560px){
  .barra{padding:10px 14px;gap:10px}
  .seccion-cab{flex-direction:column;align-items:stretch}
  .acciones .btn{flex:1;justify-content:center}
  table.tabla th,table.tabla td{padding:9px 10px}
}

/* ------------------------------ Impresión -------------------------- */
@media print{
  .lateral,.barra,.pie,.acciones,.pestanas,.filtros,.no-imprimir{display:none!important}
  .contenedor{margin:0}
  .principal{padding:0;max-width:none}
  body{background:#fff;font-size:11pt}
  .tarjeta{border:0;box-shadow:none;margin:0}
  @page{size:letter;margin:14mm}
}