/* ======================================
   PAGE
====================================== */

.seguridad-submodulos-detalle-page {
  display: flex;
  flex-direction: column;

  height: 100%;

  overflow: hidden;

  padding: var(--space-xl-24);
}

/* ======================================
   HEADER
====================================== */

.seguridad-submodulos-detalle-header {
  display: flex;
  align-items: center;
  gap: var(--space-lg-16);

  margin-bottom: var(--space-xl-24);

  flex-shrink: 0;
}

.seguridad-submodulos-detalle-title {
  font-size: var(--font-2xl-22);
  font-weight: var(--font-bold-700);

  color: var(--color-text);
}

.seguridad-submodulos-detalle-subtitle {
  margin-top: 4px;

  font-size: var(--font-md-14);

  color: var(--color-text-secondary);
}

/* ======================================
   SCROLL
====================================== */

.seguridad-submodulos-detalle-scroll {
  flex: 1;

  min-height: 0;

  overflow-y: auto;

  padding-right: 4px;
}

/* ======================================
   CARD
====================================== */

.seguridad-submodulos-detalle-card {
  background: var(--color-surface);

  border-radius: var(--radius-xl-24);

  padding: var(--space-xl-24);

  box-shadow: var(--shadow-sm);

  border: 1px solid var(--color-border-light);
}

/* ======================================
   SECTION
====================================== */

.seguridad-submodulos-detalle-section {
  margin-bottom: var(--space-2xl-32);
}

.seguridad-submodulos-detalle-section:last-child {
  margin-bottom: 0;
}

.seguridad-submodulos-detalle-section-title {
  font-size: var(--font-lg-16);
  font-weight: var(--font-semibold-600);

  color: var(--color-text);

  margin-bottom: var(--space-lg-16);
}

/* ======================================
   GRID
====================================== */

.seguridad-submodulos-detalle-grid {
  display: grid;

  gap: var(--space-lg-16);

  margin-bottom: var(--space-lg-16);
}

.form-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.form-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* ======================================
   FIELD
====================================== */

.seguridad-submodulos-detalle-field {
  display: flex;
  flex-direction: column;
}

.seguridad-submodulos-detalle-field.full {
  grid-column: 1 / -1;
}

.seguridad-submodulos-detalle-field label {
  margin-bottom: 8px;

  font-size: var(--font-sm-12);
  font-weight: var(--font-semibold-600);

  color: var(--color-text-secondary);
}

/* ======================================
   INPUTS
====================================== */

.seguridad-submodulos-detalle-field input,
.seguridad-submodulos-detalle-field textarea {
  width: 100%;

  border: 1px solid transparent;

  background: #f3f4f6;

  border-radius: 18px;

  padding: 14px 16px;

  font-size: var(--font-md-14);

  outline: none;

  transition: var(--transition-fast);
}

.seguridad-submodulos-detalle-field input:focus,
.seguridad-submodulos-detalle-field textarea:focus {
  border-color: var(--color-primary);

  background: white;

  box-shadow: 0 0 0 4px rgba(0, 106, 255, 0.08);
}

.seguridad-submodulos-detalle-field textarea {
  min-height: 110px;

  resize: vertical;
}

/* ======================================
   DISABLED
====================================== */

.seguridad-submodulos-detalle-disabled {
  background: #e5e7eb !important;

  cursor: not-allowed;

  color: var(--color-text-secondary);
}

/* ======================================
   SWITCHES
====================================== */

.seguridad-submodulos-detalle-switches-grid {
  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  gap: var(--space-lg-16);
}

.mod-seguridad-switch-item {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: var(--space-md-12);

  background: var(--color-surface-secondary);

  border-radius: var(--radius-lg-16);

  padding: 14px 16px;

  border: 1px solid var(--color-border-light);
}

.mod-seguridad-switch-item span {
  font-size: var(--font-md-14);
  font-weight: var(--font-medium-500);

  color: var(--color-text);
}

/* ======================================
   PREVIEW
====================================== */

.mod-seguridad-preview-card {
  display: flex;
  align-items: center;
  gap: var(--space-lg-16);

  background: var(--color-surface-secondary);

  border-radius: var(--radius-xl-24);

  padding: var(--space-lg-16);

  border: 1px solid var(--color-border-light);
}

.mod-seguridad-preview-title {
  font-size: var(--font-lg-16);
  font-weight: var(--font-semibold-600);

  color: var(--color-text);
}

.mod-seguridad-preview-subtitle {
  margin-top: 4px;

  font-size: var(--font-md-14);

  color: var(--color-text-secondary);
}

/* ======================================
   FOOTER
====================================== */

.seguridad-submodulos-detalle-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-md-12);

  margin-top: var(--space-2xl-32);
}

/* ======================================
   RESPONSIVE
====================================== */

@media (max-width: 992px) {
  .form-grid-3,
  .form-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .seguridad-submodulos-detalle-page {
    padding: var(--space-lg-16);
  }

  .seguridad-submodulos-detalle-card {
    padding: var(--space-lg-16);
  }

  .form-grid-3,
  .form-grid-4 {
    grid-template-columns: 1fr;
  }

  .seguridad-submodulos-detalle-footer {
    flex-direction: column;
  }

  .seguridad-submodulos-detalle-footer button {
    width: 100%;
  }
}