/* Tipografía y medida A4 */
body, input, select, textarea, table {
  font-family: "montserrat", sans-serif;
  font-size: 12pt;
  margin: 0;
  padding: 0;
}
form {
  width: 210mm;
  margin: auto;
  padding: 10mm;
  position: relative;
}

/* Watermark editable */
#watermark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 200mm;
  opacity: 0.05;
  z-index: -1;
  pointer-events: none;
}

/* Wizard steps */
.step { display: none; }
.step.active { display: block; }

/* Encabezado */
.header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4mm;
}
.escudo { height: 20mm; width: auto; }
.logo   { height: 35mm; width: auto; }
.title-block { flex:1; text-align:center; }
.version { font-size:9pt; color:#064992; margin-bottom:1mm; }
.principal { font-size:16pt; color:#064992; font-weight:bold; line-height:1.2; }

/* Información de solicitud */
.meta-info {
  display:flex; justify-content:space-between; margin-bottom:4mm;
}
.meta-item label { font-weight:bold; }
.meta-item input {
  border:none; border-bottom:1px solid #000; padding:1mm 0;
}

/* Rubros */
.tabla-rubros {
  width:100%; border-collapse:collapse; margin-bottom:4mm;
}
.tabla-rubros td {
  border:1px solid #000; text-align:center; padding:3mm;
  background:#FFF2CC;
}

/* Tablas de datos */
.tabla-datos {
  width:100%; border-collapse:collapse; margin-bottom:4mm;
}
.tabla-datos th {
  background:#D9EAF7; color:#003B73; text-align:left;
  padding:2mm; border:1px solid #000;
}
.tabla-datos td {
  padding:2mm; border:1px solid #000;
}

/* Inputs y textarea */
input[type="text"],
input[type="date"],
input[type="time"],
select {
  width:100%; border:none; outline:none; padding:1mm 0;
}
textarea {
  width:100%; border:none; outline:none; padding:1mm 0;
  font-family:inherit; font-size:inherit;
  min-height:30mm; resize:none; overflow:hidden;
}

/* Servidores */
#servContainer .fila-serv {
  display:flex; gap:4mm; margin-bottom:2mm;
}
#servContainer input { flex:1; }
#servContainer button { width:30mm; }

/* Transporte */
.tabla-transporte {
  width:100%; border-collapse:collapse; margin-bottom:4mm;
}
.tabla-transporte th, .tabla-transporte td {
  border:1px solid #000; padding:2mm;
}
.btn-agregar {
  background:#064992; color:#fff; border:none;
  padding:2mm 4mm; cursor:pointer; margin-bottom:6mm;
}

/* Firmas */
.firmas-seccion { page-break-before:always; }
.tabla-firmas {
  width:100%; border-collapse:collapse; margin-bottom:2mm;
}
.tabla-firmas td {
  border-top:1px solid #000; text-align:center; padding-top:20mm;
}

/* Nota pie */
.notaPie { font-size:10pt; margin-top:3mm; }
.notaPie p, .notaPie ul { margin:0; padding-left:5mm; }

/* Navegación */
.nav-buttons {
  display:flex; justify-content:space-between; margin-top:4mm;
}
.nav-buttons button {
  background:#b4c1d7; border:none; padding:3mm 6mm;
  font-size:12pt; cursor:pointer;
}

/* Evitar cortes en tablas */
table { page-break-inside:avoid; }

/* 9) LOGIN */

/* 0) RESET */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* 1) BODY Y MARCA DE AGUA */
body.erp-login {
  position: relative;
  background-color: #f5f5f5;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
}
body.erp-login::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('imagen/COPISA.png') center/cover no-repeat;
  opacity: 0.10;
  pointer-events: none;
  z-index: -1;
}

/* 2) HEADER */
header {
  background: #e7e8ea;
  border-bottom: 1px solid #9f9f9f;
}
header .container {
  /* Contenedor centrado y ancho flexible */
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;

  /* Grid de tres columnas: logo - título - escudo */
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 8px 16px;
  gap: 20px;
}
header .logo img {
  height: 150px;
  width: 150px;
}
header h1 {
  font-size: 1.5rem;
  color: #004080;
  text-align: center;
  margin: 0;
}
header .escudo img {
  height: 80px;
  width: auto;
}

/* 3) MAIN / LOGIN BOX */
main {
  flex: 1;                     /* ocupa espacio restante */
  display: flex;
  align-items: center;         /* centra vertical */
  justify-content: center;     /* centra horizontal */
  margin-top: 8%; 
}
.login-box {
  background: #fff;
  border: 1px solid #ccc;
  padding: 24px;
  width: 320px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.login-box h2 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: #004080;
}
.login-box p {
  margin-bottom: 16px;
  color: #333;
  font-size: 0.9rem;
}
.login-box label {
  display: block;
  text-align: left;
  margin-bottom: 12px;
  font-size: 0.9rem;
  color: #222;
}
.login-box input {
  width: 30%;
  padding: 8px;
  border: 1px solid #999;
  border-radius: 2px;
  font-size: 0.9rem;
}
.login-box .recover {
  text-align: left;
  margin-bottom: 16px;
}
.login-box .recover a {
  font-size: 0.8rem;
  color: #004080;
  text-decoration: none;
}
.login-box .buttons {
  display: flex;
  justify-content: space-between;
}
.login-box button {
  width: 30%;
  padding: 8px 0;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
}
#btnIngresar {
  background: #004080;
  color: #fff;
}
button[type=reset] {
  background: #ccc;
  color: #333;
}

/* 4) FOOTER */
footer {
  margin-top: 7%;            /* empuja pie al fondo */
  background: #fff;
  border-top: 1px solid #ccc;
  text-align: center;          /* centra texto dentro del footer */
}
footer .container.erp {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 12px 0;
  /* text-align heredado desde footer */
}


/* 10) Sección de servicios */

    .services-list {
      max-width: 600px;
      margin: 80px auto;
      padding: 0 16px;
    }
    .services-list h2 {
      font-size: 2rem;           /* título más grande */
      color: #004080;
      margin-bottom: 32px;       /* más separación */
      text-align: left;
    }
    .services-list ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .services-list li {
      margin-bottom: 16px;
    }
    .services-list li a {
      display: flex;
      align-items: center;
      text-decoration: none;
      background: #f0f4f8;       /* caja de fondo */
      padding: 12px 16px;
      border-radius: 8px;
      color: #004080;
      transition: background 0.2s;
    }
    .services-list li a:hover {
      background: #e2eaf2;
    }
    .services-list li i {
      font-size: 1.75rem;
      margin-right: 16px;
      color: #064992;
      width: 28px;
      text-align: center;
    }
    .services-list li span {
      font-size: 1.1rem;
      flex: 1;
    }