/* Grupo RozMam — estilos globales (brand-tokens.css) */



/* ——— Shell y layout ——— */

html {

  font-size: 15px;

  height: 100%;

}



@media (min-width: 768px) {

  html {

    font-size: 16px;

  }

}



body.app-body {

  margin: 0;

  min-height: 100%;

  font-family: var(--font-body);

  font-weight: 400;

  color: var(--color-text);

  background-color: var(--color-background-light);

  line-height: 1.6;

  -webkit-font-smoothing: antialiased;

}



.app-page {

  min-height: 100vh;

  display: flex;

  flex-direction: column;

}



.app-main-wrap {

  flex: 1 0 auto;

  padding-top: 0.5rem;

  padding-bottom: 0.5rem;

}



.app-container {

  max-width: 1140px;

}



/* ——— Tipografía ——— */

h1, h2, h3, h4, h5, h6,

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,

.card-title, .modal-title {

  font-family: var(--font-heading);

  font-weight: 600;

  color: var(--color-text);

  letter-spacing: -0.02em;

}



h1, .display-5 {

  font-weight: 700;

}



p, li, td, th, label, .form-label, .btn, .nav-link {

  font-family: var(--font-body);

}



.text-muted,

small.text-muted {

  color: var(--color-text-secondary) !important;

}



/* ——— Navbar ——— */

.app-header {

  position: sticky;

  top: 0;

  z-index: 1030;

}



.app-navbar {

  background: linear-gradient(180deg, var(--color-accent-deep) 0%, #002f4a 100%) !important;

  border-bottom: 3px solid var(--color-primary) !important;

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

  padding-top: 0.5rem;

  padding-bottom: 0.5rem;

  --bs-navbar-color: var(--color-text-on-dark);

  --bs-navbar-hover-color: #fff;

  --bs-navbar-active-color: #fff;

  --bs-navbar-brand-color: #fff;

  --bs-navbar-brand-hover-color: #fff;

}



/* Logo sobre navbar oscuro (logo_rozzman.webp) */

.app-navbar-brand {

  flex-shrink: 0;

  margin-right: 0.75rem;

  padding: 0.2rem 0;

  line-height: 0;

}



.app-navbar-brand:hover .app-navbar-logo {

  opacity: 0.92;

}



.app-navbar-logo {

  display: block;

  height: 4.75rem;

  width: auto;

  max-width: min(380px, 82vw);

  object-fit: contain;

  object-position: left center;

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

}



@media (max-width: 575.98px) {

  .app-navbar-logo {

    height: 3.75rem;

    max-width: min(300px, 76vw);

  }

}



/* Pestañas del menú: separación e iconos */

.app-nav-main {

  gap: 0.25rem;

}



@media (min-width: 576px) {

  .app-nav-main {

    gap: 0.4rem;

  }

}



.app-navbar .navbar-nav > .nav-item {

  margin: 0.12rem 0.2rem;

}



.app-navbar-actions {

  gap: 0.35rem;

  margin-left: 0.5rem;

  padding-left: 0.65rem;

  border-left: 1px solid rgba(255, 255, 255, 0.18);

}



.app-nav-link {

  display: inline-flex !important;

  align-items: center;

  gap: 0.45rem;

  white-space: nowrap;

}



.app-nav-icon {

  font-size: 1.05rem;

  line-height: 1;

  color: var(--color-primary);

  flex-shrink: 0;

  transition: color var(--transition-fast), transform var(--transition-fast);

}



.app-nav-link:hover .app-nav-icon,

.app-nav-link:focus .app-nav-icon {

  color: #fff;

  transform: scale(1.06);

}



.app-nav-link.active .app-nav-icon {

  color: #fff;

}



.navbar-nav .nav-link {

  color: var(--color-text-on-dark) !important;

  font-weight: 500;

  font-size: 0.875rem;

  padding: 0.6rem 0.95rem !important;

  border-radius: var(--radius-md);

  transition: color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);

}



.navbar-nav .nav-link:hover,

.navbar-nav .nav-link:focus {

  color: #fff !important;

  background-color: rgba(255, 255, 255, 0.1);

}



.navbar-nav .nav-link.active {

  color: #fff !important;

  font-weight: 600;

  background-color: rgba(0, 174, 239, 0.18);

  box-shadow: inset 0 -3px 0 0 var(--color-primary);

}



.app-nav-user {

  display: inline-flex !important;

  align-items: center;

  gap: 0.4rem;

  font-size: 0.85rem !important;

  cursor: default;

}



.app-nav-user .app-nav-icon {

  font-size: 1.2rem;

}



.app-nav-cta {

  margin-left: 0.15rem;

}



.navbar-nav .btn-link.nav-link.app-navbar-logout {

  display: inline-flex !important;

  align-items: center;

  gap: 0.45rem;

}



.app-navbar .navbar-toggler {

  border-color: rgba(255, 255, 255, 0.4);

  border-radius: var(--radius-sm);

}



.navbar-nav .navbar-text-user,

.navbar-nav .app-navbar-logout {

  color: var(--color-text-on-dark) !important;

  font-size: 0.875rem;

}



.navbar-nav .btn-link.nav-link.app-navbar-logout {

  text-decoration: none;

}



.navbar-nav .btn-link.nav-link.app-navbar-logout:hover {

  color: var(--color-primary) !important;

  text-decoration: none;

}



@media (max-width: 575.98px) {

  .app-nav-main {

    gap: 0.15rem;

    padding-top: 0.35rem;

  }



  .app-navbar .navbar-nav > .nav-item {

    margin: 0.2rem 0;

  }



  .app-navbar-actions {

    padding-top: 0.5rem;

    margin-top: 0.5rem;

    margin-left: 0;

    padding-left: 0;

    border-left: none;

    border-top: 1px solid rgba(255, 255, 255, 0.12);

  }

}



/* ——— Contenido principal ——— */

.app-main {

  background-color: var(--color-white);

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

  padding: 1.5rem 1.75rem;

  margin-bottom: 1.5rem;

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

  border: 1px solid rgba(0, 59, 92, 0.06);

}



@media (max-width: 575.98px) {

  .app-main {

    padding: 1.1rem 1rem;

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

    margin-bottom: 1rem;

  }

}



/* Panel hero / destacado */

.app-hero-panel {

  background: linear-gradient(135deg, rgba(0, 174, 239, 0.12) 0%, rgba(0, 59, 92, 0.06) 100%);

  border: 1px solid rgba(0, 174, 239, 0.25) !important;

  border-radius: var(--radius-lg) !important;

  padding: 2rem 1.5rem !important;

}



.app-hero-panel h1 {

  color: var(--color-accent-deep);

}



.app-hero-panel .lead,

.app-hero-panel p {

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

}



.app-page-title {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  margin-bottom: 1.5rem;

  padding-bottom: 1rem;

  border-bottom: 2px solid var(--color-background-light);

}



.app-page-title h1,

.app-page-title h2 {

  margin-bottom: 0;

  color: var(--color-accent-deep);

}



.app-section-spacing {

  margin-top: 2rem;

  margin-bottom: 2rem;

}



/* ——— Botones ——— */

.btn {

  font-weight: 600;

  font-size: 0.9rem;

  letter-spacing: 0.01em;

  border-radius: var(--radius-md);

  transition: background-color var(--transition-fast), border-color var(--transition-fast),

    color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);

}



.btn:active:not(:disabled) {

  transform: translateY(1px);

}



.btn-primary {

  --bs-btn-color: var(--color-white);

  --bs-btn-bg: var(--color-primary);

  --bs-btn-border-color: var(--color-primary);

  --bs-btn-hover-color: var(--color-white);

  --bs-btn-hover-bg: var(--color-primary-hover);

  --bs-btn-hover-border-color: var(--color-primary-hover);

  --bs-btn-focus-shadow-rgb: 0, 174, 239;

  --bs-btn-active-color: var(--color-white);

  --bs-btn-active-bg: var(--color-accent-deep);

  --bs-btn-active-border-color: var(--color-accent-deep);

  --bs-btn-disabled-bg: #9fdcf5;

  --bs-btn-disabled-border-color: #9fdcf5;

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

}



.btn-primary:hover {

  box-shadow: 0 4px 14px rgba(var(--color-primary-rgb), 0.35);

}



.btn-secondary {

  --bs-btn-bg: var(--color-secondary);

  --bs-btn-border-color: var(--color-secondary);

  --bs-btn-hover-bg: #464749;

  --bs-btn-hover-border-color: #464749;

}



.btn-outline-primary {

  --bs-btn-color: var(--color-accent-deep);

  --bs-btn-border-color: var(--color-primary);

  --bs-btn-hover-bg: var(--color-primary);

  --bs-btn-hover-border-color: var(--color-primary);

  --bs-btn-hover-color: var(--color-white);

}



.btn-outline-secondary {

  --bs-btn-color: var(--color-accent-deep);

  --bs-btn-border-color: var(--color-border-strong);

  --bs-btn-hover-bg: var(--color-accent-deep);

  --bs-btn-hover-border-color: var(--color-accent-deep);

  --bs-btn-hover-color: var(--color-white);

}



.btn-outline-danger {

  --bs-btn-hover-bg: #8b2e2e;

  --bs-btn-hover-border-color: #8b2e2e;

}



.btn-link {

  color: var(--color-accent-deep);

  font-weight: 500;

}



.btn-link:hover {

  color: var(--color-primary);

}



.btn-group-sm > .btn {

  border-radius: var(--radius-sm);

}



/* ——— Formularios ——— */

.form-control,

.form-select {

  border-radius: var(--radius-md);

  border-color: var(--color-border-subtle);

  font-weight: 500;

  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);

}



.form-control:hover,

.form-select:hover {

  border-color: rgba(var(--color-primary-rgb), 0.45);

}



.form-control:focus,

.form-select:focus,

.form-check-input:focus {

  border-color: var(--color-primary);

  box-shadow: 0 0 0 0.2rem var(--color-focus-ring);

}



.form-label {

  font-weight: 600;

  font-size: 0.875rem;

  color: var(--color-accent-deep);

}



.btn:focus-visible,

.form-control:focus-visible,

.form-select:focus-visible,

.form-check-input:focus-visible {

  outline: 2px solid var(--color-primary);

  outline-offset: 2px;

}



/* ——— Cards ——— */

.card {

  background-color: var(--color-white);

  border: 1px solid var(--color-border-subtle);

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

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

  transition: box-shadow var(--transition-smooth), border-color var(--transition-smooth), transform var(--transition-smooth);

  overflow: hidden;

}



.card:hover {

  box-shadow: var(--shadow-card-hover);

  border-color: rgba(var(--color-primary-rgb), 0.25);

}



.card-header {

  background: linear-gradient(90deg, rgba(0, 59, 92, 0.04) 0%, transparent 100%);

  border-bottom-color: var(--color-border-subtle);

  font-family: var(--font-heading);

  font-weight: 600;

  color: var(--color-accent-deep);

}



.card-title {

  font-weight: 700;

  color: var(--color-accent-deep);

}



.card-text {

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

  font-weight: 400;

}



.shadow-sm {

  box-shadow: var(--shadow-card) !important;

}



/* ——— Tablas ——— */

.table {

  border-radius: var(--radius-md);

  overflow: hidden;

  vertical-align: middle;

  margin-bottom: 0;

}



.table thead {

  font-family: var(--font-heading);

  font-weight: 700;

  font-size: 0.8rem;

  text-transform: uppercase;

  letter-spacing: 0.04em;

  color: var(--color-white);

  background: linear-gradient(90deg, var(--color-accent-deep) 0%, #004a73 100%);

}



.table thead th {

  border-bottom: none;

  padding: 0.85rem 0.75rem;

  font-weight: 600;

}



.table tbody td {

  padding: 0.75rem;

  border-color: var(--color-border-subtle);

}



.table-striped > tbody > tr:nth-of-type(odd) > * {

  background-color: rgba(var(--color-background-light-rgb), 0.65);

}



.table-hover > tbody > tr:hover > * {

  background-color: rgba(var(--color-primary-rgb), 0.08);

}



.table .btn-group .btn i {

  font-size: 1rem;

}



/* ——— Badges ——— */

.badge {

  border-radius: var(--radius-sm);

  font-weight: 600;

  font-size: 0.75rem;

  letter-spacing: 0.02em;

  padding: 0.4em 0.65em;

}



.badge.bg-primary,

.bg-primary.badge {

  background-color: var(--color-primary) !important;

}



.badge.bg-success {

  background-color: var(--color-accent-deep) !important;

}



.badge.bg-warning {

  background-color: rgba(var(--color-primary-rgb), 0.2) !important;

  color: var(--color-accent-deep) !important;

  border: 1px solid rgba(var(--color-primary-rgb), 0.4);

}



.badge.bg-secondary {

  background-color: var(--color-secondary) !important;

}



/* ——— Enlaces en contenido ——— */

.app-main a:not(.btn):not(.nav-link):not(.page-link):not(.app-footer-brand-link) {

  color: var(--color-accent-deep);

  font-weight: 500;

  text-decoration-thickness: 1px;

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

}



.app-main a:not(.btn):not(.nav-link):not(.page-link):hover {

  color: var(--color-primary);

}



/* ——— Modales y alertas ——— */

.modal-content {

  border: none;

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

  box-shadow: var(--shadow-card-hover);

}



.modal-header {

  background: linear-gradient(90deg, var(--color-accent-deep) 0%, #004a73 100%);

  color: var(--color-white);

  border-bottom: 3px solid var(--color-primary);

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

}



.modal-header .btn-close {

  filter: invert(1) grayscale(100%) brightness(200%);

}



.modal-footer {

  background-color: var(--color-background-light);

  border-top: 1px solid var(--color-border-subtle);

}



.alert-primary {

  --bs-alert-color: var(--color-accent-deep);

  --bs-alert-bg: rgba(var(--color-primary-rgb), 0.12);

  --bs-alert-border-color: rgba(var(--color-primary-rgb), 0.35);

}



/* ——— Paginación ——— */

.page-link {

  color: var(--color-accent-deep);

  border-radius: var(--radius-sm);

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

}



.page-link:hover {

  color: var(--color-white);

  background-color: var(--color-primary);

  border-color: var(--color-primary);

}



.page-item.active .page-link {

  background-color: var(--color-accent-deep);

  border-color: var(--color-accent-deep);

}



/* ——— Utilidades Bootstrap ——— */

.bg-light {

  background-color: var(--color-background-light) !important;

  border-color: var(--color-border-subtle) !important;

}



.border,

.border-top,

.border-bottom {

  border-color: var(--color-border-subtle) !important;

}



.rounded-3 {

  border-radius: var(--radius-lg) !important;

}



/* Iconos decorativos en listas */

.bi.text-primary,

.text-primary .bi {

  color: var(--color-primary) !important;

}



/* ——— Footer corporativo ——— */

.footer.app-footer,

.app-footer.footer {

  flex-shrink: 0;

  position: relative;

  width: 100%;

  margin-top: auto;

  padding: 0;

  background: linear-gradient(180deg, var(--footer-bg) 0%, var(--footer-bg-bottom) 100%) !important;

  color: var(--color-text-on-dark) !important;

  border-top: none !important;

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

}



.app-footer-accent {

  height: 4px;

  width: 100%;

  background: linear-gradient(90deg, var(--color-primary) 0%, rgba(0, 174, 239, 0.5) 50%, var(--color-secondary) 100%);

}



.app-footer-container {

  padding: 2.75rem 1rem 2rem;

}



@media (min-width: 768px) {

  .app-footer-container {

    padding: 3.25rem 1rem 2.25rem;

  }

}



.app-footer-grid {

  margin-bottom: 0.5rem;

}



.app-footer-brand-stack {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 0.35rem;

  width: 100%;

  max-width: 420px;

}



.app-footer-brand-link {

  display: block;

  width: 100%;

  line-height: 0;

  margin: 0;

}



.app-footer-brand-link:hover .app-footer-logo {

  opacity: 0.9;

}



.app-footer-logo {

  display: block;

  width: 100%;

  height: auto;

  max-height: 12.5rem;

  object-fit: contain;

  object-position: left top;

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

}



@media (min-width: 992px) {

  .app-footer-brand-stack {

    max-width: 440px;

  }



  .app-footer-logo {

    max-height: 13.5rem;

  }

}



@media (max-width: 575.98px) {

  .app-footer-brand-stack {

    align-items: center;

    max-width: min(340px, 92vw);

    margin-left: auto;

    margin-right: auto;

    text-align: center;

  }



  .app-footer-logo {

    max-height: 9.5rem;

    object-position: center top;

  }

}



.app-footer-tagline {

  margin: 0;

  max-width: 22rem;

  font-size: 0.9rem;

  line-height: 1.65;

  color: var(--color-text-on-dark-muted);

  font-weight: 400;

}



.app-footer-heading {

  font-family: var(--font-heading);

  font-size: 0.8rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: var(--color-primary);

  margin-bottom: 1rem;

}



.app-footer-links li + li,

.app-footer-contact li + li {

  margin-top: 0.55rem;

}



.app-footer-links a,

.app-footer-contact a {

  color: var(--color-text-on-dark);

  text-decoration: none;

  font-size: 0.9rem;

  font-weight: 500;

  transition: color var(--transition-fast), padding-left var(--transition-fast);

}



.app-footer-links a:hover,

.app-footer-contact a:hover {

  color: var(--color-primary);

  padding-left: 0.15rem;

}



.app-footer-contact li {

  display: flex;

  align-items: flex-start;

  gap: 0.65rem;

  font-size: 0.9rem;

  color: var(--color-text-on-dark-muted);

}



.app-footer-contact i {

  color: var(--color-primary);

  font-size: 1rem;

  margin-top: 0.15rem;

  flex-shrink: 0;

}



.app-footer-divider {

  height: 1px;

  margin: 2rem 0 1.25rem;

  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

  border: none;

}



.app-footer-copy {

  font-size: 0.8rem;

  color: var(--color-text-on-dark-muted);

  font-weight: 500;

}



.app-footer-legal-link {

  font-size: 0.8rem;

  font-weight: 600;

  color: var(--color-text-on-dark);

  text-decoration: none;

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

}



.app-footer-legal-link:hover {

  color: var(--color-primary);

}



@media (max-width: 767.98px) {

  .app-footer-brand-col {

    text-align: center;

  }



  .app-footer-tagline {

    margin-left: auto;

    margin-right: auto;

  }



  .app-footer-heading {

    margin-top: 0.5rem;

  }

}



/* Banda ancho completo antes del footer */

.app-main-wrap > .home-testimonials,

.app-main-wrap > section.home-testimonials {

  margin-bottom: 0;

}



/* ——— Form floating ——— */

.form-floating > .form-control-plaintext::placeholder,

.form-floating > .form-control::placeholder {

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

}



/* Validación */

.text-danger {

  font-size: 0.8rem;

  font-weight: 500;

}



.validation-summary-errors {

  font-size: 0.875rem;

}



.app-main > h1:first-child,

.app-main > h2:first-child,

.app-main > .d-flex > h1,

.app-main > .d-flex > h2 {

  color: var(--color-accent-deep);

  font-weight: 700;

}