:root { --morado: #312783; --lila: #E6E3F2; }
* { box-sizing: border-box; }
body { font-family: Segoe UI, Arial, sans-serif; margin: 0; color: #222; background: #f6f6f9; }
header { background: var(--morado); color: #fff; padding: 12px 20px; }
header h1 { margin: 0; font-size: 20px; }
main { padding: 20px; }

.selectores { margin-bottom: 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.selectores label { font-weight: 600; color: var(--morado); }
.selectores select { font-size: 15px; padding: 4px 8px; }

table.ops { border-collapse: collapse; width: 100%; background: #fff; font-size: 13px; }
table.ops th, table.ops td { border: 1px solid #ddd; padding: 6px 8px; text-align: left; vertical-align: top; }
table.ops th { background: var(--lila); color: var(--morado); position: sticky; top: 0; }
table.ops tr:nth-child(even) { background: #fafafa; }
td.obs { max-width: 220px; font-size: 12px; color: #555; }

.serv { padding: 2px 6px; border-radius: 3px; font-weight: 600; font-size: 12px; color: #fff; }
.serv-puesta { background: #2e7d32; }
.serv-cambio { background: #ef6c00; }
.serv-recogida { background: #1565c0; }
.serv- { background: #888; }

.acciones { white-space: nowrap; }
.inline { display: inline; }
.btn { display: inline-block; padding: 4px 8px; margin: 1px; border: 0; border-radius: 4px;
        font-size: 12px; cursor: pointer; text-decoration: none; color: #fff; }
.btn.ver { background: #555; }
.btn.email { background: var(--morado); }
.btn.wa { background: #25D366; }

.alert { padding: 10px 14px; border-radius: 5px; margin-bottom: 14px; }
.alert.ok { background: #e6f4ea; color: #1e4620; border: 1px solid #b7dfc2; }
.alert.error { background: #fdecea; color: #611a15; border: 1px solid #f5c6c0; }