/* style.css
   Dirección visual: un "ticket de reclamo" digital — cada clip es un
   comprobante temporal con su propio sello de vencimiento, en una bandeja
   oscura cálida (no el típico negro puro). El acento ámbar funciona como
   el sello de tinta de un recibo. Tipografía monoespaciada para todo lo
   que es "dato" (contenido, contador de tiempo), y una sans humanista para
   las acciones y el texto de interfaz.
*/

:root {
  --bg: #15131c;
  --surface: #211d2c;
  --surface-2: #2a2438;
  --border: #3a3548;
  --text: #f1ede4;
  --text-muted: #9c96ac;
  --accent: #f2b84b;
  --accent-ink: #2a1d05;
  --danger: #e0556b;
  --success: #6fcf97;

  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
}

body {
  padding-bottom: env(safe-area-inset-bottom);
}

button,
input,
textarea,
select {
  font-family: inherit;
  font-size: 16px; /* evita zoom automático al enfocar en iOS */
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.muted {
  color: var(--text-muted);
}

.mono {
  font-family: var(--font-mono);
}

/* ---------- Login ---------- */

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 28px;
  text-align: center;
}

.login-mark {
  font-size: 28px;
  color: var(--accent);
  margin-bottom: 4px;
}

.login-card h1 {
  margin: 0 0 4px;
  font-size: 22px;
}

.login-card p {
  margin: 0 0 24px;
  font-size: 14px;
}

#login-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#login-form input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  padding: 14px;
  text-align: center;
}

#login-form button {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: 10px;
  padding: 14px;
  font-weight: 600;
  cursor: pointer;
}

#login-form button:active {
  transform: scale(0.98);
}

.error {
  color: var(--danger);
  font-size: 14px;
  margin-top: 16px;
}

/* ---------- Layout principal ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}

.topbar h1 {
  font-size: 18px;
  margin: 0;
  letter-spacing: 0.02em;
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px 48px;
}

.ghost-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
}

/* ---------- Caja para agregar clips ---------- */

.add-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 28px;
}

#text-input {
  width: 100%;
  resize: vertical;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  padding: 12px;
  font-family: var(--font-mono);
  line-height: 1.4;
}

.add-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.add-row select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 8px;
}

.secondary-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
}

.primary-btn {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-weight: 600;
  cursor: pointer;
  margin-left: auto;
}

.primary-btn:active,
.secondary-btn:active {
  transform: scale(0.98);
}

.file-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  color: var(--text-muted);
  width: 100%;
  justify-content: center;
}

/* ---------- Lista de clips ---------- */

.list-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

.list-header h2 {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0;
}

.clips-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.clip-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.clip-body {
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow-y: auto;
}

.clip-body img,
.clip-body video {
  max-width: 100%;
  border-radius: 8px;
  display: block;
}

.clip-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px dashed var(--border); /* el "perforado" del ticket */
  background: var(--surface-2);
}

.clip-expiry {
  font-size: 12px;
  color: var(--text-muted);
}

.clip-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
}

.copy-btn {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.copy-btn.copied {
  background: var(--success);
}

.delete-btn {
  background: transparent;
  color: var(--text-muted);
}

.empty-state {
  text-align: center;
  padding: 32px 16px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  font-size: 14px;
}