/* timestamp-converter.css — Estilos específicos de la herramienta Convertidor de Timestamps */
/* Solo contiene estilos propios del convertidor. Los estilos compartidos
   (navegación, botones pill, panel de resultado, mensajes de estado,
   acciones globales, sección SEO, noscript) se reutilizan de json-formatter.css */

/* ========================================
   Campo de Entrada de Texto (Timestamp)
   Input monoespaciado con estilo terminal oscuro
   ======================================== */
.timestamp-input {
  display: block;
  width: 100%;
  padding: 0.85rem 1.25rem;
  min-height: 2.85rem;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  outline: none;
  transition: border-color var(--transition-base);
}

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

/* Transición de borde en focus — resalta el campo activo */
.timestamp-input:focus {
  border-color: var(--color-accent-yellow);
}

.timestamp-input:focus-visible {
  outline: 2px solid var(--color-accent-yellow);
  outline-offset: 2px;
}

/* ========================================
   Campo Datetime-Local
   Apariencia consistente con el tema oscuro
   ======================================== */
.timestamp-datetime {
  display: block;
  width: 100%;
  padding: 0.85rem 1.25rem;
  min-height: 2.85rem;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  outline: none;
  transition: border-color var(--transition-base);
  /* Esquema de color oscuro para el selector nativo del navegador */
  color-scheme: dark;
  /* Evitar que el navegador comprima la altura del widget nativo */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.timestamp-datetime:focus {
  border-color: var(--color-accent-yellow);
}

.timestamp-datetime:focus-visible {
  outline: 2px solid var(--color-accent-yellow);
  outline-offset: 2px;
}

/* ========================================
   Etiqueta del campo Datetime
   Separación superior respecto al campo de texto
   ======================================== */
.timestamp-datetime-label {
  margin-top: 1rem;
}

/* ========================================
   Fila de etiqueta con botón inline
   Label y botón "Ahora" en la misma línea
   ======================================== */
.label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.label-row .formatter-label {
  margin-bottom: 0;
}

/* ========================================
   Acciones del panel de entrada — Separación del botón Convertir
   ======================================== */
.formatter-input-panel .panel-actions {
  margin-top: 1rem;
}

/* ========================================
   Panel de resultado — Altura ajustada al contenido
   Sobreescribe el min-height de json-formatter.css que es
   demasiado alto para las 5 filas de resultado del convertidor
   ======================================== */
.result-rows.formatter-output {
  min-height: auto;
}

/* ========================================
   Subtítulo SEO — Encabezado secundario dentro de la sección informativa
   ======================================== */
.seo-subtitle {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text-primary);
  text-align: center;
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
}

/* ========================================
   Panel de Resultado — Filas individuales con botón de copiar
   Cada fila muestra una etiqueta, un valor y un botón para copiar
   ======================================== */
.result-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  white-space: normal;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
}

/* Fila individual de resultado */
.result-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
}

.result-row:last-child {
  border-bottom: none;
}

/* Etiqueta de la fila (Local, UTC, ISO, etc.) */
.result-label {
  flex-shrink: 0;
  min-width: 5.5rem;
  color: var(--color-text-muted);
  font-weight: 600;
  user-select: none;
}

/* Valor de la fila (el dato copiable) */
.result-value {
  flex: 1;
  min-width: 0;
  color: var(--color-text-primary);
  word-break: break-all;
}

/* Botón de copiar individual por fila */
.btn-copy-row {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: all var(--transition-base);
  line-height: 1;
}

.btn-copy-row:hover {
  color: var(--color-accent-yellow);
  border-color: var(--color-border);
  background-color: rgba(250, 204, 21, 0.08);
}

.btn-copy-row:focus-visible {
  outline: 2px solid var(--color-accent-yellow);
  outline-offset: 2px;
}

/* Estado temporal de "copiado" en el botón individual */
.btn-copy-row.copied {
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.3);
}

/* ========================================
   Movimiento Reducido — Accesibilidad
   Desactiva transiciones en los campos del convertidor
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  .timestamp-input,
  .timestamp-datetime,
  .btn-copy-row {
    transition: none;
  }
}