@charset "UTF-8";
/* ==========================================================================
   portal.css  |  fullsys-saas / apidian
   CSS propio y autocontenido para las pantallas publicas (login del dueno,
   login de cliente / vendedor / empleado y portal del cliente).

   NO depende de Bootstrap 3 NI de Bootstrap 4. Es plano, flexbox, y solo usa
   caracteristicas presentes en Chrome 2020+ (custom properties, ::before /
   ::after, flexbox, grid, :focus, ::placeholder, appearance).

   Paleta (la misma del dashboard del ERP):
     violeta #7b5cff   magenta #c86dd7   turquesa #2ec5d3
     verde   #4ad6a8   rojo    #ff5d8f   ambar    #ffb547
     tinta   #1a2332   etiqueta #8b96a1  borde    #e8edf3   fondo #f4f6fa

   Indice
     1.  Tokens y base
     2.  Estructura de pagina (centrada / dividida)
     3.  Franja con degradado
     4.  Tarjeta
     5.  Formularios (campos, casillas, etc.)
     6.  Botones
     7.  Enlaces
     8.  Avisos y mensajes
     9.  Barra superior
     10. Barra de navegacion (login del dueno)
     11. Encabezado del portal
     12. Franja de cifras
     13. Tabla de documentos (con su envoltura)
     14. Pastillas de estado
     15. Acciones de fila
     16. Pie del panel / paginacion
     17. Utilidades
     18. Compatibilidad con el marcado anterior (malla de Bootstrap 3)
     19. Adaptacion a pantallas menores
     20. Ingreso del dueno a dos columnas (marco guest)
     21. Bloque de contexto del ingreso (cliente / vendedor / empleado)
     22. Retoque de la etiqueta alta (.fp-etiqueta-alta a todo el ancho)
   ========================================================================== */


/* ==========================================================================
   1. TOKENS Y BASE
   ========================================================================== */

:root{
  --fp-violeta:#7b5cff;
  --fp-magenta:#c86dd7;
  --fp-turquesa:#2ec5d3;
  --fp-verde:#4ad6a8;
  --fp-rojo:#ff5d8f;
  --fp-ambar:#ffb547;
  --fp-tinta:#1a2332;
  --fp-etiqueta:#8b96a1;
  --fp-borde:#e8edf3;
  --fp-fondo:#f4f6fa;
  --fp-degradado:linear-gradient(135deg,#7b5cff 0%,#c86dd7 100%);
  --fp-radio-tarjeta:14px;
  --fp-radio-campo:9px;
  --fp-radio-boton:9px;
  --fp-sombra-tarjeta:0 24px 48px -26px rgba(26,35,50,.26), 0 2px 6px rgba(26,35,50,.04);
  --fp-sombra-boton:0 12px 24px -12px rgba(123,92,255,.95);
}

*,*::before,*::after{box-sizing:border-box}

html,body{margin:0;padding:0}

body{
  background:var(--fp-fondo);
  color:var(--fp-tinta);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,p{margin:0}
img{max-width:100%;vertical-align:middle}
a{color:var(--fp-violeta)}
input,button,select,textarea{font-family:inherit;font-size:inherit;color:inherit}


/* ==========================================================================
   2. ESTRUCTURA DE PAGINA
   ========================================================================== */

/* Un solo bloque, centrado en la ventana (login de tenant: cliente,
   vendedor, empleado y demas pantallas de una tarjeta). */
.fp-pagina{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:40px 20px;
}

.fp-pagina--dividida{
  display:block;
  min-height:0;
  padding:0;
}


/* ==========================================================================
   3. FRANJA CON DEGRADADO  (columna izquierda del login a dos columnas)
   ========================================================================== */

.fp-dividido{
  display:flex;
  align-items:stretch;
  min-height:100vh;
}

.fp-franja{
  position:relative;
  flex:0 0 46%;
  max-width:46%;
  background:var(--fp-degradado);
  color:#fff;
  padding:54px 56px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
}

/* Circulos suaves de fondo, sin ruido visual. */
.fp-franja::before,
.fp-franja::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.10);
}

.fp-franja::before{width:420px;height:420px;right:-170px;top:-140px}
.fp-franja::after{width:300px;height:300px;left:-130px;bottom:-120px;background:rgba(255,255,255,.07)}

.fp-franja > *{position:relative;z-index:1}

.fp-franja h1{
  margin:0 0 14px;
  font-size:38px;
  line-height:1.18;
  font-weight:700;
  letter-spacing:-.6px;
  max-width:12em;
}

.fp-franja-medio{margin:40px 0}
.fp-franja-medio .fp-bajada{max-width:32em}

.fp-bajada{
  margin:0 0 34px;
  font-size:15.5px;
  line-height:1.6;
  color:rgba(255,255,255,.88);
}

.fp-franja-pie{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  color:rgba(255,255,255,.78);
}

.fp-punto-verde{
  flex:0 0 7px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--fp-verde);
  box-shadow:0 0 0 3px rgba(74,214,168,.30);
}

.fp-puntos{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.fp-puntos li{display:flex;align-items:flex-start;gap:12px}

.fp-punto-icono{
  flex:0 0 26px;
  width:26px;
  height:26px;
  margin-top:1px;
  border-radius:8px;
  background:rgba(255,255,255,.20);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:700;
}

.fp-punto-texto strong{display:block;font-size:14.5px;font-weight:600}
.fp-punto-texto span{font-size:13px;color:rgba(255,255,255,.80)}

/* Columna derecha: el formulario, centrado verticalmente. */
.fp-lado-form{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 40px;
  background:var(--fp-fondo);
}


/* ==========================================================================
   4. TARJETA
   ========================================================================== */

.fp-tarjeta{
  width:100%;
  max-width:420px;
  background:#fff;
  border:1px solid var(--fp-borde);
  border-radius:var(--fp-radio-tarjeta);
  box-shadow:var(--fp-sombra-tarjeta);
  padding:34px 34px 30px;
}

.fp-tarjeta--ancha{max-width:520px}
.fp-tarjeta--plana{box-shadow:0 14px 30px -26px rgba(26,35,50,.30)}

.fp-tarjeta-cabecera{margin-bottom:24px}

.fp-tarjeta-cabecera h1,
.fp-tarjeta-cabecera h2{
  margin:0 0 6px;
  font-size:23px;
  font-weight:600;
  letter-spacing:-.3px;
}

.fp-tarjeta-cabecera p{
  font-size:13.5px;
  color:var(--fp-etiqueta);
}

.fp-tarjeta-cuerpo--separado{
  margin-top:22px;
  padding-top:22px;
  border-top:1px solid var(--fp-borde);
}

.fp-tarjeta-pie{
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid var(--fp-borde);
  text-align:center;
  font-size:12.5px;
  color:var(--fp-etiqueta);
}


/* ==========================================================================
   5. FORMULARIOS
   ========================================================================== */

.fp-campo{margin-bottom:18px}

.fp-campo:last-child{margin-bottom:0}

/* La etiqueta siempre arriba, alineada con el borde izquierdo del campo. */
.fp-campo > label,
.fp-campo > .fp-etiqueta,
.fp-etiqueta{
  display:block;
  margin:0 0 7px;
  font-size:13px;
  font-weight:600;
  line-height:1.35;
  color:#5b6675;
  text-align:left;
}

.fp-control,
input.fp-control,
select.fp-control,
textarea.fp-control{
  display:block;
  width:100%;
  height:46px;
  padding:10px 14px;
  font-size:15px;
  line-height:1.4;
  color:var(--fp-tinta);
  background:#fbfcfe;
  border:1px solid var(--fp-borde);
  border-radius:var(--fp-radio-campo);
  box-shadow:none;
  outline:0;
  appearance:none;
  -webkit-appearance:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

textarea.fp-control{height:auto;min-height:104px;resize:vertical}

.fp-control::placeholder{color:#aab3bd;opacity:1}

.fp-control:focus{
  background:#fff;
  border-color:var(--fp-violeta);
  box-shadow:0 0 0 3px rgba(123,92,255,.16);
}

.fp-control:disabled,
.fp-control[readonly]{background:#f4f6fa;color:var(--fp-etiqueta);cursor:not-allowed}

/* Selector con flecha propia (no depende de Bootstrap ni de imagenes). */
select.fp-control{
  padding-right:34px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%238b96a1' stroke-width='1.6' d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:14px;
}

/* Estado de error del campo. */
.fp-campo--error > label,
.fp-campo--error > .fp-etiqueta{color:#d63a6c}

.fp-control--error,
.fp-campo--error .fp-control{
  border-color:var(--fp-rojo);
  background:#fff7f9;
}

.fp-control--error:focus,
.fp-campo--error .fp-control:focus{
  border-color:var(--fp-rojo);
  box-shadow:0 0 0 3px rgba(255,93,143,.18);
}

/* Texto de ayuda / de error debajo del campo. */
.fp-ayuda{
  display:block;
  margin-top:6px;
  font-size:12.5px;
  line-height:1.45;
  color:var(--fp-etiqueta);
}

.fp-error{
  display:block;
  margin-top:6px;
  font-size:12.5px;
  line-height:1.45;
  font-weight:600;
  color:#d63a6c;
}

.fp-ok{
  display:block;
  margin-top:6px;
  font-size:12.5px;
  line-height:1.45;
  font-weight:600;
  color:#178f68;
}

/* Fila Recordarme / enlace. */
.fp-fila{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:2px 0 22px;
}

.fp-casilla{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0;
  font-size:13.5px;
  color:#5b6675;
  cursor:pointer;
}

.fp-casilla input[type="checkbox"],
.fp-casilla input[type="radio"]{
  flex:0 0 17px;
  width:17px;
  height:17px;
  margin:0;
  accent-color:var(--fp-violeta);
  cursor:pointer;
}

.fp-opciones{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:20px;
}

.fp-opciones .fp-casilla{align-items:flex-start;line-height:1.45}

.fp-campos-en-linea{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.fp-campos-en-linea > .fp-campo{flex:1 1 180px;margin-bottom:18px}


/* ==========================================================================
   6. BOTONES
   ========================================================================== */

.fp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:44px;
  padding:0 20px;
  border:1px solid transparent;
  border-radius:var(--fp-radio-boton);
  background:#fff;
  color:var(--fp-tinta);
  font-size:14px;
  font-weight:600;
  line-height:1;
  letter-spacing:.2px;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:filter .12s ease, transform .12s ease, box-shadow .12s ease,
             background .15s ease, border-color .15s ease, color .15s ease;
}

.fp-btn:focus{outline:0;box-shadow:0 0 0 3px rgba(123,92,255,.20)}

.fp-btn:active{transform:translateY(1px)}

/* Primario: degradado violeta -> magenta. */
.fp-btn--primario{
  border-color:transparent;
  background:var(--fp-degradado);
  color:#fff;
  box-shadow:var(--fp-sombra-boton);
}

.fp-btn--primario:hover{filter:brightness(1.05);color:#fff;text-decoration:none}
.fp-btn--primario:focus{box-shadow:0 0 0 3px rgba(123,92,255,.28)}

/* Secundario: blanco con borde. */
.fp-btn--secundario,
.fp-btn--blanco{
  border-color:var(--fp-borde);
  background:#fff;
  color:var(--fp-tinta);
}

.fp-btn--secundario:hover,
.fp-btn--blanco:hover{border-color:#d5dde7;background:#fafbfd;color:var(--fp-tinta);text-decoration:none}

/* Enlace. */
.fp-btn--enlace{
  height:auto;
  padding:0;
  border:0;
  background:transparent;
  color:var(--fp-violeta);
  font-size:13.5px;
  box-shadow:none;
}

.fp-btn--enlace:hover{color:#5f42e0;text-decoration:underline}
.fp-btn--enlace:focus{box-shadow:none;text-decoration:underline}

/* Peligro. */
.fp-btn--peligro{
  border-color:#ffc7d7;
  background:#fff;
  color:#d63a6c;
}

.fp-btn--peligro:hover{background:#fff2f6;border-color:var(--fp-rojo);color:#d63a6c;text-decoration:none}

/* Tamanos. */
.fp-btn--chico{height:36px;padding:0 15px;font-size:13px}
.fp-btn--grande{height:48px;padding:0 22px;font-size:15px}
.fp-btn--bloque{display:flex;width:100%}

/* Variante de icono (descargas de XML / PDF). */
.fp-btn--icono{
  width:36px;
  height:36px;
  padding:0;
  border-color:var(--fp-borde);
  background:#fff;
  color:#5b6675;
}

.fp-btn--icono:hover{border-color:#d5dde7;background:#fafbfd;color:var(--fp-violeta)}

.fp-acciones-form{display:inline-flex;align-items:center;gap:8px;margin:0}


/* ==========================================================================
   7. ENLACES
   ========================================================================== */

.fp-enlace{
  font-size:13.5px;
  font-weight:600;
  color:var(--fp-violeta);
  text-decoration:none;
  cursor:pointer;
}

.fp-enlace:hover{color:#5f42e0;text-decoration:underline}


/* ==========================================================================
   8. AVISOS Y MENSAJES
   ========================================================================== */

.fp-aviso{
  position:relative;
  margin:0 0 20px;
  padding:13px 16px 13px 18px;
  border:1px solid var(--fp-borde);
  border-left:4px solid var(--fp-etiqueta);
  border-radius:10px;
  background:#f7f9fc;
  font-size:13.5px;
  line-height:1.5;
  color:#4a5568;
}

.fp-aviso strong{font-weight:700}
.fp-aviso > :last-child{margin-bottom:0}

.fp-aviso--error{background:#fff7f9;border-color:#ffe1ea;border-left-color:var(--fp-rojo);color:#b32e58}
.fp-aviso--exito{background:#f1fdf8;border-color:#d6f6e9;border-left-color:var(--fp-verde);color:#12795a}
.fp-aviso--aviso{background:#fffaf0;border-color:#ffeac9;border-left-color:var(--fp-ambar);color:#946008}
.fp-aviso--info {background:#f1fbfd;border-color:#d3f2f7;border-left-color:var(--fp-turquesa);color:#137483}

.fp-aviso-titulo{display:block;margin-bottom:3px;font-size:13.5px;font-weight:700}

.fp-aviso ul{margin:6px 0 0;padding-left:20px}
.fp-aviso ul:last-child{margin-bottom:0}


/* ==========================================================================
   9. BARRA SUPERIOR  (cabecera blanca con marca / usuario / salir)
   ========================================================================== */

.fp-barra{
  display:flex;
  align-items:center;
  min-height:66px;
  padding:10px 32px;
  background:#fff;
  border-bottom:1px solid var(--fp-borde);
}

.fp-barra-derecha{margin-left:auto;display:flex;align-items:center;gap:14px}

.fp-marca{display:flex;align-items:center;gap:11px;min-width:0}

.fp-marca-cuadro{
  flex:0 0 36px;
  width:36px;
  height:36px;
  border-radius:11px;
  background:var(--fp-degradado);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:700;
  box-shadow:0 6px 14px -6px rgba(123,92,255,.9);
}

.fp-marca-texto{
  display:block;
  font-size:15.5px;
  font-weight:600;
  letter-spacing:.2px;
  line-height:1.2;
  color:var(--fp-tinta);
  text-decoration:none;
  white-space:nowrap;
}

.fp-marca-texto:hover{color:var(--fp-tinta);text-decoration:none}

.fp-marca-texto small{
  display:block;
  font-size:11.5px;
  font-weight:400;
  color:var(--fp-etiqueta);
  letter-spacing:.3px;
}

/* La marca sobre la franja con degradado. */
.fp-franja .fp-marca-cuadro{
  flex:0 0 40px;
  width:40px;
  height:40px;
  border-radius:12px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:none;
  font-size:18px;
}

.fp-franja .fp-marca-texto{color:#fff;font-size:16.5px}
.fp-franja .fp-marca-texto:hover{color:#fff}
.fp-franja .fp-marca-texto small{color:#fff;opacity:.85;font-size:12px}

/* Usuario a la derecha. */
.fp-usuario{display:flex;align-items:center;gap:10px;text-align:right}

/* Cuidado con las utilidades de texto: dentro de un contenedor con
   text-align:right, "display:block" a secas no basta para que las lineas
   queden a la derecha. */
.fp-usuario-nombre,
.fp-usuario-dato{display:block}

.fp-usuario-nombre{font-size:13.5px;font-weight:600;line-height:1.25}
.fp-usuario-dato{font-size:11.5px;color:var(--fp-etiqueta);line-height:1.25}

/* Senal de que el bloque de sesion despliega un menu. */
.fp-barra-nav .fp-usuario::after{
  content:"";
  width:7px;
  height:7px;
  margin-left:2px;
  border-right:1.6px solid var(--fp-etiqueta);
  border-bottom:1.6px solid var(--fp-etiqueta);
  transform:rotate(45deg) translateY(-1px);
}

.fp-avatar{
  flex:0 0 36px;
  width:36px;
  height:36px;
  border-radius:50%;
  background:#eef1fb;
  border:1px solid #e0e5f7;
  color:var(--fp-violeta);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:700;
  letter-spacing:.4px;
}

.fp-salir{
  height:38px;
  padding:0 16px;
  border:1px solid var(--fp-borde);
  border-radius:var(--fp-radio-boton);
  background:#fff;
  color:var(--fp-tinta);
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  transition:border-color .15s ease, background .15s ease;
}

.fp-salir:hover{border-color:#d5dde7;background:#fafbfd;color:var(--fp-tinta);text-decoration:none}


/* ==========================================================================
   10. BARRA DE NAVEGACION  (login del dueno: marca + sesion)
   ========================================================================== */

.fp-barra-nav a{text-decoration:none}

/* El desplegable se abre con la clase fp-abierto, que pone el script del
   marco. El selector NO es de hijo directo: el menu va dentro del <li>. */
.fp-abierto .fp-menu{display:block}

.fp-menu{
  display:none;
  position:absolute;
  right:0;
  top:100%;
  z-index:60;
  min-width:190px;
  margin-top:10px;
  padding:7px;
  background:#fff;
  border:1px solid var(--fp-borde);
  border-radius:12px;
  box-shadow:0 18px 36px -18px rgba(26,35,50,.35);
}

.fp-menu-item{
  display:block;
  padding:9px 12px;
  border-radius:8px;
  font-size:13.5px;
  font-weight:600;
  color:#4a5568;
}

.fp-menu-item:hover{background:#f5f3ff;color:var(--fp-violeta);text-decoration:none}

.fp-menu-sep{height:1px;margin:6px 4px;background:var(--fp-borde)}

/* El menu se ancla a la entrada de sesion, no a la barra entera. */
.fp-sesion{margin:0;padding:0;list-style:none}
.fp-sesion > li{position:relative;margin:0;padding:0;list-style:none}

.fp-sesion-pie{margin:0;padding:0;list-style:none}


/* ==========================================================================
   11. ENCABEZADO DEL PORTAL
   ========================================================================== */

.fp-hoja{
  width:100%;
  max-width:1320px;
  margin:0 auto;
  padding:30px 32px 44px;
}

.fp-encabezado{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:22px;
}

.fp-etiqueta-alta{
  display:inline-block;
  margin-bottom:8px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:1.3px;
  text-transform:uppercase;
  color:var(--fp-violeta);
}

.fp-titulo{
  margin:0 0 5px;
  font-size:25px;
  font-weight:600;
  letter-spacing:-.35px;
  line-height:1.25;
}

.fp-subtitulo{font-size:13.5px;color:var(--fp-etiqueta)}
.fp-subtitulo strong{color:#5b6675;font-weight:600}

.fp-encabezado-acciones{display:flex;align-items:center;gap:10px;flex-wrap:wrap}


/* ==========================================================================
   12. FRANJA DE CIFRAS
   ========================================================================== */

.fp-cifras{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin-bottom:24px;
}

.fp-cifra{
  position:relative;
  background:#fff;
  border:1px solid var(--fp-borde);
  border-radius:var(--fp-radio-tarjeta);
  padding:18px 20px 16px 22px;
  box-shadow:0 10px 24px -20px rgba(26,35,50,.35);
  overflow:hidden;
}

/* Filete de color a la izquierda de cada cifra. */
.fp-cifra::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:var(--fp-violeta);
}

.fp-cifra--violeta::before{background:var(--fp-degradado)}
.fp-cifra--ambar::before{background:var(--fp-ambar)}
.fp-cifra--verde::before{background:var(--fp-verde)}
.fp-cifra--turquesa::before{background:var(--fp-turquesa)}
.fp-cifra--rojo::before{background:var(--fp-rojo)}

.fp-cifra-etiqueta{
  margin-bottom:6px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.2px;
  color:var(--fp-etiqueta);
}

.fp-cifra-valor{
  font-size:26px;
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.6px;
  color:var(--fp-tinta);
}

.fp-cifra-pie{margin-top:5px;font-size:11.5px;color:var(--fp-etiqueta)}
.fp-cifra-pie--ambar{color:#c98415}
.fp-cifra-pie--verde{color:#22a97c}
.fp-cifra-pie--rojo{color:#d63a6c}


/* ==========================================================================
   13. TABLA DE DOCUMENTOS
   ========================================================================== */

/* Envoltura: la tabla puede desplazarse en horizontal en pantallas menores. */
.fp-tabla-envoltura{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.fp-tabla{
  width:100%;
  min-width:880px;
  border-collapse:collapse;
  table-layout:fixed;      /* anchos en porcentaje: las columnas no se descuadran */
  font-size:14px;
}

.fp-tabla > thead > tr > th{
  padding:12px 16px;
  background:#fafbfd;
  border-bottom:1px solid var(--fp-borde);
  font-size:11.5px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.7px;
  text-transform:uppercase;
  color:var(--fp-etiqueta);
  text-align:left;
  white-space:nowrap;
}

.fp-tabla > tbody > tr > td{
  padding:15px 16px;
  border-bottom:1px solid var(--fp-borde);
  font-size:14px;
  color:var(--fp-tinta);
  vertical-align:middle;
  overflow-wrap:break-word;
  word-wrap:break-word;
}

.fp-tabla > tbody > tr:last-child > td{border-bottom:0}
.fp-tabla > tbody > tr:hover{background:#fafbff}

.fp-tabla--compacta > thead > tr > th{padding:10px 12px}
.fp-tabla--compacta > tbody > tr > td{padding:11px 12px;font-size:13.5px}

.fp-tabla-ancho{min-width:1080px}

/* Anchos de columna en porcentaje (deben sumar 100). */
.fp-tabla .fp-col-fecha{width:9%}
.fp-tabla .fp-col-prefijo{width:6.5%}
.fp-tabla .fp-col-numero{width:7.5%}
.fp-tabla .fp-col-emisor{width:25%}
.fp-tabla .fp-col-valor{width:15%}
.fp-tabla .fp-col-estado{width:14%}
.fp-tabla .fp-col-acciones{width:23%}

/* IMPORTANTE: la cabecera ACCIONES va a la derecha, igual que los botones.
   El selector se mantiene especifico (thead th) para ganarle al text-align
   heredado de la regla general de cabeceras. */
.fp-tabla > thead > tr > th.fp-col-acciones,
.fp-tabla > thead > tr > th.fp-derecha{text-align:right}

.fp-tabla > thead > tr > th.fp-centro,
.fp-tabla > tbody > tr > td.fp-centro{text-align:center}

/* Importes y numeros siempre a la derecha. */
.fp-tabla > tbody > tr > td.fp-col-valor,
.fp-tabla > tbody > tr > td.fp-derecha,
.fp-tabla > tbody > tr > td.fp-numero{text-align:right}

.fp-tabla .fp-col-valor{white-space:nowrap}

.fp-valor{
  font-weight:600;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.fp-valor--negativo{color:var(--fp-rojo)}

.fp-numero{font-weight:600;font-variant-numeric:tabular-nums}
.fp-fecha{color:#5b6675;white-space:nowrap}

.fp-prefijo{
  display:inline-block;
  padding:3px 9px;
  border-radius:6px;
  background:#eef1fb;
  color:#4a5568;
  font-size:12px;
  font-weight:700;
  letter-spacing:.4px;
}

.fp-principal{font-weight:600;line-height:1.3}
.fp-secundario{font-size:11.5px;line-height:1.3;color:var(--fp-etiqueta)}

.fp-vacio{
  padding:34px 20px;
  text-align:center;
  font-size:14px;
  color:var(--fp-etiqueta);
}


/* ==========================================================================
   14. PASTILLAS DE ESTADO
   ========================================================================== */

.fp-estado{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 11px;
  border-radius:20px;
  font-size:12.5px;
  font-weight:600;
  line-height:1.3;
  white-space:nowrap;
}

.fp-estado::before{
  content:"";
  flex:0 0 7px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:currentColor;
}

.fp-estado--pendiente{background:#fff5e5;color:#b9760c}
.fp-estado--aceptado {background:#e6faf2;color:#178f68}
.fp-estado--rechazado{background:#ffeef3;color:#d63a6c}
.fp-estado--enviado  {background:#eef1fb;color:#4a5568}

.fp-etiqueta-estado{
  display:inline-block;
  padding:3px 10px;
  border-radius:20px;
  font-size:12px;
  font-weight:600;
  line-height:1.5;
}

.fp-etiqueta-estado--pendiente{background:#fff5e5;color:#b9760c}
.fp-etiqueta-estado--aceptado {background:#e6faf2;color:#178f68}
.fp-etiqueta-estado--rechazado{background:#ffeef3;color:#d63a6c}


/* ==========================================================================
   15. ACCIONES DE FILA
   ========================================================================== */

.fp-acciones{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}


/* ==========================================================================
   16. PANEL, PIE DEL PANEL Y PAGINACION
   ========================================================================== */

.fp-panel{
  background:#fff;
  border:1px solid var(--fp-borde);
  border-radius:var(--fp-radio-tarjeta);
  box-shadow:0 14px 30px -26px rgba(26,35,50,.4);
  overflow:hidden;
}

.fp-panel-cabecera{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 22px;
  border-bottom:1px solid var(--fp-borde);
}

.fp-panel-cabecera h2{font-size:16px;font-weight:600;letter-spacing:-.1px}

.fp-panel-cabecera .fp-cuenta{
  padding:3px 11px;
  border-radius:20px;
  background:#f2efff;
  color:var(--fp-violeta);
  font-size:12.5px;
  font-weight:600;
}

.fp-filtros{margin-left:auto;display:flex;align-items:center;gap:10px}

.fp-panel-pie{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 22px;
  border-top:1px solid var(--fp-borde);
  background:#fafbfd;
  font-size:12.5px;
  color:var(--fp-etiqueta);
}

/* Paginacion. OJO con los nombres: "fp-pagina" ya es la pantalla completa,
   asi que la paginacion usa "fp-paginacion" para no chocar. */
.fp-paginacion{display:flex;align-items:center;gap:6px;flex:0 0 auto}

.fp-paginacion-item{
  flex:0 0 auto;
  min-width:32px;
  height:32px;
  padding:0 8px;
  border:1px solid var(--fp-borde);
  border-radius:8px;
  background:#fff;
  color:#5b6675;
  font-size:12.5px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  text-decoration:none;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}

.fp-paginacion-item:hover{border-color:#d5dde7;background:#fafbfd;text-decoration:none}
.fp-paginacion-item--activa{background:var(--fp-degradado);border-color:transparent;color:#fff}
.fp-paginacion-item--activa:hover{color:#fff}

/* Alias para el marcado anterior, acotado al pie del panel. */
.fp-panel-pie .fp-paginas{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.fp-panel-pie .fp-pagina{
  flex:0 0 auto;
  min-width:32px;
  height:32px;
  padding:0 8px;
  border:1px solid var(--fp-borde);
  border-radius:8px;
  background:#fff;
  color:#5b6675;
  font-size:12.5px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  text-decoration:none;
}

.fp-panel-pie .fp-pagina.activa{background:var(--fp-degradado);border-color:transparent;color:#fff}

.fp-nota{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:16px;
  font-size:12.5px;
  line-height:1.5;
  color:var(--fp-etiqueta);
}

.fp-nota strong{color:#5b6675}


/* ==========================================================================
   17. UTILIDADES
   ========================================================================== */

.fp-derecha{text-align:right}
.fp-centro{text-align:center}
.fp-izquierda{text-align:left}
.fp-sin-ajuste{white-space:nowrap}
.fp-suave{color:var(--fp-etiqueta)}
.fp-fuerte{font-weight:600}
.fp-numeros{font-variant-numeric:tabular-nums}
.fp-mt-0{margin-top:0}
.fp-mt-16{margin-top:16px}
.fp-mt-24{margin-top:24px}
.fp-mb-0{margin-bottom:0}
.fp-mb-16{margin-bottom:16px}
.fp-mb-24{margin-bottom:24px}
.fp-separador{
  display:flex;
  align-items:center;
  gap:12px;
  margin:22px 0 16px;
  font-size:12px;
  color:var(--fp-etiqueta);
}

.fp-separador::before,
.fp-separador::after{content:"";flex:1;height:1px;background:var(--fp-borde)}

.fp-oculto{display:none !important}


/* ==========================================================================
   18. COMPATIBILIDAD CON EL MARCADO ANTERIOR (malla de Bootstrap 3)

   Estas reglas NO son Bootstrap: son la minima rejilla propia que hace que el
   marcado que ya existe en las vistas (container / row / col-md-* /
   col-md-offset-* / form-horizontal / panel / form-group / form-control /
   btn / help-block / has-error) siga cuadrando exactamente igual, ahora sin
   cargar Bootstrap. Toda regla va precedida de <html class="fp-legado">, que
   solo ponen estos dos marcos; las pantallas nuevas usan las clases fp-*.
   ========================================================================== */

/* --- Caja de contencion --- */
.fp-legado .container{
  width:100%;
  max-width:1140px;
  margin:0 auto;
  padding:0 15px;
}

.fp-legado .row{margin-left:-15px;margin-right:-15px}
.fp-legado .row::after{content:"";display:table;clear:both}

.fp-legado [class*="col-"]{
  float:left;
  min-height:1px;
  padding-left:15px;
  padding-right:15px;
}

.fp-legado .col-xs-8{width:66.66666667%}
.fp-legado .col-xs-offset-2{margin-left:16.66666667%}

@media (min-width:992px){
  .fp-legado .col-md-4{width:33.33333333%}
  .fp-legado .col-md-6{width:50%}
  .fp-legado .col-md-8{width:66.66666667%}
  .fp-legado .col-md-10{width:83.33333333%}
  .fp-legado .col-md-offset-2{margin-left:16.66666667%}
  .fp-legado .col-md-offset-4{margin-left:33.33333333%}
  .fp-legado .col-md-offset-5{margin-left:41.66666667%}
}

@media (max-width:991px){
  .fp-legado [class*="col-"]{float:none;width:auto;margin-left:0}
}

/* --- Panel --- */
.fp-legado .panel{
  margin-bottom:22px;
  background:#fff;
  border:1px solid var(--fp-borde);
  border-radius:var(--fp-radio-tarjeta);
  box-shadow:0 14px 30px -26px rgba(26,35,50,.4);
  overflow:hidden;
}

.fp-legado .panel-heading{
  padding:18px 24px;
  border-bottom:1px solid var(--fp-borde);
  font-size:16px;
  font-weight:600;
  letter-spacing:-.1px;
  color:var(--fp-tinta);
}

.fp-legado .panel-heading h1,
.fp-legado .panel-heading h2,
.fp-legado .panel-heading h3{margin:0;font-size:16px;font-weight:600;letter-spacing:-.1px}

.fp-legado .panel-body{padding:24px}
.fp-legado .panel-body::after{content:"";display:table;clear:both}
.fp-legado .panel-footer{
  padding:14px 24px;
  border-top:1px solid var(--fp-borde);
  background:#fafbfd;
  font-size:12.5px;
  color:var(--fp-etiqueta);
}

/* --- Formulario horizontal --- */
.fp-legado .form-group{margin-bottom:18px}
.fp-legado .form-group::after{content:"";display:table;clear:both}
.fp-legado .form-group:last-child{margin-bottom:0}

.fp-legado .control-label{
  display:block;
  padding-top:13px;
  margin-bottom:0;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  color:#5b6675;
  text-align:right;
}

.fp-legado .form-control{
  display:block;
  width:100%;
  height:46px;
  padding:10px 14px;
  font-size:15px;
  line-height:1.4;
  color:var(--fp-tinta);
  background:#fbfcfe;
  border:1px solid var(--fp-borde);
  border-radius:var(--fp-radio-campo);
  box-shadow:none;
  outline:0;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.fp-legado textarea.form-control{height:auto;min-height:104px}
.fp-legado select.form-control{padding-right:34px;appearance:none;-webkit-appearance:none}
.fp-legado .form-control:focus{
  background:#fff;
  border-color:var(--fp-violeta);
  box-shadow:0 0 0 3px rgba(123,92,255,.16);
}

.fp-legado .form-control::placeholder{color:#aab3bd;opacity:1}
.fp-legado .form-control[disabled],
.fp-legado .form-control[readonly]{background:#f4f6fa;color:var(--fp-etiqueta)}

.fp-legado .has-error .form-control,
.fp-legado .form-control.is-invalid{
  border-color:var(--fp-rojo);
  background:#fff7f9;
}

.fp-legado .has-error .form-control:focus,
.fp-legado .form-control.is-invalid:focus{box-shadow:0 0 0 3px rgba(255,93,143,.18)}

.fp-legado .has-error .control-label,
.fp-legado .has-error .help-block,
.fp-legado .help-block,
.fp-legado .invalid-feedback{
  color:#d63a6c;
}

.fp-legado .help-block,
.fp-legado .invalid-feedback{
  display:block;
  margin:6px 0 0;
  font-size:12.5px;
  line-height:1.45;
}

.fp-legado .checkbox{margin:6px 0 0}
.fp-legado .checkbox > label{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:13.5px;
  color:#5b6675;
  cursor:pointer;
}

.fp-legado .checkbox input[type="checkbox"]{
  width:17px;
  height:17px;
  margin:0;
  accent-color:var(--fp-violeta);
}

/* --- Botones del marcado anterior --- */
.fp-legado .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:44px;
  padding:0 20px;
  border:1px solid transparent;
  border-radius:var(--fp-radio-boton);
  background:#fff;
  color:var(--fp-tinta);
  font-size:14px;
  font-weight:600;
  line-height:1;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:filter .12s ease, transform .12s ease, box-shadow .12s ease,
             background .15s ease, border-color .15s ease, color .15s ease;
}

.fp-legado .btn:active{transform:translateY(1px)}

.fp-legado .btn-primary{
  border-color:transparent;
  background:var(--fp-degradado);
  color:#fff;
  box-shadow:var(--fp-sombra-boton);
}

.fp-legado .btn-primary:hover,
.fp-legado .btn-primary:focus{filter:brightness(1.05);color:#fff;text-decoration:none}

.fp-legado .btn-default,
.fp-legado .btn-secondary{
  border-color:var(--fp-borde);
  background:#fff;
  color:var(--fp-tinta);
}

.fp-legado .btn-default:hover,
.fp-legado .btn-secondary:hover{border-color:#d5dde7;background:#fafbfd;color:var(--fp-tinta)}

.fp-legado .btn-link{
  height:auto;
  padding:0;
  border:0;
  background:transparent;
  color:var(--fp-violeta);
  font-size:13.5px;
  font-weight:600;
  box-shadow:none;
}

.fp-legado .btn-link:hover{color:#5f42e0;text-decoration:underline}

/* Un boton de icono (los <button class="fa fa-download">) conserva su tamano */
.fp-legado button[class*="fa-"]{
  width:36px;
  height:36px;
  min-width:36px;
  padding:0;
  border:1px solid var(--fp-borde);
  border-radius:8px;
  background:#fff;
  color:#5b6675;
  font-size:14px;
  box-shadow:none;
}

.fp-legado button[class*="fa-"]:hover{border-color:#d5dde7;background:#fafbfd;color:var(--fp-violeta)}

.fp-legado .form-control.btn{width:auto}

/* Aviso de exito / error de Laravel dentro del marcado anterior */
.fp-legado .alert{
  margin-bottom:20px;
  padding:13px 16px;
  border:1px solid var(--fp-borde);
  border-left:4px solid var(--fp-etiqueta);
  border-radius:10px;
  background:#f7f9fc;
  font-size:13.5px;
  color:#4a5568;
}

.fp-legado .alert-success{background:#f1fdf8;border-left-color:var(--fp-verde);color:#12795a}

/* Las tablas de documentos de las pantallas del ERP (thead-dark / table-sm)
   quedan legibles aunque no traigan sus propias clases de estilo. */
.fp-legado table.table{
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
}

.fp-legado table.table > thead > tr > th,
.fp-legado table.table > tbody > tr > td{
  padding:9px 12px;
  border-bottom:1px solid var(--fp-borde);
  text-align:left;
  vertical-align:middle;
}

.fp-legado table.table > thead > tr > th{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--fp-etiqueta);
  background:#fafbfd;
}

.fp-legado table.table > tbody > tr:hover{background:#fafbff}

/* La tarjeta en el marcado anterior: el encabezado hace de titulo de tarjeta */
.fp-legado .panel.panel-default > .panel-heading:first-child{
  background:#fff;
  border-bottom:1px solid var(--fp-borde);
}

/* Pantallas de una sola tarjeta: se centran en la ventana y el panel se lee
   como una tarjeta, no como un panel pegado al borde superior.
   El encabezado del panel (Ingresar, Ingreso para adquirientes...) pasa a ser
   el titulo de la tarjeta: sin fondo ni borde inferior, rematado con filete. */
.fp-legado .fp-contenido{width:100%}

.fp-legado .fp-contenido > .container{max-width:520px;margin:0 auto;padding:0}

/* La fila no aporta nada cuando la tarjeta ocupa todo el ancho: si conserva
   sus margenes negativos, el panel se sale 15px por cada lado y queda
   descuadrado. */
.fp-legado .fp-contenido > .container > .row{margin-left:0;margin-right:0}

.fp-legado .fp-contenido .col-md-8,
.fp-legado .fp-contenido .col-md-10{
  width:100%;
  float:none;
  margin-left:0;
  padding:0;
}

.fp-legado .fp-contenido .panel{
  position:relative;
  margin-bottom:0;
  padding:34px 34px 30px;
  box-shadow:var(--fp-sombra-tarjeta);
  overflow:hidden;
}

.fp-legado .fp-contenido .panel-body{padding:0}

.fp-legado .fp-contenido .panel-body::after,
.fp-legado .fp-contenido .panel-body::before{display:none}

.fp-legado .fp-contenido .panel-heading{
  position:relative;
  padding:0 0 18px;
  border-bottom:0;
  background:#fff;
  font-size:23px;
  font-weight:600;
  letter-spacing:-.3px;
}

/* Filete con degradado en el borde superior de la tarjeta. */
.fp-legado .fp-contenido .panel-heading::before{
  content:"";
  position:absolute;
  left:-34px;
  top:-34px;
  right:-34px;
  height:4px;
  background:var(--fp-degradado);
}

/* --- La tarjeta reescribe el formulario horizontal del marcado anterior ---
   La etiqueta pasa arriba y el campo ocupa todo el ancho: es el lenguaje de
   la maqueta, y evita que "Direccion de Correo" se parta en dos lineas
   contra un campo de 210px. */
.fp-legado .fp-contenido .form-horizontal .form-group,
.fp-legado .fp-contenido .form-horizontal [class*="col-"]{
  width:auto;
  float:none;
  margin-left:0;
  padding-left:0;
  padding-right:0;
}

.fp-legado .fp-contenido .form-horizontal .form-group{
  display:block;
  margin-bottom:20px;
}

.fp-legado .fp-contenido .form-horizontal .form-group::after{display:none}

.fp-legado .fp-contenido .form-horizontal .control-label{
  display:block;
  padding-top:0;
  margin-bottom:7px;
  font-size:13px;
  line-height:1.35;
  text-align:left;
}

.fp-legado .fp-contenido .form-horizontal .form-control{width:100%}

.fp-legado .fp-contenido .form-horizontal .checkbox{margin:2px 0 0}

.fp-legado .fp-contenido .form-horizontal .btn{margin-top:2px}

.fp-legado .fp-contenido .form-horizontal .btn-link{margin:0 0 0 14px}

/* Las etiquetas sueltas y los radios de "Aceptar ó Rechazar Documento" */
.fp-legado .fp-contenido .center-block{
  display:block;
  width:auto;
  margin:0 0 10px;
  font-size:13.5px;
  line-height:1.55;
  color:#5b6675;
}

.fp-legado .fp-contenido .panel-body > form{margin-bottom:26px;clear:both}
.fp-legado .fp-contenido .panel-body > form:last-child{margin-bottom:0}
.fp-legado .fp-contenido .panel-body > form::after{content:"";display:table;clear:both}

/* Radios de motivo de rechazo, alineados como una lista de opciones. */
.fp-legado .fp-contenido input[type="radio"]{
  width:17px;
  height:17px;
  margin:0 7px 0 0;
  vertical-align:middle;
  accent-color:var(--fp-violeta);
}

/* El motivo de rechazo es una lista: cada opcion con aire suficiente para
   pulsarla sin equivocarse. */
.fp-legado .fp-contenido .panel-body input[type="radio"]{margin-top:12px}
.fp-legado .fp-contenido .panel-body input[type="radio"] + br{
  display:block;
  content:"";
  margin-bottom:10px;
}

/* Las pantallas de texto largo (acuse de recibo, rechazo) agradecen algo mas
   de ancho: asi el parrafo no queda en columnas de 30 caracteres. */
.fp-legado .fp-contenido .panel-body .center-block{max-width:46em}

.fp-legado .fp-contenido > .container:has(.panel-body > form + form){max-width:620px}

/* El login del dueno es a dos columnas: el bloque de contenido ES la
   columna derecha, y la tarjeta se centra en ella. La caja de contencion
   crece para que el centrado vertical disponga de todo el alto. */
.fp-legado .fp-contenido--dividido{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:48px 40px;
  background:var(--fp-fondo);
}

.fp-legado .fp-contenido--dividido::after,
.fp-legado .fp-contenido--dividido::before{display:none}

/* La caja de contencion crece y centra su contenido en vertical: asi la
   tarjeta queda centrada en la columna, y no pegada arriba. */
.fp-legado .fp-contenido--dividido > .container{
  flex:1 1 auto;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Variante a dos columnas dirigida desde el marco: la franja con degradado
   cubre toda la ventana (tambien por debajo de la barra de navegacion) y la
   seccion de contenido ocupa el 54% restante con la tarjeta centrada. */
.fp-pagina--dividida{
  position:relative;
  background:var(--fp-fondo);
}

.fp-pagina--dividida > .fp-franja{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  z-index:0;
}

.fp-pagina--dividida > .fp-contenido{
  margin-left:46%;
  min-height:100vh;
  box-sizing:border-box;
}

/* La barra de navegacion se superpone al degradado en vez de empujarlo: si
   ocupara espacio, la pagina mediria 100vh mas el alto de la barra y
   apareceria una barra de desplazamiento de mas. Se lee como una franja
   blanca pegada al borde superior, con el degradado por detras. */
.fp-barra-nav{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:50;
}

/* La marca de la franja arranca por debajo de la barra. */
.fp-pagina--dividida > .fp-franja{padding-top:96px}

/* Si la franja no esta, el contenido no se desplaza: la tarjeta queda
   centrada en la ventana. */
.fp-pagina--dividida > .fp-contenido:first-child{margin-left:0}


/* ==========================================================================
   19. ADAPTACION A PANTALLAS MENORES
   ========================================================================== */

@media (max-width:1100px){
  .fp-franja{flex-basis:42%;max-width:42%;padding:44px 40px}
  .fp-franja h1{font-size:31px}
  .fp-cifras{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Una sola columna: la franja arriba (mas baja) y el formulario debajo. */
@media (max-width:991px){
  .fp-dividido{
    flex-direction:column;
    min-height:0;
  }

  .fp-franja{
    flex:0 0 auto;
    max-width:none;
    width:100%;
    padding:30px 24px 34px;
  }

  .fp-franja::before{width:260px;height:260px;right:-120px;top:-110px}
  .fp-franja::after{display:none}

  .fp-franja h1{font-size:26px;max-width:none}
  .fp-franja-medio{margin:26px 0 0}
  .fp-franja-medio .fp-bajada{margin-bottom:0;font-size:14.5px}
  .fp-puntos,
  .fp-franja-pie{display:none}

  .fp-lado-form{padding:28px 18px 40px}

  .fp-legado .fp-contenido--dividido{padding:28px 18px 40px}

  /* El login a dos columnas pasa a una sola: sin franja lateral y la barra
     de navegacion vuelve a ocupar su sitio en el flujo. */
  .fp-pagina--dividida > .fp-franja{display:none}
  .fp-pagina--dividida > .fp-contenido{margin-left:0;min-height:0}
  .fp-barra-nav{position:relative;left:auto;right:auto}

  /* La tabla se desplaza en horizontal; el ancho minimo se mantiene. */
  .fp-tabla{min-width:880px}
  .fp-tabla-ancho{min-width:1080px}

  .fp-filtros{margin-left:0;width:100%}

  .fp-barra{flex-wrap:wrap;gap:10px;padding:12px 18px}
}

@media (max-width:820px){
  .fp-franja{padding:26px 20px 30px}
  .fp-franja h1{font-size:23px}
  .fp-lado-form{padding:24px 16px 36px}
  .fp-tarjeta{padding:26px 22px 24px}
  .fp-tarjeta-cabecera h1,
  .fp-tarjeta-cabecera h2{font-size:21px}
  .fp-hoja{padding:20px 18px 34px}
  .fp-encabezado{flex-direction:column;align-items:flex-start}
  .fp-cifras{grid-template-columns:1fr}
  .fp-panel-cabecera{flex-wrap:wrap}
  .fp-derecha-movil{text-align:left}
  .fp-fila{flex-direction:column;align-items:flex-start;gap:12px}
  .fp-acciones{justify-content:flex-start}
  .fp-tabla > thead > tr > th.fp-col-acciones{text-align:left}
  .fp-panel-pie{flex-direction:column;align-items:flex-start}
}

@media (max-width:520px){
  .fp-pagina{padding:26px 14px}
  .fp-barra{padding:12px 14px}
  .fp-barra-derecha{gap:10px}
  .fp-campos-en-linea > .fp-campo{flex-basis:100%}
}

/* Sin Font Awesome la pagina se ve igual: los iconos son un adorno. */
.fp-sin-iconos i{display:none}


/* ==========================================================================
   20. INGRESO DEL DUENO A DOS COLUMNAS

   La vista (auth/login y auth/register) entrega la franja con degradado por
   @section('aside') y la tarjeta por @section('content'). El marco deja los
   dos bloques como hijos directos de #app, asi que es #app el que hace de
   fila flexible: la franja ocupa el 46% y la tarjeta se centra en el resto
   (.fp-contenido--dividido ya trae flex:1 1 auto y su centrado vertical).

   El selector va con :has() para que solo actue cuando la pantalla trae
   franja: las demas pantallas del marco guest siguen a una sola columna.
   ========================================================================== */

#app:has(> .fp-franja){
  position:relative;          /* ancla la barra de navegacion, que es absoluta */
  display:flex;
  align-items:stretch;
  min-height:100vh;
  background:var(--fp-fondo);
}

/* La barra de navegacion se superpone al degradado: la franja le reserva
   sitio arriba para que la marca no quede debajo. */
#app:has(> .fp-franja) > .fp-franja{padding-top:96px}

@media (max-width:991px){
  /* Una sola columna: la franja queda como banda corta arriba y la tarjeta
     debajo. La barra de navegacion vuelve al flujo, asi que la franja ya no
     tiene que reservarle sitio. */
  #app:has(> .fp-franja){flex-direction:column;min-height:0}
  #app:has(> .fp-franja) > .fp-franja{padding-top:30px}
}


/* ==========================================================================
   21. BLOQUE DE CONTEXTO DEL INGRESO

   Los ingresos de cliente, vendedor y empleado NO piden correo: el
   identificador viaja en la URL. Este bloque va encima del campo y dice a
   que documentos se esta entrando (los NIT que la vista recibe).
   ========================================================================== */

.fp-contexto{
  margin:0 0 20px;
  padding:14px 16px;
  border:1px solid var(--fp-borde);
  border-left:4px solid var(--fp-violeta);
  border-radius:11px;
  background:#f7f9fc;
}

.fp-contexto-texto{min-width:0}

.fp-contexto-etiqueta{
  display:block;
  margin-bottom:3px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:1.1px;
  line-height:1.4;
  text-transform:uppercase;
  color:var(--fp-etiqueta);
}

.fp-contexto-nombre{
  display:block;
  font-size:14.5px;
  font-weight:600;
  line-height:1.35;
  color:var(--fp-tinta);
  overflow-wrap:break-word;
  word-wrap:break-word;
}

.fp-contexto-dato{
  display:block;
  margin-top:2px;
  font-size:12.5px;
  line-height:1.45;
  color:var(--fp-etiqueta);
}

@media (max-width:520px){
  .fp-contexto{padding:12px 14px}
}


/* ==========================================================================
   22. RETOQUE DE LA ETIQUETA ALTA

   .fp-etiqueta-alta nace con display:inline-block, asi que se encoge al ancho
   del texto y su margen inferior deja un hueco: al ir dentro de una tarjeta o
   de un aviso se le ve el canto. Pasa a ocupar todo el ancho (el margen
   inferior sigue mandando) y su interlineado se aprieta para que quede
   separada del parrafo que lleva debajo.
   ========================================================================== */

.fp-etiqueta-alta{display:block;line-height:1.35}


/* ==========================================================================
   23. ACUSE DE RECIBO DEL DOCUMENTO ELECTRONICO  (acceptrejectdocument)

   Pantalla de una sola tarjeta: identidad del documento, aviso de que la
   respuesta es irrevocable, y las dos familias de respuesta (aceptar y
   rechazar) claramente separadas.
   ========================================================================== */

/* Tarjeta ancha: en ella conviven la ficha del documento y el texto legal de
   cada evento DIAN. */
.fp-tarjeta--documento{
  max-width:720px;
  padding:34px 38px 30px;
}

/* Centrado que no corta la parte de arriba. Los margenes automaticos se
   reparten el hueco sobrante cuando la tarjeta es mas baja que la ventana y,
   cuando es mas alta, la dejan empezar arriba y la pagina se desplaza con
   normalidad (con justify-content:center se perderia el encabezado). */
.fp-pagina > .fp-tarjeta--documento{margin-top:auto;margin-bottom:auto}

/* --- Ficha del documento --- */
.fp-doc{
  margin-bottom:20px;
  border:1px solid var(--fp-borde);
  border-radius:12px;
  background:#fbfcfe;
  overflow:hidden;
}

.fp-doc-cabecera{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 18px;
  border-bottom:1px solid var(--fp-borde);
  background:#fff;
}

.fp-doc-tipo{
  display:block;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--fp-violeta);
}

.fp-doc-clave{display:flex;align-items:center;gap:9px;margin-top:5px}

.fp-doc-numero{
  font-size:21px;
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.4px;
  color:var(--fp-tinta);
  font-variant-numeric:tabular-nums;
}

.fp-doc-datos{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:15px 26px;
  padding:16px 18px;
}

.fp-doc-dato{min-width:0}

.fp-doc-dato-etiqueta{
  display:block;
  margin-bottom:3px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--fp-etiqueta);
}

.fp-doc-dato-valor{
  display:block;
  font-size:14px;
  font-weight:600;
  line-height:1.35;
  color:var(--fp-tinta);
  overflow-wrap:break-word;
  word-wrap:break-word;
}

/* --- Grupos de accion (aceptar / rechazar) --- */
.fp-grupo{
  margin-bottom:18px;
  padding:20px 22px;
  border:1px solid var(--fp-borde);
  border-radius:14px;
  background:#fff;
}

.fp-grupo--aceptar{background:#fbfffd;border-color:#d9f5ea}
.fp-grupo--rechazar{background:#fffafb;border-color:#ffe1ea}

.fp-grupo-cabecera{display:flex;align-items:center;gap:10px;margin-bottom:6px}

.fp-grupo-titulo{font-size:16.5px;font-weight:600;letter-spacing:-.15px}

.fp-grupo-icono{
  flex:0 0 26px;
  width:26px;
  height:26px;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:700;
  line-height:1;
}

.fp-grupo--aceptar .fp-grupo-icono{background:#e6faf2;color:#178f68}
.fp-grupo--rechazar .fp-grupo-icono{background:#ffeef3;color:#d63a6c}

.fp-grupo-nota{
  margin:0 0 16px;
  font-size:12.5px;
  line-height:1.55;
  color:#5b6675;
}

/* Cada figura (evento DIAN), con su texto legal y su boton. */
.fp-accion{
  display:block;
  margin:0;
  padding:18px 0;
  border-top:1px solid rgba(26,35,50,.07);
}

.fp-accion:first-of-type{padding-top:0;border-top:0}
.fp-accion:last-of-type{padding-bottom:0}

.fp-accion-texto{margin-bottom:12px}

.fp-accion-titulo{
  display:block;
  margin-bottom:4px;
  font-size:14.5px;
  font-weight:600;
  line-height:1.35;
  color:var(--fp-tinta);
}

.fp-accion-legal{
  margin:0;
  font-size:12.5px;
  line-height:1.55;
  color:#5b6675;
}

/* Boton de aceptacion secundario: de la misma familia que el primario pero
   sin el degradado, para que solo la accion principal lo lleve. */
.fp-btn--aceptar{
  border-color:#bfeedd;
  background:#fff;
  color:#12795a;
}

.fp-btn--aceptar:hover{background:#f1fdf8;border-color:var(--fp-verde);color:#12795a;text-decoration:none}
.fp-btn--aceptar:focus{box-shadow:0 0 0 3px rgba(74,214,168,.24)}

/* Los botones de esta pantalla llevan el nombre legal completo del evento:
   cuando no caben en una linea, el texto se reparte en dos sin desbordar. */
.fp-btn--bloque{
  white-space:normal;
  height:auto;
  min-height:44px;
  padding:11px 18px;
  line-height:1.3;
}

.fp-btn--bloque.fp-btn--grande{min-height:48px}
.fp-btn--bloque.fp-btn--chico{min-height:36px}

/* --- Motivo del rechazo: una lista de opciones, no cuatro radios sueltos --- */
.fp-radio-tarjeta{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  padding:13px 16px;
  border:1px solid var(--fp-borde);
  border-radius:var(--fp-radio-campo);
  background:#fff;
  font-size:13.5px;
  font-weight:600;
  line-height:1.4;
  color:#4a5568;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.fp-radio-tarjeta:hover{border-color:#ffc7d7;background:#fffafb}

.fp-radio-tarjeta input[type="radio"]{
  flex:0 0 18px;
  width:18px;
  height:18px;
  margin:0;
  accent-color:#d63a6c;
  cursor:pointer;
}

.fp-radio-tarjeta:has(input:checked){
  border-color:var(--fp-rojo);
  background:#fff5f8;
  box-shadow:0 0 0 3px rgba(255,93,143,.12);
  color:#b32e58;
}

/* Los avisos dentro de un grupo no necesitan tanto aire. */
.fp-grupo .fp-aviso{margin-bottom:16px}

/* --- Adaptacion a pantallas menores --- */
@media (max-width:820px){
  .fp-tarjeta--documento{padding:26px 22px 24px}
  .fp-grupo{padding:18px 16px}
}

@media (max-width:560px){
  .fp-doc-cabecera{flex-direction:column;align-items:flex-start;gap:10px}
  .fp-doc-datos{grid-template-columns:1fr;gap:14px}
}


/* ==========================================================================
   24. PORTAL DEL CLIENTE  (homecustomers)

   El portal no es una tarjeta centrada: es una pagina con su propia barra
   pegada al borde superior y la hoja ocupando todo el ancho, como la maqueta
   aprobada. La vista la sirve el mismo marco que los ingresos
   (layouts.backtemplate), asi que aqui se anula el centrado del marco cuando
   la seccion trae esa barra: las demas pantallas del marco siguen igual.
   ========================================================================== */

.fp-pagina:has(> .fp-barra){
  display:block;
  align-items:stretch;
  justify-content:flex-start;
  padding:0;
}

.fp-pagina:has(> .fp-barra) > .fp-hoja{padding-top:30px}

/* --- Tabla del portal: Fecha / Prefijo / Numero / Tipo / Valor / Archivos /
   Enviar. Los anchos suman 100% (la tabla lleva table-layout:fixed). --- */
.fp-tabla--portal .fp-col-fecha{width:9%}
.fp-tabla--portal .fp-col-prefijo{width:6.5%}
.fp-tabla--portal .fp-col-numero{width:8%}
.fp-tabla--portal .fp-col-tipo{width:21%}
.fp-tabla--portal .fp-col-valor{width:15.5%}
.fp-tabla--portal .fp-col-archivos{width:22%}
.fp-tabla--portal .fp-col-enviar{width:18%}

/* Los botones de descarga no llevan texto: el titulo emergente dice cual es
   cada uno. El envoltorio se alinea a la derecha con la cabecera. */
.fp-archivos{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

/* La columna Enviar lleva un formulario por fila: el boton no debe heredar el
   ancho del formulario y el formulario no debe aportar margen. */
.fp-tabla--portal td .fp-acciones > form,
.fp-tabla--portal td .fp-archivos > form{margin:0;display:inline-flex}


/* ==========================================================================
   25. REMATES DEL ACUSE DE RECIBO  (acceptrejectdocument)

   Dos piezas que faltaban en la seccion 23.
   ========================================================================== */

/* Nota de texto corrido. NO se usa .fp-nota: esa es una fila flexible
   (icono + texto), y un parrafo con <strong> dentro se partiria en dos
   columnas en vez de leerse como un solo texto. */
.fp-nota-texto{
  margin:16px 0 0;
  font-size:12.5px;
  line-height:1.55;
  color:var(--fp-etiqueta);
}

.fp-nota-texto strong{color:#5b6675;font-weight:600}

/* Marca de "Ya enviado" junto al titulo de una figura ya registrada. */
.fp-accion-titulo .fp-etiqueta-estado,
.fp-grupo-titulo .fp-etiqueta-estado{
  margin-left:7px;
  vertical-align:middle;
  font-size:11.5px;
  font-weight:600;
}


/* ==========================================================================
   26. LA MALLA HEREDADA NO DEBE ALCANZAR A LA TABLA

   El selector [class*="col-"] de la seccion 18 (compatibilidad con el marcado
   anterior) tambien casa con las clases de columna de la tabla: fp-col-fecha,
   fp-col-prefijo, fp-col-numero, fp-col-valor, fp-col-acciones, fp-col-tipo,
   fp-col-archivos y fp-col-enviar. Como esa regla lleva float:left, cada celda
   pasa a ser un bloque flotante (float cambia el display de table-cell a
   block): las celdas de una fila dejan de compartir altura y el filete
   inferior sale escalonado, distinto en cada columna.

   Medido en Chrome sin cabeza con el portal montado en el marco real
   (html.fp-legado): filete a y=495, 498, 501, 510 y 513 segun la columna; con
   esta regla queda en una sola linea (y=513). Solo actua dentro de .fp-tabla,
   asi que la malla heredada sigue igual para todo lo demas.
   ========================================================================== */

.fp-legado .fp-tabla [class*="col-"]{
  float:none;
  min-height:0;
}


/* ==========================================================================
   27. DOS REMATES DE LA TABLA DEL PORTAL

   1) El importe negativo (notas credito) iba en tinta como los demas: la
      regla del cuerpo de la tabla fija el color de la celda
      (.fp-tabla > tbody > tr > td, especificidad 0,3,2) y le gana a
      .fp-valor--negativo (0,1,0), asi que el rojo de la maqueta no salia.
      Aqui se le da a la celda la especificidad que le falta.

   2) La pastilla de recuento de la cabecera del panel se partia en dos
      lineas ("6" arriba, "documentos" abajo) cuando el ancho aprieta, en vez
      de dejar que el titulo o el buscador cedan espacio.
   ========================================================================== */

.fp-tabla > tbody > tr > td.fp-valor--negativo{color:var(--fp-rojo)}

.fp-panel-cabecera .fp-cuenta{white-space:nowrap}