/**
 * Pixel Art Converter – Estilos  v1.1.0
 */

/* ── Variables de tema ────────────────────────────────────────────────────── */
.pcp-container {
    --pcp-primary:     #2563eb;
    --pcp-primary-h:   #1d4ed8;
    --pcp-convert:     #7c3aed;
    --pcp-convert-h:   #6d28d9;
    --pcp-secondary:   #059669;
    --pcp-secondary-h: #047857;
    --pcp-border:      #d1d5db;
    --pcp-bg-th:       #f3f4f6;
    --pcp-text:        #111827;
    --pcp-muted:       #6b7280;
    --pcp-radius:      6px;
    --pcp-font:        'Segoe UI', Arial, sans-serif;
}

/* ── Contenedor principal ─────────────────────────────────────────────────── */
.pcp-container {
    max-width: 860px;
    width: 100%;
    box-sizing: border-box;
    margin: 24px auto;
    font-family: var(--pcp-font);
    color: var(--pcp-text);
    overflow: hidden;   /* evita que hijos con position o transform escapen */
}

.pcp-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 16px;
}

/* ── Fila de tamaño ───────────────────────────────────────────────────────── */
.pcp-file-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

/* ── Labels ───────────────────────────────────────────────────────────────── */
.pcp-label {
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}

.pcp-label--inline {
    margin-left: 4px;
}

/* ── Input numérico ───────────────────────────────────────────────────────── */
.pcp-size-input {
    width: 80px;
    padding: 6px 8px;
    border: 1px solid var(--pcp-border);
    border-radius: var(--pcp-radius);
    font-size: 0.875rem;
    font-family: var(--pcp-font);
    text-align: center;
}

.pcp-size-input:focus {
    outline: 2px solid var(--pcp-primary);
    outline-offset: 1px;
}

.pcp-size-hint {
    font-size: 0.75rem;
    color: var(--pcp-muted);
}

/* ── Select zoom ──────────────────────────────────────────────────────────── */
.pcp-select {
    padding: 6px 10px;
    border: 1px solid var(--pcp-border);
    border-radius: var(--pcp-radius);
    font-size: 0.875rem;
    font-family: var(--pcp-font);
    background: #fff;
    cursor: pointer;
}

.pcp-select:focus {
    outline: 2px solid var(--pcp-primary);
    outline-offset: 1px;
}

/* ── Fila de botones ──────────────────────────────────────────────────────── */
.pcp-btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

/* ── Botones ──────────────────────────────────────────────────────────────── */
.pcp-btn {
    display: inline-block;
    padding: 8px 18px;
    border: none;
    border-radius: var(--pcp-radius);
    font-size: 0.875rem;
    font-family: var(--pcp-font);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
    white-space: nowrap;
}

.pcp-btn--primary {
    background-color: var(--pcp-primary);
    color: #fff;
}
.pcp-btn--primary:hover:not(:disabled) {
    background-color: var(--pcp-primary-h);
}

.pcp-btn--convert {
    background-color: var(--pcp-convert);
    color: #fff;
}
.pcp-btn--convert:hover:not(:disabled) {
    background-color: var(--pcp-convert-h);
}

.pcp-btn--secondary {
    background-color: var(--pcp-secondary);
    color: #fff;
}
.pcp-btn--secondary:hover:not(:disabled) {
    background-color: var(--pcp-secondary-h);
}

.pcp-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Estado ───────────────────────────────────────────────────────────────── */
.pcp-status {
    font-size: 0.875rem;
    color: var(--pcp-muted);
    min-height: 1.3em;
    margin: 6px 0 10px;
}

/* ── Vista previa ─────────────────────────────────────────────────────────── */
.pcp-preview {
    margin: 12px 0;
}

.pcp-preview__label {
    font-size: 0.8rem;
    color: var(--pcp-muted);
    margin: 0 0 6px;
}

/* Imagen y metadatos en fila */
.pcp-preview__body {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}

.pcp-preview img {
    display: block;
    width: 120px;
    height: auto;
    flex-shrink: 0;
    border: 1px solid var(--pcp-border);
    border-radius: var(--pcp-radius);
    image-rendering: pixelated;
}

.pcp-preview__meta {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--pcp-text);
    word-break: break-word;   /* nombres de archivo muy largos no rompen el layout */
}

.pcp-preview__meta strong {
    display: block;
    font-weight: 600;
    margin-bottom: 2px;
}

/* ── Wrapper de tabla ─────────────────────────────────────────────────────── */
/*
 * max-width: 100% garantiza que el wrapper nunca supere al contenedor padre.
 * overflow: auto activa las barras de scroll DENTRO del wrapper.
 * El JS crea un div.pcp-table-scaler interno que reserva el espacio exacto
 * de la tabla escalada, por lo que el scroll siempre refleja el tamaño real.
 */
.pcp-table-wrap {
    max-width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    /* Sin width/height fijos aquí; el JS los pone en .pcp-table-scaler */
}

/* Div interno que reserva el espacio de la tabla escalada */
.pcp-table-scaler {
    position: relative;
    /* width y height los pone el JS en función del zoom */
}

/* ── Tabla ────────────────────────────────────────────────────────────────── */
.pcp-table {
    border-collapse: collapse;
    /* transform y transform-origin los pone el JS */
}

.pcp-table caption {
    caption-side: bottom;
    font-size: 0.75rem;
    color: var(--pcp-muted);
    padding: 6px 0 0;
    text-align: left;
}

.pcp-table th {
    background: var(--pcp-bg-th);
    border: 1px solid var(--pcp-border);
    padding: 2px 4px;
    font-weight: 600;
    font-size: 0.65rem;
    color: var(--pcp-muted);
    min-width: 22px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.pcp-table td {
    border: 1px solid var(--pcp-border);
    padding: 0;
    /* font-size, color, width, height, background: los pone el JS inline */
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .pcp-label--inline {
        margin-left: 0;
    }

    .pcp-btn {
        /* En móvil los botones se apilan pero NO ocupan 100% para que quepan
           varios en la misma fila si hay espacio */
        flex-shrink: 0;
    }

    /*
     * NO ocultamos ni reducimos el font-size de .pcp-pixel aquí.
     * El JS ya pone font-size:9px inline en cada celda, lo que garantiza
     * que el texto hex sea visible en móvil. Sobreescribir eso con CSS
     * (font-size:0 o color:transparent) era el bug que lo ocultaba.
     */
}