:root{--bg:#f7f7f9;--card:#ffffff;--accent:#2b6cb0;
                --muted:#6b7280}
            body {font-family:Segoe UI,Roboto,Helvetica,Arial,sans-serif;
                background:var(--bg);
                color:#111;margin:0}
            header{background:linear-gradient(90deg,#ffffff88,#f3f4f6);
                padding:18px 24px;
                box-shadow:0 1px 0 rgba(0,0,0,.04)}
			.container{max-width:900px;
                margin:28px auto;
                padding:0 18px}
            /* Header layout: left nav and right log link */
            .header-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
            .header-row .left{display:flex;align-items:center}
            .header-row .left nav a{margin-right:12px}
            /* Log link styled as a small button on the right of the header */
            .log-link{
                display:inline-block;
                padding:8px 12px;
                border-radius:8px;
                background:var(--accent);
                color:#fff;
                text-decoration:none;
                font-weight:600;
                border:1px solid rgba(0,0,0,0.04);
            }
            .log-link:hover{background:#235a8a}
			nav a{color:var(--accent);
                text-decoration:none;
                font-weight:600;
                margin-right:12px}
			.hero{background:var(--card);
                padding:28px;border-radius:10px;
                box-shadow:0 6px 18px rgba(16,24,40,.06)}
			h1{margin:0 0 8px;
               font-size:28px}
			p.lead{margin:0 0 16px;
                color:var(--muted)}
            .btn{display:inline-block;
                background:var(--accent);
                color:#fff;padding:10px 16px;
                border-radius:8px;text-decoration:none;border:1px solid rgba(0,0,0,.05);cursor:pointer}
            .btn:hover{background:#235a8a;box-shadow:0 4px 12px rgba(43,108,176,.12)}
			section{margin-top:22px}
			.products{display:grid;
                grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
                gap:12px}
            .products-header{display:flex;
                justify-content:space-between;
                align-items:center;
                gap:12px}
            .search-form input{
                padding:8px 10px;
                border-radius:8px;
                border:1px solid rgba(15,23,42,.08);
                font-size:14px}
            .search-form button.btn{margin-left:8px}

            /* Mejor estilo para la barra de búsqueda */
            .search-form{display:flex;align-items:center;gap:8px;background:var(--card);padding:6px;border-radius:12px;border:1px solid rgba(15,23,42,.04)}
            .search-form input[type="search"]{flex:1;padding:10px 12px;border-radius:8px;border:1px solid rgba(15,23,42,.08);background:transparent}
            .search-form button{padding:8px 12px;border-radius:8px;background:var(--accent);color:#fff;border:1px solid rgba(0,0,0,.04);cursor:pointer}
            .search-form button:hover{background:#235a8a}
            /* Styled select to match inputs and show custom arrow */
            .search-form select{
                -webkit-appearance:none;
                -moz-appearance:none;
                appearance:none;
                padding:8px 36px 8px 12px;
                border-radius:8px;
                border:1px solid rgba(15,23,42,.08);
                background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 20 12'%3E%3Cpath fill='%232b6cb0' d='M0 0l10 10L20 0z'/%3E%3C/svg%3E") no-repeat right 10px center/12px 8px;
            }
            .search-form select:focus{outline:none;box-shadow:0 0 0 3px rgba(43,108,176,.08)}
            .visually-hidden{position:absolute!important;
                height:1px;width:1px;padding:0;margin:-1px;
                overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
                border:0}
			.product{background:var(--card);
                Padding:14px;
                border-radius:8px;
                border:1px solid rgba(15,23,42,.04)}
			footer{max-width:900px;
                margin:40px auto;
                padding:12px 18px;
                color:var(--muted);
                font-size:14px}

            /* Login / auth form styles */
            .auth{background:var(--card);padding:22px;border-radius:10px;box-shadow:0 6px 18px rgba(16,24,40,.06);margin-top:20px}
            .auth-form{max-width:420px;margin:0 auto}
            .auth-form .field{margin-bottom:14px}
            .auth-form label{display:block;margin-bottom:6px;font-weight:600}
            /* Inputs, selects and textarea: full-width, consistent look */
            .auth-form input[type="email"], .auth-form input[type="password"], .auth-form input[type="text"],
            .auth-form input[type="number"], .auth-form textarea, .auth-form select,
            .search-form input{
                width:100%;box-sizing:border-box;padding:10px 12px;border-radius:8px;border:1px solid rgba(15,23,42,.08);font-size:14px;background:transparent
            }
            .auth-form textarea{min-height:92px;resize:vertical}
            /* Allow dashboard forms to be wider than general auth forms */
            .dash-section .auth-form{max-width:820px;margin:0}
            .form-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
            .form-actions .remember{font-size:14px;color:var(--muted)}
            @media (max-width:520px){
                .form-actions{flex-direction:column;align-items:stretch}
                .form-actions .btn{width:100%}
            }

            /* Dashboard styles */
            .dashboard{background:transparent;margin-top:18px}
            .dashboard-nav{display:flex;gap:8px;margin-bottom:14px}
            .dash-btn{background:#fff;border:1px solid rgba(15,23,42,.06);padding:8px 12px;border-radius:8px;cursor:pointer;transition:all .18s}
            .dash-btn.active{background:var(--accent);color:#fff;border-color:transparent}
            .dash-section{background:var(--card);padding:16px;border-radius:10px;box-shadow:0 6px 18px rgba(16,24,40,.04)}
            .dash-sections{display:grid;grid-template-columns:1fr;gap:12px}
            .dash-section h2{margin-top:0;margin-bottom:12px;font-size:18px}
            .dash-section .field{display:block}
            .dash-section .field label{font-size:14px}
            .dash-section .form-actions{justify-content:flex-end}
            .btn{padding:9px 14px;border-radius:8px}
            .products-list .products{margin-top:6px}
            .products-list .product{margin-bottom:8px}

            /* Table styles (aplica a listados de productos y categorías) */
            table{width:100%;border-collapse:collapse;margin-top:12px;background:var(--card);border:1px solid rgba(15,23,42,.06);border-radius:8px;overflow:hidden;font-size:14px}
            table th, table td{padding:10px 12px;text-align:left;border-bottom:1px solid rgba(15,23,42,.04);vertical-align:middle}
            table th{background:linear-gradient(180deg,#f7fafc,#f3f6fb);font-weight:700;color:#0f172a}
            table tr:nth-child(even){background:rgba(15,23,42,.02)}
            table tr:last-child td{border-bottom:0}
            table td a{color:var(--accent);text-decoration:none}
            @media (max-width:720px){
                table th, table td{padding:8px}
            }
            /* Compact table cells for actions column */
            table td .row-actions .actions-btn{padding:6px 8px;font-size:13px}
            /* Small responsive tweaks */
            @media (max-width:640px){
                .dash-nav{flex-wrap:wrap}
                .dash-btn{flex:1}
                .dash-section{padding:12px}
            }
            /* User menu in header */
            .user-menu{position:relative;display:inline-block}
            .user-btn{background:var(--accent);color:#fff;border:0;padding:8px 12px;border-radius:8px;cursor:pointer;font-weight:600}
            .user-dropdown{display:none;position:absolute;right:0;background:var(--card);border:1px solid rgba(15,23,42,.06);padding:8px;border-radius:6px;min-width:160px;box-shadow:0 6px 18px rgba(16,24,40,.06)}
            .user-menu:hover .user-dropdown{display:block}
            .user-dropdown a{display:block;padding:8px 10px;color:#111;text-decoration:none}
            .user-dropdown a:hover{background:rgba(15,23,42,.04)}
            /* Row actions dropdown for dashboard */
            .row-actions{position:relative;display:inline-block}
            .actions-btn{background:#fff;border:1px solid rgba(15,23,42,.06);padding:6px 10px;border-radius:8px;cursor:pointer}
            .actions-menu{display:none;position:absolute;right:0;background:var(--card);border:1px solid rgba(15,23,42,.06);padding:6px;border-radius:6px;min-width:140px;box-shadow:0 6px 18px rgba(16,24,40,.06);z-index:30}
            .row-actions:hover .actions-menu{display:block}
            .actions-menu a{display:block;padding:8px 10px;color:#111;text-decoration:none}
            .actions-menu a:hover{background:rgba(15,23,42,.04)}
            /* Overrides to ensure search form inputs take full available space */
            .search-form input[type="search"]{flex:1;width:auto}
            .search-form select{min-width:160px}