/*
 * Theme MasterSoft (G03).
 *
 * Los tres colores de marca se tomaron de las variables CSS que el propio sitio
 * mastersoft.com.ar declara, no de una estimación visual:
 *
 *   --primary-color:   #B12535   → --ms-rojo
 *   --secondary-color: #F9B24F   → --ms-ambar
 *   --gray-color:      #132238   → --ms-navy
 *   --text-color:      #636569   → --ms-texto-suave
 *
 * OJO: esto NO coincide con lo que dice G03 en el backlog ("bordó y
 * celeste/azul"). En el sitio no hay ningún celeste: el acento es ámbar y el
 * azul es un navy oscuro que funciona como neutro. Falta confirmar contra el
 * manual de marca, si existe, cuál de las dos descripciones manda.
 *
 * Tipografía del sitio: Open Sans (Nunito en algunos títulos).
 */
:root {
  --ms-rojo: #B12535;
  --ms-rojo-oscuro: #8e1d2a;
  --ms-ambar: #F9B24F;
  --ms-navy: #132238;
  --ms-navy-claro: #22344f;
  --ms-fondo: #f1f1f1;
  --ms-superficie: #ffffff;
  --ms-texto: #1f2328;
  --ms-texto-suave: #636569;
  --ms-borde: #e0e4e8;
  --ms-exito: #2e7d32;
  --ms-advertencia: #b8860b;
  --ms-error: #b3261e;
}

html {
  font-size: 15px;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ms-fondo);
  color: var(--ms-texto);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

/* Header */
.ms-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1.25rem;
  background: linear-gradient(90deg, var(--ms-navy), var(--ms-navy-claro));
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.ms-header__marca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Logo real (PNG). Se fija la altura y el ancho se deduce, para no deformarlo
   si en algún momento se reemplaza por un archivo de otra proporción. */
.ms-header__logo {
  height: 30px;
  width: auto;
  display: block;
}

.ms-header__titulo {
  font-size: 0.8rem;
  opacity: 0.85;
  padding-left: 0.75rem;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  line-height: 1.1;
}

.ms-logo-claro {
  height: 44px;
  width: auto;
  display: block;
}

.ms-header__contexto {
  flex: 1;
  display: flex;
  justify-content: center;
}

.ms-badge {
  font-size: 0.78rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
}

.ms-badge--pendiente {
  border: 1px dashed rgba(255, 255, 255, 0.6);
}

.ms-header__usuario {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
}

.ms-inline-form {
  display: inline;
}

.ms-btn--enlace {
  background: none;
  border: none;
  color: #fff;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-size: 0.85rem;
}

/* Shell: sidebar + contenido */
.ms-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: calc(100vh - 110px);
}

.ms-menu {
  background: var(--ms-superficie);
  border-right: 1px solid var(--ms-borde);
  padding: 1rem 0;
}

.ms-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ms-menu > ul > li {
  margin-bottom: 0.25rem;
}

.ms-menu a {
  display: block;
  padding: 0.5rem 1.25rem;
  color: var(--ms-texto);
  text-decoration: none;
  font-size: 0.92rem;
}

.ms-menu a:hover {
  background: var(--ms-fondo);
  color: var(--ms-navy);
}

.ms-menu__grupo {
  display: block;
  padding: 0.6rem 1.25rem 0.2rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ms-texto-suave);
  letter-spacing: 0.03em;
}

.ms-menu > ul > li > ul a {
  padding-left: 2rem;
  font-size: 0.88rem;
}

.ms-contenido {
  padding: 1.5rem 2rem;
}

.ms-contenido-anonima {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ms-rojo) 0%, var(--ms-navy) 100%);
}

/* Componentes comunes */
.ms-page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.ms-page-header h1 {
  font-size: 1.4rem;
  margin: 0;
  color: var(--ms-rojo);
}

.ms-card {
  background: var(--ms-superficie);
  border: 1px solid var(--ms-borde);
  border-radius: 10px;
  padding: 1.25rem;
}

.ms-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.ms-kpi {
  background: var(--ms-superficie);
  border: 1px solid var(--ms-borde);
  border-left: 4px solid var(--ms-ambar);
  border-radius: 8px;
  padding: 1rem 1.25rem;
}

.ms-kpi__valor {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ms-rojo);
}

.ms-kpi__etiqueta {
  font-size: 0.8rem;
  color: var(--ms-texto-suave);
}

.ms-tabla {
  width: 100%;
  border-collapse: collapse;
  background: var(--ms-superficie);
}

.ms-tabla th,
.ms-tabla td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--ms-borde);
  text-align: left;
  font-size: 0.9rem;
}

.ms-tabla th {
  color: var(--ms-texto-suave);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ms-estado-vacio {
  padding: 2rem;
  text-align: center;
  color: var(--ms-texto-suave);
  border: 1px dashed var(--ms-borde);
  border-radius: 10px;
  background: var(--ms-superficie);
}

.ms-btn-primario {
  display: inline-block;
  background: var(--ms-rojo);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1.1rem;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
}

.ms-btn-primario:hover {
  background: var(--ms-rojo-oscuro);
  color: #fff;
}

/* Un botón deshabilitado tiene que verse deshabilitado. Sin esto queda rojo y con
   cursor de mano, indistinguible de uno activo: el usuario lo aprieta, no pasa nada,
   y parece que la pantalla se colgó. */
.ms-btn-primario:disabled,
.ms-btn-primario[disabled] {
  background: var(--ms-borde);
  color: var(--ms-texto-suave);
  cursor: not-allowed;
  opacity: 0.8;
}

.ms-btn-primario:disabled:hover,
.ms-btn-primario[disabled]:hover {
  background: var(--ms-borde);
  color: var(--ms-texto-suave);
}

.ms-btn-secundario {
  display: inline-block;
  background: var(--ms-superficie);
  color: var(--ms-texto);
  border: 1px solid var(--ms-borde);
  border-radius: 6px;
  padding: 0.5rem 1.1rem;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
}

.ms-btn-secundario:hover {
  background: var(--ms-fondo);
}

/* Misma regla que en el botón primario, y por el mismo motivo: sin esto un secundario
   deshabilitado se ve idéntico a uno activo. Hizo falta cuando el alta de clientes empezó a
   apagar «Marcar todos» mientras escribe en el ERP (2026-09-17). */
.ms-btn-secundario:disabled,
.ms-btn-secundario[disabled] {
  color: var(--ms-texto-suave);
  border-color: var(--ms-borde);
  background: var(--ms-fondo);
  cursor: not-allowed;
  opacity: 0.6;
}

.ms-btn-secundario:disabled:hover,
.ms-btn-secundario[disabled]:hover {
  background: var(--ms-fondo);
}

/* Botón de acción auxiliar: se tiene que ver, pero no competir con el Guardar.
   Delineado en el rojo de la marca en lugar de relleno — con dos botones rellenos en la
   misma pantalla no se sabe cuál es la acción principal, y acá la principal es Guardar.
   El secundario común se perdía contra el fondo de la tarjeta. */
.ms-btn-accion {
  display: inline-block;
  background: var(--ms-superficie);
  color: var(--ms-rojo);
  border: 1.5px solid var(--ms-rojo);
  border-radius: 6px;
  padding: 0.5rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.ms-btn-accion:hover {
  background: var(--ms-rojo);
  color: #fff;
}

/* Mismo criterio que en el botón primario: uno deshabilitado tiene que verse
   deshabilitado, o el usuario lo aprieta y parece que la pantalla se colgó. */
.ms-btn-accion:disabled,
.ms-btn-accion[disabled] {
  background: var(--ms-superficie);
  color: var(--ms-texto-suave);
  border-color: var(--ms-borde);
  cursor: not-allowed;
  font-weight: 400;
}

.ms-btn-accion:disabled:hover,
.ms-btn-accion[disabled]:hover {
  background: var(--ms-superficie);
  color: var(--ms-texto-suave);
}

/* Alerta: algo que invalida lo que se está mirando.
 *
 * Es deliberadamente más fuerte que .ms-aviso, y existe porque en la conciliación un aviso
 * ámbar quedaba indistinguible de las notas informativas que lo rodean — el usuario reportó
 * dos veces que no lo veía. Un aviso que no se ve es lo mismo que no tenerlo.
 *
 * Se usa con cuentagotas: si hubiera tres alertas en una pantalla volvería a no destacarse
 * ninguna. Para lo que solo hay que saber, va .ms-aviso. */
.ms-alerta {
  border: 2px solid var(--ms-error);
  border-left-width: 10px;
  background: #fdecea;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.ms-alerta__titulo {
  display: block;
  color: var(--ms-error);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 0.4rem;
}

.ms-alerta__detalle {
  font-size: 0.9rem;
  color: var(--ms-texto);
}

/* Aviso previo a una operación que escribe en el ERP. */
.ms-aviso {
  border-left: 4px solid var(--ms-ambar);
  background: #fff8ea;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  margin: 1.25rem 0;
}


/* Espera de una operación que escribe en el ERP.
 *
 * Existe porque el cambio de texto del botón no alcanza: el alta puede tardar varios
 * segundos —lo pesado no son las altas sino recuperar la conciliación guardada, que con un
 * archivo grande son megas— y en ese rato la pantalla se ve exactamente igual que antes de
 * apretar. El usuario reportó el 2026-09-17 que parecía colgada.
 *
 * Arranca oculto y lo muestra el script al enviar el formulario. */
.ms-esperando {
  display: none;
  align-items: center;
  gap: .75rem;
  border-left: 4px solid var(--ms-ambar);
  background: #fff8ea;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  margin: 1rem 0 0;
}

.ms-esperando--visible {
  display: flex;
}

/* El disco que gira. Es lo que distingue "está trabajando" de "se colgó": un texto fijo no
 * dice nada sobre si el proceso sigue vivo. */
.ms-esperando__disco {
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  border: 3px solid var(--ms-borde);
  border-top-color: var(--ms-rojo);
  border-radius: 50%;
  animation: ms-girar .9s linear infinite;
}

@keyframes ms-girar {
  to { transform: rotate(360deg); }
}

/* Quien configuró el sistema para no ver animaciones no las ve. El aviso se muestra igual:
 * lo que se saca es el giro, no la información. */
@media (prefers-reduced-motion: reduce) {
  .ms-esperando__disco { animation: none; }
}

/* Mostrar/ocultar contraseña. El contenedor toma el margen inferior que traía el input,
   para no alterar el espaciado del formulario al envolverlo. */
.ms-password {
  position: relative;
  display: block;
  margin-bottom: 1rem;
}

.ms-password .form-control {
  margin-bottom: 0;
  /* Espacio para que el texto no quede debajo del botón. */
  padding-right: 2.5rem;
}

.ms-password__ver {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--ms-texto-suave);
}

.ms-password__ver:hover {
  color: var(--ms-texto);
}

.ms-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
  font-size: 0.88rem;
}

.ms-form .form-control {
  margin-bottom: 1rem;
}

.ms-login {
  width: 100%;
  max-width: 380px;
  background: var(--ms-superficie);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.ms-login__logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.ms-footer {
  text-align: center;
  font-size: 0.75rem;
  color: var(--ms-texto-suave);
  padding: 1rem;
}

.text-danger {
  color: var(--ms-error) !important;
}

/* Solapas dentro de un formulario. Se usan cuando una pantalla junta bloques de
   configuración que no se editan juntos —el ABM de Empresa tiene tres— para que el
   formulario no sea una lista interminable.

   Los paneles NO se esconden por CSS: los esconde el script. Si el JavaScript fallara,
   la pantalla queda larga pero completa, que es mejor que tener campos inalcanzables y
   un Guardar que igual los manda. */
.ms-solapas {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--ms-borde);
  margin-bottom: 1.25rem;
}

.ms-solapa {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.6rem 0.9rem;
  font: inherit;
  color: var(--ms-texto-suave);
  cursor: pointer;
  margin-bottom: -1px;
}

.ms-solapa:hover {
  color: var(--ms-texto);
}

.ms-solapa--activa {
  color: var(--ms-texto);
  border-bottom-color: var(--ms-rojo);
  font-weight: 600;
}