@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/*
 * Ratte Control — Tipografía institucional
 * Ambiente inicial: staging.
 * Centraliza la tipografía del sistema para evitar ajustes por pantalla.
 */
:root{
  --ratte-font:"IBM Plex Sans","Segoe UI Variable","Segoe UI","Helvetica Neue",Arial,sans-serif;
}

html,body,
input,select,textarea,button,
table,th,td,
option{
  font-family:var(--ratte-font) !important;
}

body{
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,h6,
.brand h1,.brand-mini h1,
.login-title{
  font-family:var(--ratte-font) !important;
  font-weight:600 !important;
  letter-spacing:-0.01em;
}

label,
th,
.btn,.linkbtn,
button,
.badge{
  font-family:var(--ratte-font) !important;
  font-weight:600 !important;
}

input,select,textarea{
  font-weight:400;
  letter-spacing:0;
}

p,.sub,.hint,
.login-sub,.login-foot{
  font-family:var(--ratte-font) !important;
  font-weight:400;
}

strong,b{
  font-weight:700;
}

/* Mantiene jerarquía visual para folios y datos críticos. */
#folioVisible,
.folio,
.folio-value,
[class*="folio"] strong{
  font-weight:700 !important;
}

@media print{
  html,body,
  input,select,textarea,button,
  table,th,td{
    font-family:var(--ratte-font) !important;
  }
}


/* Las hojas de constancias comparten su estilo institucional en app.html.
   Este CSS contiene solamente estilos de interfaz y revisión; no redefine
   tipografías ni alturas internas de las hojas. */

/* =========================================================
   Acciones principales — siempre visibles en captura
   ========================================================= */
@media (min-width:1101px){
  .panel{
    padding-bottom:104px !important;
  }

  .panel .actions{
    position:fixed !important;
    left:22px !important;
    bottom:0 !important;
    z-index:120 !important;
    width:calc(clamp(330px, calc(100vw - 760px), 430px) - 44px) !important;
    padding:12px 0 14px !important;
    margin:0 !important;
    background:#fff !important;
    border-top:1px solid #d9e1eb !important;
    box-shadow:0 -10px 24px rgba(15,23,42,.08) !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .panel .actions button{
    min-height:46px !important;
    font-size:14px !important;
    border-radius:10px !important;
  }

  .panel .pdf-mobile-status{
    margin-bottom:8px;
  }
}

@media (max-width:1100px){
  .panel .actions{
    position:sticky !important;
    bottom:0 !important;
    z-index:120 !important;
    padding:10px 0 calc(10px + env(safe-area-inset-bottom)) !important;
    background:rgba(255,255,255,.97) !important;
    border-top:1px solid #d9e1eb !important;
    box-shadow:0 -8px 20px rgba(15,23,42,.08) !important;
    backdrop-filter:blur(8px);
  }
}

@media print{
  .panel .actions{
    display:none !important;
  }
}


/* =========================================================
   Revisión móvil antes de generar PDF final
   ========================================================= */
.ratte-pdf-share{
  display:none;
  grid-template-columns:1fr 1fr;
  gap:10px;
  width:100%;
}
.ratte-pdf-share button{
  min-height:46px;
  font-size:14px;
  border-radius:10px;
}

.ratte-review-overlay{
  position:fixed;
  inset:0;
  z-index:2147483600;
  background:#eef2f7;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
}
.ratte-review-head{
  background:#fff;
  border-bottom:1px solid #d9e1eb;
  padding:14px 16px;
}
.ratte-review-head strong{
  display:block;
  color:#0a2e5d;
  font-size:18px;
  font-weight:700;
}
.ratte-review-head span{
  display:block;
  color:#667085;
  font-size:12px;
  line-height:1.35;
  margin-top:3px;
}
.ratte-review-stage{
  overflow:auto;
  padding:12px 10px 24px;
  -webkit-overflow-scrolling:touch;
}
.ratte-review-pages{
  width:min(100%, 8.5in);
  margin:0 auto;
  display:grid;
  gap:14px;
}
.ratte-review-page{
  width:100%;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,23,42,.10);
}
.ratte-review-page img{
  display:block;
  width:100%;
  height:auto;
  background:#fff;
}
.ratte-review-actions{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:10px;
  background:#fff;
  border-top:1px solid #d9e1eb;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 20px rgba(15,23,42,.08);
}
.ratte-review-actions button{
  min-height:48px;
  border-radius:10px;
  font-size:14px;
  font-weight:700;
}
body.ratte-review-open{
  overflow:hidden !important;
}

@media (max-width:1100px){
  .panel .actions{
    grid-template-columns:1fr !important;
  }
  .panel .actions > #pdfBtn{
    width:100%;
  }
}

@media (min-width:1101px){
  .ratte-review-overlay{
    display:none !important;
  }
}


/* =========================================================
   Captura guiada de productos
   ========================================================= */
.product-editor.ratte-product-card{
  display:none;
  margin:12px 0 0 !important;
  padding:0 !important;
  border:1px solid #d7e0eb !important;
  border-radius:12px;
  background:#fff;
  overflow:hidden;
}
.product-editor.ratte-product-card.ratte-product-visible{
  display:block;
}
.product-editor.ratte-product-card.ratte-product-active{
  border-color:#9bb7d8 !important;
  box-shadow:0 0 0 3px rgba(10,46,93,.06);
}
.ratte-product-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 12px;
  background:#f8fafc;
  border-bottom:1px solid #e3e8ef;
}
.ratte-product-card-title{
  min-width:0;
  display:grid;
  gap:2px;
}
.ratte-product-number{
  color:#0a2e5d;
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
}
.ratte-product-card-title strong{
  color:#101828;
  font-size:14px;
  font-weight:600;
  overflow-wrap:anywhere;
}
.ratte-product-card-title span:last-child{
  color:#667085;
  font-size:11px;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.ratte-product-card-tools{
  display:flex;
  gap:6px;
  flex:0 0 auto;
}
.ratte-product-card-tools button{
  border:0;
  border-radius:8px;
  padding:7px 9px;
  font-size:10.5px;
  font-weight:600;
  cursor:pointer;
}
.ratte-product-edit{
  background:#eaf2ff;
  color:#0a2e5d;
}
.ratte-product-remove{
  background:#fff1f0;
  color:#b42318;
}
.ratte-product-card > .field,
.ratte-product-card > .row{
  margin-left:12px;
  margin-right:12px;
}
.ratte-product-card > .field:first-of-type{
  margin-top:12px;
}
.ratte-product-card > .field:last-child{
  margin-bottom:12px;
}
.ratte-product-card.ratte-product-collapsed > :not(.ratte-product-card-head){
  display:none !important;
}
.ratte-product-card.ratte-product-collapsed .ratte-product-card-head{
  border-bottom:0;
}
.ratte-product-card.ratte-product-complete .ratte-product-card-head{
  background:#f6fbf8;
}
.ratte-product-card.ratte-product-complete .ratte-product-number{
  color:#067647;
}
.ratte-product-card.ratte-product-incomplete .ratte-product-card-head{
  background:#fffaf0;
}
.ratte-product-card.ratte-product-awaiting select:disabled,
.ratte-product-card.ratte-product-awaiting input:disabled{
  background:#f2f4f7 !important;
  color:#98a2b3 !important;
  cursor:not-allowed;
}
.ratte-product-card.ratte-product-error{
  border-color:#d92d20 !important;
  box-shadow:0 0 0 3px rgba(217,45,32,.10) !important;
}
.ratte-add-product-wrap{
  margin-top:12px;
}
.ratte-add-product{
  width:100%;
  min-height:44px;
  border:1px dashed #8fb0d5;
  border-radius:10px;
  background:#f5f9ff;
  color:#0a2e5d;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
.ratte-add-product:hover{
  background:#edf5ff;
}
.ratte-add-product-note{
  margin-top:5px;
  color:#667085;
  font-size:10.5px;
  line-height:1.3;
  text-align:center;
}

@media (max-width:620px){
  .ratte-product-card-head{
    align-items:flex-start;
    padding:11px;
  }
  .ratte-product-card-title strong{
    font-size:15px;
  }
  .ratte-product-card-title span:last-child{
    font-size:11.5px;
  }
  .ratte-product-card-tools{
    flex-direction:column;
  }
  .ratte-product-card-tools button{
    min-width:64px;
    padding:7px 8px;
  }
  .ratte-product-card > .field,
  .ratte-product-card > .row{
    margin-left:10px;
    margin-right:10px;
  }
}