/* Mismos colores, tipografía y tarjetas que storage.lineagrafica.es */
:root {
  --corporate-blue: #1a365d;
  --corporate-dark-blue: #0f2027;
  --corporate-green: #89F20E;
  --corporate-light-gray: #e2e8f0;
  --corporate-dark-gray: #4a5568;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--corporate-dark-blue); }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: #333;
  background: linear-gradient(135deg, var(--corporate-dark-blue) 0%, var(--corporate-blue) 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

[hidden] { display: none !important; }

.container { max-width: 640px; margin: 0 auto; padding: 16px; }

.header, section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.header { text-align: center; margin-bottom: 14px; padding: 20px 16px 16px; }
.logo { display: block; width: 220px; max-width: 70%; height: auto; margin: 0 auto 14px; }
.header h1 { font-size: 1.4rem; font-weight: 700; color: var(--corporate-blue); margin-bottom: 4px; letter-spacing: .02em; }
.subtitle { font-size: 0.9rem; color: var(--corporate-dark-gray); }

section { padding: 18px 16px; margin-bottom: 14px; }
section h2 {
  font-size: 1.15rem; font-weight: 600; color: var(--corporate-blue);
  margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--corporate-green);
}
section p { color: var(--corporate-dark-gray); font-size: .95rem; }

.ip-card { text-align: center; padding: 28px 16px; }
.ip-label { display: block; font-size: .9rem; font-weight: 500; color: var(--corporate-dark-gray); text-transform: uppercase; letter-spacing: .06em; }
.ip-main {
  font-family: 'Courier New', ui-monospace, monospace;
  font-weight: 700;
  color: var(--corporate-blue);
  font-size: clamp(1.5rem, 8.4vw, 3.2rem);
  white-space: nowrap;
  line-height: 1.15;
  margin: 10px 0 20px;
  overflow-wrap: anywhere;
  user-select: all;
}
.ip-main.larga { font-size: clamp(1.1rem, 5.4vw, 1.9rem); white-space: normal; }

.ip-secundaria { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--corporate-light-gray); }
.ip-fila { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.ip-value {
  font-family: 'Courier New', ui-monospace, monospace; font-weight: 600; color: #2d3748;
  background: #edf2f7; padding: 6px 10px; border-radius: 6px; overflow-wrap: anywhere; user-select: all;
}

.btn {
  padding: 8px 20px; border: none; border-radius: 6px; font: inherit; font-size: .9rem; font-weight: 600;
  cursor: pointer; transition: all .3s ease; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-primary { background: linear-gradient(135deg, var(--corporate-green), #6BC200); color: var(--corporate-blue); }
.btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(137, 242, 14, .4); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.btn-outline { background: transparent; color: var(--corporate-blue); border: 2px solid var(--corporate-green); }
.btn-outline:hover { background: var(--corporate-green); }
.btn-big { font-size: 1.05rem; padding: 14px 32px; min-width: 200px; }
.btn.ok { background: #48bb78; color: #fff; border-color: #48bb78; }

.envio { text-align: center; }
.envio p { margin-bottom: 14px; }
.estado { margin: 14px 0 0 !important; font-weight: 500; }
.estado:empty { display: none; }
.estado.bien { color: #2f855a; }
.estado.mal { color: #c53030; }
.aviso { margin-top: 10px; color: #c05621 !important; }

.pie { text-align: center; color: rgba(255, 255, 255, .7); font-size: .8rem; padding: 6px 0 16px; }

@media (max-width: 480px) {
  .btn-big { width: 100%; }
}