:root {
    --bg: #f4f5f7;
    --card: #ffffff;
    --texto: #1f2430;
    --texto-suave: #6b7280;
    --borde: #e3e5e9;
    --primario: #2563eb;
    --primario-hover: #1d4ed8;
    --peligro: #dc2626;
    --peligro-hover: #b91c1c;
    --exito: #16a34a;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--texto);
}

.barra {
    background: var(--card);
    border-bottom: 1px solid var(--borde);
    padding: 14px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.barra h1 {
    font-size: 18px;
    margin: 0;
}

.barra a {
    color: var(--texto-suave);
    text-decoration: none;
    font-size: 14px;
}

.barra a:hover { color: var(--texto); }

.contenedor {
    max-width: 960px;
    margin: 32px auto;
    padding: 0 20px;
}

.tarjeta {
    background: var(--card);
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 24px;
}

.encabezado-lista {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.boton {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 8px;
    border: none;
    background: var(--primario);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
}

.boton:hover { background: var(--primario-hover); }
.boton.peligro { background: var(--peligro); }
.boton.peligro:hover { background: var(--peligro-hover); }
.boton.secundario { background: #6b7280; }
.boton.secundario:hover { background: #4b5563; }

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--borde);
    font-size: 14px;
}

th { color: var(--texto-suave); font-weight: 600; }

.acciones { display: flex; gap: 8px; }

.acciones .boton { padding: 6px 12px; font-size: 13px; }

label {
    display: block;
    margin: 16px 0 6px;
    font-size: 14px;
    font-weight: 600;
}

input[type=text], input[type=number], input[type=url], input[type=password], textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    font-size: 14px;
}

.error {
    background: #fef2f2;
    color: var(--peligro);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 16px;
}

.exito-msg {
    background: #f0fdf4;
    color: var(--exito);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 16px;
}

.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-caja { width: 100%; max-width: 360px; }

.vacio { color: var(--texto-suave); text-align: center; padding: 40px 0; }

.thumb {
    width: 40px; height: 40px; object-fit: cover; border-radius: 6px;
    background: var(--bg); vertical-align: middle;
}