/* ======================================================
   STOCKTELECOM MAIN STYLE
   Paleta corporativa + componentes personalizados
   ====================================================== */

:root {
  /* Colores principales */
  --st-primary: #1E88E5;
  --st-primary-dark: #1565C0;
  --st-accent: #00BFA5;

  /* Tonos auxiliares */
  --st-success: #2E7D32;
  --st-success-soft: #E8F5E9;
  --st-warning: #F9A825;
  --st-warning-soft: #FFF8E1;
  --st-danger: #D32F2F;
  --st-danger-soft: #FFEBEE;

  /* Textos y fondos */
  --st-text: #0F172A;
  --st-text-2: #64748B;
  --st-bg: #FFFFFF;
  --st-bg-soft: #F1F5F9;
  --st-border: #E2E8F0;

  /* Navbar */
  --st-navbar-bg: #2B303A;
  --st-navbar-text: #FFFFFF;

  /* Otros */
  --st-radius: 0.5rem;
}

/* ------------------------------------------------------
   BASE
------------------------------------------------------ */
body {
  background: var(--st-bg-soft);
  color: var(--st-text);
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  line-height: 1.6;
}

a {
  color: var(--st-primary);
  text-decoration: none;
  text-underline-offset: 3px;
}
a:hover {
  text-decoration: underline;
}

.st-muted { color: var(--st-text-2); }
.st-brand { color: var(--st-primary); }
.st-accent { color: var(--st-accent); }

/* ------------------------------------------------------
   NAVBAR
------------------------------------------------------ */
.st-navbar {
  background-color: var(--st-navbar-bg);
  color: var(--st-navbar-text);
}
.st-navbar .navbar-brand,
.st-navbar .nav-link,
.st-navbar .btn-outline-light {
  color: var(--st-navbar-text) !important;
}
.st-navbar .nav-link.active,
.st-navbar .nav-link:hover {
  opacity: 0.8;
  color: var(--st-accent) !important;
}
.st-navbar .btn-outline-light:hover {
  background-color: var(--st-accent);
  border-color: var(--st-accent);
  color: #fff;
}

/* ------------------------------------------------------
   COMPONENTES DE LAYOUT
------------------------------------------------------ */
.st-card {
  border-radius: var(--st-radius);
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.st-section {
  background: var(--st-bg-soft);
  border-radius: var(--st-radius);
  padding: 1rem;
}

/* ------------------------------------------------------
   BOTONES PERSONALIZADOS
------------------------------------------------------ */
.btn-st {
  background: var(--st-primary);
  border-color: var(--st-primary);
  color: #fff;
  transition: all 0.2s ease;
}
.btn-st:hover {
  background: var(--st-primary-dark);
  border-color: var(--st-primary-dark);
  color: #fff;
}

/* Verdes y amarillos personalizados */
.btn-success-st {
  background-color: var(--st-success);
  border-color: var(--st-success);
  color: #fff;
}
.btn-success-st:hover {
  background-color: #1B5E20;
  border-color: #1B5E20;
  color: #fff;
}

.btn-warning-st {
  background-color: var(--st-warning);
  border-color: var(--st-warning);
  color: #fff;
}
.btn-warning-st:hover {
  background-color: #F57F17;
  border-color: #F57F17;
  color: #fff;
}

/* Botón peligro (eliminar, etc.) */
.btn-danger-st {
  background-color: var(--st-danger);
  border-color: var(--st-danger);
  color: #fff;
}
.btn-danger-st:hover {
  background-color: #B71C1C;
  border-color: #B71C1C;
  color: #fff;
}

/* Botón suave / secundario (ver, detalles, movimientos...) */
.btn-soft-st {
  background-color: var(--st-text-2);
  border-color: var(--st-text-2);
  color: #fff;
}
.btn-soft-st:hover {
  background-color: #536072;
  border-color: #536072;
  color: #fff;
}
.btn-info-st{
    background-color: #0dcaf0;
    border-color: #0dcaf0;
    color: #fff;
}
.btn-info-st:hover{
    background-color: #0baaca;
    border-color: #0baaca;
    color: #fff;
}
.btn-accent-st {
  background-color: var(--st-accent);
  border-color: var(--st-accent);
  color: #fff;
}
.btn-accent-st:hover {
  background-color: #008E7E;
  border-color: #008E7E;
  color: #fff;
}
.btn-icon {
  font-size: 1.2rem;
  vertical-align: middle;
}

a.btn,
a.btn:hover,
a.btn:focus {
    text-decoration: none !important;
}




/* ------------------------------------------------------
   BADGES / ETIQUETAS
------------------------------------------------------ */
.badge-soft {
  background: rgba(30, 136, 229, 0.12);
  color: var(--st-primary);
  border-radius: 0.25rem;
  font-weight: 500;
}
.badge-accent {
  background: rgba(0, 191, 165, 0.12);
  color: var(--st-accent);
  border-radius: 0.25rem;
}

.badge-success-soft {
  background-color: var(--st-success-soft);
  color: var(--st-success);
}
.badge-warning-soft {
  background-color: var(--st-warning-soft);
  color: var(--st-warning);
}
.badge-danger-soft {
  background-color: var(--st-danger-soft);
  color: var(--st-danger);
}

/* ------------------------------------------------------
   FORMULARIOS
------------------------------------------------------ */
.form-control,
.form-select {
  border-radius: var(--st-radius);
  border-color: var(--st-border);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--st-primary);
  box-shadow: 0 0 0 0.15rem rgba(30, 136, 229, 0.25);
}

/* ------------------------------------------------------
   TABLAS
------------------------------------------------------ */
.table thead th {
  background-color: var(--st-primary);
  color: #fff;
  vertical-align: middle;
}
.table-hover tbody tr:hover {
  background-color: rgba(30, 136, 229, 0.05);
}

/* ------------------------------------------------------
   MODALES / CARDS
------------------------------------------------------ */
.card,
.modal-content {
  border-radius: var(--st-radius);
}

/* ------------------------------------------------------
   UTILIDADES
------------------------------------------------------ */
.st-section-title {
  font-weight: 600;
  color: var(--st-primary-dark);
  margin-bottom: 0.5rem;
}

.alert {
  border-radius: var(--st-radius);
}

/* Ajustes para tamaños en el login-selection.blade*/
/* Altura mínima para que el contenido no colapse en anchos medios */
.role-card { min-height: 260px; }

/* Evita que “Entrar” se parta o se salga del botón */
.role-btn { white-space: nowrap; }

/*Tamañp de los iconos  */
.sidebar-icon {
    font-size: 1.3rem; /* Ajusta aquí: 1.25 = grande pero elegante */
}


/* Ajuste de tipografía de títulos en anchos entre tablet y laptop */
@media (max-width: 1199.98px) {
  .role-card h5 { font-size: 1.1rem; }
}