/*
=============================================================
Zenty Emite 2.0
CERTIFICADOS DIGITALES — DISEÑO COMPACTO
=============================================================
Solo modifica presentación. No altera certificados, API ni base de datos.
*/

.certificados-page {
  display: grid !important;
  gap: 14px !important;
  min-width: 0 !important;
}

/* Ocultar presentación extensa y métricas superiores */
.certificados-page > .welcome-panel.page-heading-panel,
.certificados-page > .stat-grid.compact-stats {
  display: none !important;
}

/* Mensajes */
.certificados-page > .alert {
  margin: 0 !important;
  border-radius: 12px !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
}

/* Dos áreas principales */
.certificados-page .content-grid.empresas-grid {
  display: grid !important;
  grid-template-columns:
    minmax(320px, 0.78fr)
    minmax(0, 1.22fr) !important;
  gap: 16px !important;
  align-items: start !important;
  margin: 0 !important;
  min-width: 0 !important;
}

/* Tarjetas */
.certificados-page .panel-card {
  min-width: 0 !important;
  overflow: hidden !important;
  border: 1px solid #dbe7ea !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 27px rgba(24, 57, 66, 0.07) !important;
}

.certificados-page .panel-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 16px 18px 13px !important;
  border-bottom: 1px solid #e8eff1 !important;
}

.certificados-page .panel-card-header .eyebrow {
  margin-bottom: 4px !important;
  color: #0f766e !important;
  font-size: 0.64rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.09em !important;
}

.certificados-page .panel-card-header h3 {
  margin: 0 !important;
  font-size: 1.04rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
}

.certificados-page .panel-card-header .module-icon {
  display: grid !important;
  flex: 0 0 auto !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 11px !important;
  color: #0f766e !important;
  background: #e6fffb !important;
  font-size: 1rem !important;
}

/* Formulario */
.certificados-page .empresa-form-card .system-form {
  display: grid !important;
  gap: 12px !important;
  padding: 17px 18px 18px !important;
}

.certificados-page .form-section-title {
  margin: 1px 0 -2px !important;
  padding: 0 !important;
  border: 0 !important;
  color: #64787e !important;
  font-size: 0.64rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.075em !important;
  text-transform: uppercase !important;
}

.certificados-page .form-grid,
.certificados-page .form-grid.one-col,
.certificados-page .form-grid.two-cols {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 11px !important;
  margin: 0 !important;
}

.certificados-page .system-form label {
  display: grid !important;
  gap: 6px !important;
  min-width: 0 !important;
  color: #3b555c !important;
  font-size: 0.74rem !important;
  font-weight: 500 !important;
}

.certificados-page .form-control,
.certificados-page .form-select {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 43px !important;
  padding: 9px 11px !important;
  border: 1px solid #ccdde1 !important;
  border-radius: 10px !important;
  color: #17343b !important;
  background: #ffffff !important;
  font-family: "Inter", sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
}

.certificados-page .form-control:focus,
.certificados-page .form-select:focus {
  border-color: #14b8a6 !important;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12) !important;
}

.certificados-page input[type="file"].form-control {
  min-height: 47px !important;
  padding: 7px 8px !important;
}

.certificados-page input[type="file"].form-control::file-selector-button {
  min-height: 31px !important;
  margin-right: 9px !important;
  padding: 0 11px !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: #0f5e58 !important;
  background: #dcf7f2 !important;
  font-family: "Inter", sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

/* Empresa seleccionada */
.certificados-page .info-box.soft-box {
  display: grid !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 11px 12px !important;
  border: 1px solid #cce9e5 !important;
  border-radius: 11px !important;
  background: #f0fdfa !important;
}

.certificados-page .info-box.soft-box strong {
  font-size: 0.76rem !important;
  font-weight: 600 !important;
}

.certificados-page .info-box.soft-box span {
  color: #60757b !important;
  font-size: 0.67rem !important;
  font-weight: 400 !important;
}

/* Nota de seguridad */
.certificados-page .sii-note {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 11px 12px !important;
  border: 1px solid #fde68a !important;
  border-radius: 11px !important;
  color: #854d0e !important;
  background: #fffbeb !important;
  font-size: 0.68rem !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

.certificados-page .action-btn {
  width: 100% !important;
  min-height: 42px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
}

/* Listado */
.certificados-page .empresas-list-card {
  min-width: 0 !important;
}

.certificados-page .empresa-list {
  display: grid !important;
  gap: 0 !important;
  padding: 0 !important;
}

.certificados-page .empresa-item.certificado-item {
  display: grid !important;
  grid-template-columns:
    minmax(220px, 1.15fr)
    minmax(260px, 1fr)
    auto !important;
  gap: 15px !important;
  align-items: center !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 14px 17px !important;
  border: 0 !important;
  border-bottom: 1px solid #e7eef0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.certificados-page .empresa-item.certificado-item:last-child {
  border-bottom: 0 !important;
}

.certificados-page .empresa-item.certificado-item:hover {
  background: #fbfdfd !important;
}

/* Primera columna: empresa + archivo + badges */
.certificados-page .empresa-item-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 7px !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.certificados-page .empresa-item-header > div:first-child {
  min-width: 0 !important;
}

.certificados-page .empresa-item-header strong {
  display: block !important;
  overflow: hidden !important;
  color: #17343b !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.certificados-page .empresa-item-header > div:first-child > span {
  display: block !important;
  overflow: hidden !important;
  margin-top: 3px !important;
  color: #64787e !important;
  font-size: 0.65rem !important;
  font-weight: 400 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.certificados-page .empresa-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  justify-content: flex-start !important;
}

.certificados-page .badge-soft {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  font-size: 0.61rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Segunda columna: firmante */
.certificados-page .certificado-meta {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.certificados-page .certificado-meta span {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #4f676d !important;
  font-size: 0.67rem !important;
  font-weight: 400 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.certificados-page .certificado-meta i {
  flex: 0 0 auto !important;
  color: #0f766e !important;
}

/* Tercera columna: acción */
.certificados-page .empresa-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-width: 88px !important;
  margin: 0 !important;
}

.certificados-page .empresa-actions .btn {
  min-width: 86px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 11px !important;
  border-radius: 9px !important;
  font-size: 0.67rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

/* Estado vacío */
.certificados-page .empty-state {
  padding: 34px 20px !important;
}

.certificados-page .empty-state strong {
  font-weight: 600 !important;
}

.certificados-page .empty-state p {
  margin-bottom: 0 !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
}

/* Notebook */
@media (max-width: 1250px) {
  .certificados-page .content-grid.empresas-grid {
    grid-template-columns:
      minmax(300px, 0.72fr)
      minmax(0, 1.28fr) !important;
  }

  .certificados-page .empresa-item.certificado-item {
    grid-template-columns:
      minmax(190px, 1fr)
      minmax(210px, 1fr)
      auto !important;
    gap: 11px !important;
    padding-right: 13px !important;
    padding-left: 13px !important;
  }
}

/* Tablet: formulario arriba, listado abajo */
@media (max-width: 1050px) {
  .certificados-page .content-grid.empresas-grid {
    grid-template-columns: 1fr !important;
  }

  .certificados-page .empresa-item.certificado-item {
    grid-template-columns:
      minmax(210px, 1.1fr)
      minmax(220px, 1fr)
      auto !important;
  }
}

/* Móvil */
@media (max-width: 720px) {
  .certificados-page {
    gap: 10px !important;
  }

  .certificados-page .panel-card {
    border-radius: 15px !important;
  }

  .certificados-page .panel-card-header {
    padding: 14px !important;
  }

  .certificados-page .empresa-form-card .system-form {
    padding: 14px !important;
  }

  .certificados-page .empresa-item.certificado-item {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 14px !important;
  }

  .certificados-page .empresa-item-header strong,
  .certificados-page .empresa-item-header > div:first-child > span,
  .certificados-page .certificado-meta span {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .certificados-page .empresa-actions {
    justify-content: stretch !important;
    min-width: 0 !important;
  }

  .certificados-page .empresa-actions .btn {
    width: 100% !important;
  }
}