@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; }

body {
    font-family: 'Inter', Arial, sans-serif;
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 20px;
    background: #f0f2f5;
    color: #14181f;
}

h1 { font-size: 22px; margin: 0 0 4px; }
.subtitulo { color: #666; margin: 0 0 25px; font-size: 14px; }

#pantallaLogin {
    background: white;
    max-width: 380px;
    margin: 60px auto;
    padding: 32px;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

#pantallaLogin h2 { margin-top: 0; font-size: 20px; text-align: center; }

#pantallaLogin input {
    width: 100%;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
    margin-bottom: 10px;
}

#btnEntrar {
    width: 100%;
    padding: 12px;
    background: #0E7C4A;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
}

#btnEntrar:hover { background: #0b5f39; }

#errorLogin { color: #dc2626; font-size: 13px; margin-top: 10px; min-height: 18px; text-align: center; }

.oculto { display: none; }

#formulario {
    background: white;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#formulario input, #formulario select {
    flex: 1;
    min-width: 150px;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
}

#formulario button {
    padding: 10px 20px;
    background: #0E7C4A;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

#formulario button:hover { background: #0b5f39; }

table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

th, td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

th { background: #f7f8f5; font-size: 12px; text-transform: uppercase; color: #666; }

.btn-borrar {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
}

.btn-borrar:hover { background: #dc2626; color: white; }

.ayuda{background:#eef7ff;border:1px solid #cfe6ff;padding:14px;border-radius:10px;margin-bottom:15px;font-size:13px;line-height:1.5}.barra{display:flex;gap:12px;align-items:center;margin:10px 0}.barra input{flex:1;padding:10px;border:1px solid #d1d5db;border-radius:8px}.barra span{font-size:13px;color:#666}.btn-editar{background:#eef6ff;color:#155e9e;border:1px solid #bfdbfe;padding:5px 10px;border-radius:6px;cursor:pointer}.btn-editar:hover{background:#155e9e;color:white}td small{display:block;color:#777;margin-top:3px}

.cabecera-admin{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 16px;padding:12px 14px;background:#eef7f2;border-radius:10px}.cabecera-admin button{border:0;border-radius:8px;padding:8px 12px;cursor:pointer}.oculto{display:none!important}