/* =========================================================
   RESET / BASE
========================================================= */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #f4f6f9;
  font-family: 'Montserrat', sans-serif;
  color: #2b2b2b;
}
/* =========================================================
   HEADER
========================================================= */
.header {
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 24px; /* 🔑 header alto */
  display: flex;
  align-items: center;
  justify-content: space-between;
    min-height: 120px;
}
/* .header-container {
  padding: 40px 24px;
} */

/* IZQUIERDA */
.header-left {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* .header-left img {
  height: 64px;       
  width: auto;
} */
.header-left img {
  height: 100px;       /* 🔑 logo más grande */
  width: auto;
  max-width: 260px;  /* evita desbordes */
}
.header-right img {
  height: 84px;          /* 🔑 más protagonismo */
  width: 84px;
  border-radius: 50%;
  object-fit: cover;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-right: -12px;   /* 🔑 empuja hacia el borde */
}

.header-title {
  font-size: 19px;    /* 🔑 texto grande */
  font-weight: 600;
  color: #2f3e9e;
  letter-spacing: 0.8px;
}

/* DERECHA */
.header-user {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;    /* 🔑 texto usuario */
}

.header-user img {
  width: 48px;        /* 🔑 avatar grande */
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.header-user a {
  color: #ff6b6b;
  text-decoration: none;
  font-weight: 600;
}

/* =========================================================
   MAIN SISTEMA
========================================================= */
/* .main-system {
  min-height: calc(100vh - 160px); 
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px; 
} */
.main-system {
  display: flex;
  justify-content: center; /* centra horizontal */
  align-items: flex-start; /* pega al header */
  padding: 15px;           /* espacio lateral opcional */
  width: 100%;
}
/* Si necesitas margen entre header y card */
.main-system .card + .card {
  margin-top: 20px;
}
/* =========================================================
   CARD (LOGIN / DASHBOARD)
========================================================= */
.card {
  width: 100%;
  max-width: 520px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  overflow: hidden;
    margin: 0;
}


.card-header {
  background: #2f3e9e; /* color logo */
  color: #ffffff;
  padding: 20px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.card-body {
  padding: 25px;
}

/* =========================================================
   FORMULARIOS
========================================================= */
.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: #555;
}

.form-group input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 14px;
}

.form-group input:focus {
  outline: none;
  border-color: #4b5cff;
}

/* =========================================================
   BOTONES
========================================================= */
.btn-primary {
  width: 100%;
  background: #2f3e9e;
  color: #ffffff;
  border: none;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
}

.btn-primary:hover {
  background: #4b5cff;
}

/* =========================================================
   MENÚ / ACCIONES
========================================================= */
.menu-action {
  display: block;
  padding: 14px;
  margin-bottom: 12px;
  background: #f4f6f9;
  border-radius: 4px;
  text-align: center;
  font-weight: 600;
  color: #2b2b2b;
  text-decoration: none;
  border: 1px solid #e5e7eb;
}

.menu-action:hover {
  background: #2f3e9e;
  color: #ffffff;
}

/* =========================================================
   MENSAJES
========================================================= */
.error-msg {
  margin-top: 10px;
  color: #d63031;
  font-size: 14px;
  text-align: center;
}

/* =========================================================
   RECUPERAR CLAVE
========================================================= */
.recuperar {
  margin-top: 15px;
  text-align: center;
}

.recuperar a {
  font-size: 14px;
  color: #2f3e9e;
  text-decoration: none;
}

.recuperar a:hover {
  text-decoration: underline;
}

/* =========================================================
   FOOTER
========================================================= */
.footer {
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #666;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 600px) {

  .header-title {
    display: none;
  }

  .card {
    max-width: 100%;
  }
}



/* =========================================================
   CARD ANCHA
========================================================= */
.card-wide {
  max-width: 1100px;
}

/* HEADER ALINEADO A IZQUIERDA */
.card-header-left {
  text-align: left;
  padding-left: 30px;
}

/* =========================================================
   TABLA SISTEMA
========================================================= */
.table-responsive {
  overflow-x: auto;
}

.table-system {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table-system thead {
  background: #f4f6f9;
}

.table-system th,
.table-system td {
  padding: 12px 10px;
  border-bottom: 1px solid #e5e7eb;
}

.table-system th {
  font-weight: 600;
  color: #2f3e9e;
  text-align: left;
}

.table-system td.center,
.table-system th.center {
  text-align: center;
}

.table-system tr:hover {
  background: #f9fafb;
}

/* =========================================================
   ACCIONES
========================================================= */
.action-icon {
  color: #2f3e9e;
  font-size: 16px;
  text-decoration: none;
}

.action-icon:hover {
  color: #4b5cff;
}

/* =========================================================
   ESTADO VACÍO
========================================================= */
.empty-state {
  padding: 40px;
  text-align: center;
  color: #666;
  font-size: 15px;
}

/* =========================================================
   FOOTER ACCIONES
========================================================= */
.actions-footer {
  margin-top: 25px;
  text-align: right;
}

.btn-secondary {
  background: #e5e7eb;
  color: #333;
  padding: 10px 16px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
}

.btn-secondary:hover {
  background: #d1d5db;
}
/* ====== FIX ESPACIO ENTRE MAIN Y CARD ====== */

/* .main-system {
  padding-top: 5px;     
} */

.main-system > .card {
  margin-top: 0 !important;
}

#main,
#fdoIndex,
#contenedor {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* .system-page .main-system {
  min-height: auto;
  display: block;
  padding: 30px 15px;
} */

/* body:not(.system-page) .main-system {
  min-height: calc(100vh - 160px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
} */
.system-page .main-system {
  display: flex;
  justify-content: center;   /* 🔑 centra horizontal */
  align-items: flex-start;   /* 🔑 arriba, no vertical */
  padding: 30px 15px;
}


.user-icon {
    font-size: 28px;
    color: #fff;
    background-color: #6c757d;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}