/* Mesa OTC · identidad propia.
 *
 * La mesa la miran contrapartes externas, no el equipo: tiene su propia cara, con su propia hoja. Mismo
 * morado de MCMABO, otro lenguaje —suizo y geométrico: círculos, píldoras y cuartos de círculo, mucho
 * aire, tipografía apretada—. Todo dibujado acá: la política de seguridad no admite estilos ni fuentes de
 * terceros, así que no hay una sola llamada afuera.
 */
:root {
  /* El morado es de la casa. La mesa lo usa con su propia geometría: el color de MCMABO, otra cara. */
  --morado: #5b2d90;
  --morado-hondo: #3c1567;
  --morado-claro: #b18cf5;
  --morado-papel: #f3edfd;
  --tinta: #0b0d12;
  --gris: #5b6376;
  --linea: #e4e7ee;
  --papel: #f4f5f8;
  --blanco: #fff;
  --verde: #0f9d58;
  --ambar: #b45309;
  --rojo: #d92d20;
  --radio: 14px;
  --sombra: 0 1px 2px rgba(11, 13, 18, .04), 0 8px 24px rgba(11, 13, 18, .05);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; letter-spacing: -.01em;
}
h1, h2, h3 { margin: 0; letter-spacing: -.035em; font-weight: 700; }
h1 { font-size: 34px; line-height: 1.1; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
p { margin: 0; }
a { color: var(--morado); }
.oculto { display: none !important; }
.suave { color: var(--gris); }
.chico { font-size: 13px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; letter-spacing: -.02em; }

/* ---------------------------------------------------------------- armazón */
.app { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; }
.lateral {
  background: var(--blanco); border-right: 1px solid var(--linea);
  padding: 26px 18px; display: flex; flex-direction: column; gap: 26px;
}
.marca { display: flex; align-items: center; gap: 10px; font-size: 17px; letter-spacing: -.04em; }
.marca img { width: 26px; height: 26px; }
.marca strong { font-weight: 800; }
.marca i { color: var(--morado); font-style: normal; }
.lateral #enlaces { display: flex; flex-direction: column; gap: 2px; }
.lateral a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 999px; color: var(--gris); text-decoration: none; font-weight: 500;
}
.lateral a:hover { background: var(--papel); color: var(--tinta); }
.lateral a.activo { background: var(--morado); color: var(--blanco); }
.lateral a.activo .ic { stroke: var(--blanco); }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.estado-sistema {
  margin-top: auto; background: var(--morado-papel); border-radius: var(--radio);
  padding: 14px 16px; font-size: 13px; color: var(--morado-hondo);
}
.estado-sistema strong { display: block; margin-bottom: 4px; letter-spacing: -.02em; }

.cuerpo { display: flex; flex-direction: column; min-width: 0; }
.barra {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 14px 32px; background: var(--blanco); border-bottom: 1px solid var(--linea);
}
.buscador { display: flex; align-items: center; gap: 8px; background: var(--papel); border-radius: 999px; padding: 8px 14px; min-width: 260px; }
.buscador .ic { stroke: var(--gris); }
.buscador input { border: 0; background: none; outline: none; font: inherit; width: 100%; }
.perfil { display: flex; align-items: center; gap: 12px; }
.perfil span { display: block; font-size: 12px; color: var(--gris); }
.avatar {
  width: 36px; height: 36px; border-radius: 999px; background: var(--morado); color: var(--blanco);
  display: grid; place-items: center; font-weight: 700; font-size: 13px; letter-spacing: 0;
}
.principal { padding: 34px 32px 56px; max-width: 1100px; width: 100%; outline: none; }

/* ---------------------------------------------------------------- piezas */
.cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.cabecera p { color: var(--gris); margin-top: 8px; max-width: 60ch; }
.panel {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 24px; margin-bottom: 18px; box-shadow: var(--sombra);
}
.panel h2 { margin-bottom: 14px; }
.detalle { color: var(--gris); white-space: pre-wrap; line-height: 1.65; }
.vacio { padding: 36px; text-align: center; color: var(--gris); }

.acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
button {
  font: inherit; font-weight: 600; letter-spacing: -.01em; cursor: pointer;
  background: var(--morado); color: var(--blanco); border: 1px solid var(--morado);
  padding: 10px 20px; border-radius: 999px;
}
button:hover { background: var(--morado-hondo); border-color: var(--morado-hondo); }
button.sec { background: var(--blanco); color: var(--tinta); border-color: var(--linea); }
button.sec:hover { background: var(--papel); }
button.ancho { width: 100%; }
button.icono { padding: 9px; border-radius: 999px; display: grid; place-items: center; }
button:disabled { opacity: .5; cursor: default; }

label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
input, select, textarea {
  font: inherit; width: 100%; padding: 11px 14px; border: 1px solid var(--linea);
  border-radius: 10px; background: var(--blanco); color: var(--tinta); outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--morado); box-shadow: 0 0 0 3px rgba(91, 45, 144, .16); }

.etq {
  display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--papel); color: var(--gris); border: 1px solid var(--linea);
}
.etq.verde { background: #e8f6ee; color: var(--verde); border-color: #bfe5cf; }
.etq.ambar { background: #fdf3e3; color: var(--ambar); border-color: #f3ddb5; }
.etq.rojo  { background: #fdecea; color: var(--rojo);  border-color: #f6c9c4; }
.etq.teal  { background: var(--morado-papel); color: var(--morado-hondo); border-color: #ddd0f5; }

.msg { border-radius: var(--radio); padding: 14px 18px; margin-bottom: 18px; font-size: 14px; }
.msg.info  { background: var(--morado-papel); color: var(--morado-hondo); }
.msg.aviso { background: #fdf3e3; color: var(--ambar); }
.msg.error { background: #fdecea; color: var(--rojo); }

.tabla-envoltura { overflow-x: auto; margin: 0 -24px -24px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px 24px; text-align: left; border-top: 1px solid var(--linea); vertical-align: top; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--gris); font-weight: 700; background: var(--blanco); }
tbody tr:hover { background: #fafbfd; }

.pasos { margin: 0; padding-left: 20px; color: var(--gris); }
.pasos li { margin-bottom: 10px; }
.pasos strong { color: var(--tinta); }

.velo { position: fixed; inset: 0; background: rgba(11, 13, 18, .45); display: grid; place-items: center; padding: 24px; z-index: 40; }
.modal {
  background: var(--blanco); border-radius: 18px; padding: 28px; width: min(560px, 100%);
  max-height: 88vh; overflow: auto; box-shadow: 0 24px 64px rgba(11, 13, 18, .22);
}
.modal h2 { margin-bottom: 8px; }
.modal .acciones { margin: 22px 0 0; }

/* ---------------------------------------------------------------- ingreso */
.ingreso { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }
.ingreso-arte {
  background: var(--morado); color: var(--blanco); padding: 44px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  position: relative; overflow: hidden;
}
/* La geometría de la referencia, dibujada con la propia hoja: una hoja de dos cuartos de círculo
   —redondeada arriba a la izquierda y abajo a la derecha— y un círculo que la acompaña. */
.ingreso-arte::before, .ingreso-arte::after {
  content: ""; position: absolute; pointer-events: none;
}
.ingreso-arte::before {
  width: 300px; height: 300px; background: var(--morado-hondo);
  border-radius: 100% 0 100% 0;
  right: -40px; top: 22%; opacity: .85;
}
.ingreso-arte::after {
  width: 170px; height: 170px; border-radius: 999px; background: var(--morado-claro);
  right: 150px; bottom: 8%; opacity: .55;
}
.ingreso-arte > * { position: relative; z-index: 1; }
.ingreso-arte .marca i { color: var(--morado-claro); }
.ingreso-arte h1 { font-size: 46px; margin-bottom: 16px; }
.ingreso-arte p { color: rgba(255, 255, 255, .86); max-width: 42ch; }
.ingreso-arte ul { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ingreso-arte li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255, 255, 255, .92); }
.ingreso-arte .ic { stroke: var(--blanco); }
.ingreso-form { display: grid; place-items: center; padding: 40px; background: var(--blanco); }
.tarjeta-ingreso { width: min(400px, 100%); display: flex; flex-direction: column; gap: 4px; }
.tarjeta-ingreso .marca { margin-bottom: 26px; }
.tarjeta-ingreso h2 { font-size: 26px; margin-bottom: 6px; }
.tarjeta-ingreso .acciones { margin: 22px 0 0; }
.qr { display: grid; place-items: center; margin: 18px 0; }
.qr img, .qr canvas, .qr table { max-width: 200px; height: auto; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .lateral { flex-direction: row; align-items: center; gap: 16px; overflow-x: auto; padding: 14px 16px; }
  .lateral #enlaces { flex-direction: row; }
  .estado-sistema { display: none; }
  .principal, .barra { padding-left: 16px; padding-right: 16px; }
  .ingreso { grid-template-columns: 1fr; }
  .ingreso-arte { display: none; }
}