#dialogo-contacto {
	background: #fff !important;
	color: #222 !important;
	border-radius: 10px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.18);
	padding: 0;
}

#form-contacto {
	background: #fff;
	padding: 2rem 2rem 1rem 2rem;
	border-radius: 10px;
}

#form-contacto h2 {
	margin-top: 0;
	font-size: 2rem;
	font-weight: bold;
	color: #222;
}

#form-contacto label {
	font-weight: 500;
	color: #222;
}

#form-contacto input {
	background: #fff;
	color: #222;
	border: 2px solid #d1d5db;
	border-radius: 6px;
	font-size: 1.1rem;
	padding: 0.7rem 1rem;
	margin-bottom: 1rem;
}

#form-contacto input:focus {
	border-color: #1976d2;
	outline: none;
}

#form-contacto footer {
	display: flex;
	justify-content: flex-end;
	gap: 1rem;
	margin-top: 1rem;
}

#btn-guardar {
	background: #1976d2;
	color: #fff;
	border: none;
	border-radius: 6px;
	font-weight: bold;
	padding: 0.7rem 1.5rem;
	font-size: 1rem;
	transition: background 0.2s;
}
#btn-guardar:hover {
	background: #1565c0;
}

#btn-cancelar {
	background: #546e7a;
	color: #fff;
	border: none;
	border-radius: 6px;
	font-weight: bold;
	padding: 0.7rem 1.5rem;
	font-size: 1rem;
	transition: background 0.2s;
}
#btn-cancelar:hover {
	background: #37474f;
}
body, main {
	background: #fff !important;
	color: #222 !important;
}
@media (prefers-color-scheme: light) {
	body {
		background: #fff;
		color: #222;
	}
	.card-contacto {
		background: #fff;
		border: 1px solid #222;
	}
	#btn-agregar {
		background: #222;
		color: #fff;
	}
}
header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 2rem;
}

header h1 {
	margin: 0;
	font-weight: bold;
	color: #000;
}

#buscador-form {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

#buscador {
	min-width: 260px;
	border-radius: 2rem;
	padding-left: 2.2rem;
	background: #fff;
	border: 1px solid #d1d5db;
	font-size: 1rem;
	background-image: url('data:image/svg+xml;utf8,<svg fill="%23999" height="18" viewBox="0 0 18 18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M12.5 11h-.79l-.28-.27A6.471 6.471 0 0013 7.5 6.5 6.5 0 106.5 14c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99c.41.41 1.09.41 1.5 0s.41-1.09 0-1.5l-4.99-5zm-6 0C5.01 11 3 8.99 3 6.5S5.01 2 7.5 2 12 4.01 12 6.5 9.99 11 7.5 11z"/></svg>');
	background-repeat: no-repeat;
	background-position: 0.7rem center;
}

#btn-agregar {
	font-weight: bold;
	border-radius: 0.5rem;
	background: #222;
	color: #fff;
	padding: 0.5rem 1.2rem;
	border: none;
	font-size: 1rem;
	transition: background 0.2s;
}
#btn-agregar:hover {
	background: #444;
}
/* Estilos generales */

#listado-contactos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 1.5rem;
	margin-top: 2rem;
}

.card-contacto {
	border: 1px solid var(--pico-border-color, #e0e0e0);
	border-radius: 0.75rem;
	padding: 1.25rem;
	background: var(--pico-background-color, #fff);
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	position: relative;
}

.card-contacto .nombre-apellido {
	font-size: 1.2rem;
	font-weight: bold;
	color: var(--pico-primary, #0d6efd);
}

.card-contacto .datos {
	font-size: 1rem;
	color: var(--pico-muted-color, #555);
}

.card-contacto .acciones {
	display: flex;
	gap: 0.5rem;
	position: absolute;
	top: 1rem;
	right: 1rem;
}

.card-contacto button {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1.2rem;
	color: var(--pico-primary, #0d6efd);
	transition: color 0.2s;
}
.card-contacto button:hover {
	color: var(--pico-danger, #dc3545);
}

#dialogo-contacto[open] {
	max-width: 400px;
}

#form-contacto input {
	margin-bottom: 1rem;
}

#form-contacto footer {
	display: flex;
	justify-content: flex-end;
	gap: 1rem;
}
