/* Tema de marca Sunat Digital (sobre AdminLTE 3.2).
   Color de marca: naranja #FF6600, igual que Apunta La Placa. */

:root {
  --sd-naranja: #ff6600;
  --sd-naranja-oscuro: #cc5200;
  --sd-naranja-claro: #fff3ea;
}

body,
.wrapper {
  font-family: "Source Sans Pro", -apple-system, "Segoe UI", sans-serif;
}

/* Marca / logos */
.brand-anton {
  font-family: "Anton", sans-serif;
  letter-spacing: 0.5px;
}

/* Barra superior negra y fija: acompaña a la lateral y no se va al hacer
   scroll (el body lleva `layout-navbar-fixed`, que es quien la fija). */
.sd-navbar.main-header {
  background-color: #000 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sd-navbar .nav-link,
.sd-navbar .nav-link i {
  color: #e6e8eb !important;
}
.sd-navbar .nav-link:hover,
.sd-navbar .nav-link:focus {
  color: var(--sd-naranja) !important;
}
.sd-navbar .nav-link .text-naranja {
  color: var(--sd-naranja) !important;
}
/* El nombre de la empresa también se ve en el celular, recortado si no cabe:
   saber en qué empresa estás emitiendo importa más que el ancho. */
.sd-empresa-nav .nav-link {
  max-width: 45vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Barra lateral negra, igual que Apunta La Placa */
.main-sidebar,
.brand-link {
  background-color: #000 !important;
}
/* AdminLTE fija el brand-link (position:fixed, 3.5rem de alto) y separa el
   menú justo esos 3.5rem. Nuestro logo es una imagen más alta, así que hay que
   declarar el alto y desplazar el menú lo mismo, o el logo tapa "Inicio". */
:root {
  --sd-alto-marca: 96px; /* 76 de logo + 2 x 10 de padding */
}
.brand-link {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px;
  text-align: center;
  display: block;
  height: var(--sd-alto-marca) !important;
  line-height: normal;
}
/* Logo: transparente sobre el negro, en tamaño contenido */
.brand-link .sd-logo {
  height: 76px;
  width: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}
.sidebar {
  margin-top: var(--sd-alto-marca) !important;
}

/* Sidebar: acento naranja en el ítem activo */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.nav-sidebar > .nav-item > .nav-link.active {
  background-color: var(--sd-naranja) !important;
  color: #fff !important;
  box-shadow: none;
}
.brand-link .brand-text {
  color: var(--sd-naranja) !important;
}

/* ===== Pantalla de acceso: fondo oscuro =====
   El logo es transparente y tiene letras blancas, así que sobre un fondo claro
   habría que encajonarlo en negro (se ve mal). Con la página oscura el logo se
   integra solo y queda en línea con la barra lateral negra. */
body.login-page {
  background: radial-gradient(circle at 50% 0%, #241505 0%, #0b0b0c 55%) !important;
  min-height: 100vh;
}

.login-logo .sd-logo {
  max-width: 300px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.login-page .sd-subtitulo {
  color: #9aa0a6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

/* Tarjeta oscura.
   AdminLTE pinta `.login-card-body` de blanco, así que hay que sobreescribirlo
   explícitamente o la tarjeta queda clara con texto gris ilegible. */
.login-page .card,
.login-page .login-card-body,
.login-page .register-card-body {
  background: #16181c !important;
  border-color: rgba(255, 255, 255, 0.08);
}
.login-page .card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.login-page .card-body,
.login-page .login-card-body,
.login-page label {
  color: #e6e8eb;
}
.login-page .card-header {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.login-page .card-title {
  color: #fff;
}
.login-page .text-muted {
  color: #9aa0a6 !important;
}

/* Campos oscuros */
.login-page .form-control {
  background-color: #0f1115;
  border-color: rgba(255, 255, 255, 0.12);
  color: #e6e8eb;
}
.login-page .form-control:focus {
  background-color: #0f1115;
  color: #fff;
  border-color: var(--sd-naranja);
  box-shadow: 0 0 0 0.15rem rgba(255, 102, 0, 0.25);
}
.login-page .form-control::placeholder {
  color: #6b7076;
}

/* Pestañas en el naranja de marca */
#tabsAcceso {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 4px;
}
#tabsAcceso .nav-link {
  color: #c9ced4;
  cursor: pointer;
  border-radius: 6px;
}
#tabsAcceso .nav-link.active {
  background-color: var(--sd-naranja) !important;
  color: #fff !important;
}

/* Botones primarios en naranja de marca */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
  background-color: var(--sd-naranja);
  border-color: var(--sd-naranja);
}
.btn-primary:hover {
  background-color: var(--sd-naranja-oscuro);
  border-color: var(--sd-naranja-oscuro);
}
.btn-outline-primary {
  color: var(--sd-naranja);
  border-color: var(--sd-naranja);
}
.btn-outline-primary:hover {
  background-color: var(--sd-naranja);
  border-color: var(--sd-naranja);
}

a {
  color: var(--sd-naranja-oscuro);
}

/* Acento naranja genérico.
   Antes esto solo existía como `.small-box.bg-naranja`, así que la barra de
   consumo del plan y cualquier otro elemento con la clase salían con el azul
   por defecto de AdminLTE. Ahora la clase vale en cualquier elemento. */
.bg-naranja {
  background-color: var(--sd-naranja) !important;
  color: #fff;
}
.progress-bar.bg-naranja {
  background-color: var(--sd-naranja) !important;
}

/* Toggle de tipo de documento (Factura/Boleta) */
.doc-toggle .btn.active {
  background-color: var(--sd-naranja);
  border-color: var(--sd-naranja);
  color: #fff;
}

/* Encabezado del documento en el constructor */
.doc-preview {
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  background: #fff;
}
.doc-preview .doc-box {
  border: 1px dashed #bbb;
  border-radius: 6px;
  padding: 10px 14px;
  text-align: center;
}

.text-naranja {
  color: var(--sd-naranja) !important;
}
.badge-naranja {
  background-color: var(--sd-naranja);
  color: #fff;
}

/* ===== Paleta propia de los indicadores =====
   Los colores de AdminLTE (bg-info, bg-secondary) se ven más lavados en las
   pantallas de celular que en el monitor. Estos tonos están elegidos con
   contraste suficiente en ambos y se declaran aquí, no heredados del tema. */
.small-box.sd-kpi-naranja { background-color: var(--sd-naranja) !important; }
.small-box.sd-kpi-verde   { background-color: #157347 !important; }
.small-box.sd-kpi-azul    { background-color: #0f5a7a !important; }
.small-box.sd-kpi-gris    { background-color: #3d4450 !important; }
.small-box.sd-kpi-naranja,
.small-box.sd-kpi-verde,
.small-box.sd-kpi-azul,
.small-box.sd-kpi-gris,
.small-box.sd-kpi-naranja .icon i,
.small-box.sd-kpi-verde .icon i,
.small-box.sd-kpi-azul .icon i,
.small-box.sd-kpi-gris .icon i {
  color: #fff !important;
}

/* ===== Celular =====
   El panel se usa mucho desde el teléfono, así que nada puede quedar cortado
   ni depender de un scroll lateral del cuerpo de la página. */
html {
  -webkit-text-size-adjust: 100%; /* Safari no agranda el texto por su cuenta */
}
@media (max-width: 767.98px) {
  .content-header h1 {
    font-size: 1.5rem;
  }
  .small-box .inner h3 {
    font-size: 1.8rem;
  }
  /* Tarjetas y formularios con menos aire lateral para ganar ancho útil */
  .content > .container-fluid,
  .content-header > .container-fluid {
    padding-left: 12px;
    padding-right: 12px;
  }
  .card-body {
    padding: 0.9rem;
  }
  /* Los botones de acción de cada comprobante caben en dos filas sin apretarse */
  .table td .btn {
    margin-bottom: 3px;
  }
  /* La fila del historial se lee como una ficha: los datos apilados bajo el
     número, y a la derecha solo los botones. Sin arrastrar la tabla de lado. */
  .sd-ficha {
    margin-top: 4px;
    font-size: 0.85rem;
    white-space: normal;
    max-width: 60vw;
  }
  .sd-ficha-cliente {
    font-weight: 600;
    color: #212529;
  }
}
/* Toda tabla puede desplazarse a lo ancho dentro de su propia caja, nunca
   arrastrando la página entera. */
.table-responsive {
  -webkit-overflow-scrolling: touch;
}

/* ===== Logo del negocio: previsualización antes de guardarlo =====
   Un logo con letras blancas desaparece sobre el papel; uno oscuro desaparece
   sobre un fondo negro. Por eso se muestra sobre los dos fondos. */
.sd-logo-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sd-logo-caja {
  flex: 1 1 130px;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 10px;
  text-align: center;
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-logo-caja.claro { background: #fff; }
.sd-logo-caja.oscuro { background: #1b1b1b; border-color: #000; }
.sd-logo-caja img {
  max-width: 100%;
  max-height: 64px;
  height: auto;
}
.sd-logo-etiqueta {
  font-size: 0.8rem;
  color: #6c757d;
  margin-top: 4px;
}

/* Tarjetas del selector de documento a emitir */
.sd-doc-card {
  display: block;
  width: 100%;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background: #fff;
  padding: 14px 12px;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sd-doc-card:hover,
.sd-doc-card:focus {
  border-color: var(--sd-naranja);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.sd-doc-card .sd-doc-titulo {
  font-weight: 600;
  color: #212529;
}
.sd-doc-card .sd-doc-sub {
  font-size: 0.82rem;
  color: #6c757d;
}
.sd-doc-card i {
  color: var(--sd-naranja);
}