/*
  Hoja de estilos propia, servida localmente (sin CDN externo). Sustituye
  temporalmente al build local de Tailwind mientras se construye el panel de
  administracion completo (donde vale la pena montar el pipeline de build);
  la estructura HTML de las vistas ya usa clases utilitarias simples para
  facilitar esa migracion sin reescribir las plantillas.
*/

:root {
    --color-bg: #f4f6f8;
    --color-surface: #ffffff;
    --color-border: #d7dde3;
    --color-text: #1c2733;
    --color-text-muted: #5b6b7a;
    --color-primary: #1d4ed8;
    --color-primary-hover: #1e40af;
    --color-error-bg: #fdecea;
    --color-error-border: #f3b4ac;
    --color-error-text: #9a2c1f;
    --radius: 8px;
    --font-sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 32px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 1px 3px rgba(16, 24, 32, 0.08);
}

.card--wide {
    max-width: 640px;
}

h1 {
    font-size: 1.25rem;
    margin: 0 0 4px;
}

.subtitle {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin: 0 0 24px;
}

label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.input-uppercase {
    text-transform: uppercase;
}

input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.9375rem;
    margin-bottom: 16px;
}

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

button {
    width: 100%;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 11px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}

button:hover {
    background: var(--color-primary-hover);
}

.alert {
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    color: var(--color-error-text);
    border-radius: var(--radius);
    padding: 10px 12px;
    font-size: 0.875rem;
    margin-bottom: 16px;
}

.captcha-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.captcha-row img {
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
}

.helper-text {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: 4px;
}

.badge-role {
    display: inline-block;
    background: #e8edfb;
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
}

form.inline {
    display: inline;
}

.link-button {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 0.875rem;
    padding: 0;
    width: auto;
    cursor: pointer;
}

.status-pill {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 12px;
}

.status-active {
    background: #e3f6e8;
    color: #1a7f3c;
}

.status-revoked {
    background: var(--color-error-bg);
    color: var(--color-error-text);
}

.status-expired {
    background: #fdf1e0;
    color: #92600c;
}

.qr {
    display: block;
    margin: 16px 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 8px;
    background: #fff;
}

.details {
    margin: 16px 0;
}

.details dt {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-top: 10px;
}

.details dd {
    margin: 2px 0 0;
    font-size: 0.9375rem;
}

.competencies-block {
    margin: 20px 0;
}

.competencies-block .label {
    font-weight: 700;
    font-size: 0.8125rem;
    margin-bottom: 6px;
}

.competencies-block ul {
    margin: 0;
    padding-left: 20px;
}

.actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 24px 0;
}

.button-secondary,
.button-linkedin {
    display: inline-block;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
}

.button-secondary {
    border: 1px solid var(--color-border);
    color: var(--color-text);
    background: none;
    width: auto;
    cursor: pointer;
}

.button-linkedin {
    background: #0a66c2;
    color: #fff;
}

.revoke-form {
    border-top: 1px solid var(--color-border);
    padding-top: 16px;
    margin-top: 16px;
}

.button-danger {
    background: #b91c1c;
    width: auto;
    padding: 8px 16px;
}

.button-danger:hover {
    background: #991414;
}

.inline-form {
    display: inline;
}

.button-compact {
    padding: 5px 10px;
    font-size: 0.8125rem;
}

body:has(.admin-nav) {
    align-items: flex-start;
    padding-top: 40px;
}

.admin-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: -32px -32px 24px;
    padding: 16px 32px;
    border-bottom: 1px solid var(--color-border);
    background: #fafbfc;
    border-radius: var(--radius) var(--radius) 0 0;
}

.admin-nav a {
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
}

.admin-nav a:hover {
    color: var(--color-primary);
}

.admin-nav-logout {
    margin-left: auto;
}

.card--full {
    max-width: 960px;
}

.stat-row {
    display: flex;
    gap: 16px;
    margin: 20px 0;
}

.stat-tile {
    flex: 1;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

.stat-label {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin: 4px 0 0;
}

table.data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 0.875rem;
}

table.data-table th,
table.data-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border);
}

table.data-table th {
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.form-row {
    margin-bottom: 16px;
}

textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.9375rem;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
}

.alert-success {
    background: #e3f6e8;
    color: #1a7f3c;
    border: 1px solid #b7e3c2;
    border-radius: var(--radius);
    padding: 10px 12px;
    font-size: 0.875rem;
    margin-bottom: 16px;
}

.section-title {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 28px 0 12px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}

.error-report {
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    color: var(--color-error-text);
    border-radius: var(--radius);
    padding: 10px 12px;
    font-size: 0.8125rem;
    white-space: pre-wrap;
    margin-bottom: 16px;
}

.badge-preview {
    display: block;
    width: 192px;
    height: 192px;
    object-fit: contain;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 8px;
    background: #fff;
    margin-bottom: 10px;
}