/* =============================================
   panel_client.css — Estilos EXCLUSIVOS del panel cliente
   Requiere: style.css + panel.css cargados antes
   ============================================= */

/* ── Ítem de contrato (card individual) ── */
.contract_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--border);
  flex-wrap: wrap;
}

.contract_info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pdf_icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--status-red-bg);
  color: var(--status-red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.contract_info h4 {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-main);
  margin: 0 0 2px;
}

.contract_info p {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
}

.contract_info span {
  font-size: 0.72rem;
  color: var(--text-light);
  display: block;
  margin-top: 2px;
}

.contract_actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contract_actions .btn,
.contract_actions button {
  font-size: 0.82rem;
  padding: 7px 16px;
}

.contract_detail p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-size: 0.86rem;
  color: var(--text-muted);
}

.contract_detail p + p {
  margin-top: 10px;
}

.contract_detail strong {
  color: var(--text-main);
  font-weight: 700;
}

/* ── Vista previa de PDF ── */
.preview_pdf {
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 16px;
}

.pdf_top {
  background: var(--primary);
  color: rgba(255,255,255,0.75);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 18px;
}

.pdf_body {
  background: #fafafa;
  padding: 24px 18px;
  min-height: 155px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.pdf_body h4 {
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 10px;
}

.pdf_body p {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* ── Botón firmar ── */
.sign_btn {
  width: 100%;
  padding: 13px 16px;
  font-size: 0.9rem;
  border-radius: 8px;
  margin-top: 12px;
}

/* =============================================
   LAYOUT DEL PORTAL DE CLIENTES
   (no usa sidebar, por eso no hereda .page/.content
   de style.css — necesita su propio wrapper)
   ============================================= */

/* El portal no tiene sidebar, así que "dashboard" aquí
   es solo un contenedor de ancho máximo centrado, NO el
   flex de dos columnas que usa panel.css para el layout
   viejo con sidebar. */
.content_cliente .dashboard {
  display: block;
  min-height: auto;
}

/* Wrapper que deja espacio para el sidebar fijo (260px),
   igual que .page en style.css para el lado de empleados. */
.page_cliente {
  margin-left: 260px;
  min-height: 100vh;
}

.content_cliente {
  max-width: 1200px;
  margin: 0 auto;
  padding: 35px;
}

@media (max-width: 992px) {

  .page_cliente {
    margin-left: 0;
  }

}

/* ── Topbar del cliente ── */
.topbar_cliente {
  height: var(--navbar-height, 75px);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 35px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 900;
}

.topbar_cliente_logo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.topbar_cliente_logo img {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
}

.topbar_cliente_logo h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
}

.topbar_cliente_logo span {
  font-size: 12px;
  color: var(--text-muted);
}

.topbar_cliente_user {
  display: flex;
  align-items: center;
  gap: 16px;
}

.topbar_cliente_user div {
  text-align: right;
}

.topbar_cliente_user strong {
  display: block;
  font-size: 14px;
  color: var(--text-main);
}

.topbar_cliente_user small {
  color: var(--text-muted);
  font-size: 12px;
}

/* ── Tarjetas resumen (Total / Pendientes / Firmados) ── */
.resumen_cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.resumen_card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 22px 24px;
}

.resumen_card .resumen_num {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1;
}

.resumen_card span:last-child {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

@media (max-width: 768px) {

  .resumen_cards {
    grid-template-columns: 1fr;
  }

  .content_cliente {
    padding: 20px;
  }

  .topbar_cliente {
    padding: 0 20px;
    flex-wrap: wrap;
    height: auto;
    gap: 10px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

}